Vue3中 使用json-server作为虚拟数据库存储数据

JSON-server的基本使用

JSON-server的安装

1.  JSON-server一般使用0.17.4的版本： npm i json-server@0.17.4 -g

2.  已经安装了JSON-server，在命令行下查看版本号：json-server -v

3.  如果已经安装了其它版本的JSON-server，可以先卸载：npm uninstall json-server -g

JSON-server的启动

1.  在一个独立的空目录下去启动JSON-server，这个目录不要放到前端代码中

2.  在该目录下执行：json-server -w db.json 就能启动起来JSON-server

● 会在空目录下创建默认的db.json

"goods": [
    {
      "id": 1,
      "img": "https://img0.baidu.com/it/u=2612044646,3112866507&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      "title": "华为Mate60",
      "desc": "华为旗舰手机",
      "price": 8999,
      "amount": 100
    },
    {
      "id": 2,
      "img": "https://img2.baidu.com/it/u=1812068763,4050646555&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500",
      "title": "华为Mate50",
      "desc": "华为旗舰手机50",
      "price": 7999,
      "amount": 50
    }
  ]

● 会默认占用3000端口启动，加上-p参数来制定端口号：json-server -w db.json -p 3001

JSON-server的使用

1.  获取列表数据（常用于分类页、搜索结果页等，展示列表数据的场合）：

方法：get

URL：数据字段 /goods

const init = async () => {
    const res = await axios.get('http://localhost:3000/goods')
    res.data // 就是列表数据
}

2.  获取详情数据

方法：get

URL：数据字段/id `/goods/${id}`

const init = async () => {
    const res = await axios.get(`http://localhost:3000/goods/${id}`)
    res.data // 就是列表数据
}

3

JSON-server使用中间件实现登录接口

中间件的意义：仅仅是db.json，无法带相关逻辑；跟复杂的逻辑处理，需要借助中间件提供的Node.js运行环境进行特殊处理。

此外，借助中间件我们可以创建独特的接口。

token.js

// token: 看起来是乱码、随机数。可以防止被解密。无法由token字符串，反推出用户使用的密码等信息
// 在知道密码的情况下，可以迅速反解加密前的信息，能够方便做验证
const jwt = require("jsonwebtoken");
module.exports = function (req, res, next) {
  // req: 请求对象；res: 接口返回数据对象; next: 调用时把控制权传递给下一个中间件
  if (req.method == "POST" && req.path === "/login") {
    // if判断中，就是对登录接口进行的处理
    const { username, password } = req.body;
    if (username === "zhangsan" && password === "123456") {
      // jwt.sign的第二个参数，是固定的字符串，只需要保证，加密和解密
      const token = jwt.sign({ username }, "2024年依旧热爱前端");
      // 生成token后，通过网络请求接口返回给前端
      return res.status(200).json({
        msg: "登录成功",
        data: token,
      });
    } else {
      return res.status(200).json({
        msg: "登录失败，账号密码错误",
        data: "",
      });
    }
  }

  // 后续的所有请求，都需要在header上带上token
  // 接口程序在去到请求之后解析出来token
  try {
    jwt.verify(req.headers.token, "2024年依旧热爱前端");
  } catch (e) {
    return res.status(200).json({
      msg: "token已失效",
    });
  }
  next();
};

启动中间件： json-server -w db.json -m token.js

增加了-m参数，跟的是中间件的完整路径

前端发送登录请求：

import axios from 'axios'
import { showToast } from 'vant'

const doLogin = async (values) => {
  const res = await axios.post('http://localhost:3000/login', values)
  const token = res.data.data
  if (token) {
    localStorage.setItem('todos-token', token)
    router.push({ name: 'Home' })
  } else {
    showToast('登录失败！')
  }
}