Vue项目中增加mockjs模拟接口请求

1.安装mockjs

npm install mockjs
yarn add mockjs

2.创建/src/mock/index.js

const Mock = require('mockjs')
/*  
	/mock/api/alarm/getAlarmStatistics  请求路径
	req 请求对象
	res 响应对象
	json() 将对象转换为json字符串，响应给浏览器
*/
module.exports = function(app) {
    // 获取警报统计信息
    app.use('/mock/api/alarm/getAlarmStatistics', (req, res) => {
        var data = Mock.mock({
            code: 200,
            data: {
                todayCount: '@integer(0,10)',
                historyCount: '@integer(60,100)'
            },
            msg: '成功'
        })

        res.send(data)
    })
}

3.在vue.config.js中配置开发服务器

module.exports = {
	devServer: {
		before: require('./mock/index.js')
	}
}

4.在封装的request.js中配置baseUrl

我的习惯是配置baseUrl:'/mock'，然后在/src/mock/index.js中每个接口前加上/mock。这样很好的区分开了模拟接口和真实接口，当后端给到真实接口直接修改一下baseUrl就可以联调了。

5.在uni-app项目中使用mockjs

平台	是否可用
H5	√
安卓	×
ios	×
微信小程序	未知

原因是mockjs的源码中使用了window等api，在app端无法运行，因此不能使用mockjs,目前还没有寻找app端的mock替代方案。

在uni-app项目中app端使用json-server+mockjs实现模拟接口数据

之前没有解决uni-app开发app没办法使用mock模拟请求的办法，最近想到可以使用json-server进行模拟

json-server介绍

官方的介绍语是，不需要任何代码，30秒就可以生成模拟REST API接口。确实如官网介绍所说，利用json数据模拟数据库，自动生成api这种形式对于简单模拟十分的方便。我这里用到的是cli的方式，其他方式不再赘述。 json-server Github (opens new window)

1. 在项目中安装json-server

npm install json-server
yarn add json-server

2. 在项目中创建json-server文件夹

├─json-server
│  └─modules        # 基础数据
│     └─alarm.js    # js形式生成数据，也可以在这里引入mock生成动态数据
│  ├─db.js          # 接入数据，数据的接口，从modules中取出数据
│  ├─routes.js      # 路由转换，因为json-server是固定的默认路由，如果需要特定的api接口配置需要映射一下
│  ├─server.js      # 服务配置，服务的主要入口

3. server.js

const jsonServer = require('json-server')
const db = require('./db.js')
const routes = require('./routes.js')

const port = 3001

const server = jsonServer.create()
const router = jsonServer.router(db)
const middlewares = jsonServer.defaults()
const rewriter = jsonServer.rewriter(routes)
server.use(middlewares)

server.use((request, res, next) => {
    // 对请求的配置和对应返回的修改都可以写在这里
	// 转换默认_page->page
	// if (request.query.page) {
	// 	request.query._page = request.query.page
	// }
	// 转换默认_limit->pageSize
	// if (request.query.pageSize) {
	// 	request.query._limit = request.query.pageSize
	// }
	next()
})

server.use(rewriter) // 注意：rewriter的设置一定要在router设置之前
server.use(router)

server.listen(port, () => {
	console.log(`open mock server at http://localhost:${port}`)
})

4./modules/alarm.js

let Mock = require('mockjs');
let Random = Mock.Random;

const alarm = () => {
    const result = []
    for (let i = 0; i < 100; i++) {
        const element = {
            alarm_id: Random.id(),
            alarm_type: Random.integer(0, 2),
            host: Random.ip(),
            device_id: Random.id(),
            resp_person: Random.cname(),
            resp_status: Random.boolean(),
            alarm_time: Random.datetime(),
            value: Random.integer(),
            remark: '',
            create_time: Random.datetime(),
            create_by: Random.cname(),
            update_time: Random.datetime(),
            update_by: Random.cname()
        }
        result.push(element)
    }
    return result
}
module.exports = {
    alarm: alarm(),
}

这里直接引入了Mockjs的Random组件进行数据模拟如果没有安装参考前文在项目中安装mockjs

5. db.js

const apiAlarm = require('./modules/alarm.js')

module.exports = {
    // alarmList就是默认的符合Restful的api地址，get(http://localhost:3001/alarmList)
	alarmList: apiAlarm.alarm, 
}

然后我们可以把alarmList在routes.js中映射成我们需要的api地址。

6. routes.js

const routes = {
	"/api/alarm/getAlarmList?page=:page&pageSize=:pageSize": "/alarmList?_page=:page&_limit=:pageSize",
}
module.exports = routes

意思是说，如果传递的形式是 /api/alarm/getAlarmList?page=1&pageSize=10 将会直接映射到json-server默认提供的接口形式/alarmList?_page=1&_limit=10进行查询

7. 最后在package.json中增加运行

{
  "scripts": {
    "mock": "node ./json-server/server.js"
  }
}

8. 启动服务

npm run mock
yarn mock

9. 手机端真机调试

手机端真机调试，查看一下本机ip地址，将localhost换成ip地址即可。

记录未来可能遇到的问题

问题	是否尝试
如果是post、put、delete请求参数如何映射？
该api模拟方式在小程序、IOS中是否通用