电商后台管理详情

后台管理项目介绍

一、项目结构的搭建

封装axios

首先要安装

axios

，一般我会在项目的

src

目录中，新建一个

network

文件夹,作为我们的网络请求模块，然后在里面新建一个

http.js

和一个

api.js

文件和一个

reques.js

。

http.js

文件用来封装我们的

axios

，

api.js

用来统一管理我们的接口

url

在

request.js

中添加

请求拦截

和

响应拦截

。在

请求拦截

中，会给请求头添加

token字段

，还有

loading动画的开启

。在

响应拦截

中，可以做一些

loading动画的关闭

，还有可以根据

后端

返回的

状态码

，做一些检验

token是否有效或者过期

的操作。接着就是做一些

axios

进行的

api

接口的封装，这里我用到了

async

，

await

封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回调地域的出现。

具体封装步骤可以去看axios的封装

多环境变量的配置

在项目根目录中新建

.env.*

.env.development

本地开发环境配置

.env.staging

测试环境配置

.env.production

正式环境配置
配置对应环境的变量，，用户可以根据需求修改，根据环境不同，变量就会不同了

具体封装步骤可以去看多环境变量

二、开发流程

1. 用户管理模块 登录/退出、状态切换、编辑、分页、分配角色、面包屑导航切换
2. 权限管理模块 添加角色、分配权限、权限展示、编辑、删除权限、面包屑导航切换
3. 商品管理模块 添加商品、编辑、分页、添加参数、添加属性、选择分类、添加分类
4. 订单管理模块 数据渲染、分页
5. 数据统计模块 echarts图表、数据渲染

1.登录以及退出

登录的业务流程

• 在登录页面输入用户名和密码
• 调用后台接口进行验证
• 通过验证后，根据后台的响应状态跳转到项目主页

登录业务的相关技术点

• 通过cookie在客户端记录状态
• 通过session在服务器端记录状态
• 通过token方式维持状态

token原理分析

登陆页面的布局

用到了以下的elment ui组件

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

创建登陆组件

在components文件夹中新建Login.vue组件

template，script，style标签,style标签中的scoped可以防止组件之间的样式冲突

<template><div><!-- 头像 --><!-- 登录区域 --></div></template><script>exportdefault{data(){return{}}}</script><stylelang="less"scoped></style>

实现登录功能

给登录按钮添加点击事件，当用户点击登录按钮时，如果当前所输入的账号信息合法，则允许向服务器发送登录请求，服务器根据请求信息检查当前账号是否正确，并返回响应信息，客户端通过返回的响应信息做出相应响应，即若账号密码错误则提示登陆失败，反之，登陆成功，将当前的token存储至本地并跳转至后台主页。

退出

• 清空token
• 跳转到登录页

// 给退出的按钮绑定一个logout事件logout(){// 清空token
      window.sessionStorage.clear()// 跳转到登录页this.$router.push('/login')},

2.主页面布局、用户列表功能

主页面布局

• 结构布局采用了element ui里的container组件

侧边栏的布局以及渲染 请求数据

在element-ui中也提供了相应的组件，在NavMenu导航菜单中可以找到相应的组件对应的区域

data中定义一个数组menulist来接收左侧菜单数据

// 获取所有菜单asyncgetMenuList(){const{data: res}=awaitthis.$http.get('menus')if(res.meta.status !==200)returnthis.this.$message.error(res.meta.msg)this.menulist = res.data
      console.log(res);},

侧边栏菜单的伸缩

定义isCollapse属性默认false，点击切换状态

el-aside :width="isCollapse ? '64px' : '200px'"><div class="toggle-button" @click="toggleCollapsse">🔺</div>12// 点击按钮 切换菜单的折叠与展开toggleCollapsse(){this.isCollapse =!this.isCollapse
    },

用户列表功能

用到了以下element ui组件，记得按需导入在element.js中注册

• BreadCRUMB面包屑导航
• Card卡片视图
• Form表单
• Table表格
• DIalog对话框
• Pagination分页
• Switch开关
• MessageBox

面包屑导航区域

<!-- 面包屑导航 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item><el-breadcrumb-item>用户列表</el-breadcrumb-item></el-breadcrumb>

卡片视图区域、搜索框、添加按钮

<!-- 卡片试图区域 --><el-card><!-- 搜索与添加 --><el-row :gutter="20"><el-col :span="8"><el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"><el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button></el-input></el-col><!-- 按钮 --><el-col :span="4"><el-button type="primary" @click="addDialogVisible = true">添加用户</el-button
          ></el-col></el-row></el-card>

搜索功能的实现

将值利用绑定到queryInfo.query

// 获取用户列表的参数对象
  queryInfo:{
    query:'',// 当前的页数
    pagenum:1,// 当前每页显示多少条数据
    pagesize:2,},

获取用户列表数据

<script>exportdefault{data(){return{//获取查询用户信息的参数
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:2},//保存请求回来的用户列表数据
      userList:[],
      total:0}},created(){this.getUserList()},
  methods:{asyncgetUserList(){//发送请求获取用户列表数据const{ res: data }=awaitthis.$http.get('users',{
        params:this.queryInfo
      })//如果返回状态为异常状态则报错并返回if(res.meta.status !==200)returnthis.$message.error('获取用户列表失败')//如果返回状态正常，将请求的数据保存在data中this.userList = res.data.users;this.total = res.data.total;}}}</script>

分页

• element.js中导入组件Pagination
• 更改组件中的绑定数据

@size-change: 监听pagesize改变的事件
@current-change: 监听页码值改变的事件
:current-page: 当前页
:page-sizes：一页的的信息条数
:page-size: 当前的页数
layout: 控制显示内容
:total：总共的信息条数

3.权限管理模块

权限列表

权限等级可以利用

插槽

和

v-if v-else-if

来判断

<el-table :data="list" style="width: 100%" border><el-table-column type="index" label="#" width="50"></el-table-column><el-table-column prop="authName" label="权限名称" width="180"></el-table-column><el-table-column prop="path" label="路径" width="180"></el-table-column><el-table-column label="权限等级"><template #default="scope"><el-tag v-if="scope.row.level == 0">一等权限</el-tag><el-tag v-else-if="scope.row.level == 1" type="success">二级权限</el-tag
            ><el-tag v-else-if="scope.row.level == 2" type="warning">三级权限</el-tag
            ></template></el-table-column></el-table>

角色列表

角色列表页面一个重点就是利用了

element ui

中的

table表格

的

展开行

分配权限也是利用利用了

element ui

中的

tree树形控件

来完成的

4.商品管理

在商品管理页面又被分为了:商品分类 分类参数 商品列表三个页面

商品分类

在这个页面我们用了一个新的组件

tree-table 树形表格

首先我们要下载

cnpm i vue-table-with-tree-grid --S

在main.js引入

import TreeTable from'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

具体代码如下

5.订单管理

6.数据统计

使用echarts 绘制图标 echarts官网
echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表
然后通过lodsh的_.merge()来合并请求到的数据。

lodsh的安装

npm i --save lodash

引用

import _ from "lodash"


打包

(懒得写了 以后再补)