美文网首页
Express服务器

Express服务器

作者: 张先觉 | 来源:发表于2020-10-10 10:30 被阅读0次

    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值?cookiecookie-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') %> 
    

    相关文章

      网友评论

          本文标题:Express服务器

          本文链接:https://www.haomeiwen.com/subject/xtpdpktx.html