使用express构建静态服务器[后端渲染]

最新推荐文章于 2024-09-03 12:14:51 发布

kiki-chou

最新推荐文章于 2024-09-03 12:14:51 发布

阅读量603

点赞数

本文链接：https://blog.csdn.net/qq_43948564/article/details/99616554

版权

知识点
1.node.js的框架 epress
-使用express构建静态服务器[后端渲染]
-使用express构建api服务器【接口】
（express命令行工具）
使用express构建静态服务器[后端渲染]
##1.express通过生成器【脚手架】
1.作用：可以帮助我们快速构建一个express项目
2.脚手架的安装
-全局安装[可以使用npm cnpm]
-·$ cnpm i express-generator -g·
-然后直接输全局命令 express
-进行脚手架安装
-eg：express -e web_server_ssr（文件名+ssr）
-npx安装
-npx是npm的一个管理工具，它可以让我们不全局安装就使用某一个包
-npx好处就是可以帮助我们减少使用内存
-但是npx要求npm的版本在5.2以上
-npx是npm会自动携带
3.脚手架的使用
-全局安装的使用
-express -e 项目名称
-npx的使用
-npx express -e 项目名称
4.认识项目目录结构
-1.先找package.json[记录了项目的依赖包信息，npm脚本]
-2.找到了项目启动文件 bin/www
- 它是通过http来做了一个服务器，默认端口是：3000
-这个文件中引入了一个app文件，这个文件是将createSever中的回调函数放到了外面，以模块的形式使用的，这个文件我们叫它：‘入口文件’
-3.看：app.js
-express是由路由和中间件构成的
-路由：可以完成页面的连接或是接口的打造
-中间件：中间件是一个函数，一个具有特定功能的函数
- 中间件有三个类型
- 1. 应用级中间件
- 2. 路由中间件
- 3. 错误处理中间件
-中间件的参数
- 中间件的参数
- 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. ejs语法学习
- 注意： ejs语法符号是不能换行的
- 非转义输出 <%- %> 可以解析xml类型数据
- 转义输出 <%= %> 可以解析普通类型数据
- 流程控制 <% %>
  - if条件语句
  - 循环语句
    使用express构建api服务器【后端接口】
    1.步骤
    1.通过脚手架搭建项目
    npx -e api_server
    2.创建接口（接口就是路由）新建文件position.js
    -接口的打造需要遵循一个规则：restful api
```
    eg：router.route('/position')
                     .post()
                     .get()
                     .delete()
                     .put()
```
```
- npm i装依赖包
- 在app.js中引入文件
- 在测试工具测试接口要把文件中的对象转化为字符串JSON.stringify
```

3.接口测试
1.使用测试用具来测试
- postman
-insomina
2.前端进行接口数据请求
- 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 】
- put 没有实现跨域
- delete 没有实现跨域
- get 可以
- post 可以
- 使用中间件 cors [ 第三方模块 ]
npm i cors -S
- 总结：跨域
- 前端跨域【前端做】
- jsonp
- 反向代理
- 后端跨域
- 设置请求头
···请求头代码
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
···
- cors中间件跨域
4. 反向代理原理

//把数据先请求到后端
   const request = require('request');
request('https://m.lagou.com/listmore.json', (error, response, body) => {
   console.log(body)
})

再安装express插件

npm i express -S

const request = require('request')
const express = require('express')
const app = express()
const port = 5000
const hostname = 'localhost'
app.get('/user', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    request('https://m.lagou.com/listmore.json', (error, response, body) => {
        res.json(JSON.parse(body))
    })
})

bootcdn 中找jquery