总述

一、项目效果 

整体效果

登陆页

后台首页

用户管理页

说明 这里所有的数据都不是直接通过后端获取的, 而是通过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)