mockjs: 前端模拟后端

mockjs

参考: https://blog.csdn.net/Mme061300/article/details/130343270

1. 入门:vue引入mockjs

  1. vue3引入mockjs

    npm install mockjs --save-dev
    
  2. 在项目中创建一个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
    
  3. 创建一个mock服务器文件,例如mockjs/index.js

    // mock/index.js
    import Mock from 'mockjs'
    import User from './data.js'
     
    Mock.mock('/api/users', 'get', User.items)
    
  4. 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')
    
  5. 在组件中发送请求获取模拟数据:

    // 任意组件内
    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提供的模拟数据了。

posted @   shiw2019  阅读(99)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示