后台项目总结

后台项目总结

一、项目总体结构

布局方面：

1、CSS样式：项目展示页面可分为头部，侧边导航栏，内容三部分，可使用element-ui里的布局容器进行布局。
头部使用弹性盒子均匀分布。
侧边导航栏使用element-ui组件。通过collapse为true或false控制是否折叠。
主体内容是设置子路由，将子路由的内容放入一个坑里。

设置子路由：

  {
   
    path: '/',
    name: 'home',
    component: HomeView,
    redirect: 'welcome',
    children: [
      {
   
        path: '/welcome',
        name: 'welcome',
        component: () => import('../views/Welcome.vue')
      },]
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

页面：

简单的后台管理有 Login登录页面，welcome欢迎页面。
用户管理的user用户列表；权限管理的roles角色列表，rights权限列表；商品管理的goods商品列表，params分类参数，categories商品分类；订单管理的orders订单列表；数据统计的reports数据报表

二、封装API请求

为方便项目的维护，可以将请求进行封装。

封装流程：
1、在src路径下创建API文件夹
2、文件夹内创建request.js文件封装axios
3、创建api.js文件将请求放在一起，便于后期维护查找接口

request.js文件封装axios：

import axios from "axios";
import {
    MessageBox, Message } from 'element-ui'
import router from '../router'
const instance = axios.create({
   
    baseURL: 'http://www.ysqorz.top:8888/api/private/v1/',
    // baseURL: process.env.VUE_APP_API,  
    timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
   
    // 在发送请求之前做些什么
    //设置请求头

    config.headers.Authorization = window.sessionStorage.getItem('token')

    return config;
}, function (error) {
   
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
   
    // 对响应数据做点什么
    let msg = response.data.meta.msg
    let code = response.data.meta.status
    // 无效token处理
    if (msg === '无效token') {
   
        MessageBox.confirm('token已过期, 是否跳转登录?', '提示', {
   
            confirmButtonText: '确定',
            cancelButtonText: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38