欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何使用express构建项目,以及打造接口

程序员文章站 2022-06-01 09:27:10
...

1. express通过生成器 【 脚手架 】

  1. 作用: 可以帮助我们快速构建一个express项目
  2. 脚手架的安装
    • 全局安装 [ 可以使用npm、cnpm ]
      • $ cnpm i express-generator -g
    • npx安装
      • npx是npm的一个管理工具,它可以让我们不全局安装就使用某一个包
      • npx好处就是可以帮助我们减少使用内存
      • 但是npx要求npm的版本在5.2以上
      • npx是npm会自动携带
  3. 脚手架的使用
  • 全局安装的使用
    • express -e 项目名称
  • npx的使用
    • npx express -e 项目名称
  1. 认识项目目录结构
      1. 先找package.json [ 记录了项目的依赖包信息,npm脚本 ]
      1. 找到了项目启动文件 bin/www
      • 它是通过http来做了一个服务器,默认端口是:3000
      • 这个文件中引入了一个app文件,这个文件是将createServer中的回调函数放到了外面,以模块化的形式使用的,这个文件我们叫它: ‘入口文件’
      1. 看: app.js
      • express是由路由和中间件构成的
        • 路由: 可以完成页面的连接或是接口的打造
        • 中间件: 中间件是一个函数,一个具有特定功能的函数
          • 中间件有三个类型
              1. 应用级中间件
              1. 路由中间件
              1. 错误处理中间件
          • 中间件的参数
            • req : 全称: request 表示请求
            • res : 全称: response 表示响应
            • next: 表示request和response之间的连接 , 相当于桥梁的作用
              • next如果断开,那么请求和响应就会中断 next( false )
          • 中间件要想调用,必须通过app的use方法来调用
      1. 路由中间件
      • 路由中间件人家是以模块化的形式使用
      • 看: routes/xx.js
        • 有两个路径,这两个路径会拼接在一起
          • 举例: /home /banner /home/banner 二级路由
        • 为什么res.render(‘index’)
          • 配置了模板的路径
          • 配置了后缀名省略
      1. 看: view/xxx.ejs
      • ejs语法
      • ejs文件中可以直接在模板语法中使用数据
      1. 手动打造一个express的使用流程
        1. 在routes里建一个home.js
        2. 去app.js里引入这个模块
        3. 回到home.js渲染页面(渲染前端页面只用get)requder.get(’/’,function(req,res,next){res.render(‘home’,{data}) })
        4. 页面复制到public里
        5. 获得数据渲染页面时要注意数据类型的转换
      1. ejs语法学习
      • 注意: ejs语法符号是不能换行的
      • 非转义输出 <%- %> 可以解析xml类型数据
      • 转义输出 <%= %> 可以解析普通类型数据
      • 流程控制 <% %>
        • if条件语句
        • 循环语句

通过express来打造api服务器【 后端接口 】

  1. 步骤
    1. 通过脚手架搭建项目
    2. 创建接口
      • 接口就是路由
      • 接口的打造需要遵循一个规则: restful api
      • 很久以前接口时这样的
        // 商品列表
         http://localhost:3000/shop/query   查询 
         http://localhost:3000/shop/add     添加一个商品
         http://localhost:3000/shop/delete  删除一个商品
         http://localhost:3000/shop/update  修改一个商品
      
      • 现在流行的是什么呢?
        // 现在流行的是  接口只有一个,但是数据请求方式多个 
      
         http://localhost:3000/shop
            get请求    查询
            post请求   增加一个商品
            delete请求 删除一个商品
            put 请求   修改一个商品信息
      
      • put delete 其实底层还是get
              /* 
         这里的路由将作为将来的后端接口
       */
       
       const express = require( 'express' )
       
       const router = express.Router() 
       
       
       //接下来我们打造接口 ,使用restful api
       
         router.route('/position')
           .post((req,res,next) => {
             res.render('position',{
               data: JSON.stringify({
                 info: 'post',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
           .delete((req,res,next) => {
       
             res.render('position',{
               data: JSON.stringify({
                 info: 'delete',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
           .put((req,res,next) => {
       
             res.render('position',{
               data: JSON.stringify({
                 info: 'put',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
           .get((req,res,next) => {
       
             res.render('position',{
               data: JSON.stringify({
                 info: 'get',
                 status: 200,
                 name: 'Gabriel Yan'
               })
             })
           })
       
       
       module.exports = router 
      
    1. 接口测试
      1. 使用测试用具来测试
      • postman
      • insomina [ 安装无要求,一路next ]
      • 数据是对象的话需要JSON.stringify()才能正常显示
      1. 前端进行接口数据请求
      • Front End 前端 FE
      • Back End 后端 BE
      • 前端: http://127.0.0.1:5500/day03/code/1-express/02_front_end/index.html
      • 后端: http://localhost:3000/position
      • 跨域问题解决【 后端做 】:
        • 设置请求头 【 php java node 】
        • res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
          • put 没有实现跨域
          • delete 没有实现跨域
          • get 可以
          • post 可以
        • 使用中间件 cors [ 第三方模块 ]
        • 在npm官网查看方法,在app.js中配置
            var cors = require('cors');
        
             app.use(cors({
            "origin": "*",
            "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
            "preflightContinue": false,
            "optionsSuccessStatus": 204
        }))
        
      • 总结: 跨域
        • 前端跨域【 前端做 】
          • jsonp
          • 反向代理
        • 后端跨域
          • 设置请求头
          • cors中间件跨域
    1. 反向代理原理
    • 在前端服务器中短暂的开启一个后端,让这个后端帮助我们请求数据,然后在返回给前端。使用一个叫做 request 的模块进行数据请求
相关标签: express