express的web服务器与api服务器

express

1.express web 服务器
2.express api 服务器

.express web 服务器 操流程
1.使用express搭建静态服务器

• 静态服务器
• 后端渲染：
  后端语言+后段渲染 生成前端的HTML结构然后发送到前台
  2.安装express模块
  3.创建服务器
  4.读取文件发送给前台
  5.通过app对象和中间件把文件发送给前台 app.get(‘路由路径’,(三个参数)=>{})

const express = require('express')
const app = express()
const port = 3060;
const host = 'localhost'
const fs = require('fs')
app.get('', (req, res, next) => {
fs.readFile('./html/index.html', 'utf8', (error, data) => {
if (error) {
console.log(error)
} else {
res.send(data)
}
})
})
app.listen(port, host, () => {
console.log(`服务器运行在：http://${host}:${port}`)
})

2.express api 服务器 流程

在api服务器中：一个路由就是一个api 也就是一个后端接口

1.安装express模块
2.创建服务 其中监听服务器不用输出路径
3.同级目录下创建路由文件夹（router）

4.在路由文件夹中创建路由文件
5.路由文件也要安装express
6.创建router模块 const router=express.Router（）得到路由对象
7.打造接口
- 格式：router.get( 路由路径， 回调函数 ) 回调函数内写返回的数据
8.模块导出 module.exprets=router

const express = require('express')
const router = express.Router()
router.get('', (req, res, next, ) => {//如果前面加了/home 测试接口的时候也要加上该地址
res.json({
name: 'lisalisa',
age: 18
})
})
module.exports = router

9.引入模块儿 const userRouter=require(‘路由的路径’)
10.使用app.use(‘’,userRouter)使用引入的模块

const express = require('express')
const app = express()
const port = 3070
const host = 'localhost'
const userRouter = require('./router/user')
app.use('', userRouter)
app.listen(port, host, () => {
console.log('api服务器')
})

express-generator

(快速生成工具)

1.安装 【两种方式】

• 全局安装

$ cnpm i express-generator -g
express -e 项目名称

• 不使用全局安装

$ npx express -e 项目名称 -e表示使用ejs模板 -e是可以换的

2. 项目目录结构
   bin
   www 创建服务器，并监听服务器
   public 静态资源目录
   img
   css
   routes
   路由文件
   view
   模板文件 ejs/pug
   app.js 整个项目的入口文件
   中间件绑定的
   中间件类型 【 3种 】
   • 应用级中间件（ 只是一个单一功能， 如：绑定静态资源目录）
   • 路由中间件 （ 暴露一个路由 ）
   • 错误处理中间件 （ 处理项目的错误 ）
     package.json
     记录项目依赖包配置信息和项目的命令脚本\

后端渲染
使用get
1.在自动生成的routers文件夹建立需要渲染的数据打造接口 与服务端进行连接

• 安装express模块

• 创建路由

• 打造接口，回调里面写返回的数据

• 暴露接口

• 安装request模块 请求数据

• 请求渲染的路径

• 检查返回的数据是什么类型（是否需要转类型）

• 将数据发出去用res.render(’’,{})

• 在views下新建cart.ejs

• 这个页面是前端显示的页面

• 用ejs语法

<!-- 数据展示 -->
<h3 style = "background: red;"> <%= data.msg %> </h3>
<!-- 非转义输出 将xml类型数据 解析 -->
<div>
<%- data.msg %>
</div>

<!-- 流程控制 if while for -->

<% if ( data.flag ) {%>
<h3> 这里是flag为true </h3>
<% } %>


<% if ( data.flag ) {%>
<h4> 这里是true </h4>
<%} else {%>
<h5> 这里是false </h5>
<%}%>
<!-- 列表循环 -->
<ul>
<% data.lists.forEach( function ( item ) {%>
<li>
<h3> 商品名称： <%= item.shopName %> </h3>
<h4> 商品价格： <%= item.price%> </h4>
</li>
<% })%>
</ul>

以渲染拉勾的一段数据到前端页面为例

• 以cart.js为例

const express=require（‘express’）
const router=express.Router（）
 const request=require('request')
 
 router.get('',(req,res,next)=>{
 request('
'https://m.lagou.com/listmore.json',(error,response,body)=>{
    此时输出的body类型为字符串所以要转成对象
    const result=JSON.parse(body).content.data.page.result
    
    res.render（'cart',{
        data；{
        result，
        msg：true
        }
    }） 
 })
 })
 module.exports=router

• 服务器要引入cat.js路由模块

