最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

[筆記] express + Node.js

XAMPP下载 admin 934浏览 0评论
 Intro
express與express-generator的差別?

express : 建立normal web架構
express-generator : 建立web app架構 (equal to 應用程式)
Installation
npm install -g express-generator
Initiate a new app
建立專案資料夾名為 ‘myapp’ 的應用程式
–git 自動加入.gitignore,把所有可以不用push上repo的檔案/資料夾都幫你寫好
-v or –view 選擇server side要使用的template engine,這邊使用pug (前身為jade)

express -v pug –git myapp
# for more information
express -h
建立完成後的架構如下
注意:其中 run the app 指令是有問題的,且 win & osx 會不同(後述)

command line 提示 (PowerShell)
QQ截图20180909154124
實際的資料夾結構 (程式進入點在 bin/www)

Install dependencies

cd myapp
npm install
package.json中可以看到此專案相依套件清單
QQ截图20180909154427

 How to trace DEBUG (server side)?
由於express-generator有幫我們安裝debug
所以執行npm start 前可以把需要顯示的debug設定好

SET DEBUG=myapp:* ; npm start
// 或是
$env:DEBUG=”myapp:*” ; npm start
# myapp:* 顯示全部
# 注意:windows無法使用 “&” 連接兩個要執行的command,需使用”;”
# 官方是說windows & PowerShell (win10)的指令不同,不過目前試過都可以
# 但如果你的vsc是PowerShell就只能使用2.
# 可將整串指令加入package.json中scripts.start內 (但只支援1.寫法)
debug官方的說明

QQ截图20180909154458
 # DEBUG環境的設定
$env:DEBUG=”*” # 顯示全部
$env:DEBUG=”myapp:*” # 顯示namespace為myapp開頭全部
$env:DEBUG=”*,-express:*” # 顯示全部,但除了namespace開頭為express
將DEBUG指令加到npm start中,以及在vsc terminal執行的結果
QQ截图20180909154513

How to trace DEBUG (client side)?

Intro & Install browserify

由於前端的js無法像後端一樣,使用require引用模組套件
因此需要browserify將有使用require模組的 js 轉為前端可讀的 js

 npm install -g browserify
# 其他專案可能也會使用到,所以全域安裝
Edit relative file
public/javascripts/index.js
var debug = require(‘debug’)(‘myapp:index-client’)
debug(‘hello!’)
轉為前端可讀懂的js:
browserify index.js -o index_bundle.js
於前端頁面 views/index.pug 引入
extends layout
block content
script(src=’/javascripts/index_bundle.js’)
h1= title
p Welcome to #{title}
npm start 後連入 http://localhost:3000/
開啟chrome (F12),可以看到console有印出我們debug的字樣囉!
QQ截图20180909154722

转载请注明:XAMPP中文组官网 » [筆記] express + Node.js

您必须 登录 才能发表评论!