Vue2 + ElementUI快速搭建后台

Holyzq

已于 2022-02-26 12:33:40 修改

阅读量1.5k

点赞数 3

分类专栏： vue.js 文章标签： elementui vue.js

于 2022-02-26 11:35:27 首次发布

本文链接：https://blog.csdn.net/huangdj321/article/details/123147446

版权

本文档详细介绍了如何使用Vue2结合ElementUI搭建后台系统，包括创建项目、配置环境变量、安装依赖、实现全局过滤器、注册依赖、封装组件、配置代理以解决跨域问题，以及设计后台首页和布局模板。

摘要由CSDN通过智能技术生成

创建项目

此处不做详细描述，请参考：项目创建

添加环境变量

新建.env.development文件

VUE_APP_BASE_API = http
://localhost:3000

新建 .env.production 文件(根据项目需求，选择性创建)

VUE_APP_BASE_API = https
://api.xxx.xxx

安装基础依赖

yarn add element-ui axios moment

全局过滤器

新增 src/filters/index.js 文件

import moment from "moment";

/**
 * "Fri Dec 10 2021 01:01:49 GMT+0800 (China Standard Time)" => "2021年12月10日凌晨1点01分"
 * @param {number} num
 */
export function dateFormat(value) {
   
  if (!value) {
   
    return "";
  }

  moment.locale("zh-cn");
  return moment(value).format("LL");
}

/**
 * 10000 => "10,000"
 * @param {number} num
 */
export function thousandFormat(num) {
   
  const result = (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","));
  return result + "元";
}

注册依赖

在 src/main.js 中

.
.
import
ElementUI
from
"element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;
Vue.use(ElementUI);

// 注册全局过滤器
import * as filters from "./filters";

Object.keys(filters).forEach((key) => {
   
  Vue.filter(key, filters[key]);
});
.
.

封装 `axios`

新增 src/utils/request.js 文件

import axios from "axios";
import {
    MessageBox, Message } from "element-ui";
import store from "@/store";
import {
    getToken } from "@/utils/auth";

// 创建axios实例
const service = axios.create({
   
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // baseURL: "/api", // url = base url + request url
  // withCredentials: true, // 当跨域请求时，发送 cookies
  timeout: 5000, // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  (config) => {
   
    // do something 在发送请求前
    if (store.getters.token) {
   
      // 让每个请求携带token
      // ["X-Token"]为自定义key
      // 请根据实际情况自行修改
      config.headers["token"] = getToken();
    }
    return config;
  },
  (error) => {
   
    // do something 当请求错误
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// respone拦截器
service.interceptors.response.use(
  /**
   * 如果你想获取 http 信息，例如 headers 或 status
   * 请 return  response => response
   */

  /**
   * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
   * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
  (response) => {
   
    const res = response.data;

    // 如果返回的自定义code不是20000, 认定为error。
    if (res.code !== 20000) {
   
      Message({
   
        message: res.message || "Error",
        type: "error",
        duration: 5 * 1000,
      });

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
   
        // 重新登录
        MessageBox.confirm(
          "你已被登出，可以取消继续留在该页面，或者重新登录",
          "确定登出",
          {
   
            confirmButtonText: "重新登录",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
   
          store.dispatch("user/resetToken").then(() => {
   
            // 为了重新实例化vue-router对象 避免bug
            location.reload();
          });
        });
      }
      return Promise.reject(new Error(res.message || "Error"));
    } else {
   
      return res;
    }
  },
  (error) => {
   
    console.log("err" + error); // for debug
    Message({
   
      message: error.message,
      type: "error",
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);

export default service;

由于上面 request 拦截器中读取 token 是从 cookie 中读的，所以接下来我们要配置 cookie。

配置 `cookie`

1、装包

yarn add js-cookie

新增 src/utils/auth.js 文件

import Cookies from "js-cookie";

// cookie中key的命名
const TokenKey = "Admin-Token";

/**
 * 获取cookie中的token
 * @returns {*}
 */
export function getToken() {
   
  return Cookies.