传统服务器

传统服务器的结构是基于MVC模式
Model -- 数据模型
View -- 视图，用来呈现
Controller -- 控制器，复杂加载数据并选择视图来呈现数据

传统的服务器是直接为客户端返回一个页面，但是传统的服务器并不能适用于现在的应用场景

前后端分离

现在的应用场景，一个应用通常都会有多个客户端（client）存在
web端 移动端（app） pc端
- 如果服务器直接返回html页面，那么服务器就只能为web端提供服务
其他类型的客户端还需要单独开发服务器，这样就提高了开发和维护的成本

如何解决这个问题？
- 传统的服务器需要做两件事情，第一个加载数据，第二个要将模型渲染进视图
- 解决方案就将渲染视图的功能从服务器中剥离出来，
服务器只负责向客户端返回数据，渲染视图的工作由客户端自行完成
- 分离以后，服务器只提供数据，一个服务器可以同时为多种客户端提供服务器
同时将视图渲染的工作交给客户端以后，简化了服务器代码的编写

REST

• REpresentational State Transfer 表示层状态的传输

  • Rest实际上就是一种服务器的设计风格

  • 它的主要特点就是，服务器只返回数据

  • 服务器和客户端传输数据时通常会使用JSON作为数据格式

• 请求的方法：

  • GET加载数据
  • POST 新建或添加数据
  • PUT 添加或修改数据
  • PATCH 修改数据
  • DELETE 删除数据
  • OPTION 由浏览器自动发送，检查请求的一些权限

postman
- 这是一个软件，通过它可以帮助向服务器发送各种请求
帮助测试API

REST风格的服务器

yarn init -y

yarn add express

npm install -g nodemon Nodemon当检测到目录中的文件更改时，它会自动重启node应用程序。

编写一个简易服务器

const express = require('express')
const app = express()

// 解析请求体格式的中间件
app.use(express.urlencoded({ extended: true }))
// 解析json格式请求体的中间件
app.use(express.json())

let STU_DATA = [
  { id: "1", name: '孙悟空', age: 20, gender: '男', address: '花果山' },
  { id: "2", name: '猪八戒', age: 20, gender: '男', address: '高老庄' },
  { id: "3", name: '沙和尚', age: 20, gender: '男', address: '流沙河' }
]

app.get('/student', (req, res) => {
  res.send({
    status: 'ok',
    data: STU_DATA
  })
})

app.get('/student/:id', (req, res) => {
  const id = req.params.id
  const stu = STU_DATA.find((item) => {
    return (item.id === id)
  })
  res.send({
    status: 'ok',
    data: stu
  })
})

app.post('/student', (req, res) => {
  console.log(req.body);
  const { name, age, gender, address } = req.body;
  const stu = {
    id: +STU_ARR.at(-1).id + 1 + "", name, age, gender, address
  }
  STU_DATA.push(stu)
  res.send({
    status: 'ok',
    data: stu
  })
})

app.put('/student', (req, res) => {
  const { id, name, age, gender, address } = req.body
  const updataStu = STU_DATA.find(item => item.id === id)
  if (updataStu) {
    updataStu.name = name;
    updataStu.age = age;
    updataStu.gender = gender;
    updataStu.address = address;

    res.send({
      status: 'ok',
      data: updataStu
    })
  } else {
    res.status(403).send({
      status: 'error',
      data: "学生id不存在"
    })
  }
})

app.delete('/student/:id', (req, res) => {
  let delStu = {}
  STU_DATA = STU_DATA.filter((item) => {
    if (item.id === req.params.id) delStu = item
    return item.id !== req.params.id
  })
  if (delStu) {
    res.send({
      status: 'ok',
      data: delStu
    })
  }
  else {
    res.status(403).send({
      status: 'error',
      data: "学生id不存在"
    })
  }
})

app.listen(3000, () => {

})

Ajax

• A 异步 J JavaScript A 和 X xml

• 异步的js和xml

• 它的作用就是通过js向服务器发送请求来加载数据

• xml是早期AJAX使用的数据格式,目前数据格式都使用json

• 可以选择的方案：① XMLHTTPRequest（xhr） ② Fetch ③ Axios

CORS (跨域资源共享)

• 跨域请求
  • 如果两个网站的完整的域名不相同
    • a网站：http://haha.com
    • b网站：http://heihei.com
  • 跨域需要检查三个东西：协议 域名 端口号
    • http://localhost:5000
    • http://127.0.0.1:5000
    • 三个只要有一个不同，就算跨域
  • 当我们通过AJAX去发送跨域请求时，浏览器为了服务器的安全，会阻止JS读取到服务器的数据
• 解决方案
  • 在服务器中设置一个允许跨域的头
    • Access-Control-Allow-Origin
  • 允许那些客户端访问我们的服务器 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

app.use((req, res,next) => {
    // 设置响应头
    res.setHeader("Access-Control-Allow-Origin", "*")
    res.setHeader("Access-Control-Allow-Methods", "GET,POST")
    res.setHeader("Access-Control-Allow-Headers", "Content-type")
    // Access-Control-Allow-Origin 设置指定值时只能设置一个
    // res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500")
    // Access-Control-Allow-Methods 允许的请求的方式
    // Access-Control-Allow-Headers 允许传递的请求头
    next()
})

Fetch

• fetch是xhr的升级版，采用的是Promise API

• 作用和AJAX是一样的，但是使用起来更加友好

• fetch原生js就支持的一种ajax请求的方式

fetch("http://localhost:3000/students", {
  method: "post",
  headers: {
    // application/x-www-form-urlencoded 表单项
    //用来指定发送的数据是什么类型 JSON类型数据
    "Content-type": "application/json"
  },
  // 通过body去发送数据时，必须通过请求头来指定数据的类型
  body: JSON.stringify({
    name: "白骨精",
    age: 16,
    gender: "女",
    address: "白骨洞"
  })
})