电商后台管理详情

后台管理项目介绍

• 一、项目结构的搭建
• • • 封装axios
    • 多环境变量的配置
• 二、开发流程
• • • 1.登录以及退出
    • • 登录的业务流程
      • 登录业务的相关技术点
      • • token原理分析
      • 登陆页面的布局
      • • 用到了以下的elment ui组件
      • 创建登陆组件
      • 实现登录功能
      • 退出
    • 2.主页面布局、用户列表功能
    • • 主页面布局
      • 侧边栏的布局以及渲染 请求数据
      • 侧边栏菜单的伸缩
      • 用户列表功能
      • 面包屑导航区域
      • 卡片视图区域、搜索框、添加按钮
      • 搜索功能的实现
      • 获取用户列表数据
      • 分页
    • 3.权限管理模块
    • • 权限列表
      • 角色列表
    • 4.商品管理
    • • 商品分类
    • 5.订单管理
    • 6.数据统计
• 打包

一、项目结构的搭建

封装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>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>

</style>

实现登录功能

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

退出

• 清空token

• 跳转到登录页

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

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

主页面布局

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

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

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

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

// 获取所有菜单
    async getMenuList() {
      const {data: res} = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.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>
export default {
  data() {
    return {
      //获取查询用户信息的参数
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      //保存请求回来的用户列表数据
      userList:[],
      total:0
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      //发送请求获取用户列表数据
      const { res: data } = await this.$http.get('users', {
        params: this.queryInfo
      })
      //如果返回状态为异常状态则报错并返回
      if (res.meta.status !== 200)
        return this.$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"

打包

(懒得写了 以后再补)