mockJs使用的两种方案
一、直接引入
【优点】：方便快捷，易于上手；
【缺点】：并不会在network中显示响应信息，需要手动打印
1、安装mockJS
yarn add mockjs
a/如果使用的是vite,需要安装插件
yarn add vite-plugin-mock
b/在vite.config.js 中做如下：
引入：
import { viteMockServe } from 'vite-plugin-mock'
// ...
plugins: [
vue(),
// mockjs
viteMockServe({
supportTs: false, //如果使用 js发开，则需要配置supportTs 为 false
// logger: true,
// mockPath: './src/mock',
// localEnabled: true
})
]
2、引入mockjs
在项目的main.js中引入
如：
import './mock/index.js'
3、新建mock文件
mock/index.js 文件中代码如下：
import Mock from 'mockjs'
Mock.setup({
timeout: '200-600'
})
// 需要注意这里 一定是 network中的完整路径，可以结合axios 设置baseURL；
Mock.mock( "http://localhost:8089/user/userInfo",
'get',
(req) => {
return {
name: '用户名',
userType: '类型'
}
})
3、vue 文件中使用
直接在sertup 下面调用即可；
myHttp为自己封装请求根据业务需要；
可以直接使用axios;如下：
import axios from 'axios
getUserServer() {
axios.get('user/userinfo').then(res => {
// myHttp.get('user/userinfo').then(res => {
if (res.status === 200) {
// myMethods 为reactive中响应数据
myMethods.user = res.data
}
})
}
二、结合node使用
1、安装express
yarn add express
2、新建mockServe/index.js文件
注意：使用require 引入需要 将 package.json 中 type：'module’ 删除；
let express = require('express');
let Mock = require('mockjs');
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('/api/mode2/dataOne', function (req, res) {
console.log('mockAPI截取的数据了')
console.log('=app=res===:', res)
res.json(Mock.mock({
status: 200,
message: '成功',
data: {
"array|1-10": [
{
"name|+1": [
"Hello",
"Mock.js",
"!"
]
}
]
}
}))
})
app.listen('8999', () => {
console.log('端口号：8999')
})
3、配置package.json
注意：若想使用nodemon 监听服务文件热更新，自行安装添加
"scripts": {
"dev": "vite --open",
"build": "vite build",
"preview": "vite preview",
"mockServe": "node src/mock/mockServe/index.js"
},
允许命令 yarn mockServe 即可启动 http://localhost:8999服务；
4、配置代理
注意：一定要记得配置好代理，不然是不会访问到对应的服务的；或者是没有得到相应的mock数据，只显示响应成功
server: {
port: 8089, // 当前前端项目端口号；
host: '0.0.0.0',
open: true,
https: false,
proxy: {
'/api': {
target: 'http://localhost:8999', // 本地node服务端口号；
changeOrigin: true,
ws: true,
rewrite: path => path.replace(/^\/api/, 'http://localhost:8999/api')
}
}
}
5、使用
getDataOne() {
// 此访问路径即 app.use中路径
myHttp.get('api/mode2/dataOne').then(res => {
console.log('=getDataOne=res==:', res)
})
}