电商后台管理系统项目（下）

使用到的技术点为

• 设置axios拦截器
• 时间过滤器
• 路由守卫
• 面包屑
• 本地存储

具体代码如下

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>{{obj.oneName}}</el-breadcrumb-item>
    <el-breadcrumb-item>{{obj.twoName}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
    data(){
        return{
            obj:JSON.parse(sessionStorage.getItem('name'))
        }
    },
};
</script>

<style>
.el-breadcrumb{
  padding-bottom:20px;
}
</style>

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 全局样式
import './assets/css/index.css'


// 引入element-ui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


// 引入axios组件
import axios from 'axios'
// 设置基准路由
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1/';
Vue.prototype.$http = axios
// 设置拦截器   将token设置在请求的头
axios.interceptors.request.use(
  config => {
    var arr = JSON.parse(sessionStorage.getItem('tokens'));
    var token;
    if (arr) {
      token = arr.token
    } else {
      token = null
    }
    config.headers.Authorization = token
    return config
  }
)

// 引用树状组件
import treeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', treeTable)

// 时间过滤器
Vue.filter('times', function (val) {
  var date = new Date()
  //年
  var y = date.getFullYear()
  //月
  var m = date.getMonth() + 1
  //日
  var d = date.getDate()
  //小时
  var h = date.getHours()
  //分
  var mm = date.getMinutes() + ''
  mm = mm.padStart(2, 0)
  //秒
  var s = date.getSeconds() + ''
  s = s.padStart(2, 0)
  return `${y}-${m}-${d} ${h}:${mm}:${s}`
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// 设置路由守卫   如果本地内没有tokens则无法进去首页
router.beforeEach(function(to,from,next){
  if(to.path=='/home'){
    if(sessionStorage.getItem('tokens')){
      next()
    }else{
      next('/')
    }
  }else{
    next()
  }
})

在最后使用vue-lie进行了打包