Vue + Element-ui实现后台管理系统(1) --- 总述
总述
一、项目效果
整体效果
登陆页
后台首页
用户管理页
说明
这里所有的数据都不是直接通过后端获取的, 而是通过Mock这个工具来模拟后端返回的接口数据。
附上github地址: mall-manage-system
二、项目介绍
1、技术架构
项目总体技术选型
vue-cli 3.0 + element-ui + vue-router + axios + Vuex + Mock + echarts
2、测试账号地址
访问地址
: 47.99.203.55:6066
账号:admin 密码:admin
账号:xiaoxiao 密码:xiaoxiao
因为菜单是根据不同用户权限动态生成的,所以这里两个账户所看到的后台菜单是不一样的。
3、项目整体结构
mall-manage-system # 电商后台管理系统
|
---src
|
---api
|# axios实例 编写统一的请求响应拦截信息
---annotation
---assets # 存放静态资源和全局自定义样式
|# 存放图片
---images
|# 存放自定义样式
---scss
--- components # 小组件 一般这里的都是可以复用的
|#首页侧边栏
---CommonAside.vue
|#首页头部
---CommonHeader.vue
|# element-ui 封装成公共from组件
---CommonForm.vue
|# element-ui 面包屑组件
---CommonTab.vue
|# element-ui 封装成公共表格组件
---CommonTable.vue
|# echarts 封装成公共图表组件
---EChart.vue
--- mock #模拟后端接口 返回数据
|
--- router#路由配置信息
|
--- store #vuex配置信息
|
--- view # 页面级组件,一般复用性很低
|# 首页相关组件
---Home
|# 登陆页相关组件
---Login
|# 用户管理相关组件
---UserManage
|# 商品管理相关组件
---MallManage
|# 主入口
---Main.vue
--- App.vue
--- main.js
--- vue.config.js
4、说明
接下来会分五篇博客大致讲下这个项目一些核心代码的实现
1、项目搭建+使⽤element实现⾸⻚布局
2、顶部导航菜单及与左侧导航联动的⾯包屑实现
3、封装一个ECharts组件的一点思路
4、封装一个Form表单组件和Table表格组件
5、企业开发之权限管理思路讲解
别人骂我胖,我会生气,因为我心里承认了我胖。别人说我矮,我就会觉得好笑,因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者,乃我内心之矛(12)