express框架

冷不防 2023-07-04 06:18 7阅读 0赞

### express安装及环境搭建 ###

> 基于 Node.js 平台，快速、开放、极简的 Web 开发框架

1.  安装

>  *  `cnpm install express --save-dev`  
>     \-`cnpm init` 命令为你的应用创建一个 package.json 文件

1.  环境搭建及路由配置

> `app`是的实例express。  
> `METHOD`是小写的HTTP请求方法。  
> `PATH` 是服务器上的路径。  
> `HANDLER` 是当路由匹配时执行的函数。

1.  运行该应用程序：

node app.js

### 静态资源文件托管 ###

> 1.  在express中配置静态资源文件托管
> 2.  静态资源目录：为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件
> 3.  Express 会在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。即如果设置public为静态资源目录，在查找时如果路径为`http://localhost:3000/public/images/kitten.jpg`就会查找失败
> 4.  `__dirname`为当前文件根目录：`D:\node\express`
> 5.  虚拟静态目录1：为文件创建虚拟路径前缀（文件系统中实际上不存在该路径）；之后就可以通过带有 `/static` 前缀地址来访问 `public` 目录中的文件了
> 6.  虚拟静态目录2：但是，您提供给`express.static`函数的路径是相对于您启动node过程的目录的。如果从另一个目录运行express app，则使用**要提供服务的目录的绝对路径**更为安全

app.use(express.static('public'));
    //虚拟静态目录1
    app.use('/static', express.static('public'));
    //虚拟静态目录2
    let path = require('path');
    app.use('/static', express.static(path.join(__dirname, 'public')));

### 中间件 ###

> 1.  中间件**功能**
> 
>  *  执行任何代码。
>  *  更改请求和响应对象。
>  *  结束请求-响应周期。
>  *  调用堆栈中的下一个中间件。  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]
> 
> 1.  关于`next()`:==调用此函数将调用应用程序中的下一个中间件函数。==该next()函数不是Node.js或Express API的一部分，而是传递给中间件函数的第三个参数
> 2.  要加载中间件功能就要调用`app.use()`，指定中间件功能。
> 3.  中间件的加载顺序很重要：首先加载的中间件功能也将首先执行。例如：该中间件永远不会执行，因为路由加载完成后已经**终止请求-响应周期**

var express = require('express');
    var app = express();
    app.get('/', function (req, res) { 
      res.send('Hello World!')
    })
    //不会执行
    var myLogger = function (req, res, next) { 
      console.log('LOGGED');
      next();
    }
    
    app.use(myLogger)
    app.listen(3000)

##### 一. 应用层中间件 #####

> 项目运行都会执行的中间件; next必不可少 否则浏览器死循环  
> 中间件函数以小写形式处理请求的HTTP方法（其中`get post put insert delete`）

app.use((req, res, next) => { 
        next();
    })

##### 二. 路由器级中间件 #####

> 路由器级中间件与应用程序级中间件的工作方式相同，只不过它绑定到实例`express.Router()`。

//express里的路由
    let router = express.Router();
    //使用express router配置路由
    router.get('/',(req,res,next)=>{ 
        console.log(1);
        next();    
    })
    router.get('/',(req,res,next)=>{ 
        res.send("首页")
    })
    //关联
    app.use(router);

或者合并为：

router.get('/',(req,res,next)=>{ 
        console.log(1);
        next();    
    },(req,res,next)=>{ 
        res.send("首页")
    })

##### 三. 第三方中间件 #####

###### 1> `body-parser` ######

> 1.  `body-parser`是一个HTTP请求体解析的中间件，使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体

1.  安装  
    `cnpm install body-parser --save-dev`
2.  引入

const bodyParser = require('body-parser');

1.  配置

// 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')
         res.end(JSON.stringify(req.body, null, 2))
      });

1.  post提交取值以json格式提交到req.body上

###### 2. `cookie-parser` ######

> 1.  `cookie-parser`cookie保存在浏览器本地，正常设置cookie是不加密的，用户可以删除或者禁用cookie，cookie可以被篡改，可用于攻击，且存储量比较小，可能会被stroage取代
> 2.  Cookie加密 `signed：true` ，给cookie签名设置签名为true时,要在关联时写上签名的符号 `app.use(cookieParser('123abcde'));` 不写会报错

1.  安装  
    `cnpm installcookie-parser --save-dev`
2.  引入

const cookieParser = require('cookie-parser');

1.  关联

app.use(cookieParser());

1.  设置存取cookie值 在res上

app.get("/", (req, res) => { 
        res.cookie("user", "zmt", { 
            maxAge: 1000 * 60 * 60,
            signed: false
        });
        res.send("设置cookie成功");
    });

1.  获取值在req上

//获取
    app.get("/login", (req, res) => { 
         console.log(req.cookies);//{ user: 'zmt' }
        //签名后req.signedCookies
        //console.log(req.signedCookies);
        res.send("login!");
    })

##### 四. 错误中间件 #####

> 1.  遇到错误浏览器不会直接崩溃，而是进入错误中间件进行相应处理
> 2.  引入文件流`const fs = require('fs');`
> 3.  `err.stack`:错误信息：`Error: ENOENT: no such file or directory, open 'D:\node\express\static\stu.tx'`

app.get("/login", (req, res,next) => { 
        fs.readFile("static/stu.tx", (err, data) => { 
            if(err){ 
                next(err);
            }
            else{ 
                res.send(data.toString());
            }
        });
    });
    //错误中间件
    app.use((err,req,res,next)=>{ 
        fs.appendFile("static/err.txt",err.stack+'/n',(err)=>{ 
            console.log("错误写入成功");
            res.status(404).send("文件丢失!");
        })
    })

### get set的使用 ###

> 还有`app.locals`，其中定义的是键值对

var express=require("express");
    var app=new express();
    app.get("/",(req,res)=>{ 
        app.locals["age"]="20";
        app.set("user", "张三");
        res.send("首页");
    });
    
    app.get("/login",(req,res)=>{ 
        console.log(app.get("user"));//张三
        console.log(app.locals["age"]);
        res.send("news");
    });
    app.listen(8080,"127.0.0.1")

### 动态路由传值和get传值 ###

1.  动态传值 类似vue里的动态传值  
    只有满足路径条件的才会显示页面

router.get("/register/:id/:name", (req, res, next) => { 
        //获取动态路由的参数
        console.log(req.params); //{ id: '1', name: '张三' }
        let id = req.params.id;
        let name = req.params.name;
        res.send("注册成功！" + id + "/" + name);
    })

1.  路由上的get传值

router.get("/user", (req, res, next) => { 
        let paramsget = url.parse(req.url, true).query;
        console.log(paramsget);//{ id: '1', name: '张三' }
        res.send("get传值")
    })

### express框架使用ejs模板引擎 ###

1.  安装`cnpm install ejs --save-dev`
2.  设置ejs模板引擎

//设置ejs模板引擎，让express框架能识别ejs模板 ejs模板必须放在views目录下
    app.set("view engine", "ejs");
    //app.engine("html",ejs.renderFile);//修改ejs后缀名为html
    let ejs = require('ejs');

1.  使用

app.get("/", (req, res) => { 
        ejs.renderFile("./views/index.ejs", (err, str) => { 
            if (err) { 
                throw err;
            }
            res.send(str);
        })
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200209151141722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70