freemockjs v2.2.10
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。
快速入门
在 mock.config.js
文件里添加如下代码:
module.exports = {
// 代理,请求https://mocks.alibaba-inc.com/mock/ncrm/agent/list
"/ncrm/agent/list": "https://mocks.alibaba-inc.com/mock",
"/ncrm/*": "swagger https://imp-daily.uc.test/ncrm/v2/api-docs", // swagger
"/cpt/*": "/mock", // 读取本地 mock 文件夹的 *.json 文件
"/test11/*": {
status: 0,
message: 'success'
},
"/test22/*": function(req, state) {
const param = req.query
return {
status: 0,
result: {
pageSize: param.pageSize,
header: req.header,
Cookie: state.Cookie
}
}
},
// 手动设置响应值响应头
"/test33/*": function(req, state, res) {
const param = req.query
res.set({
'ETag': '12345'
})
res.status(201).json(state.mock({
status: 0,
result: {
pageSize: param.pageSize,
header: req.header,
Cookie: state.Cookie
}
}))
}
}
当客户端(浏览器)发送请求,如请求 http://localhost:8080/ncrm/agent/list 的时候,此时 freemock 会在本地的服务里拦截 /ncrm/agent/list 的请求,然后去请求 https://mocks.alibaba-inc.com/mock/ncrm/agent/list 下的数据返回。 如果请求 /cpt/b 这个接口,则会到本地 mock 文件夹下读取 /cpt/b.json 文件的数据。本地如果没有文件会自动创建。
获取请求参数
有时候我们需要获取请求的 param/query 参数,来作为返回值。例如我们想根据请求的 pageSize 来确定返回数据的长度,可以使用 @param 来获取请求参数。例如:
module.exports = {
"/api/test": {
status: 0,
"data|@param.pageSize": [{
name: "@name",
age: "@integer(0, 100)",
}]
},
}
当浏览器发出 http://localhost:8080/api/test?pageSize=12 请求的时候,则返回的数据中 data 的长度为 12。
{
status: 0,
data: [ // 长度为 10
{
name: 'mock',
age: 11
}
]
}
使用 swagger
如果后端能提前提供 swagger ,可以引入 swagger 生成数据。配置的时候在前面加上 swagger + 空格 即可。
module.exports = {
"/ncrm/*": "swagger https://imp-daily.uc.test/ncrm/v2/api-docs"
}
此时当浏览器访问 http://localhost:8080/ncrm/agent/list 的时候,会去 swagger 查找相应的规则,然后返回数据。
引入 Mock.js
Mock.js 是常用的辅助生成模拟数据的第三方库。freemock 已经引入了 mockjs,所以不需要我们再手动引入,直接在设置 data 的时候使用 mockjs 语法即可,比如:
module.exports = {
'/api/tags': {
'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
},
}
生成的数据
{
list: [
{
name: '北京市',
value: 23,
type: 1
}
... // 此处长度为 100
]
}
在生成数据时,freemock 会去执行 mock 函数解析 mockjs 的语法。当然同样可以在 json 文件里这么用。例如:
module.exports = {
'/api/tags': '/mock'
}
/mock/api/tags.json
{
"list|100": [{ name: "@city", "value|1-100": 50, "type|0-2": 1 }]
}
接入非 cli 工具
npm install freemockjs --save-dev
server.js 接入
在 server.js 里加入:
const freeMock = require('freemockjs')
const bodyParser = require('body-parser')
.
.
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(freeMock(path.resolve('./mock/config.js'))) // freeMock(path.resolve('./mock/config.js') 为配置文件的地址
在 vue-cli 接入
vue.config.js
const bodyParser = require('body-parser')
const freeMock = require('freemockjs')
...
module.exports = {
baseUrl: '..**',
devServer: {
port: 9010,
before: function(app) {
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(freeMock(path.resolve('./mock/config.js')))
}
}
}
3 years ago
3 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago