什么是Express？

基于Node.js的Web開(kāi)發(fā)框架

• Express 是一個(gè)保持最小規(guī)模的靈活的 Node.js Web 應(yīng)用程序開(kāi)發(fā)框架，為 Web 和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能。
• 簡(jiǎn)單的說(shuō)就是可以利用Express快速，簡(jiǎn)單的搭建服務(wù)器。并且可以選擇各種 HTTP 實(shí)用工具和中間件，快速方便地創(chuàng)建強(qiáng)大的 API。
• 鏈接：express使用文檔

快速入門(mén)使用：

方法1：

1.在項(xiàng)目文件夾目錄下安裝 Express 并將其保存到依賴列表

npm install express --save
yarn add express

2.創(chuàng)建server.js文件并寫(xiě)入代碼：

const express = require('express')；//引入express
const app = express()；//創(chuàng)建app服務(wù)對(duì)象
 
app.get('/', function (req, res) { // 配置路由
  res.send('Hello World')；給瀏覽器做出一個(gè)響應(yīng)，頁(yè)面返回Hello World
})；

app.listen(3000)；//綁定監(jiān)聽(tīng)端口

命令行中執(zhí)行： node server.js
參看網(wǎng)站： http://localhost:3000

方法2：

1.全局安裝：express-generator腳手架

npm i -g express-generator
yarn global add xxxxxx

2.使用 express 命令來(lái)快速?gòu)膭?chuàng)建一個(gè)項(xiàng)目目錄

express demo -e        // -e: 使用ejs模板

3.進(jìn)入項(xiàng)目下載所需依賴：

npm install
yarn 

4.運(yùn)行

node bin/www

參看網(wǎng)站： http://localhost:3000

路由

Router 是一個(gè)完整的中間件和路由系統(tǒng)，也可以看做是一個(gè)小型的app對(duì)象他可以更好的幫助我們分類管理route。

var express = require("express");
var router = express.Router();  // 創(chuàng)建router對(duì)象
// 配置路由-----對(duì)請(qǐng)求的url進(jìn)行分類，服務(wù)器根據(jù)分類決定交給誰(shuí)去處理
//get:  請(qǐng)求：
router.get('/text', function (request, response) {
  console.log('路由text收到get請(qǐng)求')
  response.send('這里是路由返回的信息，收到了get請(qǐng)求')
});
//在開(kāi)啟服務(wù)器后在瀏覽器地址輸入http://localhost:3000/test 進(jìn)行g(shù)et請(qǐng)求 

//post：請(qǐng)求
router.post('/text', function (request, response) {
  console.log('路由text收到post請(qǐng)求')
  response.send('這里是路由返回的信息，收到了post請(qǐng)求')
})；
//可以使用form表單進(jìn)行post請(qǐng)求

//跟路由
router.get("/", function(request, response) {
    response.send("跟路由");
});
//一級(jí)路由
router.get("/meishi", function(request, response) {
    response.send("一級(jí)路由");
});
//二級(jí)路由
router.get("/meishi/huoguo", function(request, response) {
    response.send("二級(jí)路由");
});
//參數(shù)路由
router.get("/test/:id", function(request, response) {
    // request.params:  獲取get請(qǐng)求的參數(shù)路由的參數(shù)，拿到的是一個(gè)對(duì)象
    let { id } = request.params;
    response.send(`我是第${id}個(gè)子頁(yè)面`);
});

Request

Request對(duì)象是路由回調(diào)函數(shù)中的第一個(gè)參數(shù)，代表了客戶端發(fā)送給服務(wù)器的請(qǐng)求信息。

// request.query:  獲取查詢字符串參數(shù)，拿到的是一個(gè)對(duì)象；
// request.get():  獲取請(qǐng)求頭中指定的key對(duì)應(yīng)的value；
// request.params:  獲取get請(qǐng)求的參數(shù)路由的參數(shù)，拿到的是一個(gè)對(duì)象；
// request body: 獲取post請(qǐng)求體，拿到的是一個(gè)對(duì)象（但是需要借助中間件）；

Response對(duì)象是路由回調(diào)函數(shù)中的第二個(gè)參數(shù)，代表了服務(wù)器發(fā)送給客戶端的響應(yīng)信息。

