vue-mock-代理配置-不生效
2021-07-18 本文已影响0人
云高风轻
1.前言
mock其实我在工作中用到的场景真不多,可能我们后端比较给力吧,
通常都是设计界面一出,我先开始推演布局,数据结构自己先写死,因为其实工作时间长了,有些字段的名字大家都知道,服务器人员数据库设计好之后,我直接连数据库查看字段,修改不一样的字段,这期间请求什么的结构也都是完善的,就等服务器人员接口完成,开测,进行微调.
1. what mock
官方定义
mock是在测试过程中，对于一些不容易构造/获取的对象，创建一个mock对象来模拟对象的行为
开发无侵入 不需要修改既有代码,就可以拦截
Ajax请求,返回模拟的响应数据。 用法简单
我的理解
就是开发阶段,前端攻城狮可以自己造假数据,模拟各种场景,各个界面通过
ajax的形式发请求 返回数据,形成一套完整的闭环
另外就是方便测试,因为有些数据是不能在生产随意修改的
2. 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
这就像你手机或者电脑更新了系统文件需要重启才能生效一样
3. 测试接口通否
重启后 可以直接在端口后面跟地址测试
因为本质上你界面的URL相对路径的解析 都是在当前地址栏的地址拼接的请求,详细的不展开说了
1.png
4. 代码使用
写的非常简介
axios.get("/mock/getData").then(res=>res.data).catch(error=>{
console.log("Error:",error)
})
1.png
5. 封装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)
})
6.代理配置可以共存
因为会从上往下匹配,上边
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前缀，需要去掉
}
},
}
7. 代理不生效
- 检查所有的配置都没问题,但是不生效
- 最终定位到问题是
'/mockApi': {},小写没问题,如果是驼峰的写法 有些电脑会出问题
