黑马vue电商后台管理系统总结

vue电商后台管理系统-阶段总结

上个月把这个项目做完简单整理了一下文档，和大家交流分享一下

一、项目技术栈

前端

• 前端采用 vue cli 脚手架搭建框架，使用 element UI 美化项目结构
  
  

• 环境依赖（开发依赖，运行依赖）

1. 富文本编辑器
2. nprogress加载进度条
3. echarts图表展示
4. 第三方http库 axios

后端

后端是已经写好了的，采用 express 搭建的 API 服务，返回的数据是 JSON 格式的数据，只需要导入数据库，并配置一下数据库信息，就可以跑起来了，也有对应的api文档

数据库

数据库采用 MySQL 5.7存储，我们只需要将项目的 sql 文件导入即可

二、开发流程

1.项目初始化

项目初始化

• 打开cmd运行vue ui

• 选择工作目录创建项目文件夹
• 安装element ui插件选择按需加载(如果添加全部会导致文件的体积过大)
• 安装axios依赖以发起Ajax请求
• 初始化git仓库

2.后台配置

• 把数据库的文件导入mysql的数据库中
• powershell运行node .\app.js 启动后台的api接口

3.登录以及退出

登录的业务流程

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

登录业务的相关技术点

• 通过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>

配置less、less-loader依赖

退出

• 清空token
• 跳转到登录页

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

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

主页面布局

• 结构布局采用了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>

// 点击按钮 切换菜单的折叠与展开
    toggleCollapsse() {
   
   
      this.isCollapse = !this.isCollapse
    },

用户列表功能

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

• BreadCRUMB面包屑导航
• Card卡片视图
• Form表单
• Table表格
• DIalog对话框
• Pagination分页
• Tooltip文字提示- Switch开关
<