express框架的基本使用

1、express介绍

express是基于Node.js平台的极简、灵活的WEB应用开发框架。简单来说，express就是一个封装好的工具包，封装了很多功能，便于开发WEB应用（HTTP服务）

2、express使用

2.1、express下载

npm i express

// 导入const express = require("express");// 创建应用对象const app = express();// 创建路由app.get("/home", (req, res) => {    res.end("hello express");});app.listen(9000, () => {    console.log("端口监听中...");});

2.2、express路由

一个路由有三个部分组成，请求方法、路径和回调函数。

【资料图】

// 导入const express = require("express");// 创建应用对象const app = express();// 创建路由app.get("/home", (req, res) => {    res.end("hello express");});app.get("/", (req, res) => {    res.end("home");});app.post("/login", (req, res) => {    res.end("test");});app.all("/test", (req, res) => {    res.end("all test");});// 404响应，上面没有一个匹配就走这个路由app.all("*", (req, res) => {    res.end("404");});app.listen(9000, () => {    console.log("端口监听中...");});

2.3、获取请求报文参数

// 导入const express = require("express");// 创建应用对象const app = express();// 创建路由app.get("/request", (req, res) => {    // 原生操作    console.log(req.method);    console.log(req.url);    console.log(req.httpVersion);    console.log(req.headers);    // express操作    console.log(req.path);    console.log(req.query);    // 获取ip    console.log(req.ip);    // 获取请求头    console.log(req.get("host"));});app.listen(9000, () => {    console.log("端口监听中...");});

2.4、获取路由参数

// 导入const express = require("express");// 创建应用对象const app = express();// 创建路由app.get("/:id.html", (req, res) => {    // 获取URL路由参数    console.log(req.params.id);});app.listen(9000, () => {    console.log("端口监听中...");});

2.5、响应设置

express封装了一些API方便给客户端响应数据，并且兼容原生HTTP模块的获取方式。

// 导入const express = require("express");// 创建应用对象const app = express();// 创建路由app.get("/response", (req, res) => {    // 1、express中设置响应的方式兼容HTTP模块的方式    res.statusCode = 404;    res.statusMessage = "xxx";    res.setHeader("abc","xyz");    res.write("响应体");    res.end("xxx");    // 2、express的响应方法    res.status(500);    res.set("xxx", "yyy"); // 设置响应头    res.send("xxx"); // 设置响应体    // 连贯操作    res.status(404).set().send()    // 3、其他响应    res.redirect("http://www.baidu.com"); // 重定向    res.download("./package.json"); // 下载响应    res.json(); // 响应JSON    res.sendFile(__dirname + "/home.html"); // 响应文件内容});app.listen(9000, () => {    console.log("端口监听中...");});

2.6、express中获取请求体的数据

express可以使用body-parser包处理请求体。

安装：npm i body-parser

使用：

// 导入const express = require("express");const bodyParser = require("body-parser");// 创建应用对象const app = express();// 解析JSON格式的请求体的中间件const jsonParser = bodyParser.json();// 解析querystring格式请求体的中间件const urlencodedParser = bodyParser.urlencoded({ extended: false});// 创建路由规则app.get("/login", (req, res) => {    // res.send("表单页面");    res.sendFile(__dirname + "/index.html");});app.post("/login", urlencodedParser, (req, res) => {    console.log(req.body);    res.send("获取用户数据");});app.listen(9000, () => {    console.log("端口监听中...");});

3、中间件

3.1、什么是中间件

Middleware本质上是一个回调函数。可以像路由一样访问请求对象和响应对象。

作用：用于封装公共操作，简化代码。

3.2、类型

• 全局中间件
• 路由中间件

3.3、全局中间件

每一个请求到达服务端之后，都会执行全局中间件函数。

// 导入const express = require("express");const fs = require("fs");const path = require("path");// 创建应用对象const app = express();// 声明中间件函数function recordMiddleware(req, res, next) {    // 获取 url 和 ip    let { url, ip } = req;    // 将信息保存在文件中 access.log    fs.appendFileSync(path.resolve(__dirname, "./access.log"), `${url}   ${ip}\r\n`);    next();}// 使用中间件函数app.use(recordMiddleware);// 创建路由app.get("/home", (req, res) => {    res.send("前台首页"); });app.get("/admin", (req, res) => {    res.send("后台首页"); });app.all("*", (req, res) => {    res.send("404 no found");});app.listen(9000, () => {    console.log("端口监听中...");});

3.4、路由中间件

