用mock来模拟接口

2022-01-25  本文已影响0人  LcoderQ
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等调用如上编写的数据便可以得到数据
上一篇 下一篇

猜你喜欢

热点阅读