Express服务器

Express，Node第一代框架！
特点：入门简单，做不了大型项目。

常用插件如下：

• nodemonnpm i nodemon -D，热更新
• cors 插件npm i cors -S，解决跨域问题
• body-parser插件npm i body-parser -S，解析普通post请求体
• multer插件npm i multer -S，处理multipart/form-data数据格式的POST请求

1. 搭建web server

const express = require('express')
const app = express();

app.get("/",(req,res) =>{
    res.send("hello express")
})

app.listen(3000,()=> {
    console.log("server is running");
})

2.访问静态资源express.static()

const express = require("express");
const path = require("path");
const app = express();
app.listen(3000);

// 访问www目录之下的banner.jpg -- > http://localhost:3000/banner.jpg
app.use(express.static(path.join(__dirname, "./www")));

3. 常用响应apisendFile()与express.static()的区别

• res.send()，例如：res.send('hello world')
• res.sendStatus()，例如：res.sendStatus(300);
• res.redirect()，重定向
• res.sendFile([绝对路径])，返回资源文件，类似于express.static()

• res.sendFile()与express.static()用法对比，代码如下：

const express = require("express");
const path = require("path");
const app = express();
app.listen(3000);

app.get("/", (req, res) => {
    res.sendFile(path.resolve("./www/banner.jpg"));
    res.send();
});

4.解析请求数据get请求、application/x-www-form-urlencoded格式、body-parser插件

• 对于get请求，直接处理请求参数：操作符?、：

Route path: /:name-:age
Request URL: http://localhost:3000/zhangsan-18?author='student'
req.params: { name: 'zhangsan', age: '18' }
req.query: { author: "'student'" }

• 对于application/x-www-form-urlencoded格式的post请求：借助body-parser插件，解析请求体：

// Html Form
<form action="http://localhost:3000/" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="name" />
    <input type="password" name="pwd" />
    <input type="submit" value="提交" />
</form>

// Node
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const app = express();
app.listen(3000);

// parse application/x-www-form-urlencoded，其中extended表示扩展模式
app.use(bodyParser.urlencoded({ extended: false }));
app.get("/", (req, res) => {
    res.sendFile(path.resolve("./www/1.html"));
});
app.post("/", (req, res) => {
    console.log(req.body);
    res.send();
});

5. 处理文件上传multipart/form-data数据格式、multer插件

multer插件的用法：

• dest属性，规定上传文件的存储路径，例如：multer({dest: './upload'}).any()
• single(fieldname),接收单文件
• array(fieldname[, maxCount最大传输数量]),接收多文件
• any(),接受一切上传的文件
• res.body,包含非文件数据信息
• res.files,包含文件数据信息

// Html
<form action="http://localhost:3000/" method="POST" enctype="multipart/form-data">
    <input type="text" name="name"> <br> <br>
    <input type="password" name="password"> <br> <br>
    <input type="file" name="fl"> <br> <br>
    <input type="submit" value="提交" />
</form>

// Node
const express = require('express');
const path = require('path');
const app = express();

const multer = require('multer');

// 配置文件地址
// any()，同时支持单文件、多文件上传
app.use(multer({dest: './upload'}).any());

app.get('/',(req,res)=> {
    res.sendFile(path.resolve('./www/demo.html'));
})

app.post('/',(req,res) => {
    console.log(req.body);  // 普通字段
    console.log(req.files); // 文件数据
    res.send();
})

app.listen(3000);

6. 如何使用cookie-parser解析cookie值？cookie、cookie-parser

什么是cookie？
cookie就是浏览器与服务器通信的一种手段。 特点： cookie值存在于浏览器当中，容量很小，只有4K。

服务器如何发送cookie？——express自带发送cookie，例如:res.cookie("test", 123);
服务器如何接收cookie？——使用cookie-parser，例如:req.cookies、req.signedCookies;
其中，req.cookie解析普通cookies值;req.signedCookies解析签名过的cookies值。

如何防止cookie被篡改？
如何对cookie进行加密？
……

• cookie-parser插件的基本使用以及如何防篡改？

const express = require("express");
const app = express();

// 解析cookie
const cookieParser = require("cookie-parser");
app.use(cookieParser("签名字段：dfldanfgopdhguipohpoqghpifgpaiufhdap"));

app.get("/", (req, res) => {
    console.log(req.cookies); // 打印结果是：{ test: '123'}
    console.log(req.signedCookies); // 打印结果是：{ secret: '123'}，若是secret值在浏览器被强行篡改了，那么，打印结果是：{ secret: false }

    // 发送cookie
    // 未进行签名的cookie
    res.cookie("test", 123);

    // 进行了签名的cookie
    res.cookie("secret", 123, { signed: true });
    res.send();
});