// 导入const express = require("express");// 创建应用对象const app = express();// 创建路由app.get("/home", (req, res) => {    res.send("前台首页"); });// 声明中间件let checkCodeMiddlerware = (req, res, next) => {    if (req.query.code === "521") {       next();    } else {        res.send("暗号错误");    }}app.get("/admin", checkCodeMiddlerware, (req, res) => {    res.send("后台首页"); });app.get("/setting", checkCodeMiddlerware, (req, res) => {    res.send("设置页面"); });app.all("*", (req, res) => {    res.send("404 no found");});app.listen(9000, () => {    console.log("端口监听中...");});

3.5、静态资源中间件

express内置处理静态资源的中间件。

// 导入const express = require("express");// 创建应用对象const app = express();// 静态资源中间件设置app.use(express.static(__dirname + "/public"));// 创建路由app.get("/home", (req, res) => {    res.send("前台首页"); });app.all("*", (req, res) => {    res.send("404 no found");});app.listen(9000, () => {    console.log("端口监听中...");});

注意事项：

• 1、index.html为文件默认打开的资源。
• 2、如果静态资源与路由规则同时匹配，谁先匹配谁就响应。
• 3、路由响应动态资源，静态资源中间件响应静态资源。

4、防盗链

通过请求头中的referer来判断。

// 导入const express = require("express");const bodyParser = require("body-parser");// 创建应用对象const app = express();// 声明中间件,防盗链app.use((req, res, next) => {    // 检测请求头中的referer是否是127.0.0.1    let referer = req.get("referer");    console.log(referer);    if (referer) {        let url = new URL(referer);        let hostname = url.hostname;        if (hostname !== "127.0.0.1") {            res.status(404).send("not found");        }    }    next();})app.listen(9000, () => {    console.log("端口监听中...");});

5、路由模块化

创建routes文件夹，用来统一存放路由文件。

routes/homeRouter.js

// 导入const express = require("express");// 创建路由对象const router = express.Router();router.get("/home", (req, res) => {    res.send("后台首页");});module.exports = router;

6、模板引擎EJS

分离用户界面和业务数据的一种技术。

EJS是一种高效的JS的模板引擎。

安装：npm i ejs --save

6.1、初体验

index.html

                    
我爱你 <%= china %>
    <%= weather %>

index.js

const ejs = require("ejs");const fs = require("fs");let china = "中国";let weather = "天气晴";let str = fs.readFileSync("./index.html").toString();let result = ejs.render(str, {china, weather});console.log(result);

6.2、ejs列表渲染

const ejs = require("ejs");const fs = require("fs");let arr = [1,2,3,4,5];let result = ejs.render(`
    <% arr.forEach(item => { %>        
<%= item %>
    <% }) %>
`, { arr });console.log(result);

6.3、ejs的条件渲染

const ejs = require("ejs");const fs = require("fs");let isTrue = false;let result = ejs.render(`    <% if (isTrue) { %>        主人    <% } else { %>        其他人    <% } %>`, { isTrue });console.log(result);

6.4、express中使用EJS

创建views文件夹，用于存放模板文件，后缀名是ejs。

views/home.ejs：

                    
<%= title %>

index.js：

// 导入const express = require("express");const path = require("path");// 创建应用对象const app = express();// 1、设置模板引擎app.set("view engine", "ejs"); // 2、设置模板引擎文件存放位置app.set("views", path.resolve(__dirname, "./views"));// 创建路由app.get("/home", (req, res) => {    let title = "你好";    res.render("home", {title});});app.all("*", (req, res) => {    res.send("
404 not found!
");});app.listen(9000, () => {    console.log("端口监听中...");});

7、express-generator工具

通过应用生成工具express-generator可以快速创建一个应用的骨架，相当于脚手架。

可以通过npx（包含在Node.js8.2.0以及更高版本中）命令来运行Express应用程序生成器。

npx express-generator

对于较老版本的node，请通过npm将Express应用程序生成器安装到全局环境中使用：

npm install -g express-generator

express -e <项目名>，创建项目。

npm i 安装项目的依赖。

-h参数可以列出所有可用的命令行参数。

8、文件上传

使用formidable处理文件上传的请求。

npm i formidable

var express = require("express");var router = express.Router();// 导入const path = require("path");const formidable = require("formidable");/* GET home page. */router.get("/", function(req, res, next) {  res.render("index", { title: "Express" });});// 显示网页的表单router.get("/portrait", (req, res) => {  res.render("portrait");});// 处理文件上传router.post("/portrait", (req, res) => {  const form = formidable({     multiples: true,    // 设置文件的保存目录    uploadDir: path.resolve(__dirname, "../public/images"),    // 保持文件后缀    keepExtensions: true,  });  // 解析请求报文  form.parse(req, (err, fields, files) => {    if (err) {      // next(err);      console.log(err);      return;    }    console.log(fields); // text rdion checkbox select    console.log(files); // file    // 服务器保存该图片的访问URL    let url  = "/images/" + files.portrait.newFilename; // 将来将此数据保存在数据库中    res.send(url);  });});module.exports = router;