在node中使用express框架

Express

• 原生的 http 在某些方面表現不足以應對我們的開發需求, 所以就需要使用框架來加快開發效率
• 官網: https://www.expressjs.com.cn/

安裝:

> npm install express --save

// 0. 安裝
// 1. 引包
const express = require('express');

// 2. 創建服務器應用程式
// 也就是原來的 http.createServer()
const app = express();

// 公開指定目錄
// 只要這樣做了,就可以直接通過 /public/xx 的方式訪問 public目錄中的所有資源了
app.use('/public/', express.static('./public/'));

// 當服務器收到 get 請求 / 的時候, 執行回呼函式
app.get('/', (req, res) => {
    // 在 Express 中可以直接使用 req.query 來獲取url傳遞的引數
    console.log(req.query);
    // 在 express 中 write 和 end 方法依然可以用
    // res.write('hello ');
    // res.end('express ！')
    res.send('hello express!');
});


// 相當于 server.listen
app.listen(3000, () => {
    console.log('port 3000, Server is Running...');
});

1 基本路由

組成:

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

get:

// 當你以 GET 方法請求 / 的時候, 執行對應的處理函式
app.get('/',(req,res)=>{
    res.send('Hello World');
});

post:

// 當你以 POST 方法請求 / 的時候, 執行對應的處理函式
app.post('/',(req,res)=>{
    res.send('Got a POST request');
})

2 靜態服務

// 引入
const express = require('express');
// 創建 app
const app = express();

// 當以 /public/開頭的時候, 去 ./public/ 目錄中查找對應的資源
app.use('/public/', express.static('./public'));

app.get('/', (req, res) => {
    res.send('hello world');
});

app.listen(3000, () => {
    console.log('express app is Running....');
});

訪問 login.html 不省略第一個引數時:

訪問 login.html 省略第一個引數時:

// 當省略第一個引數的時候, 則可以通過省略 '/public' 的方式來訪問對應資源
app.use(express.static('./public/'));

特殊寫法:

// 必須是 /a/public 目錄中的資源具體路徑
// 可以理解為  '/a/' 是 '/public/' 的別名
app.use('/a/', express.static('./public/'));

3 在 Express 中配置使用 art-template 模板引擎

安裝:

npm install --save art-template
npm install --sava express-art-template

配置 :

// 第一個引數, 標識, 當渲染以 .html結尾(可更改)的檔案的時候, 使用 art-template模板引擎
// express-art-template 是專門用來在 Express 中把 art-template 整合到 Express 中
// 雖然外面這里不需要加載 art-template , 但是也必須安裝
// 原因就在于 express-art-template 依賴了 art-template
app.engine('html', require('express-art-template'));

使用:

// Express為 Response 回應物件提供了一個方法: reader
// reader 方法默認是不可以使用的, 但是如果配置了模板引擎就可以使用了
// res.render('html模板名',{模板資料});
// 第一個引數不能寫其他路徑, 默認會去專案中的 views 目錄查找該模板檔案

app.get('/', (req, res) => {
    res.render('404.html');
});

如果想要修改默認的 views目錄, 可以這么做:

app.set('views',要修改的路徑);

實體演示

// E:\Exercises\Node\express-demo\feedback-express\express使用art-template.js
const express = require('express');

const app = express();
// 配置
app.engine('html', require('express-art-template'));

// 使用
app.get('/', (req, res) => {
    res.render('404.html');
});

app.get('/admin', (req, res) => {
    res.render('admin/index.html', {
        title: '管理系統'
    });
});


app.listen(3000, () => {
    console.log('running....');
});

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

在 express 中沒有內置獲取表單 POST請求體的 API , 這里需要使用一個第三方包 : body-parser

安裝:

npm install --sava body-parser

配置:

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

var app = express()

// 配置 body-parser
// 只要加入這個配置, 則在 req請求物件上會多出來一個屬性: body
// 也就是說可以直接通過req.body 來獲取表單 POST請求體資料
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  // 可以通過 req.body 來獲取表單 POST 請求體資料
  res.end(JSON.stringify(req.body, null, 2))
})

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

Express 內置了一個 API , 可以直接通過 req.query來獲取

req.query

標籤：其他

上一篇：原生 JS 與 jQuery 中的 AJAX

下一篇：第 34 題：如何實作二叉查找樹？