Vue使用mock使用教程

在src目录下创建mock文件夹,在其中创建mock.js

 

 

 在mock.js中写入

//引入mockjs
const Mock = require('mockjs')   //安装的mockjs，并不是创建的mock.js

//使用mockjs模拟数据
Mock.mock('http://mock/api/menu','get', function(){//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
    let menu = [
        {
            title:"资料检索",
            list:["条件检索","关键字检索"],
            id:1
        },
        {
            title:"借阅管理",
            list:["条件检索","关键字检索"],
            id:2
        },
        {
            title:"统计分析",
            list:["条件检索","关键字检索"],
            id:3
        },
        {
            title:"系统管理",
            list:["条件检索","关键字检索"],
            id:4
        },
    ];
    
    return {
        data: menu
    }
})


//使用mockjs模拟数据
Mock.mock('http://mock/api/headimage','get', function(){//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
    let imgUrl = ['http://122.114.62.128:8003/Images/banner0.png','http://122.114.62.128:8003/Images/banner1.png']
    
    return {
        data:imgUrl
    }
})

在main.js中引入mock.js

 

 

 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入mock
import './mock/mock'

// 引入elmUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 使用elm
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')