• express提交文件 和 状态存储，模板引擎

    目录

    提交文件

    生成随机文件名

    存储http状态

    cookie

    session

    模板引擎

    模板语法

     

    提交文件

    • 从客户端 向 服务器提交文件 是http网页服务器中常见的一种需求

    • 我们在express 可以通过一个第三方中间件 来实现 服务器 接收 客户端提交的文件需求

      • 这个第三方中间件 叫做：formidable

    • formidable中间件

      • 安装方式

        • npm i formidable

      • 使用方式

          1. //1.引入
          2. let form = require("formidable");
          3. //2.调用引入的form函数  返回值为  表单接收对象
          4. let formObj = form({
          5.     encoding:"utf-8",//默认值为utf-8 表示设置提交文件的编码格式
          6.     uploadDir:"路径字符串",//提交文件的存储路径
          7.     keepExtensions:true,//是否保留文件原本的后缀名 默认值为false不保留 设置为true表示保留
          8. })
          9. //3.调用formObj表单接收对象 的方法 来接收 客户端表单提交的数据 和 文件
          10. //这个方法 就是parse
          11. formObj.parse(req, (err, fields, files) => {
          12.     //req形参 就是 服务器的req形参
          13.     //回调函数中 err接收form表单提交错误的错误信息
          14.     //fields接收form表单提交的数据
          15.     //files接收form表单提交的文件
          16.     //默认接收到的文件 文件名为 随机生成的文件名  因此 我们一般会选择更改文件名
          17.     //我可以使用 fs模块的rename方法 给提交过来的文件 改名 
          18.     //用法为：fs.renameSync("旧名","新名")
          19. })

          1. //服务器代码
          2. let express = require("express");
          3. let formidable = require("formidable");
          4. let path = require("path");
          5. let fs = require("fs");
          6. let app = express();
          7.  
          8.  
          9. app.post("/index",(req,res)=>{
          10.     //使用这个中间件 接收表单提交数据
          11.     //1.创建表单接收对象
          12.     let form = formidable({
          13.         uploadDir:path.join(__dirname,"upload"),
          14.         keepExtensions:true
          15.     });
          16.     //2.调用parse方法 接收数据
          17.     form.parse(req,(err,fields,files)=>{
          18.         // console.log("错误信息",err)
          19.         // console.log("数据",fields)
          20.         // console.log("文件",files)
          21.         // console.log(files.file)
          22.         fs.renameSync(files.file.filepath,path.join(__dirname,"upload",files.file.originalFilename))
          23.     });
          24.  
          25.     res.send("aaa");
          26. })
          27. app.listen(3000);

          2. html>
          3. <html lang="en">
          4. <head>
          5.     <meta charset="UTF-8">
          6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
          7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
          8.     <title>Documenttitle>
          9. head>
          10. <body>
          11.     
          12.     <form action="http://127.0.0.1:3000/index" method="post" enctype="multipart/form-data">
          13.         用户名：<input type="text" name="un">
          14.         密码：<input type="text" name="pwd">
          15.         文件选择：<input type="file" name="file">
          16.         <input type="submit">
          17.     form>
          18. body>
          19. html>
          ​

    生成随机文件名

    • 我们可以使用一个express的第三方中间件 来生成随机文件名——uuid

      • 下载安装

        • 命令：npm i uuid

      • 使用

    1. //1.引入
    2. let {v4} = require("uuid");
    3. //uuid的入口文件中 暴露的是一个对象 对象中存在一个名为v4 的 函数 使用这个函数 就可以创建随机文件名
    4. //2.使用v4方法 既可生成随机文件名
    5. let 变量 = v4()

    存储http状态

    • http是一种互联网传输协议 规定了 互联网上的数据传输规则 为 请求和响应规则

    • http协议 是一种 无状态协议，也就是说 这种协议下 的网络数据传输 是无法记录状态的

    • 为了解决无法存储状态的问题 提出了两个技术栈——cookie和session

    • 简介

      • Cookie的产生也是HTTP的特点所决定的。HTTP协议有一个非常重要的特点是无状态的，也就是说当客 户端请求服务器，每一个请求和响应结束以后，这次的连接是马上断开的（也是为了释放资源）。同时 服务器是不保留连接者相关的信息。这就说明了，Cookie要解决HTTP无状态的问题。

    • 应用场景：保存用户信息（保存http状态）

    • cookie的实现

      • express中 实现cookie 是通过 cookie-parser 中间件来实现

      • 这是一个第三方中间件 因此我们可以在npm上 了解这个中间件的使用方式

      • 安装中间件

        • 命令：npm install cookie-parser

      • 使用中间件

          1. let express = require("express");
          2. let path = require("path");
          3. let app = express();
          4. app.use(express.urlencoded({ extended: false }));
          5. app.use(express.json());
          6. //处理cookie
          7. //引入cookie-parser
          8. let cookieParser = require("cookie-parser");
          9. //创建中间件函数
          10. let cookieFn = cookieParser("abcDEF123_%");
          11. //使用中间件
          12. app.use(cookieFn);
          13. //登录逻辑处理中间件
          14. app.use((req, res, next) => {
          15.     //1.接收登录信息
          16.     let { un, pwd } = req.body;
          17.     //2.判断
          18.     if (un == "狗蛋" && pwd == "gd123") {
          19.         req.flag = "success"
          20.     } else {
          21.         req.flag = "fail"
          22.     }
          23.     next()
          24. })
          25. app.get("/login", (req, res) => {
          26.     // res.cookie("flag","success");
          27.     res.sendFile(path.join(__dirname, "login.html"));
          28. })
          29. app.post("/login", (req, res) => {
          30.     //1.响应对应的cookie
          31.     res.cookie("flag", req.flag);
          32.     res.send(req.flag);
          33.     //判断如果登录成功 就响应 首页
          34.     // if (req.flag == "success") {
          35.     //     res.sendFile(path.join(__dirname, "index.html"));
          36.     // }
          37.     // //否则 还响应 登录页
          38.     // else {
          39.     //     res.sendFile(path.join(__dirname, "login.html"));
          40.     // }
          41. })
          42. //我们登录成功之后  会跳转到首页  在首页 也应该能拿到登录状态 这才叫 保持住了登录状态
          43. app.get("/index",(req,res)=>{
          44.     //如果登录成功 就响应登录成功
          45.     //否则响应登录失败
          46.     //我们这里要通过cookie 获取登录状态 来判断
          47.     //cookie中存储的键值对 获取方式为  req.cookies.键名
          48.     if(req.cookies.flag=="success"){
          49.         res.send("登录成功，欢迎您，我的主人")
          50.     }else{
          51.         res.send("快滚，臭猪");
          52.     }
          53. })
          54. app.listen(3000);

        • cookie使用的流程

          • 1.引入cookie-parser

            • let cookieParser = require("cookie-parser")

          • 2.创建中间件函数

            • let cookieFn = cookieParser("秘钥字符串",{ maxAge :n})

            • 注意：第二个对象参数 可以不传 如果传 里面可以设置一个属性 maxAge 值为数字 表示cookie的有效期有多长时间 单位为ms 不写单位

          • 3.使用中间件

            • 服务器对象.use(中间件函数)

          • 4.在路由中 设置cookie

            • res.cookie("键名","键值")

          • 5.后续 就可以在 其他路由中 使用之前路由存储过的cookie了

            • req.cookies.键名

        • cookie原理 cookie存储后的执行流程

          • 1.服务器存储cookie

          • 2.cookie会随着服务器的响应 发送给前端浏览器

          • 3.前端浏览器将cookie中保存的键值对 存储在浏览器缓存cookie中

          • 4.后续每次发起请求 浏览器缓存的cookie键值对 都会随着请求报文一起发送到服务器去

          • 5.服务器就可以通过 req.cookies.键名 来接收到 对应的cookie数据

    session

    • session也是一种用来处理http保存状态 的技术栈

    • session 是基于 cookie实现的

    • 在express中 我们 使用一个中间件——cookie-session来实现 使用session记录状态

    • session的原理

      • 不同于cookie 将 状态数据 存储在客户端，session 将状态数据 存储在服务器上 而之后 会给客户端通过cookie发送一个钥匙数据 客户端 可以通过钥匙数据 来证明自己的身份 从而获取session中存储的数据

    • session的具体使用方式

      • 安装中间件

        • 命令：npm i cookie-session

      • 使用方式

          1. //引入
          2. let cs = require("cookie-session");
          3. //使用中间件
          4. 服务器对象.use(cs({
          5.     name:"中间件名称",
          6.     keys:["秘钥字符串",...],
          7.     maxAge:保质期时长 是一个数字 单位为ms
          8. }))
          9. ​
          10. //设置session数据
          11. app.get("/index",(req,res)=>{
          12.     //添加session数据
          13.     req.session.键名 = 键值
          14. })
          15. //使用session数据
          16. app.get("/login",(req,res)=>{
          17.     //添加session数据
          18.     req.session.键名
          19. })

      • 注意：session这个方式存储状态 要优于 cookie

        • 因为 session在网络上传递的 是 秘钥 因此 即便被截获 也不会有什么影响 保证了安全性

        • 优于 传递的是秘钥 因此 不论 session中真正存储多少数据 网络上传递的都只是一个秘钥数据 也就减少了数据量 提高了网速。

        1. let express = require("express");
        2. let cS = require("cookie-session");
        3. let path = require("path");
        4. let app = express();
        5. app.use(express.urlencoded({extended:false}));
        6. app.use(express.json());
        7. //2.使用中间件
        8. app.use(cS({
        9.     name:"session",
        10.     keys:['abcDEF123&*']
        11. }))
        12. //3.存储session
        13. //用户直接在地址栏中 访问/login路由 加载登录页面
        14. app.get("/login",(req,res)=>{
        15.     res.sendFile(path.join(__dirname,"login.html"))
        16. })
        17. //用户提交登录信息后 给用户响应登录状态 并存储登录状态(session)
        18. app.post("/login",(req,res)=>{
        19.     let {un,pwd} = req.body
        20.     if(un=="狗蛋"&&pwd=="gd123"){
        21.         //存储session 记录登录状态
        22.         req.session.flag = "success";
        23.         res.send("登录成功");
        24.     }else{
        25.         req.session.flag = "fail";
        26.         res.send("登录失败")
        27.     }
        28. })
        29. //当用户在地址栏中 访问/index路由 对应响应数据  如果登录成功 响应  否则 响应 
        30. app.get("/index",(req,res)=>{
        31.     let flag = req.session.flag;
        32.     if(flag=="success"){
        33.         res.send("欢迎您，我的主人")
        34.     }else{
        35.         res.send("闲人免进")
        36.     }
        37. })
        38. app.listen(3000)

    模板引擎

    • 在node开发中 我们如果想写html页面 可以有两种写法

      • 直接写html

        • 优点：写法简单

        • 缺点：需要使用单独的js文件 对页面内容进行渲染

      • 通过模板引擎 来编写页面

        • 优点：可以直接在模板文件中 写入数据 可以直接渲染

        • 缺点：相对而言 会稍微复杂一点

    • 在express中 我们使用一个第三方中间件 来实现模板的编写——ejs

      • 1.下载安装 模板引擎

        • 命令：npm i ejs

      • 2.给服务器配置要使用的模板引擎

        • app.set('view engine', 'ejs')

      • 3.在项目目录中 创建view文件件 用来存放模板文件

      • 4.在view文件夹中 编写模板文件

        • 注意：模板文件 后缀名为 .ejs

      • 5.初始化模板

        • 模板文件 只有初始化之后 才能渲染出来

        • 说明：其实配置的就是模板文件夹的路径

        • app.set('views',模板文件夹的绝对路径)

      • 6.渲染模板

          1. app.get("/index",(req,res)=>{
          2.     //使用res形参的render方法 进行模板的渲染
          3.     res.render('模板文件名',模板要使用到的数据（通常是一个对象）)
          4. })

    • 模板语法

      • 渲染普通数据

        • <%= 要渲染的数据 %>

        • 注意：我们在模板中渲染的诗句 其实是 服务器中渲染模板 的render方法中 数据对象的属性

        • 注意：我们在渲染数据对象的属性的时候 只写属性名就可以 不要写对象名.属性名

      • 条件渲染

        • <% if(条件){ %>
    条件成立要渲染的html内容
<% else if(条件2){ %>
    满足条件2的内容
<% }else{ %>
    条件不成立渲染的html内容
<% } %>

      • 循环渲染

        • <%for(xxxx){%>
    循环渲染的内容
<% } %>

      • 引入其他模板

        • <%-include("要引入的模板路径"，引入的模板要使用的数据)%>

        • 注意：模板路径可以省略 后缀名

  • 相关阅读:
    JavaScript:实现AvlTree树算法（附完整源码）
    基于MATLAB的BP神经网络太阳辐射预测
    【Vue】组件里面的data为什么必须是一个函数?vue的css作用域中scoped作用和原理分别是什么?组件的自定义事件触发条件是什么?组件之间传值
    速腾聚创发布全固态补盲激光雷达E1，成立合资公司，备战百万产能
    创业 4 年获近 7000 万美元融资，53 岁老程序员 all in 开源
    基于nodejs+vue百鸟全科赏析网站
    linux scsi命令读取文件
    ABP：内置logger and 第三方库serilog 之间的关系
    【字符串】分割字符串的最大得分
    ArcGIS API for JavaScript实现要素服务query接口的功能
  • 原文地址：https://blog.csdn.net/weixin_64037609/article/details/127435225