mock数据
2022/3/31 23:22:06
本文主要是介绍mock数据,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. 安装
首先安装 mock.js,由于只用于开发环境使用,所以执行如下命令安装:
npm install mockjs --save-dev
2. 编写模拟数据接口
在 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代码省略。
3. 导入模拟数据接口
模拟好假数据接口之后,我们还要在 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");
4. 组件引用
最后在组件 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>
5. 启动项目
执行命令 npm run serve 启动项目,打开调试窗口,观察打印结果。
注意事项:当后端写好真实接口以后,不要忘记注释掉在 main.js 中引入mock文件的那行代码。你也可以选择删掉创建的 mock目录 和 main.js 中的那行代码。
这篇关于mock数据的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升