电商后台管理系统项目总结（二）

ゝ一纸荒年。 2023-01-18 09:22 174阅读 0赞

所用技术栈：  
axios的封装、API的封装、vue-router、element-ui、echarts  
整体项目技术难点：  
商品管理、权限、分类参数、面包屑的封装  
axios的封装

//1. 导入axios对象
    import axios from "axios";
    //2. 创建对象实例，create方法
    const Server = axios.create({
        //请求接口的基础地址
        baseURL: 'https://www.liulongbin.top:8888/api/private/v1/',
        //设置超时时间
        timeout: 4000 
    })
    
    // 请求拦截器
    Server.interceptors.request.use(config => {
    
        // 给管理后台的接口设置header头，添加Authorzation属性
        let token = sessionStorage.getItem('token')
        config.headers['Authorization'] = token//给header头添加token值
    
        return config
    }, error => {
        // 出现异常
        return Promise.reject(error);
    })
    
    // 响应拦截器
    Server.interceptors.response.use(response =>{
    
        // 后台正常响应的状态，如果是200， 说明后台处理没有问题
       /*  if (response.status == 200) {
            return response.data;
        } */
        // return response.data 可以在这里统一的获取后台响应的数据进行返回，而这里面就没有请求头那些
        return response
    }, error => {
        return Promise.reject(error);
    })
    
    
    export default Server // 导出自定义创建 axios 对象

API的封装栗（例）子：

import index from '../utils/require'
    export default {
        getUser(params){
            return index.get(`users`,params)
        },
        removeUser(id){
            return index.delete(`users/${id}`)
        }
    }

面包屑封装

<template>
      <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="item in breadlist" :key="item">{
       {item}}</el-breadcrumb-item>
    
    </el-breadcrumb>
      </div>
    </template>
    
    <script>
    export default {
      name: '',
      data() {
        return {
            breadlist:[]
        };
      },
     props:[],//接收父组件传过来的值
    components:{},
      mounted() {},
      methods: {
        /*   getbread(){
            
              console.log(this.$route.meta.bread)
          } */
      },
     created(){
           this.breadlist=this.$route.meta.bread;
       
     },
      computed: {},
      watch: {},
    };
    </script>
    
    <style scoped>
    </style>

如何应用：

{
        path: '/index',
        name: 'My_Index',
        component: () => import(/* webpackChunkName: "home" */ '../views/Index.vue'),
        children: [
          {
            path: '/users',
            name: 'My_User',
            component: () => import(/* webpackChunkName: "user" */ '../components/user/users.vue'),
            meta: {
              bread: ['用户管理', '用户列表']
            }
          }, {
            path: '/roles',
            name: 'My_Roles',
            component: () => import(/* webpackChunkName: "roles" */ '../components/power/roles.vue'),
            meta: {
              bread: ['权限管理', '角色列表']
            }
          }
          ]
          }

<bread />
      import bread from "../bread";
       components: { bread },

效果展示:  
![在这里插入图片描述][20210505194946759.png]

[20210505194946759.png]: /images/20221021/0681a80174d544cca605fb161e5ff930.png