mockjs与json-server

817 阅读1分钟

json-server

// 全局安装 json-server
yarn add global json-server
// 运行
--watch 文件更改自动执行
--port 3003 指定启动服务的端口
--host 127.0.0.1  指定访问的主机
db.json 生成的文本文件

json-server --watch --port 3003 --host 127.0.0.1 db.json

Postman

  1. 通过使用 Postman 去测试接口,首先去官网下载这个软件
  2. 下载完成后,创建一个集合,这个集合就是专门同于测试某一个应用的接口,可能会开发小程序,或者是pc端的产品,所以创建集合

Snipaste_2021-12-06_14-04-28.png

Snipaste_2021-12-06_14-07-57.png

  1. 在集合里面,还可以去创建按照功能的不同去创建不同的文件夹,里面是不同的接口测试文件

Snipaste_2021-12-06_14-11-10.png

  1. 创建第一个接口测试

Snipaste_2021-12-06_14-12-26.png

Snipaste_2021-12-06_14-13-06.png

  1. 创建环境变量,代替请求接口前面的基地址,省着每一次我们都需要去书写这个基地址,然后带上接口名称,比较麻烦

Snipaste_2021-12-06_14-22-10.png

  1. 定义完成的环境变量如何进行使用,在开发的时候,可能会有生产环境以及开发环境,都可能需要定义环境变量,所以在定义完成后,需要去切换成定义好的环境变量的配置

Snipaste_2021-12-06_14-27-39.png

  1. postman 添加/更新/删除 添加 Snipaste_2021-12-06_14-41-00.png

更新

Snipaste_2021-12-06_14-44-00.png

删除

Snipaste_2021-12-06_14-47-15.png

mockjs

Mock.js的文档地址,可查看mockjs的语法使用

yarn init // 初始化项目
yarn add mockjs // 安装mockjs
// db.js

const Mock = require('mockjs')

const Rabdim = Mock.Random
module.exports = () => {
    let data = {news: []}
    
    for(let i=0;i<20;i++) {
        data.news.push({
            id: i,
            content: Random.cparagraph(10)
        })
    }
    
    return data
}
// 重新运行 json-server,此时我们需要侦听的是 db.js 而不是db.json
json-server --watch --port 3003 --host 127.0.0.1 db.js

Snipaste_2021-12-06_15-08-22.png