首先安装 mock.js,由于只用于开发环境使用,所以执行如下命令安装:
npm install mockjs --save-dev
在 src目录 下创建一个 mock目录 ,然后在里面创建一个 index.js 文件,作为mock各个模块的导出点,供 src/main.js 使用。
在 src/mock/modules 目录下,创建 xxx.js 规则,模拟各个模块数据,供 mock 使用。
这样按模块划分后的目录结构大致如下所示:
├── src | ├── mock | ├── index.js | └── modules // 各个模块的mock数据 | ├── user.js | ├── article.js | └── category.js |
index.js代码如下:
/** * 定义本地测试接口,最好与正式接口一致,尽可能减少联调阶段修改的工作量 */ // 引入mockjs import Mock from "mockjs"; // 引入模板函数类 import user from "./modules/user"; import article from "./modules/article"; import category from "./modules/category"; const { mock } = Mock; // Mock函数 // 使用拦截规则拦截命中的请求 // mock( url, post/get, 返回的数据); mock(/\/api\/users\/login/, "post", user.login); mock(/\/api\/users\/profile/, "get", user.profile); mock(/\/api\/users\/logout/, "post", user.logout);
user.js代码如下:
import { Random } from "mockjs"; // 导出随机函数 function login(req) { // req是一个请求对象,包含: url,type和body属性 return { code: 200, data: { username: Random.cname(), token: Random.guid(), message: "Login successfully." } }; } function profile(req) { return { code: 200, data: { username: Random.cname(), age: Random.integer(10, 30), date: Random.date(), message: "" } }; } function logout(req) { return { code: 200, data: { message: "Logout successfully." } }; } export default { login, profile, logout };
article.js和category.js代码省略。
模拟好假数据接口之后,我们还要在 main.js 中将接口导入,这样在项目中任意组件内都可以请求这些接口了。
main.js编辑如下:
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // 引入mock文件 import "./mock"; // mock 方式,正式发布时,注释掉该处即可 Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount("#app");
最后在组件 Home.vue 中调用这些API,以Home.vue这个组件为例,代码如下:
<template> <div class="home"> <button @click="profile">信息</button>  <button @click="logout">注销</button> </div> </template> <script> import axios from "axios"; export default { name: "home", components: {}, data() { return { username: "admin", password: "password" }; }, created() { let params = { username: this.username, password: this.password }; axios.post("/api/users/login", params).then(res => { console.log(res); }).catch(err => { console.log(err); }); }, methods: { profile() { axios.get("/api/users/profile").then(res => { console.log(res); }).catch(err => { console.log(err); }); }, logout() { axios.post("/api/users/logout").then(res => { console.log(res); }).catch(err => { console.log(err); }); } } }; </script>
执行命令 npm run serve 启动项目,打开调试窗口,观察打印结果。