组件库选择
考虑引入方便与后期维护的需要,使用蚂蚁金服的Ant Design组件库,并且有VUE版本
导航栏
由于Ant组件库针对是中后台场景,故没有特意对导航栏做移动端的响应式适配。在桌面端上,导航栏项会从最左端开始,而移动端仅会将超出屏幕的导航项以···
图标显示。
而通过组件库内置的栅格系统可以将两侧空白留出,或与网站logo混排。此时两侧留有空白,但导航栏底部本身有灰色边线,为了美观可以将导航栏组件的灰色边线去掉,同时在外层元素上加上灰色边线(下方演示为在a-row
标签加)
在随后的场景中,由于除了使用导航栏实现页面的跳转,还可以通过手动输入URL、点击主页其他元素进入,出现了导航栏选中状态与实际URL路由不匹配的情况。在项目中,VUE Router使用懒加载的模式,在访问某个路由URL时,对应的VUE组件才会被挂载到路由插槽中。可通过:selectedKeys="[this.$route.path]"
将路由路径传入到导航栏中
注意:
<router-link>
标签中的to
应与<a-menu-item>
标签中的key
相一致

<template>
<div>
<a-row style="border-bottom: 1px solid #e8e8e8;">
<a-col :xs="{span:22 ,offset:1}" :lg="{span:18 ,offset:3}">
<a-menu mode="horizontal" :selectedKeys="[this.$route.path]">
<a-menu-item key="/">
<router-link to="/">
<a-icon type="home" />主页
</router-link>
</a-menu-item>
<!-- 更多导航项... -->
<a-sub-menu>
<span slot="title" class="submenu-title-wrapper">
<a-icon type="tool" />小工具
</span>
<a-menu-item key="/server">
<router-link to="/server">服务器监控</router-link>
</a-menu-item>
<!-- 更多子导航项... -->
</a-sub-menu>
</a-menu>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
<style>
.ant-menu-horizontal {
border-bottom: 0px !important;
}
</style>
axios超时与异常处理
在服务器监控页面中,因API接口限制无法直接在前端发送请求,使用axios发送请求到后端php程序,后端php通过curl发送请求到服务器厂商API接口获取服务器状态
正常情况下,axios获取到请求后将返回的结果复制给data() {}
内部的对象变量v2info
,界面上即可通过双向绑定{{v2info.xxx}}
来显示对象中xxx
属性的值
由于服务器厂商的API接口在海外,会有一定几率出现后端curl发送超时接收不到返回值的情况,此时需要在axios请求的回调函数中加入判断,如果返回结果为null
,手动赋值给v2info
中各个属性缺省值,如N/A
,并弹层提醒超时

<script>
import { getv2info, getkmsstatus, getv2raystatus } from "@/network/server";
export default {
name: "server",
data() {
return {
v2info: {},
};
},
methods: {},
created() {
getv2info().then((res) => {
if (res == null) {
(this.v2info.node_datacenter = "N/A"),
(this.v2info.os = "N/A"),
(this.v2info.vm_type = "N/A"),
(this.v2info.plan_monthly_data = 0),
(this.v2info.data_counter = 0);
this.$message.warning("厂商API接口响应超时,请重试");
} else {
this.v2info = res;
}
});
},
};
</script>
线上联调与生产环境部署
此次重构只涉及到前端部分,旧项目的接口不需要改动,本地开发时直接请求线上的后端接口,由此产生跨域问题。可修改服务器上Nginx虚拟站点的伪静态规则
同时应添加针对VUE单页应用的伪静态规则,防止出现生产环境手动输入URL报404错误
注意:在本地开发完成后应将跨域规则注释或删除掉
location / {
root /www/wwwroot/info/;
index /index.html;
try_files $uri $uri/ /index.html;
# add_header Access-Control-Allow-Origin *;
# add_header Access-Control-Allow-Methods *;
# add_header Access-Control-Max-Age 3600;
# add_header Access-Control-Allow-Credentials true;
# add_header Access-Control-Allow-Headers $http_access_control_request_headers;
}
感谢分享 赞一个
站元素主机 2021-02-05 13:32