后台管理系统

电商后台管理系统

用于管理用户账号，商品信息等业务功能

前端项目技术栈

• Vue
• Vue-router
• Element-UI
• Axios
• Echarts

项目初始化

1. 安装 Vue 脚手架
2. 通过 Vue-Cli 创建项目
3. 配置 Vue-router
4. 配置 Element-UI 组件库
5. 配置 Axios 库
6. 初始化 git 远程仓库

项目所用依赖按需导入

登录业务

登录流程

1. 输入用户名和密码
2. 调用接口验证
3. 通过验证则跳转项目主页

登录技术点

1. 使用element-UI的表单属性rules进行属性绑定，指定验证规则对象
2. 使用表单方法validate进行表单验证
3. 发送请求通过验证后生成一个token（时间戳）写入sessionStorage，编程式导航将路由跳转home页面
4. 使用全局前置导航守卫限制用户没有token则不能访问其他页面，强制留在登录页

路由导航守卫限制访问

没有登录，不能通过url访问特定页面，会重新导航到登录页面

登录代码

退出登录

  handleCommand: async function (command) {
     
      if (command == "index") {
     
        this.$router.push('dashboard')
        // 在首页点击会报错待修正
      } else if (command == "logout") {
     
        let result = await logout();
        console.log(result);
        if (result.data.status === 1) {
     
          this.$message("退出成功了");
          this.$router.push("/");
        }
      }
    },
  },

主页布局

通过接口获取菜单数据

// 获取新闻的api
import axios from 'axios'
export const getArticles = (params) => {
     
  // return axios.post('http://rap2api.taobao.org/app/mock/273907/count/news',params).catch((err)=>{console.log(err);})
  return axios.post('http://rap2api.taobao.org/app/mock/273907/news/api',params).catch((err)=>{
     console.log(err);})
}
// 退出接口
export const logout = ()=>{
     
  return axios.get("http://linweiqin.cn:8001/admin/signout").catch(err=>{
     console.log(err)})
}
// 粉丝数据接口
export const fansdata = ()=>{
     
  return axios.post("http://rap2api.taobao.org/app/mock/273954/data").catch(err=>{
     console.log(err)})
}
// 粉丝头像接口
export const fansphoto = ()=>{
     
  return axios.get("http://rap2api.taobao.org/app/mock/273954/fansphoto").catch(err=>{
     console.log(err)})
}

权限管理业务分析

通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限

分类管理

商品分类概述

商品分类用于在购物时,快速找到需要购买的商品,进行直观显示

参数管理

参数管理概述

商品参数用于显示商品的特征信息,可以通过电商平台详情页面直观的看到

数据报表

一、页面

1、左边导航及面包屑部分

2、中间头部

二、核心代码

<!--  -->
<template>
  <div class="fans-container">
    <!-- 1. 为 ECharts 准备一个具备大小（宽高）的画布容器 DOM -->
    <div ref="main" style="width: 800px; height: 400px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import {
       fansdata } from "../api/api";
