组件库选择

考虑引入方便与后期维护的需要，使用蚂蚁金服的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，并弹层提醒超时

axios提醒

<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;

    }