Vue项目使用mockjs模拟后端接口
文章目录
- 操作步骤
- 1. 安装 mockjs 和 vite-plugin-mock
- 2. 安装 axios
- 3. 创建mock路径
- 4. 配置 viteMockConfig
- 5. 编写第一个mock接口
- 6. 创建 createProdMockServer
- 7. 配置 axios
- 8. 编写请求接口
- 9. 在页面中使用
操作步骤
1. 安装 mockjs 和 vite-plugin-mock
vite-plugin-mock 是 vite 提供的mock插件，配合mockjs 一起使用，比较方便。
npm install mockjs vite-plugin-mock=2.9.6
2. 安装 axios
通过axios发送请求，请求到mock的模拟接口
npm install axios
3. 创建mock路径
在 src 文件夹下创建 mock 文件夹，作为后续编写mock接口的路径
4. 配置 viteMockConfig
在 vite.config.js 中配置 viteMockConfig
mockPath 就是mock文件夹的路径
import { defineConfig } from 'vite'
import {viteMockServe} from 'vite-plugin-mock'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),viteMockServe({mockPath: './src/mock'})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})
5. 编写第一个mock接口
在mock文件夹下新建一个 js 文件，如user.js ,作为专门编写与用户相关的接口数据,内容如下：
export default[{url: '/mock/user/test',method: 'get',response: () => {return {code: 200,msg: 'ok',data: 'hello world'}}}
]
该文件创建了一个模拟接口，地址为/mock/user/test
6. 创建 createProdMockServer
在mock文件夹下创建一个index.js 文件，内容如下：
import {createProdMockServer} from 'vite-plugin-mock/es/createProdMockServer'
// 导入上面写的user.js
import userModule from './user'export function setupProdMockServer(){createProdMockServer([...userModule])
}
7. 配置 axios
创建 src/utils/system/request.js 文件用来全局配置axios，内容如下：
// 在这个文件中配置axios,以及拦截请求
import axios from 'axios'// const baseURL = import.meta.env.VITE_BASE_URLconst service = axios.create({bbaseURL: '/mock',timeout: 5000
})// 拦截器，错误处理配置export default service
8. 编写请求接口
创建src/api/user.js 文件作为请求用户相关数据的文件，内容如下：
// 导入配置过的 axios
import request from '@/utils/system/request'export function loginApi(data){return request({url: '/user/test',method: 'get',baseURL: '/mock',data})
}
该文件创建了一个请求接口loginAPi ，用来请求之前创建的mock接口地址
9. 在页面中使用
首先在需要的页面导入请求的接口：
import { loginApi } from "../../api/user.js";
然后以Promise的形式使用
onMounted(() => {loginApi({}).then(res => {console.log(res)})
})
如果控制台打印出结果，则说明配置成功