export default {
      

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
      
    const result = await fansdata();
    const arr = result.data.array;
    
    
    var myChart = echarts.init(this.$refs.main);
    // 指定图表的配置项和数据
    var option = {
      
      color: "rgb(41,146,222)",
      title: {
      
        text: "一周内粉丝变化",
      },
      tooltip: {
      },
      legend: {
      
        data: ["粉丝数"],
      },
      xAxis: {
      
        data: [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
          "Sunday",
        ],
      },
      yAxis: {
      },
      series: [
        {
      
          name: "粉丝数",
          type: "bar",
          data: arr,
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
  beforeCreate() {
      }, //生命周期 - 创建之前
  beforeMount() {
      }, //生命周期 - 挂载之前
  beforeUpdate() {
      }, //生命周期 - 更新之前
  updated() {
      }, //生命周期 - 更新之后
  beforeDestroy() {
      }, //生命周期 - 销毁之前
  destroyed() {
      }, //生命周期 - 销毁完成
  activated() {
      }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
</style>

三、核心逻辑

​ 通过路由找到对应的 report 组件, report 组件发送 请求,找到对应接口到后台拿到图表对应数据,然后进行一个数据合并,最后渲染到我们的页面当中

具体实现

1.首先是实现路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/login'

Vue.use(VueRouter)

const routes = [
    // 登陆页面组件
    {
      
        path: '/',
        name: 'login',
        component: Login
    },
    {
      
        path: '/dashboard',
        name: 'Dashboard',
        component: () =>
            import ('../components/Dashboard'),
        children: [{
      
                path: "/dashboard",
                component: () =>
                    import ("../components/Home"),
                meta: [{
      
                    name: "",
                    to: "/dashboard"
                }],
            },
            {
      
                redirect: '/page1',
                path: '/fans',
                name: 'Fans',
                component: () =>
                    import ('../components/Fans'),
                meta: [{
      
                    name: "粉丝管理",
                    to: "/fans"
                }, ],
                children: [{
      
                        path: '/page1',
                        name: 'page1',
                        component: () =>
                            import ('../components/page1'),
                        meta: [{
      
                            name: "粉丝管理",
                            to: ""
                        }, ],
                    },
                    {
      
                        path: '/page2',
                        name: 'page2',
                        component: () =>
                            import ('../components/page2'),
                        meta: [{
      
                            name: "粉丝管理",
                            to: ""
                        }, ],
                    },
                ]
            },
            {
      
                path: '/comment',
                name: ' Comment',
                redirect: '/list',
                component: () =>
                    import ('../components/Comment'),
                meta: [{
      
                    name: "评论管理",
                    to: ""
                }, ],
                children: [{
      
                        path: '/list',
                        name: 'list',
                        component: () =>
                            import ('../components/Comment/CommentList.vue'),
                        meta: [{
      
                            name: "评论管理",
                            to: ""
                        }, ],
                    },
                    {
      
                        path: '/echarts',
                        name: 'echarts',
                        component: () =>
                            import ('../components/Comment/CommentChart.vue'),
                        meta: [{
      
                            name: "图表分析",
                            to: ""
                        }, ],
                    },
                ]
            },
            {
      
                path: '/counentDemo',
                name: ' CounentDemo',
                component: () =>
                    import ('../components/CounentDemo'),
                meta: [{
      
                    name: "内容管理",
                    to: ""
                }, ]
            },
            {
      
                path: '/publish',
                name: 'publish',
                component: () =>
                    import ('../components/Publish'),
                meta: [{
      
                    name: "发布文章",
                    to: ""
                }],
            },
            {
      
                path: '/publishSuc',
                name: 'Success',
                component: () =>
                    import ('../components/PublishSuc'),
                meta: [{
      
                    name: "我的文章",
                    to: ""
                }],
            },
            // 内容管理组件
            {
      
                path: '/source',
                name: 'Source',
                component: () =>
                    import ('../components/Source'),
                meta: [{
      
                    name: "素材管理",
                    to: ""
                }, ]
            },
            // 发布文章组件
            {
      
                path: "/publish",
                component: () =>
                    import ("../components/Publish.vue"),
                meta: [{
      
                        name: "首页",
                        to: "/dashboard"
                    },
                    {
      
                        name: "发布文章",
                        to: ""
                    },
                ],
            },
        ],
    },

]

const router = new VueRouter({
      
    routes
})

export default router

2.Echarts图表工具使用

npm install echarts -S

import echarts from 'echarts'

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020122521563689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjcyMDM4,size_16,color_FFFFFF,t_70)

这里注意必须在mounted生命周期中初始化echarts图表实例

此时,要发送一个请求到后台接口拿数据:

后台接口http://rap2api.taobao.org/app/mock/273954/fansphoto

 

 
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import echarts from "echarts";
import { fansdata } from "../api/api";


//生命周期 - 挂载完成（可以访问DOM元素）
async mounted() {
 const result = await fansdata();//从后台请求数据
 
 const arr = result.data.array;
 var myChart = echarts.init(this.$refs.main);
 // 指定图表的配置项和数据
 var option = {
   color: "rgb(41,146,222)",
   title: {
     text: "一周内粉丝变化",
   },
   tooltip: {},
   legend: {
     data: ["粉丝数"],
   },
   xAxis: {
     data: [
       "Monday",
       "Tuesday",
       "Wednesday",
       "Thursday",
       "Friday",
       "Saturday",
       "Sunday",
     ],
   },
   yAxis: {},
   series: [
     {
       name: "粉丝数",
       type: "bar",
       data: arr,
     },
   ],
 };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
},

// 粉丝数据接口
export const fansdata = ()=>{
  return axios.post("http://rap2api.taobao.org/app/mock/273954/data").catch(err=>{console.log(err)})
}

项目所用依赖

1. 运行依赖

• axios => 发送请求
• echarts => 图表
• element-ui => element ui组件
• lodash => js工具库,该项目用到深拷贝与对象合并
• moment => 时间处理工具库
• nprogress => 进度条库
• v-viewer => 图片预览工具库
• vue-quill-editor => 富文本编辑器
• vue-table-with-tree-grid => 树形菜单/表格

2. 开发依赖

• babel => es6+语法转换
• eslint/babel-eslint => 语法检查
• less/less-loader => less语法
• babel-plugin-transform-remove-console => 移除console插件

项目视图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sgx78JMN-1608904127454)(C:\Users\李静\AppData\Roaming\Typora\typora-user-images\image-20201225212946939.png)]

心得体会

碰到问题