var cartRouter = require( './routes/cart' )

• 绑定中间件

app.use('/cart', cartRouter )

这样就可以渲染一个数据到前端页面了

2. 问题： 二阶段使用php来暴露接口的时候，大家如何暴露的？
   以前：
   购物车接口 （ CURD）
   增 : http://localhost:3000/shopcar/add
   删 : http://localhost:3000/shopcar/del
   改 : http://localhost:3000/shopcar/update
   查 : http://localhost:3000/shopcar/search

现在：
购物车接口 （ CURD ）
接口只有一个，但是请求方式【 7个 】多个
增 : post请求
http://localhost:3000/shopcar

删 : delete请求
http://localhost:3000/shopcar
改 : put请求
http://localhost:3000/shopcar
查 : get请求
http://localhost:3000/shopcar
put和delete会自动携带 请求 options 请求
上面这种规则就是 restful api
restful api就是接口暴露的规则

文件系统版的登录注册

1.安装自定义的api-server文件

• npx express -e api-server
  2.装依赖 npm i
  3.在router文件下打造一个登录注册的接口 （以下以form.js为例）

4. 登陆注册需要添加数据查询数据所以需要以下的大局：

1.安装express模块
const express = require (‘express’)

2.此时是用express打造路由接口所以需要创建路由
3. 导出模块
4.路由创建好了需要去服务端进行引用和创建路由中间件
5.这里需要些多个任务 所以把router.get(’’,()=>{})改写成多个任务需要路径单独写 （如下）
6.首先需要注册 注册时往数据库里面添加数据所以用post 方法

12.保存代码需要保存（以新建一个data文件夹为例）
13.保存需要先获取前端代码 req.body 显示前端发来的数据
14.往文件里添加数据需要引读取文件的fs
15.往data文件夹里面写文件：fs.write()
16.写文件需要的路径必须是磁盘路径所以引用path

const router=express.Router()

const fs=require('fs')
const path=reqire('path')
router
        .route('/form')// 这里写了路径在服务端1引用的路由中间件的时候就不需要写路径了
            // .get()   查找数据
            //.post() 添加数据
            //.delete() 删除数据
            //.put() 修改数据
       .post((req,res,next)=>{
        
fs.writeFile(
path.join(__dirname, '../data/user.txt'),
JSON.stringify(req.body),
(error) => {
    
if (error) throw error
console.log('保存成功')
})

res.render('form', {
data: JSON.stringify({
res: true,
status: '添加成功',
})
})




)

     
       })




module.exports=router

7.注册需要注册页面
8.在api-server同级目录下创建前端FE文件添加注册页面
9.给注册按钮添加点击事件 发送ajax请求 把数据发送给后端
10.我们需要读取发来的数据然后用post方法保存下来
11.后端接收数据并保存（如上面代码）

<script>
$('.register').on('click', function() { //点击注册把注册的信息提交给后端
$.ajax({
type: "POST",
url: "http://localhost:3000/form",
data: {
username: $('.username').val(),
password: $('.password').val()
},
success: function(response) {
console.log(response)
}
});
})
</script>

17.登录页面 .登录 发送 get ajax

<script>
//获取dom
$('.register').on('click', function() {
//发ajax
$.ajax({
url: 'http://localhost:3000/form',
method: 'GET',
data: {
username: $('.username').val(),
password: $('.password').val()
},
success(res) {
if (JSON.parse(res).statusCode === 1) {
location.href = "http://www.baidu.com"
} else {
alert('用户名或是密码错误')
}
}
})
})
</script>

18.登录需要查找数据库get（）方法

• 需要连接数据库
• 查询数据库
• 将查询的数据给前台
• 创建form.ejs
  1,首先需要读data文件夹里面的user文件里面是否存在数据
  2.此时获得的保存下来的数据是字符串 所以需要转成对象
  3.将前端的数据与后端相应的数据进行比较看是否相等

.get((req, res, next) => { //get 是查询
// 1.需要连接数据库
// 2.查询数据库
// 3.将查询的数据给前台
// 4.创建form.ejs
fs.readFile(path.join(__dirname, '../data/user.txt'), 'utf8', (error, data) => {
// console.log(data)
const user = JSON.parse(data)
if (req.query.username === user.username && req.query.password === user.password) {
res.render('form', {
data: JSON.stringify({
res: true,
status: '登录成功',
statusCode: 1
})
})
} else {
res.render('form', {
data: JSON.stringify({
res: true,
status: '登录失败',
statusCode: 0
})
})
}
})
})