知識點

• Express

  • 檔案操作路徑和模組路徑

• 檔案操作路徑：

// 在檔案操作的相對路徑中
// ./data/a.txt 相對於當前目錄
// data/a.txt 相對於當前目錄
// /data/a.txt 絕對路徑，當前檔案模組所處磁碟根目錄
// c:/xx/xx… 絕對路徑
//例如 ：
fs.readFile(’./data/a.txt’, function(err, data){
if(err){
console.log(err)
return console.log(‘讀取失敗’)
}
console.log(data.toString())
})

• 模組操作路徑：

// 這裡如果忽略了. , 則是磁碟根目錄
require(’/data/foo.js’)
//相對路徑
require(’./data/foo.js’)
模組載入的路徑中相對路徑不能省略 ./

1.起步：

// 0. 安裝
// 初始化專案，生成package.json檔案
npm init -y 
// 安裝express
npm install –save express    

// 例子：hello world:
var express = require('express');

// 1. 建立 app，也就是原來的http.createServer
var app = express();

app.get('/',function(req,res){
    // res.write('hello ');
    // res.write('world ');
    // res.end();
    // res.end('hello world');
    res.send('hello world !');
})

app.get('/login',function(req,res){
    res.send('login !');
})

app.listen(3000,function(){
    console.log('app is running port 3000');
});

 

2. 基本路由：

什麼是路由： 路由其實就是一張表，表裡面有具體的對映關係。

• 路由

  • 請求方法
  • 請求路徑
  • 請求處理函式

• get方法:

# 當你以GET方法請求/的時候，執行對應的處理函式
app.get('/login',function(req,res){
    res.send('login !');
})

• post方法:

# 當你以POST方法請求/的時候，執行對應的處理函式
app.post('/',function(req,res){
    res.send('login !');
})
 

3. 修改完程式碼自動重啟

• 我們這裡使用一個第三方命令列工具：nodemon來解決頻繁修改程式碼重啟伺服器問題。
• nodemon是一個基於Node.js開發的一個第三方命令列工具，我們使用的時候需要獨立安裝

# 安裝nodemon，在任意目錄執行該命令都可以：
npm install –global nodemon

// 檢視nodemon的版本號
nodemon –version

• 安裝完畢之後，使用：

node app.js
# 使用nodemon，啟動app.js檔案的服務
nodemon app.js

• 只要通過nodemon app.js啟動的服務，則它會監視你的檔案變化
• 當檔案發生變化的時候，會自動幫你重啟伺服器。

4. 靜態服務

// 方式1：（一般推薦使用該種方式）
// 當以/public/ 開頭的時候，在./public/目錄中找對應的資源
// 這種方式更容易辨識，推薦這種方式
// app.use('/public/',express.static('./public/'));

// 方式2：
// 必須是/a/public目錄中的資源具體路徑，別名
// app.use('/a/',express.static('./public/'));

// 方式3：
// 當省略第一個引數的時候，則可以通過省略 /public的方式直接訪問
// 這種方式的好處就是可以省略 /public/
app.use(express.static('./public/')); 

5. 在Express中配置art-template

5.1 art-template 介紹

• art-template 是一個簡約、超快的模板引擎。
• 它採用作用域預宣告的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的執行效能
• 並且同時支援 NodeJS 和瀏覽器。

5.2 art-template 特性

1. 擁有接近 JavaScript 渲染極限的的效能
2. 除錯友好：語法、執行時錯誤日誌精確到模板所在行；支援在模板檔案上打斷點（Webpack Loader）
3. 支援 Express、Koa、Webpack
4. 支援模板繼承與子模板
5. 瀏覽器版本僅 6KB 大小

5.3 art-template 相關連結

• art-template GitHub倉庫連結： https://github.com/aui/art-template
• art-template官方中文文件連結：https://aui.github.io/art-template/

5.4 安裝art-template：

npm install --save art-template
npm install --save express-art-template
// 或者可以並在一起來寫，中間使用空格隔開
npm install --save art-template express-art-template

5.5 配置

// 配置使用 art-template 模板引擎
// 方式1：
// 第一個引數表示：當渲染以.art結尾的檔案時候，使用art-template模板引擎
app.engine('art', require('express-art-template'));

// 方式2：（一般推薦使用這種方式配置，第一個引數為.html）
// 當渲染以.html結尾的檔案時候，使用art-template模板引擎
app.engine('html', require('express-art-template'));

5.6 使用

1. Express 為 Response 相應物件提供了一個方法：render
2. render 方法預設是不可以使用，但是如果配置了模板引擎就可以使用了
3. 第一個引數不能寫路徑，預設會去專案中的 views 目錄（預設一般在這個目錄當中）查詢該模板檔案
4. 也就是說 Express 有一個約定：開發人員把所有的檢視檔案都放到 views 目錄中

app.get('/', function (req, res) {
   // express預設會去專案中的views目錄中找index.html
    res.render('index.html', { // 如果使用index.html格式的，應該將上面的 art-template 模板引擎當中的art換成html，讓其保持一致
        user: {
            name: 'Jack',
            tags: ['art', 'template', 'nodejs']
        }
    });
});

如果想要修改預設的views檢視渲染儲存目錄，可以：

// 注意： 第一個引數千萬不能寫錯，必須是特殊的名稱views
app.set('views',目錄路徑);

6. 在Express中獲取表單GET請求引數

Express內建了一個API，可以直接通過req.query來獲取引數

req.query

7. 在Express中獲取表單POST請求體資料

• 在Express中沒有內建獲取表單POST請求體的API，這裡我們需要使用一個第三方包：body-parser。

7.1 安裝

npm install --save body-parser

7.2 配置

var express = require('express');
// 0. 引包
var bodyParser = require('body-parser');

var app = express();

// 配置body-parser中介軟體（外掛，專門用來解析表單 POST 請求體）
// 只要加入這個配置，則在req請求物件上會多出來一個屬性：body
// 也就是說你就可以直接通過req.body來獲取表單POST請求體資料了
app.use(bodyParser.urlencoded({ extended: false}));
app.use(bodyParser.json())