Mock方案

方案

  • 1.JSON-server + express
  • 2.Yapi + mock.js
  • 3.Vue-cli 使用 json server 在本地模拟请求数据

项目中使用 JSON-server 方法

npm install json-server --save

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var jsonServer = require("json-server"); // 引入jsonServer
var jsonServer = new jsonServer(); // 实例化jsonServer
var apiRouter = express.Router();
var fs = require("fs");
apiRouter.route("/:apiName").all(function (req, res) {
  fs.readFile("./db.json", "utf8", function (err, data) {
    if (err) throw err;
    var data = JSON.parse(data);
    if (data[req.params.apiName]) {
      res.json(data[req.params.apiName]);
    } else {
      res.send("no such api name");
    }
  });
});

db.json 是当前访问页面的同级目录下的 json

json-server 使用方法官方简单例简介

1
2
3
4
5
6
7
8
9
10
var jsonServer = require("json-server"); // 引入
var Server = jsonServer.create(); // 搭建server
var Router = jsonServer.router("db.json"); // 关联自己的db数据
var middlewares = jsonServer.defaults();
Server.use(middlewares);
Server.use(router);
server.listen(3000, function () {
  监听端口;
  console.log("JSON Server is running");
});

测试服务器的模拟搭建和使用

案例：json-server 搭建之后在组件中调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  created: function () {
    this.$http
      .post("api/getNewsList") // 调用api下的getNewsList方法
      .then(
        function (res) {
          console.log(res.data); // res.data就是拿到的数据
        },
        function (err) {
          console.log(err);
        }
      );
  },
};

打开控制台，console 里面能到成功的回调数据
Network 中的 XHR 中能看到 getNewList 发送了一个 POST 请求

使用 JSON Server 搭建 Mock 服务器

vue-cli-mock
vue-cli 添加本地 mock 服务框架

1
2
3
4
5
npm install   //install dependencies
npm run dev   //serve with hot reload at localhost:8080
npm run build   //build for production with minification
npm run mock    //run mock serve localhost:3000
npm run mockdev   //run serve with mock serve

mock 目录

1
2
3
4
└── mock/         # mock配置目录
    └── db.json         # mock数据配置
    └── faker-data.js     # 批量生成伪数据
    └── post-to-get.js      # post映射为get中间件

JSON Server是一个创建伪 RESTful 服务器的工具

db.json

1
2
3
4
5
{
  "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],
  "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
  "profile": { "name": "typicode" }
}

在 vue-cli 中的用法
配置流程

1
npm install -g json-server #全局安装

package.json添加命令

1
2
"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"

启动 mock 服务器

npm run mock命令运行 mock server 访问http://localhost:3000/发现db.json下第一级 json对象被解析成为可访问路径
GET 请求具体路径 如：http://localhost:3000/posts 可获取数据

faker.js批量生成伪数据

1
cnpm install faker -G #全局安装 faker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = function () {
  var faker = require("faker");
  faker.locale = "zh_CN";
  var _ = require("lodash");
  return {
    people: _.times(100, function (n) {
      return {
        id: n,
        name: faker.name.findName(),
        avatar: faker.internet.avatar(),
      };
    }),
    address: _.times(100, function (n) {
      return {
        id: faker.random.uuid(),
        city: faker.address.city(),
        county: faker.address.county(),
      };
    }),
  };
};

json-server mock/faker-data.js：在 json server 中使用 faker 请求，http://localhost:3000/address可获取到随机生成的 100 组伪数据

添加中间件

json server使用 RESTful 架构，GET 请求可以获取数据，POST 请求则是添加数据。
开发过程中想直接模拟获取 POST 请求返回结果，可添加 express 中间件将 POST 请求转为 GET 请求
post-to-get.js

1
2
3
4
module.exports = function (req, res, next) {
  req.method = "GET";
  next();
};

package.json启动命令添加运行中间件

1
"mock": "json-server --watch mock/db.json --m mock/post-to-get.js"

重新启动服务，POST 请求就被转换为 GET 请求了

其他需求也可以通过添加不同的中间件实现

代理设置

config/index.js的 proxyTable 将请求映射到 http://localhost:3000

1
2
3
4
5
6
7
8
9
proxyTable:{
    '/api/':{
        target:'http://localhost:3000',
        changeOrigin:true,
        pathRewrite:{
            '^/api':''
        }
    },
},

添加请求测试效果

1
axios.post("/api/posts", {}).then((m) => console.log(m.data));

npm run mockdev启动带 mock 数据的本地服务

Vue-cli 使用 json server 在本地模拟请求数据

后台还没给接口之前，使用 JSON-Server 搭建一台 JSON 服务器，将接口要返回的数据放在 json 文件里面 1.安装依赖

1
2
cnpm install json-server –save	 #json server
cnpm install axios --save 	#使用axios发送请求

2.创建 db.json 文件放置在跟 index.html 平级的目录中（如 static 目录）/build 文件夹下 3.配置 build/dev-server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//json-server 假数据
const jsonServer = require('json-server') // 引入文件
const apiServer = jsonServer.create(); //创建服务器
const apiRouter = jsonServer.router('db.json') //引入json 文件
const middlewares = jsonServer.defaults(); //返回JSON服务器使用的中间件
// 监听端口
apiServer.use(middlewares)
apiServer.use('/json',apiRouter)
apiServer.listen( port + 1,()=>{
    //json服务器端口:比如你使用8080,这里的json服务器就是8081端口
    console.log('JSON Server is running')
    //json server成功运行会在git bash里面打印出'JSON Server is running'
})
var uri = ‘http://localhost:’ + port
var _resolve
var readyPromise = new Promise(resolve =>{_resolve = resolve})

npm run dev启动项目，浏览器输入 localhost:8081，就可以访问到你的 json 文件

3.服务已启动成功加上相应后缀即可访问文件里面的数据，如localhost:8081/posts

4.请求接口代理/浏览器代理设置
config/index.js

1
2
3
4
5
6
7
8
9
proxyTable: {
  '/api': {
    target: 'http://localhost:8081/',  // 通过本地服务器将你的请求转发到这个地址
    changeOrigin: true,  // 设置这个参数可以避免跨域
    pathRewrite: {
      '/api': '/'
    }
  },
},

验证

5.axios 请求 json 数据
main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import axios from "axios";
Vue.prototype.$ajax = axios; // 将axios挂载到Vue实例中的$ajax上面,在项目中的任何位置通过this.$ajax使用
// 在组件中的使用方式，比如：
this.$ajax({
  url: "/api/articles", //api 代理到json文件地址，后面的后缀是文件中的对象或数组
  method: "get", // 请求方式
  // 可添加axios文档中的各种配置
})
  .then(function (res) {
    console.log(res, "成功");
  })
  .catch(function (err) {
    console.log(err, "错误");
  });
// 简写
this.$ajax.get("api/publishContent").then(
  (res) => {
    console.log(res, "请求成功");
  },
  (err) => {
    console.log(err, "请求失败");
  }
);
前端
#工程化
Mock方案
https://www.pengsifan.com/2021/01/05/Mock方案/
作者
Van
发布于
2021年1月5日
许可协议