app.listen(3000);

• 每一个cookie值都需要进行解密吗？

decodeURIComponent('s%3A123.G8ZTmKtZ2QyERwOKWrJG5GsEGUqUeyUVbS6N5agj%2BQQ')

上述cookie值，解码结果如下：

"s:123.G8ZTmKtZ2QyERwOKWrJG5GsEGUqUeyUVbS6N5agj+QQ",其中，s:表示签过名了;123表示cookie值；.的后面就是签名，这段字符是cookie和密钥字符通过哈希算法生成而来。

尽管，使用cookie-parser插件进行过签名的cookie值，能够实现防止篡改。但是，浏览器分配给cookie的容量只有4K而已。所以，如果不是特别重要的数据，就要不要签名了。

7. cookie和sessioncookie-session插件：

什么是session？
session就是浏览器与服务器通信的一种手段。 特点：session值存在于服务器当中，容量在理论上无限，常常与cookie配合使用。

cookie-session插件使用：

• name，设置的Cookie的名称，默认为express:sess
• keys，用于签名和验证Cookie值的键列表

• 实现网页访问次数：

const express = require('express')
const app = express();
app.listen(3000);

const cookieSession = require("cookie-session");

// 配置session
// name，设置的Cookie的名称，默认为express:sess
// keys，用于签名和验证Cookie值的键列表 
app.use(cookieSession({
    name: 'session',
    keys:['keys1','key2']
}))

app.use(function(req,res) {
    req.session.count = ( req.session.count || 0 ) + 1;
    req.session.name = "测试汪";
    res.send(`欢迎${ req.session.name }，第${ req.session.count }登录网站`);
})

8. express内置路由的使用

路由的本质：根据url地址的不同，调用不同的代码。
路由的原理：switch语句

|-- main.js 根文件
|-- /router 路由文件夹
  |--login.js 登录模块
    |-- login.js
  |--index.js  路由导出文件

• main.js根文件，代码如下：

const express = require("express");
const app = express();

// Router路由
require("./router/index.js")(app);

app.listen(3000, () => console.log("server is running"));

• ./router/index.js路由导出文件，代码如下：

/**
 * @flie 路由导出文件
 */

module.exports = function (app) {
    app.use("/login", require("./login/login.js"));
};

• ./router/login/login.js登录模块文件，代码如下：

/**
 * @flie 登录模块
 */

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => res.send("welcome to login."));

module.exports = router;

9. ejs模板引擎使用 ejs 模块渲染

模板引擎（Template Engine）是一个将页面模板和后台数据结合起来生成 html 的工具。最后，返回浏览器一个HTML页面。

ejs使用流程：1.根文件设置引擎和存放目录、2.路由文件设置渲染路径、3.写ejs模块内容
require('express')().set()：设置模板引擎为 ejs 和存放模板的目录。
res.render()函数渲染 ejs 模板:第一个参数模板的名称，例如 users 则会匹配 views/users.ejs；第二个参数传给模板的数据)

ejs语法： 更多ejs语法

• <% code %>：运行 JavaScript 代码，不输出
• <%= code %>：显示转义后的 HTML内容，转成字符串。
• <%- code %>：显示原始 HTML 内容，常常和include一起使用

|-- index.js 根文件，通过 app.set 设置模板引擎为 ejs 和存放模板的目录。
  | -- routers 路由(调用res.render() 函数渲染 ejs 模板)
     |-- users.js 
  |-- views  存放模板的目录
    |-- header.ejs
    |-- footer.ejs
    |-- users.ejs

• index.js

const express = require('express')
const app = express();
const path  = require('path')

// ejs
app.set('views', path.join(__dirname, 'views'))// 设置存放模板文件的目录
app.set('view engine', 'ejs')// 设置模板引擎为 ejs

// Router
app.use('/',require('./router/index'))
app.use('/users',require('./router/users'))

app.listen(3000,()=> {
    console.log("server is running");
})

• router/user.js

const express = require("express");
const router = express.Router();

router.get('/:name',(req,res) => {
    res.render('users', {
        name: req.params.name,
        types: ['html','css','js','es6','node']
    })
})

module.exports = router;

• views/users.ejs

    <%- include('header.ejs') %> 

    <h1><%= name.toUpperCase() %></h1>
    <ul>
        <% for(var i = 0; i < types.length; i++) { %> 
            <li><%= types[i] %></li> 
        <% } %> 
    </ul>

    <%- include('footer.ejs') %>