困难不可怕,可怕的是小白爱思考,还会记笔记。
前端小菜鸡再补个基础课。
背景分析(吐槽)
最近工作只负责一个项目的纯前端,vue框架实现一个PC的大数据平台。
之所以提到代理,mock数据这些,是被几个现状逼得。
- 服务端不止一个,而且还是其他团队公司开发,即使有前提讨论的API文档,依然一不能保证接口不改(次数>3)。
- 连接的服务不稳当,时不时断开,500,公司没网,突然接口加了权限校验,原因诸多,结果只一个,不能用。
- 我们在客户内部开发,离开那个环境就没有数据了。
1. 代理
代理能解决两个事情。
- 众所周知的,如果接口跨域,可以使用本地代理,避免前端和服务端接口不同源的问题。比如用
http://localhost:300
访问http://localhost:8080
的服务。 - 没有服务的时候自己搞个服务提供数据
代理的例子:
配置一:根目录 .env.development
文件
# just a flag
ENV = 'development'
BASE_URL='/'
# base api
VUE_APP_BASE_API= '/api'
VUE_APP_BASE_URL= 'http://192.168.0.223:7000'
VUE_APP_BASE_WX_API= '/wx_api'
VUE_APP_BASE_WX_URL= 'http://192.168.0.99:8082'
VUE_APP_BASE_MN_API= '/mn_api'
VUE_APP_BASE_MN_URL= 'http://192.168.0.113:3003/api/bigdata'
VUE_APP_BIGDATA_API= '/bigdata_api'
VUE_APP_BIGDATA_URL= 'http://192.168.0.252:9991/freqmonitor'
可以看到前端调用了多个不通服务的端口。
配置二:根目录vue.config.js
在module.exports内设置devServer来处理代理。
这个地方的配置方案就比较多了,我们使用比较推荐的,那就是请求遇见/api
才做代理,但真实的请求中没有/api
,所以在pathRewrite
中把 /api
去掉, 这样既有了标识, 又能在请求接口中把 /api
去掉。
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_BASE_URL,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
[process.env.VUE_APP_BASE_WX_API]: {
target: process.env.VUE_APP_BASE_WX_URL,
changeOrigin: true,
logLevel: 'debug',
pathRewrite: {
['^' + process.env.VUE_APP_BASE_WX_API]: ''
}
},
[process.env.VUE_APP_BASE_MN_API]: {
target: process.env.VUE_APP_BASE_MN_URL,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_MN_API]: ''
}
},
[process.env.VUE_APP_BIGDATA_API]: {
target: process.env.VUE_APP_BIGDATA_URL,
changeOrigin: true,
logLevel: 'debug',
pathRewrite: {
['^' + process.env.VUE_APP_BIGDATA_API]: ''
}
},
}
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src'),
'%': resolve('static')
}
}
}
配置三:请求配置baseUrl是空
axios.defaults.baseURL = '';
一个请求的例子
import axios from '@/axios'
export function signalAnalyzeSignalConstitute(data) {
return axios({
url: 'bigdata_api' + '/analysis/realSignalType',
method: 'post',
data
})
}
请求在dev环境中被代理分析:
原始请求url:http://localhost:3000/bigdata_api/analysis/realSignalType
遇到bigdata_api
被替换成:http://192.168.0.252:9991/freqmonitor/analysis/realSignalType
代理调试
如果接口有错误,需要定位是什么问题,可以打开调试,具体就是在config配置proxy时指定`logLevel: 'debug',这样控制台将会出现如下日志
HPM] Rewriting path from "/bigdata_api/analysis/realSignalType" to "/analysis/realSignalType"
[HPM] POST /bigdata_api/analysis/realSignalType ~> http://192.168.0.252:9991/freqmonitor
log对应上面的解释。
mock数据
有了代理,自己随便起个server,返回json数据就ok了。以下方式一个赛一个的简单粗暴。
- 搞个mock server啥的,不复杂,不过这个还是有点花时间,继续。
- lein new一个空项目,router里直接返回个固定json,so easy。
- 我们使用Yapi 接口协议工具支持2的方式了。
高级Mock
$ curl https://apiman.3vyd.com/mock/388/taskDetail |jq
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 382 100 382 0 0 2365 0 --:--:-- --:--:-- --:--:-- 2417
{
"code": "200",
"message": "成功",
"data": {
"taskId": "20220211085847336u4d",
"taskName": "信号监听任务",
"taskNo": "20220211085847336u4d",
"startTime": "2022-02-11 08:58:47.336000",
"taskType": "4",
"children": [
{
"deviceName": "412监测站设备",
"deviceId": "STA0001JMX",
"deviceNo": "STA0001JMX",
"stationName": "412设备站",
"longitude": 120,
"latitude": 35,
"taskNo": "20220211085847369545"
}
]
}
}
- 自己本地直接使用json,连请求都不用了,离线画页面
找个地址放个json文件,比如static/data/ssxhData.json
里面直接放json,上面curl的结果。
vue文件里引入
import jsondata from '../../../static/data/ssxhData.json'
methods
里一般发起请求获取数据,改成本地json
// 获取调制构成
// this.analyzeSignalConstruct = await getAnalyzeSignalConstruct(query)
this.analyzeResultModulationConstitute = jsondata.signalAnalyzeModulationConstitute
之后有接口了再变成接口调用即可。
网友评论