mockjs: 前端模拟后端
mockjs
参考: https://blog.csdn.net/Mme061300/article/details/130343270
1. 入门:vue引入mockjs
-
vue3引入mockjs
npm install mockjs --save-dev
-
在项目中创建一个mock数据文件,例如mockjs/data.js`:
// mock/data.js import Mock from 'mockjs' const User = Mock.mock({ 'items|30': [{ id: '@id', name: '@name', 'age|18-30': 1 }] }) export default User
-
创建一个mock服务器文件,例如
mockjs/index.js
:// mock/index.js import Mock from 'mockjs' import User from './data.js' Mock.mock('/api/users', 'get', User.items)
-
在
main.js
中引入mock服务器文件,启动Mock服务:import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import './mockjs/index' const app = createApp(App) app.use(store) app.use(router) app.mount('#app')
-
在组件中发送请求获取模拟数据:
// 任意组件内 import axios from 'axios' export default { async mounted() { try { const response = await axios.get('/api/users') console.log(response.data) // 输出模拟的数据 } catch (error) { console.error(error) } } }
确保你的开发服务器配置可以代理到Mock服务器,这样你就可以在开发过程中使用Mock.js提供的模拟数据了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步