后台管理系统的一些细节优化方案

1、处理get请求参数的问题

        对于我们的请求有很多种，get有两种，一种是路径拼接传参，另一种是params传参，而其他的请求，想POST、PUT、DELETE这些等等都是以对象的方式进行传参，写起来呢，显得有些复杂，不方便，这时，我们可以对二次封装的axios进行一个优化处理，使其不管你是get请求方式还是post及其它的一些请求方式，都可以以data的方式去进行传参，这大大优化了我们的代码。

示例如下：

// 引入axios
import axios from "axios";

// 创建axios实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 5000,
  headers: { "X-Custom-Header": "foobar" },
});

// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  function (response) {
      return response;
    }
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 处理get请求方式的参数问题
function req(options) {
  // 如果存在请求方式，就赋值，否则默认get请求方式
  options.method = options.method || "GET";
  // 不管你是get还是post请求方式我们都以data的形式去传参
  if (options.method.toLocaleUpperCase() === "GET") {
    options.params = options.data;
  }
  return instance(options);
}

// 导出axios实例
export default req;

2、开发过程一定要使用重置样式表，包括公共样式，可以减少代码的冗余

推荐网站：CSS-reset.css重置样式表_胡安民的博客-CSDN博客_css重置样式表

引入样式表有两种方法：

去APP.vue的style中以@import "路径"的方式引入样式表；去main.js中import "路径" 引入

3、当我们获取到token时，通过vuex的执行机制进行一个存储，方便后期的一个维护

        vuex存储的token通过本地存储，使其页面刷新不丢失
因为写localStorage.setItem()这些方法会很复杂，所以呢，我们可以对其进行一个优化
在utils文件夹 --->创建一个auth.js --->处理 存储、获取、删除的方法。

好了之后，试想一下：如果人家要求我们更改我们的key字段名称了，怎么办呢？

解决方法如下：
我们可以声明一个常量 const TOKEN_KEY = 'token';
然后将其下面方法里面的key属性名都改为TOKEN_KEY,这样就对我们的方法进行了一个优化

const TOKEN_KEY = "authorization";

export function setToken(token) {
  localStorage.setItem(TOKEN_KEY, token);
}

export function getToken() {
  return localStorage.getItem(TOKEN_KEY);
}

export function removeToken() {
  localStorage.removeItem(TOKEN_KEY);
}