//response.download("下載文件地址");告訴瀏覽器下載一個(gè)文件 ;
//response.sendFile("絕對(duì)路徑");給瀏覽器發(fā)送一個(gè)文件 注意:路徑必須寫(xiě)絕對(duì)路徑;
//response.redirect("/test/demo");重定義到自己的地址欄;
// response.redirect("https://www.baidu.com");重定義到一個(gè)新的地址(url);
// response.send();給瀏覽器做出一個(gè)響應(yīng),包含響應(yīng)頭;
// response.sen();給瀏覽器做出一個(gè)響應(yīng),不包含響應(yīng)頭;
//response.set(key,value);自定義響應(yīng)頭內(nèi)容;
//response.get();獲取響應(yīng)頭指定key對(duì)應(yīng)的value;

中間件

中間件是一個(gè)用于處理客戶端請(qǐng)求的函數(shù)。一個(gè)HTTP服務(wù)器中可能會(huì)使用到各種中間件。當(dāng)接收到一個(gè)客戶端請(qǐng)求時(shí)，首先將該請(qǐng)求提交給第一個(gè)中間件函數(shù)，每一個(gè)中間件函數(shù)內(nèi)部封裝一個(gè)next回調(diào)函數(shù)，在一個(gè)中間件函數(shù)內(nèi)部可以判斷是否調(diào)用next回調(diào)函數(shù)來(lái)處理該客戶端請(qǐng)求。

書(shū)寫(xiě)方法：

function middleware(req,res,next){next()}

使用方法：

app.use([path],function)

1.在我們使用post請(qǐng)求得到客戶端傳給我們的對(duì)象的時(shí)候我們需要借助express自帶的中間件：

const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: false }));
app.post("/test", function(request, response) {
    let obj =  request.body; //得到post請(qǐng)求的參數(shù)
    console.log(obj );
    response.send("OK")
});
app.listen(3000);

2.使用內(nèi)置中間件暴露靜態(tài)資源可以把所指定的文件夾里的資源全部暴露出去，相當(dāng)于給他們?nèi)颗渲昧艘粋€(gè)路由

app.use(express.static('public'));

ejs模板

什么是ejs模板？

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“優(yōu)雅（Elegant）”或者是“簡(jiǎn)單（Easy）”。EJS 是一套簡(jiǎn)單的模板語(yǔ)言，幫你利用普通的 JavaScript 代碼生成 HTML 頁(yè)面。
如果大家了解過(guò)jsp的話相信可以輕松的學(xué)會(huì)ejs。

1.下載安裝

npm install ejs --save
yarn add ejs

2.配置模板引擎

app.set("view engine" , "ejs");

3.配置模板存放的路徑

app.set('views', path.join(__dirname, 'views'));

4.在views目錄下創(chuàng)建 .ejs文件
5.渲染數(shù)據(jù)并返回html.index是我們定義的index.ejs文件

 res.render('index');

用法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        ejs語(yǔ)法：
            1.<%%> 里面可以寫(xiě)任意js代碼，但是不會(huì)向?yàn)g覽器輸出任何東西
            2.<%- %> 能夠?qū)⒑蠖藗鬟f過(guò)來(lái)對(duì)象指定key所對(duì)應(yīng)value渲染的頁(yè)面（可以渲染html標(biāo)簽）
            3.《%= %> 能夠?qū)⒑蠖藗鬟f過(guò)來(lái)對(duì)象指定key所對(duì)應(yīng)value渲染的頁(yè)面（渲染不了html標(biāo)簽）
     -->
    <% for (var i = 0; i < 100; i++) { %>
        <h1>hello World</h1>
    <% } %>
    <!-- 遍歷100次hello world -->

</body>

</html>

cookie

為什么會(huì)出現(xiàn)cookie：

