数据Mock
相关教程参考:Vue项目入门教程6-数据mock
这里对这两种方法做一个简单的优化
备注:不管是使用vue
还是react
,数据Mock
的方法是通用的
mockjs
自动获取并注册src/mock/
目录下的js
文件
-
在
src/
目录下新建mock/
目录 -
在
src/mock/
目录下新建index.js
文件
// 首先引入Mock
const Mock = require('mockjs')
// 设置拦截ajax请求的相应时间
Mock.setup({
timeout: '200-600'
})
let configArray = []
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
// index.js文件要排除
if (key === './index.js') return
configArray = configArray.concat(files(key).default)
})
// 注册所有的mock服务
configArray.forEach((item) => {
for (const [path, target] of Object.entries(item)) {
const protocol = path.split('|')
Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
}
})
- 在
src/mock/
目录下新建demoList.js
文件测试
const demoList = [
{
id: 1,
name: 'zs',
age: 23,
job: '前端工程师'
},
{
id: 1,
name: 'zs',
age: 23,
job: '前端工程师'
}
]
export default {
// 可以这么直接返回
'get|/parameter/query': {
code: 200,
message: 'success',
data: demoList
},
// 也可以返回一个记录用于生成响应数据的函数。
// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
'get|/parameter/query1': option => {
// 可以在这个地方对数据进行一系列操作,例如增删改
// option 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性
return {
code: 200,
message: 'success',
data: demoList
}
},
// 也可以这么动态的生成
'get|/parameter/query2': {
code: 200,
message: 'success',
data: {
total: 100,
'rows|10': [{
id: '@guid',
name: '@cname',
'age|20-30': 23,
'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
}]
}
}
}
- 修改入口文件,比如
vue-cli
项目的src/main.js
文件;create-react-app
项目中的src/index.js
文件
import './mock'
- 在代码中使用
ajax
请求/parameter/query
即可看到结果
koa
这里我们简单的把路由分离出来,封装一个处理返回值的中间件。
其他koa
相关知识,参考:Koa笔记
- 在
mock/server/
目录下新建responseFormatter.js
文件
const responseFormatter = async ctx => {
// 如果有返回值,将返回数据添加到data中
if (ctx.body) {
ctx.body = {
code: 200,
msg: 'success',
data: ctx.body
}
}
}
const urlFilter = pattern => {
return async (ctx, next) => {
const reg = new RegExp(pattern)
// 先去执行路由
await next()
// 通过正则的url进行格式化处理
if (reg.test(ctx.originalUrl)) {
responseFormatter(ctx)
}
}
}
module.exports = urlFilter
- 修改
mock/server/index.js
文件
const Koa = require('koa')
const bodyparser = require('koa-bodyparser')
const router = require('./router')
const responseFormatter = require('./responseFormatter')
const cors = require('koa2-cors')
const app = new Koa()
// 可以使用koa2-cors,也可以给devServer配置代理来跨域
// app.use(cors({
// origin: function (ctx) {
// // if (ctx.url === '/test') {
// // return "*"; // 允许来自所有域名请求
// // }
// // return 'http://localhost';
// return '*'
// // 这样就能只允许 http://localhost:8080 这个域名的请求了
// },
// exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
// maxAge: 5,
// credentials: true,
// allowMethods: ['GET', 'POST', 'DELETE'],
// allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
// }))
// middleware
app.use(bodyparser())
app.use(responseFormatter('^/api'))
app.use(router.routes()).use(router.allowedMethods())
app.listen(3001)
- 在
mock/server/
目录下新建router.js
文件,用来存放各响应
const router = require('koa-router')()
router.prefix('/api')
// get请求
router.get('/vote/teams', async ctx => {
const signature = ctx.query.signature
const teams = []
for (let i = 0; i < 20; i++) {
teams.push({
id: i + 1,
name: 'xxx',
icon: 'http://xxx/xxx.jpg',
count: 1000,
// 0 未投票 1 已投票
status: signature && i == 4 ? 1 : 0,
})
}
ctx.body = { teams: teams }
})
// post请求
router.post('/vote/vote', async ctx => {
const { id } = ctx.request.body
ctx.body = { id }
})
module.exports = router
-
修改
package.json
文件,在scripts
下添加命令:"mock": "nodemon --config nodemon --harmony ./mock/server.js"
-
nodemon.json
配置介绍
{
// 重启的命令,默认是 rs
"restartable": "rs",
// 忽略的文件后缀名或者文件夹,文件路径的书写用相对于 nodemon.json 所在位置的相对路径
"ignore": ["./src/**"],
// 表示输出详细启动与重启信息
"verbose": true,
"execMap": {
"": "node",
"test": "gulp test"
},
"events": {
// 子进程(即监控的应用)启动
"start": "gulp",
// 子进程崩溃,不会触发 exit
"crash": "",
// 子进程完全退出,不是非正常的崩溃
"exit": "",
// 子进程重启
"restart": "gulp",
},
// 监控指定后缀名的文件,用空格间隔。
// 默认监控的后缀文件:.js, .coffee, .litcoffee, .json。
// 但是对于没有文件后缀的文件,比如 www 文件,我暂时找不到怎么用 nodemon 去监控,就算在 watch 中包含了,nodemon 也会忽略掉
"ext": "js json",
"watch": [
"./mock/**"
],
"env": {
// env:是开发环境; 运行环境 development; production 是生产环境
"NODE_ENV": "env",
"PORT": "3000"
},
// nodemon 使用 Chokidar 作为底层监控系统,但是如果监控失效,或者提示没有需要监控的文件时,就需要使用轮询模式(polling mode),
// 即设置 legacy-watch 为 true,也可以在命令行中指定
"legacy-watch":false
}
vue-cli4.x
项目配置跨域方法参考:vue-cli2升级成vue-cli3 - 设置代理
create-react-app
项目配置跨域方法参考:react-app-rewired使用 - proxy
发表评论