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

程序员文章站 2022-06-01 09:27:10
...
1. express通过生成器 【 脚手架 】
作用： 可以帮助我们快速构建一个express项目
脚手架的安装
全局安装 [ 可以使用npm、cnpm ]
$ cnpm i express-generator -g

npx安装
npx是npm的一个管理工具，它可以让我们不全局安装就使用某一个包
npx好处就是可以帮助我们减少使用内存
但是npx要求npm的版本在5.2以上
npx是npm会自动携带


脚手架的使用

全局安装的使用
express -e 项目名称

npx的使用
npx express -e 项目名称


认识项目目录结构

先找package.json [ 记录了项目的依赖包信息，npm脚本 ]


找到了项目启动文件 bin/www

它是通过http来做了一个服务器，默认端口是：3000
这个文件中引入了一个app文件，这个文件是将createServer中的回调函数放到了外面，以模块化的形式使用的，这个文件我们叫它： ‘入口文件’


看： app.js

express是由路由和中间件构成的
路由： 可以完成页面的连接或是接口的打造
中间件： 中间件是一个函数，一个具有特定功能的函数
中间件有三个类型

应用级中间件


路由中间件


错误处理中间件


中间件的参数
req : 全称： request 表示请求
res : 全称： response 表示响应
next: 表示request和response之间的连接 ， 相当于桥梁的作用
next如果断开，那么请求和响应就会中断 next( false )


中间件要想调用，必须通过app的use方法来调用




路由中间件

路由中间件人家是以模块化的形式使用
看： routes/xx.js
有两个路径，这两个路径会拼接在一起
举例： /home /banner /home/banner 二级路由

为什么res.render(‘index’)
配置了模板的路径
配置了后缀名省略




看： view/xxx.ejs

ejs语法
ejs文件中可以直接在模板语法中使用数据


手动打造一个express的使用流程
在routes里建一个home.js
去app.js里引入这个模块
回到home.js渲染页面（渲染前端页面只用get）requder.get(’/’,function(req,res,next){res.render(‘home’,{data}) })
页面复制到public里
获得数据渲染页面时要注意数据类型的转换



ejs语法学习

注意： ejs语法符号是不能换行的
非转义输出 <%- %> 可以解析xml类型数据
转义输出 <%= %> 可以解析普通类型数据
流程控制 <% %>
if条件语句
循环语句





通过express来打造api服务器【 后端接口 】
步骤
通过脚手架搭建项目
创建接口
接口就是路由
接口的打造需要遵循一个规则： 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 




接口测试


使用测试用具来测试

postman
insomina [ 安装无要求，一路next ]
数据是对象的话需要JSON.stringify()才能正常显示


前端进行接口数据请求

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中间件跨域





反向代理原理

在前端服务器中短暂的开启一个后端，让这个后端帮助我们请求数据，然后在返回给前端。使用一个叫做 request 的模块进行数据请求
如何使用express构建项目，以及打造接口

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

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

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

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

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

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

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

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

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