1.前言
mock其实我在工作中用到的场景真不多,可能我们后端比较给力吧,通常都是设计界面一出,我先开始推演布局,数据结构自己先写死,因为其实工作时间长了,有些字段的名字大家都知道,服务器人员数据库设计好之后,我直接连数据库查看字段,修改不一样的字段,这期间请求什么的结构也都是完善的,就等服务器人员接口完成,开测,进行微调.
2. what mock
官方定义
mock是在测试过程中，对于一些不容易构造/获取的对象，创建一个mock对象来模拟对象的行为开发无侵入 不需要修改既有代码,就可以拦截
Ajax请求,返回模拟的响应数据。 用法简单
我的理解
就是开发阶段,前端攻城狮可以自己造假数据,模拟各种场景,各个界面通过
ajax的形式发请求 返回数据,形成一套完整的闭环另外就是方便测试,因为有些数据是不能在生产随意修改的
3. mock简单配置 vue.config.js
这个请求是
node的代码,这块不清楚的可以自学,或者看看我关于node的相关文章当然你不甚在意的话照着写也行,不纠结
devServer: { // app是 express实例 node的代码 before(app){ app.get("/mock/getData",(req,res)=>{ res.json([{name:"祺祺",age:5},{name:"少少",age:3}]) }) } }
注意
每次修改这个
vue.config.js文件都需要重新run这就像你手机或者电脑更新了系统文件需要重启才能生效一样
4. 测试接口通否
重启后 可以直接在端口后面跟地址测试
因为本质上你界面的URL相对路径的解析 都是在当前地址栏的地址拼接的请求,详细的不展开说了
![5L56{XFYL])RB20WB7XDZMH.png](https://ucc.alicdn.com/pic/developer-ecology/d19b8b57ab244519bd557c503596b6ed.png?x-oss-process=image/resize,w_1400/format,webp "5L56{XFYL])RB20WB7XDZMH.png")
5. 代码使用
写的非常简介
axios.get("/mock/getData").then(res=>res.data).catch(error=>{ console.log("Error:",error) })
![($~_QP@HF(XOMT$W_R30]ES.png](https://ucc.alicdn.com/pic/developer-ecology/a51068107caf4ffba7e60a7f01cda77e.png?x-oss-process=image/resize,w_1400/format,webp "($~_QP@HF(XOMT$W_R30]ES.png")
6. 封装API写法
mock.js
import axios from "axios" export const getData =()=>{ return axios.get("/mock/getData").then(res=>res.data) }
组件使用
当然得先引用
import {getData} from "@/api/mock.js"
组件内使用
getData().then(res=>{ console.log(":res",res) }).catch(error=>{ console.log("Error:",error) })
7.代理配置可以共存
因为会从上往下匹配,上边
mock匹配不到,自然往下继续匹配
devServer: { // app是 express实例 node的代码 before(app){ app.get("/mock/getData",(req,res)=>{ res.json([{name:"祺祺",age:5},{name:"少少",age:3}]) }) }, // run 后浏览器自动打开 open: true, // 代理配置 proxy: { "/api": { target: "https://yzs.person.com",// 代理服务器地址 ws: false, ChangeOrigin: true, pathRewrite: { "^/api": "" } }, '/mockApi': { target: 'https://mock.yzs.me/mock/5baf3052f756789004a5116/antd-pro', //mock API接口系统 ws: false, changeOrigin: true, pathRewrite: { '/jeecg-boot': '' //默认所有请求都加了jeecg-boot前缀，需要去掉 } }, }
