一个简简单单的后台管理思路

电商后台管理项目--(如有雷同,纯属巧合)

项目介绍:

基于Vue2+Element+vue-router+axios+Echarts实现 主要包用户登录、退出登录、括商品管理、订单管理、用户管理、权限管理、数据统计...等功能 思维导图

1.搭建项目

下载vue2项目 安装 Element-ui 并引入 安装 axios 并引入 安装进度条并引入 安装防抖并引入(可查看文档lodash) 安装富文本并引入相应文件 (可在npm查看文档quill) 安装Echarts表并引入 安装moment并引入

2.删除无用文件

3.重置页面

4.实现用户登录

布局

使用elementui-from表单验证

登录账号密码 接口验证

在路由router.js里实现用户鉴权 没token不能跳转页面

4.1封装一个api请求

在请求拦截设置请求头

5.首页

进入首页显示wecome页 在路由里面配置退出登录用 把本地token清除用Container  实现主体布局

header用Layout 布局

渲染左侧数据顶部有折叠在element ui框架有方法左侧用NavMenu

左侧渲染左侧列表信息 在配置刷新页面不丢失当前的选中的状态 右侧在路由里面配置一个文件并使用router-view插入一个页面在获取用户列表根据页面需要进行渲染

6.用户管理

用户管理有面包屑 我们可以给他封装成一个组件可以复用减少代码重新编写提升了代码效率搜索用户可以使用element组件 可以点击搜索触发为空触发改变iput值触发 再用防抖或者节流增加用户体验分页功能 在element框架内使用该组件并绑定相应的值编辑用户信息 删除 分配角色点击添加 都会触发一个相应的对话框点击添加触发事件显示对话框 在里面写要添加的内容触发事件谈出来对话框 并运用element的from表单组件进行表单验证 并传递给