用mock来模拟接口

1.下载依赖包

npm install -S mockjs

2.生成mock文件夹并生成模拟数据

image.png

3.在mockServe.js文件中编写接口格式

常用为Mock.mock("请求路径"，{数据名称：数据})

import Mock from "mockjs" 
import banner from "./banner.json" //默认的可以导入json数据格式的文件
Mock.mock("/mock/banner",{code:200,data: banner})

4.注意需要讲mockServe.js文件引入到项目中

如下为在vue-cli中，在main.js引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false

import TypeNav from './components/TypeNav'
import "@/mock/mockServe"  //需要引入到项目文件中

Vue.component(TypeNav.name, TypeNav)


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

5.利用ajax，axios等调用如上编写的数据便可以得到数据