因?yàn)镠TTP是無(wú)狀態(tài)協(xié)議。簡(jiǎn)單地說(shuō)，當(dāng)你瀏覽了一個(gè)頁(yè)面，然后轉(zhuǎn)到同一個(gè)網(wǎng)站的另一個(gè)頁(yè)面，服務(wù)器無(wú)法認(rèn)識(shí)到這是同一個(gè)瀏覽器在訪問(wèn)同一個(gè)網(wǎng)站。每一次的訪問(wèn)，都是沒(méi)有任何關(guān)系的。但是我們?yōu)榱嗽诘卿浺淮钨~號(hào)后讓下一次登錄記住上一次登錄的賬號(hào)，讓我們無(wú)需再次輸入賬號(hào)，所以我們需要一個(gè)東西把我的登錄記錄給記錄下來(lái)。cookie 就達(dá)到了這個(gè)效果。
cookie可以使我訪問(wèn)頁(yè)面的時(shí)候讓服務(wù)器 命令瀏覽器存儲(chǔ)一個(gè)字符串，當(dāng)瀏覽器再次訪問(wèn)同一個(gè)域的時(shí)候，把這個(gè)字符串?dāng)y帶到http請(qǐng)求中。這樣可以使我們下次不用登錄賬號(hào)即可再次訪問(wèn)網(wǎng)站了

怎么使用cookie？

1. 下載第三方包

npm install cookie-parser
yarn add cookie-parser

2. 在服務(wù)端引入

let cookieParser = require("cookie-parser");
app.use(cookieParser()); 
//express中客戶端寫(xiě)cookie不需要任何的庫(kù)
//express中讀取客戶端攜帶過(guò)來(lái)的cookie要借助中間件：cookie-parser
app.get("/demo", function(request, response) {
    response.send("沒(méi)有cookie對(duì)話");
});
app.get("/demo1", function(request, response) {
    let obj = { shools: '家里蹲', subject: '前端' }
    response.cookie("data", obj)
    response.send("改客戶端種下一個(gè)【會(huì)話cookie】");
});
app.get("/demo2", function(request, response) {
    let obj = { shools: '家里蹲', subject: '前端' }
    response.cookie("data", obj, { maxAge: 1000 * 60 })
    response.send("改客戶端種下一個(gè)【持久化cookie】");
});
app.get("/demo3", function(request, response) {
    let schools = request.cookies.data.shools;
    response.send("獲取cookie傳的對(duì)象" + schools);
});
//清除cookie
app.get("/demo4", function(request, response) {
    //方法1：
    response.cookie("data", "", { maxAge: 0 });
    //方法2：
    // response.clearCookie("data");
    response.send("清除cookie");
});

cookie的弊端：
cookie 中的所有數(shù)據(jù)在客戶端就可以被修改，數(shù)據(jù)非常容易被偽造，那么一些重要的數(shù)據(jù)就不能存放在 cookie 中了，而且如果 cookie 中數(shù)據(jù)字段太多會(huì)影響傳輸效率。為了解決這些問(wèn)題，就產(chǎn)生了 session，session 中的數(shù)據(jù)是保留在服務(wù)器端的。
這時(shí)我們又引出了seccion

seccion

什么是session？

session是另一種記錄客戶狀態(tài)的機(jī)制，與cookie保存在客戶端瀏覽器不同，session保存在服務(wù)器當(dāng)中,cookie是保存在客戶端中的
當(dāng)客戶端訪問(wèn)服務(wù)器時(shí)，服務(wù)器會(huì)生成一個(gè)session對(duì)象，對(duì)象中保存的是key:value值，同時(shí)服務(wù)器會(huì)將key傳回給客戶端的cookie當(dāng)中；當(dāng)用戶第二次訪問(wèn)服務(wù)器時(shí)，就會(huì)把cookie當(dāng)中的key傳回到服務(wù)器中，最后服務(wù)器會(huì)吧value值返回給客戶端。
因此上面的key則是全局唯一的標(biāo)識(shí)，客戶端和服務(wù)端依靠這個(gè)全局唯一的標(biāo)識(shí)來(lái)訪問(wèn)會(huì)話信息數(shù)據(jù)。

1.下載安裝

npm install express-session
yarn add express-session

2.引入express-session

let session = require("express-session");

3.配置一個(gè)簡(jiǎn)單的session

app.use(session({
    name:'id', //設(shè)置cookie的name，默認(rèn)是connect.sid
    secret: ' ',參與加密的字符串
    cookie: {
        maxAge: 1000*30, //設(shè)置cookie的過(guò)期時(shí)間 
    }
}))

4.向session中添加一個(gè)key，值為value：req.session.key= value
5.獲取session上的key屬性：const {key} = req.session