目錄

• 其中Express 框架核心特性：
• Express安裝
• 方式一：安裝express-generator
• 建立專案
• 專案目錄如下
• 方式二： 自己搭建環境
• express 初體驗
• 請求和響應
• 返回資料
• Express 中介軟體
• 認識中介軟體
• 中間是什麼？
• 中介軟體中可以執行哪些任務？
• 使用中介軟體
• 日誌記錄中介軟體
• 上傳檔案中介軟體
• 請求和響應
• 請求解析
• 方式一：params
  
• 方式二：query
  
• 方式三：通過post請求中的body的on格式；
  
• 方式四：通過post請求中
• 方式五：通過post請求中的form-data格式；
  
• 響應方式
• 路由的使用
• 靜態資源伺服器
• 錯誤處理方式

其中Express 框架核心特性：

• 可以設定中介軟體來響應 HTTP 請求。
• 定義了路由表用於執行不同的 HTTP 請求動作。
• 可以通過向模板傳遞引數來動態渲染 HTML 頁面。

Express安裝

express的使用過程有兩種方式：

• 方式一：通過express提供的腳手架，直接建立一個應用的骨架；
• 方式二：從零搭建自己的express應用結構；

方式一：安裝express-generator

npm install -g express-generator

建立專案

express express-app

專案目錄如下

├── app.js
├── bin
│ └── www
├── package-lock.json

├── package.json
├── public
│ ├── images
│ ├── s
│ └── stylesheets
│ └── style.
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade

之後 cd 進入到對應的目錄下，然後將專案跑起來：

npm install 
node bin/www
node app.js   

方式二： 自己搭建環境

上面通過express提供的腳手架，直接建立一個應用的骨架；現在我們自己從零搭建專案：

初始化一個新的專案：

npm init -y

安裝express：

npm install express

新建app.js

express 初體驗

現在搭建自己的第一個express程式：在app.js中加入如下程式碼

const express = require('express');
// 建立伺服器
const app = express();
app.get('/',(req,res) => {
  res.end("Hello World");
});
app.listen(8000,() => {
  console.log("伺服器啟動成功~");
})

進入專案根目錄下，在終端中將伺服器跑起來:

node app.js

到瀏覽器：訪問localhost:8000即可

請求和響應

請求的路徑中如果有一些引數，可以這樣表達：

/users/:userId；

在request物件中要獲取可以通過req.params.userId;

返回資料

返回資料，我們可以方便的使用json：

res.json(資料)方式；

const express = require('express');
const app = express();
app.get('/users/:userId',res,next) => {
  console.log(req.params.userId);
  res.json({username: "liyingxia",password: "8i8i8i8i" });
}http://www.cppcns.com);
app.listen(8000,() => {
  console.log("靜態伺服器啟動成功~");
})

Express 中介軟體

認識中介軟體

Express是一個路由和中介軟體的Web框架，它本身的功能非常少：

Express應用程式本質上是一系列中介軟體函式的呼叫；

中間是什麼？

中介軟體的本質就是一個回撥函式；

這個回撥函式接受三個引數：

請求物件（request物件）；

響應物件（response物件）；

next函式（在express中定義的用於執行下一個中介軟體的函式）；

中介軟體中可以執行哪些任務？

執行任何程式碼；

更改請求（request）和響應（response）物件；

結束請求-響應週期（返回資料）；

呼叫棧中的下一個中介軟體；

如果當前中介軟體功能沒有結束請求-響應週期，則必須呼叫 next()將控制權傳遞給下一個中介軟體功能，否則，請求將被掛起。

使用中介軟體

express主要提供了兩種方式：app/router.use和app/router.methods這兩種方式把中介軟體應用到我們的應用程式中；

methods指的是常用的請求方式，比如：app.get或app.post等

// express 中介軟體的使用
const express = require('express');
const res = require('express/lib/response');
const app = express();
app.use((req,next) => {
  console.log("middleware");
  next();
});
app.use((req,next) => {
  console.log("middleware");
  res.end("Hello Common Middleware");
})
app.listen(9000,()=>{
  console.log("中介軟體伺服器啟動成功~")
})

path匹配中介軟體：

//www.cppcns.compath 路徑匹配中介軟體
app.use('/home',next) => {
  console.log("home middleware 中介軟體");
  next();
});
app.use('/home',next) => {
  console.log("home middleware02");
  next();
  res.end("middleware");
});
app.use((req,next) =>{
   console.log("middleware");
})

path 和 method 匹配中介軟體

// path 和 method 匹配中介軟體
app.get('/home',next) => {
  console.log("home get middleware");
  next();
})
app.post('/login',next) => {
  console.log("login post middleware");
  next();
});
app.use((req,next) => {
  console.log("common middleware");
})
app.use(express.json());
app.use(express.urlencoded({extended:true}));
app.post('/login',next) => {
  console.log(req.body);
  res.end("登陸成功~");
});

