大家好，又见面了，我是你们的朋友全栈君。
vue电商后台管理系统-阶段总结
上个月把这个项目做完简单整理了一下文档，和大家交流分享一下
一、项目技术栈
前端
- 前端采用 vue cli 脚手架搭建框架，使用 element UI 美化项目结构
- 环境依赖（开发依赖，运行依赖）
- 富文本编辑器
- nprogress加载进度条
- echarts图表展示
- 第三方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可以防止组件之间的样式冲突
代码语言：javascript复制<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来接收左侧菜单数据
代码语言：javascript复制// 获取所有菜单
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，点击切换状态
代码语言：javascript复制el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="toggleCollapsse">
