VUE中 Mockjs实现请求地址带参数的加载方法

Posted 2023-04-03

参考技术A 请求地址 /api/pathname ，路径为./mock/pathname.js
请求地址 /api/pathname?param=234，路径为./mock/pathname/param-234.js

可以根据需要自行修改，注意一点require的写法有点讲究，带变量得写成 字符串+变量，不然会报错。

#yyds干货盘点# vue中mockjs的使用

mock是什么

简单理解，他可以在前端完成模拟接口和数据

使用方法

1. 下载

   npm install --save mockjs

2. 新建mock文件夹
3. 在mock文件夹中创建一个data文件夹用于存放模拟数据
4. 在mock下新建一个文件用来存放mockjs模拟数据的代码

   // 1.引用
   let mock=require("mockjs")
   // 2.创建模拟数据的请求接口
   // mock.mock("请求这个模拟数据的接口地址随便写","GET/POST",require("你的模拟数据json地址"))
   mock.mock("/data/list/movie","get",require("./data/dianying.json"))

   注意
   千万不要忘了，需要在main.js中引用mock

   
   import Vue from vue
   import App from ./App.vue
   import router from ./router
   // 全局组件的引用
   import Tb from "@/components/topbar.vue"
   // 全局组件的调用
   Vue.component("Tb",Tb)

// 引用mock
require("./mock")

Vue.config.productionTip = false

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

这样就完成了前端的模拟数据，像正常调接口一样去使用就可以了，**一般他的模拟数据都是json格式**