日誌記錄中介軟體

如果我們希望將請求日誌記錄下來，那麼可以使用express官網開發的第三方庫：morgan
morgan安裝：

npm install morgan

如何用？直接作為中介軟體使用即可：

const loggerWriter = fs.createWriteStream('./log/access.log',{
  flags: 'a+'
})
app.use(morgan('combined',{stream: loggerWriter}));

上傳檔案中介軟體

圖片上傳我們可以使用express官方開發的第三方庫：multer

multer安裝：

npm install multer

上傳檔案：

const upload = multer({
  dest: "uploads/"
})

app.post('/upload',upload.single('file'),next) => {
  console.log(req.file.buffer);
  res.end("檔案上傳成功~");
})

新增上傳檔案字尾名：

const storage = multer.diskStorage({
  destination: (req,file,cb) => {
    cb(null,"uploads/")
  },filename: (req,Date.now() + path.extname(file.originalname));
  }
})
const upload = multer({
  storage
})
app.post('/upload',next) => {
  console.log(req.file.buffer);http://www.cppcns.com
  res.end("檔案上傳成功~");
})

上傳多張圖片:

app.use('/upload',upload.array('files'),next) => {
  console.log(req.files);
});

請求和響應

客戶端傳遞到伺服器引數的方法常見的是5種：

方式一：通過get請求中的URL的params；

方式二：通過get請求中的URL的query；

方式三：通過post請求中的body的json格式；

方式四：通過post請求中的body的x-www-form-urlencoded格式；

方式五：通過post請求中的form-data格式；

請求解析

方式一：params

請求地址： http://locahost:8000/login/asd/ass

獲取引數：

app.use('/login/:id/:name',next) => {
  console.log(req.params);
  res.json("請求成功~");
})

方式二：query

請求地址：http://localhost:8000/login?username=liyingxia&password=123456
獲取引數：

app.use('/login',next) => {
  coneWaGZsole.log(req.query);
  res.json("請求成功~");
})

方式三：通過post請求中的body的json格式；

在客戶端傳送post請求時，會將資料放到body中：客戶端可以通過json的方式傳遞，也可以通過form表單的方式傳遞；

自己編寫中介軟體來解析JSON：

app.use((req,next) => {
  if (req.headers['content-type'] === 'application/json') {
    req.on('data',(data) => {
      const userInfo = JSON.parse(data.toString());
      req.body = userInfo;
    })
    req.on('end',() => {
      next();
    })
  } else {
    next();
  }
})
app.post('/login',next) => {
  console.log(req.body);
  res.end("登入成功~");
});

適用express內建的中介軟體或者使用body-parser來完成：

app.use(express.json());
app.post('/login',next) => {
  console.log(req.body);
  res.end("登入成功~");
});

方式四：通過post請求中

body的x-www-form-urlencoded格式；

解析application/x-www-form-urlencoded：

可以使用express自帶的 urlencoded函式來作為中介軟體：

傳入的extended用於表示使用哪一種解析方式：

• true：使用qs第三方模組；
• false：使用querystring內建模組；

app.use(express.json());
app.use(express.urlencoded({extended: true}));

app.post('/login',next) => {
  console.log(req.body);
  res.end("登入成功~");
});

方式五：通過post請求中的form-data格式；

通過any藉助multer去解析一些form-data中的普通資料:

app.use(upload.any());
app.use('/login',next) => {
  console.log(req.body);
});

響應方式

end()類似於http中的response.end方法；

res.end("獲取成功~")

json()json方法中可以傳入很多的型別：

object、array、string、boolean、number、null等，都會被轉換成json格式返回

res.json({name:"liyignxia",password:"123456"});

status()設定狀態碼

res.status(200);

路由的使用

使用express.Router來建立一個路由處理程式：一個Router例項擁有完整的中介軟體和路由系統；

// 使用者相關的處理
const userRouter = express.Router();

userRouter.get('/',next) => {
  res.end("使用者列表");
});

userRouter.post('/',next) => {
  res.end("建立使用者");
});

userRouter.delete('/',next) => {
  res.end("刪除使用者");
});

app.use('/users',userRouter);

靜態資源伺服器

Node也可以作為靜態資源伺服器，並且express給我們提供了方便部署靜態資源的方法；

const express = require('express');
const app = express();
app.use(express.static('./build'));
app.listen(8000,() => {
  console.log("靜態伺服器啟動成功~");
})

錯誤處理方式

app.use((req,next) => {
  next(new Error("USER DOES NOT EXISTS"));
});
app.use((err,req,next) => {
  const message = err.message;
  switch (message) {
    case "USER DOES NOT EXISTS":
      res.status(400).json({message})
  }
  res.status(500)
})