06月28, 2019

mock

mockjs

拦截ajax请求:mock里面有一样的路径 直接走了mock 生成随机数据

EasyMock的使用

https://www.easy-mock.com/ 创建项目,在线上创建接口和返回数据 alt

在项目中放入对应的根路径 请求对应的接口即可

request.js文件
baseUrl: 'https://www.easy-mock.com/mock/5d6655618cc3474247ade0fb/xietongbangong',

api文件
import request from '@/common/request'
export default {
  async get_dutytable () {
        return await request.get('/duty_table');
  },
}

缺点:经常打不开网站,请求不到数据

WxMock的使用

1.在app.js 引入WxMock.js

2.在app.js中书写需要模拟的接口及返回结构,只要在 request 中使用url为 mock对应的地址 就会返回响应mock数据

 Mock.mock('https://xxx.com/users',{
        "code":200,
        "data|1-20":[
            {
                "name":function() {
                  return Mock.Random.cname()
                },
                "lastLogin":function() {
                  return Mock.Random.datetime()
                }
            }
        ]
 })

小程序mock

1.修改package.json文件,新增如下:

    "devDependencies": {
    "apidoc": "^0.17.6",  //生成给后台的接口文档
    "express": "^4.16.3",  //本地服务器
    "mockjs": "^1.0.1-beta3", //虚拟数据
    "webpack-api-mocker": "^1.5.7", //本地接口
    }
    "scripts": {
    "mock": "node ./mock/server.js", //开启服务器
    "api": "apidoc -i ./mock -o ./doc",//生成给后台的接口文档,生成后在根目录生成一个Doc目录,打开里面的index.html是具体内容
    }

2.根目录新增文件夹mock

mock包含两个文件 mocker.js 和 server.js

mocker.js里面存放用mock生成的数据 和 自定义的接口 以及编辑要给后台生成的api文件的内容

server.js 本地环境 (每个项目都可以复制这个文件)

const path = require('path');
const express = require('express');
const apiMocker = require('webpack-api-mocker');

const app = express();

apiMocker(app, path.join(__dirname, 'mocker.js'));
app.listen(8080);

mocker.js和server.js写好后

npm run api 生成给后台的接口文档,生成后在根目录生成一个Doc目录,打开里面的index.html是具体内容

npm run mock 开启本地的服务器 打开localhost:8080/game/game/all(此处是示范,端口可以在server.js中修改,后面是自定义的接口)可以看到对应数据

3.在小程序中使用自己的虚拟数据

在app.wpy中配置一下请求的根路径

http.config({

rootUrl: "http://localhost:8080", 或者自己的ip

});

后面的请求数据都和之前一样,get和post要和mock中的接口对应

上线的时候 把rootUrl改为外网的根路径即可

本文链接:http://zzl.bzpwhite.cn/post/mock.html

-- EOF --

Comments