Mock

数据mock

软件生存周期

• 提出问题（客户）

• 可行性分析 （产品经理（实施） 经济可行性 技术可行性 法律可行性 社会可行性）

• 需求分析（产品经理 （原型图）--- 架构师（整体架构 技术选型 主要的架构图））

• 概要设计（时序图 类图 UML）

• 详细设计（接口设计（接口文档）ui 设计 数据库设计）

• 编程（前端开发（页面 前期接口没出的时候就还要进行mock数据） 后端开发人员（接口）（前后端分离--- 前端有对应的服务器 后端有对应的服务器 前端和后端没关系））

• 测试（前端先要debug 后端先debug（接口文档 swagger） 进行链条 再交给对应的测试人员测试（禅道）白盒测试和黑盒测试）

• 上线运维（运维工程师）

• 产品迭代

开发团队的配置 5个后端 俩个前端 一个ui （测试共用）项目组长 （一个项目组） 项目经理（底下一般是3个项目组）

mock

概述：数据模拟。mock是对于前端来说比较重点的内容，当你的后端接口还没出来的时候，我们的mock就尤为重要。

mock的方式

使用mock.js 进行mock

• 自己使用mock.js生成mock接口

• 借助第三方平台实现对应的mock（mock.js）fastmock 、apipost

使用node环境搭建对应的mock接口

• 使用json-server以json文件来产生对应的接口

后端配合mock （不存在）

fastmock

官网地址

 

mock.js一些方法

"string|1-10": "=", // 随机生成1到10个等号
"string2|3": "=", // 随机生成2个或者三个等号
"number|+1": 0, // 从0开始自增
"number2|1-00.1-3": 1, // 生成一个小数，小数点前面1到10，小数点后1到3位
"boolean": "@boolean( 1, 2, true )", // 生成boolean值 三个参数，1表示第三个参数true出现的概率，2表示false出现的概率
"name": "@cname", // 随机生成中文姓名
"firstname": "@cfirst", // 随机生成中文姓
"int": "@integer(1, 10)", // 随机生成1-10的整数
"float": "@float(1,2,3,4)", // 随机生成浮点数，四个参数分别为，整数部分的最大最小值和小数部分的最大最小值
"range": "@range(1,100,10)", // 随机生成整数数组，三个参数为，最大最小值和加的步长
"natural": "@natural(60, 100)", // 随机生成自然数（大于零的数）
"email": "@email", // 邮箱
"ip": "@ip" ,// ip
"datatime": "@date('yy-MM-dd hh:mm:ss')" // 随机生成指定格式的时间
"list|10": [{
// 参数从左到右依次为，图片尺寸，背景色，前景色（及文字颜色）,图片格式，图片中间的填充文字内容
"image": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')" 
}]

 

模拟登录接口

{
  "code": "0000",
  "data": {
    "verifySuccess": function({_req, Mock}) {
      let body = _req.body;
      return body.username === 'admin' && body.password === '123456';
    },
    "userInfo": function({_req, Mock}) {
      let body = _req.body;
      if (body.username === 'admin' && body.password === '123456') {
        return Mock.mock({
          username: "admin",
          email: "@email",
          address: "@address"
        });
      } else {
        return null;
      }
    },
    "token": function({_req,Mock}){
       let body = _req.body;
       if (body.username === 'admin' && body.password === '123456') {
         return Mock.mock("@word(32)")
       }
       return null
    }
  },
  "desc": "成功"
}

 

 

登录流程 （登录会返回一个token给你 这个token相当于是一个令牌（通行证） 后续你请求一些需要登录完才能访问的接口 都需要带token）token里面有用户数据有过期时间有标识

登录完我们需要将拿到token存起来（localstroage sessionstroage）

下次请求带上这个token（在请求头里面）

axios.defaults.baseURL = "https://www.fastmock.site/mock/63ed6ce74ac932e4d8ed48f176ab80d3/test"
axios.interceptors.request.use(config => {
    console.log(config);
    if(config.url != "/login"){
        config.headers['token'] = JSON.parse(localStorage.getItem('token'))
    }
    return config;
}, error => {
    return Promise.reject(error);
});
axios.interceptors.response.use(response => {
    console.log(response);
    //将token存入localstorage
    localStorage.setItem('token',JSON.stringify(response.data.data.token))
    return response;
}, error => {
    return Promise.reject(error);
});
axios.post('/login', {
    username: "admin",
    password: "123456"
})
    .then(res => {
    console.log(res)
})
    .catch(err => {
    console.error(err);
})

 

使用json-server来帮助我们进行数据mock（必须要借助json文件）对于这个服务的内容进行增删改查的（产生了联系）

json-server

概述

json-server服务只要你有json文件 它可以生成任何服务，它的服务接口都是以resetful做为规范。resetful根据请求类型来完成对应的操作，get请求查询，post添加，delete删除，put修改 patch修改，它返回的数据都是json格式的数据。（完成不了复杂业务）

入门

利用node来进行安装

安装node（版本下载选14的版本）

node14的版本下载地址

 

安装无脑化

验证node是否安装（node是用于执行对应的js文件的 npm用于管理对应的包的）

 

再利用node安装json-server

npm install json-server -g

验证是否安装成功

josn-server

 

监听json文件建立服务

json-server -w 路径下的json文件 -p 端口号（默认是3000）-h 主机名（默认localhost）

兼容对应的json-server命令及node命令到vscode

1.以管理员身份运行vscode（node命令和npm就可以使用）

2.关闭的禁止操作

set-ExecutionPolicy RemoteSigned

测试

db.json (二级必须是一个key:value (value必须是一个对象或者是数组))

{
    "user":{
        "id":"1",
        "username":"jack"
    }
}

监听对应的db.json

json-server -w db.json

 

get请求

json-server的接口 可以通过对应的？进行传参（返回的是一个数组） 也可以进行/的传递对应的id（返回是一个对象）

提供了对应的参数 _limit 对应返回数据的条数 _page表示页数

http://localhost:3000/users?_limit=2&_page=2

post请求 （添加操作）

id如果是字符串 随机生成一个字符串 如果是数值会进行自增操作

delete请求 （删除）

//删除操作 相当于id为1
axios.delete('users/1')
.then(res => {
 console.log(res)
})
put请求 （修改）
//修改操作 put可以修改多个
axios.put('users/1',{
    username:"王二狗"
})
    .then(res => {
    console.log(res)
})