前端用来模拟数据的 mock-服务器 （json-server）

MOCK 服务器

一、mock 简介

• 向mock提供测试数据的格式要求，字段说明信息，mock可以提供符合要求的数据返回。
• 其实思路很简单，但是解决了很大的问题。
  1. 前后端分离，前端可以不必等后端接口，可以直接请求mock获得数据。
  2. 前端不等后端，可能的做法是本地配置json串，这样做有3个不好的地方：① 耗费时间精力 ② 自己造数据也可能不一定符合要求 ③ 自己造json数据，代码不是ajax方式，后期后端提供接口了之后还是要修改。
  3. mock可以提供丰富的随机数，也可以辅助测试。

二、mock 使用

1.全局安装 json-server 包

$ npm i -g json-server

2.启动 json-server

• 定义一个数据库文件 名字为 db.json

  {
         
    "users":[
      {
         
       "username":"admin",
       "password":123456,
        "id":1
      },
       {
         
       "username":"yeshuai",
       "password":123456,
        "id":2
      },
      
    ], 
    "role":[
        {
         
        "id": 1,
        "roleName": "超级管理员",
        "roleRight": [
          {
         
            "category": "文章管理",
            "list": ["文章列表", "创建文章", "文章预览", "文章分类"]
          },
          {
         
            "category": "用户管理",
            "list": ["用户列表", "添加用户", "删除用户", "修改用户"]
          },
          {
         
            "category": "权限管理",
            "list": ["角色列表", "权限列表", "添加角色", "修改角色", "删除角色"]
          }
        ],
        "default": true
      },
  
      {
         
        "id": 2,
        "roleName": "管理员",
        "roleRight": [
          {
         
            "category": "文章管理",
            "list": ["文章列表", "创建文章", "文章预览", "文章分类"]
          }
        ],
        "default": true
      },
  
      {
         
        "id": 3,
        "roleName": "小编",
        "roleRight": [
          {
         
            "category": "文章管理",
            "list": ["文章列表", "创建文章", "文章预览"]
          }
        ],
        "default": true
      }
    ]
  }
  

• 再db.json文件目录下运行 下面的指令

$ json-server --watch db.json  --port 5000       //db.json是json文件

• 执行上述指令，在localhost ：5000 中就有了服务器source 资源
• json 文件{}中，最外层每个key （users，role）就相当于一个数据库
• mock 服务器不存在跨域问题，json-server包已经配置了cors跨域资源共享

3.请求mock模拟的数据 restful 类型接口

• 想要查询数据------------------就用get

• 想要增加数据------------------就用post

• 想要更新数据------------------就用put

• 想要删除数据------------------就用delete

1.get -----------查

import axios from "axios"
var obj={
     username:"admin",password:123456}
axios.get(`http://localhost:5000/users？username=${
       obj.username}&password=${
       obj.password}`).then(res=>{
     
  cosole.log(res.data)
})

//上向users数据库查询username=admin，password=123456的数据 ，数据库存在不

2.post-----------增

axios.post("http://localhost:5000/users",{
  username："admin",
  password:123456
	//id可以不写  会自增
}).then(res=>{
  cosole.log(res.data)
})

3.put ------------改

axios.put("http://localhost:5000/users/1",{
     
  username："admin",
  password:666666 
	//id可以不写  会自增
}).then(res=>{
     
  cosole.log(res.data)
})
//这个是更新users数据库里id=1的 密码改称666666

4.delate ----------删

axios.delate("http://localhost:5000/users/1").then(res=>{
     
  cosole.log(res.data)
})
这个是删除users数据库里id=1的数据

4.delate ----------删

axios.delate("http://localhost:5000/users/1").then(res=>{
     
  cosole.log(res.data)
})
这个是删除users数据库里id=1的数据