CodeLife

vuePress-theme-reco yuqing521    2019 - 2020
CodeLife CodeLife

Choose mode

  • dark
  • auto
  • light
主页
分类
  • 日常
  • 后端
  • 基础知识
  • 前端
  • 读书
标签
时间轴
文档
  • vuepress-reco
Github
联系我
  • 关于我
  • CSDN
  • 掘金
author-avatar

yuqing521

22

文章

25

标签

主页
分类
  • 日常
  • 后端
  • 基础知识
  • 前端
  • 读书
标签
时间轴
文档
  • vuepress-reco
Github
联系我
  • 关于我
  • CSDN
  • 掘金
  • Express 学习笔记

    • 踩坑记录
      • 学习记录
        • Express 工程基础配置
        • Express API
        • Express 中间件

    Express 学习笔记

    vuePress-theme-reco yuqing521    2019 - 2020

    Express 学习笔记


    yuqing521 2020-07-28 Node.jsExpress

    img

    # Express学习

    # 踩坑记录

    1. package.json中name不能与安装模块时的模块相同 "name": "expressdemo" 与 npm install express --save 冲突

    2. 为了方便地访问数据需要使用 express json-parser ,app.use(express.json())

      如果没有 json-parser,body 属性将是undefined的。 Json-parser 的功能是获取请求的 JSON 数据,将其转换为 JavaScript 对象,然后在调用路由处理程序之前将其附加到请求对象的 body 属性。

    3. Unexpected token n in JSON at position xx

      设置错误请求格式或未设置请求格式

      Content-Type: application/json

    4. 关于vscode restful client 使用

    img

    参考自:https://www.cnblogs.com/xcsg/p/11208386.html

    1. 紧凑型箭头函数

      当箭头函数仅为单行时可使用隐式返回(即省略return)

      let phoneMessage = phonebook.find((phoneMessage) => {
          return phoneMessage.id === id;
        });
        let phoneMessage = phonebook.find((phoneMessage) => phoneMessage.id === id);
      
      1
      2
      3
      4

    # 学习记录

    # Express 工程基础配置

    1. 通过package.json的script设置快捷指令 "scripts": { "start": "node index.js", "dev": "nodemon index.js", "test": "echo "Error: no test specified" && exit 1" }

    2. 通过nodemon监控热更新

    3. RESTful HTTP API

    URL verb functionality
    notes/10 GET fetches a single resource
    notes GET fetches all resources in the collection
    notes POST creates a new resource based on the request data
    notes/10 DELETE removes the identified resource
    notes/10 PUT replaces the entire identified resource with the request data
    notes/10 PATCH replaces a part of the identified resource with the request data
    1. 使用restful client 插件测试请求

      新建HTTP文件编写测试代码

      GET http://localhost:3001

      使用Send Request 查看 Response

    # Express API

    1. 监听端口

      app.listen(POST, () => {
        console.log(`Server running on port ${POST}`);
      });
      
      1
      2
      3
    2. 接口GET请求

      app.get("/api/persons", (req, res) => {
        res.json(phonebook);
      });app.get("/api/notes", (req, res) => {
        res.json(notes);
      });
      
      1
      2
      3
      4
      5
    3. 接口POST请求

      app.post("/api/notes", (request, response) => {
        const note = request.body;
        console.log(note);
      
        response.json(note);
      });
      
      1
      2
      3
      4
      5
      6
    4. 接口处理DELETE请求

      app.delete("/api/notes/:id", (request, response) => {
        const id = Number(request.params.id);
        notes = notes.filter((note) => note.id !== id);
      
        response.status(204).end();
      });
      
      1
      2
      3
      4
      5
      6

    # Express 中间件

    # Express中间件原理

    image-20200708184934157

    、

    中间件作为工具处理request和response,类似于流水线加工。

    • 执行任何代码。
    • 修改请求和响应对象。
    • 终结请求-响应循环。
    • 调用堆栈中的下一个中间件。

    # 常用中间件

    1. Morgan是一个node.js关于http请求的日志中间件

      参考:https://blog.csdn.net/swl979623074/article/details/78303776