后台管理系统项目总结（上）

项目架构

使用到vue框架
ElementUI

技术栈

vue组件化开发
proxy跨域
API封装
路由鉴权
VUEX

首先处理跨域问题
创建一个vue.config.js文件，配置一下proxy开发环境

//处理跨域
module.exports = {
   
    publicPath: "./",
    devServer: {
   
        open: true,
        proxy: {
   
            '': {
   
                target: "http://39.100.7.70:81/",
                changeOrigin: true,
                pathRewrite: {
   
                    '^/api': ""
                }
            }
        }
    }
};

配置main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import './plugins/element'
// axios引入配置
import axios from 'axios'
  //导入进度条插件
  import NProgress from 'nprogress'
  //导入进度条样式
  // import 'nprogress/nprogress.css'
  
  //-------
      //文档提供基准接口
      axios.defaults.baseURL='https://www.liulongbin.top:8888/api/private/v1/'
      axios.defaults.timeout = 5000;
            //当进入request拦截器，表示发送了请求，我们就开启进度条
      NProgress.start()
          //设置请求头
          axios.interceptors.request.use(config => {
   
            config.headers.Authorization=sessionStorage.getItem('token')
            return config;
            });
    //--------    

// TreeTable
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
Vue.prototype.$http = axios
  // 时间戳
  Vue.filter('dateFormat', function (originVal) {
   
    const dt = new Date(originVal)
    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDate() + '').padStart(2, '0')
    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')
    return `${
     y}-${
     m}-${
     d} ${
     hh}:${
     mm}:${
     ss}`
  })

Vue.config.productionTip = false

new Vue({
   
  router,

  render: h => h(App)
}).$mount('#app')

配置axiosApi

// 单独封装根路径 
import axios from 'axios'
const request = axios.create({
   
    baseURL:'https://www.liulongbin.top:8888/api/private/v1/',
    timeout : 5000,
})
 //设置请求头
 request.interceptors.request.use(config => {
   
    config.headers.Authorization=sessionStorage.getItem('token')
    return config;
    });
export default request

配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   
  routes: [
    {
   
      //登录
      path: '/',
      name: 'login',
      component: () => import(/* webpackChunkName:"login_home_welcome" */ './views/Login.vue'),
    },
    {
   
      path: '/home',
      name: 'Home',
      component: () => import(/* webpackChunkName:"login_home_welcome" */ './views/Home.vue'),
      children:[{
   
        path: '/',
        redirect:'/home/welcome'
      },{
   //默认展示welcome页
         path:'welcome',
         name: 'Welcome',
         component: () => import(/* webpackChunkName:"login_home_welcome" */ './components/Welcome.vue'),
      },
      {
   //用户列表
        path:'Users',
        name: 'Users',
        component: () => import(/* webpackChunkName:"users" */ './components/user/Users.vue'),
      },
      {
   //角色列表
        path:'roles',
        name: 'roles',
        component: () => import(/* webpackChunkName:"roles" */ './components/roles/Roles.vue'),
      },{
   //所有角色列表
        path:'rights',
        name: 'rights',
        component: () => import(/* webpackChunkName:"roles" */ './components/roles/Right.vue'),
      },{
   
        path:'Categories',
        name: 'Categories',
        component: () => import(/* webpackChunkName:"goods" */ './components/goods/Categories.vue'),
      },{
   
        path:'params',
        name: 'params',
        component: () => import(/* webpackChunkName:"goods" */ './components/goods/parm.vue'),
      },{
   
        path:'goods',
        name: 'goods',
        component: () => import(/* webpackChunkName:"goods" */ './components/goods/ProductList.vue'),
        children: [
          {
   
            path: 'add',
            name: 'Add',
            component: () => import(/* webpackChunkName:"goods" */ './components/goods/Add.vue'),
          }
        ]
      },{
   
        path:'orders',
        name: 'orders',
        component: () => import(/* webpackChunkName:"orders" */ './components/orders/Orders.vue'),
      },{
   
        path:'reports',
        name: 'reports',
        component: () => import(/* webpackChunkName:"reports" */ './components/report/Report.vue'),
      }
      ]
    }
    
  ]
})

封装面包屑导航

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item,index) in obj" :key="index">{
   {
   item}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
   
data(){
   
    return{
   
        obj:{
   },
    }
},
created(){
   
    this.obj=JSON.parse(window.sessionStorage.getItem('breadName'));
}
}
</script>

登录login

<template>
  <div class="home">
    <div class="box">
      <div class="pic">
        <img src="../assets/logo.png" alt />
      </div>
      <!-- 用户账号 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input  v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
       
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import loginApi from './loginApi'
export default {
   
  data(){
   
     return {
   
        ruleForm: {
   
          username: 'admin',
          password: '123456',
          
        },
        rules: {
   
          username: [
            {
    required: true, message: '请输入登录名', trigger: 'blur' },
            {
    min: 3