1、安装mock,express
npm i express -D
npm i mockjs -D
创建模拟数据文件夹mock/
,再创建mock/index.js
const express = require('express') // 引入express
const Mock = require('mockjs') // 引入mock
let app = express()
// 解决跨域
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
res.header('Access-Control-Allow-Headers', 'X-Requested-With')
res.header('Access-Control-Allow-Headers', 'Content-Type')
next()
})
// 获取零售户信息
app.use('/mockapi/test', function (req, res) {
console.log('mockAPI截取的数据了')
console.log(req)
res.json(Mock.mock({
'code': 0,
'msg': '执行成功'
}))
})
app.listen('8090', () => {
console.log('监听端口 8090')
})
创建完成后,切换到mock目录下,运行 node index.js
此时,在浏览器输入 http://127.0.0.1:8090/mockapi/test
即可获取{code:0, msg:'执行成功'}
这样的话,一个简单的本地数据服务器就搭建起来了,只要在vue项目中的请求路径和mock/index.js
中的路径匹配起来就可以模拟接口数据返回了,模拟时间的话,可以在返回最值里加上setTimeout(()=>{//执行}, 1000)
我在项目中是配置.env
文件
VUE_APP_BASE_API="http://127.0.0.1:8090/mockapi"
配置request.js
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API
})
export default service
index.vue
页面中
import request from '@/utils/request.js'
request({
url: '/test',
method: 'get'
}).then(res => {
console.log(res)
// 拿到 {code:0, msg:'执行成功'}
})