小陈工的博客

项目简介：此次开发的项目是移动Web端的项目，核心业务是实现在线租房，功能类似链家，贝壳等APP主要模块：在线找房（地图、条件搜索）、用户登录、房源发布等效果展示：核心技术栈：1、React核心库：react、react-dom、react-router-dom2、脚手架：create-react-app3、数据请求：axios4、UI组件库：antd-mobile5、其他组件库：react-virtualized、formik+yup、react-spring等。

到此为止，我们已经成功地将项目部署上线，这个项目总体来说是非常复杂的，但是我们通过模块化开发，将其解耦成一个一个的小模块进行开发，最后再将其组合起来，这样就完成了一个完整的项目。

在src/views/dashboard/index.vue中添加布局代码，由于首页内容大部分都是静态内容，所以在这不做代码演示在src/views/dashboard/index.vue中添加如下代码：四、工作日历组件封装在src/views/dashboard/components/work-calendar.vue中添加以下代码：工作日历可以基于Element组件el-calendar进行封装：实现工作日历逻辑：在src/views/dashboard/index.vue中应用该组件：五、

import {// 筛选权限路由 // 第二个参数为当前用户的所拥有的菜单权限 // menus: ["settings","permissions"] // asyncRoutes是所有的动态路由 // asyncRoutes [{path: 'setting',name: 'setting'},{}] filterRoutes(context , menus) {

我们项目使用的是RBAC的权限模型，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统方案，RBAC提供了中间层Role（角色），其权限模式如下：RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可用户和角色是1对多的关系，即一个用户可以拥有多个角色在src/views/employees/co

我们找一个可以免费上传图片的服务器，帮我们代管图片，我们在自己的数据库里只保存一个地址就行。这个服务器就是一个公共的文件服务器，在这里我们使用腾讯云来保存图片二、图片上传流程解析我们新建的图片上传组件需要满足以下几个需求：三、实现文件上传组件3.1 安装依赖3.2 上传图片组件的基本布局在src/components/ImageUpload/index.vue中添加如下代码：3.3 全局注册组件在src/components/index.vue中添加如下代码：3.4 点击图片进行预览

在src/router/modules/employees.js中添加路由规则：三、员工详情页基本布局在src/views/employees/details.vue中建立基本布局：然后在src/views/employees/index.vue中绑定跳转：然后在src/api/employees.js中封装读取和保存用户信息的请求：四、实现用户名和密码的修改在src/views/employees/detail.vue中添加如下代码：五、将个人详情和岗位详情封装为组件5.1 个人详情和岗位

首先需要注意的是，vue-element-admin已经提供了类似功能，我们在其基础上做二次开发即可excel导入功能需要使用xlsx，所以需要安装xlsx插件：$ npm i xlsx将vue-element-admin提供的导入功能新建一个组件，位置： src/components/UploadExcel/index.vue在src/components/index.vue中添加如下代码：1.4 员工信息导入组件的基本布局src/components/UploadExcel/index.vue添

在后续的业务开发中，经常会用到一个类似下图的工具栏：在src/components/PageTools目录下新建index.vue组件：1.3 全局注册组件首先在src/componets/目录下新建index.vue文件，该文件负责所有的公共的组件的全局注册：然后在项目入口文件src/main.js中进行注册：二、员工列表展示2.1 员工列表页面效果图在src/employees/index.vue中添加如下代码：2.3 获取员工列表数据并分页展示首先，在src/api/employee

在src/views/setting/index.vue添加如下代码：三、获取角色信息首先，在src/api/setting.js中封装读取角色的信息的请求：然后，在src/views/setting/index.vue中调用接口获取数据，绑定表格数据：四、获取公司信息数据首先，在src/api/setting.js中封装读取公司信息的请求：然后在src/store/getters.js中快捷获取companyId：然后在src/views/setting/index.vue中绑定公司表单数据

今天主要实现了组织架构页面的相关业务逻辑，主要知识点包括树形结构的渲染，添加部门的规则校验，添加部门，删除部门，编辑部门的逻辑编写，总体来说难度不大， 但是代码量较多，需要耐心学习。

今天的内容比较简单，主要是给整个项目配置路由模块，让其能够实现页面跳转和左侧菜单展示。然后今天是中秋节，在这里祝看到这篇文章的小伙伴们中秋节快乐！

今天主要实现了左侧和顶部导航栏模块和的布局，以及补全了登录认证流程，添加了退出登录功能，代码较多，请细细品味。

今天的主要工作是封装了登录组件，用Vuex来设计登录流程，组件间共享用户数据。

vue - element - admin 是一个后台前端解决方案，它基于 vue 和 element - ui实现它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件它可以帮助我们快速搭建企业级中后台产品原型。

今天的内容主要是项目优化相关的知识，通过优化可以提高项目运行速度，减小项目体积，这在以后开发大型项目时非常有用，值得学习。

订单管理及数据统计模块。

今天完成了商品列表模块的编写，核心是图片上传及展示相关知识，以及商品列表数据的增删改查，逻辑性不强，代码量比较多，需要足够的耐心去实现。

今天的内容主要是分类参数的增删改查操作，要注意标签页和下拉菜单的使用方法。总体来说比较简单，易于掌握。

今天完成了项目的权限管理页面和角色管理页面，其中涉及到了很多新的知识点，代码比较多，逻辑也比较复杂，需要仔细研读才能理解其中的逻辑。

今天主要完成了展示商品列表页面，添加商品两大页面的制作，代码较多，逻辑也比较复杂，值得细细品味。

今天完成了用户管理模块的内容，包括获取用户列表，搜索，添加及删除用户功能，核心是通过前后端的交互获取动态数据。

至此我们的主页的总体布局就完成了，下一步要开发右侧主体显示的其他页面组件，比如用户模块，商品模块等。

vue项目实战之电商后台管理系统代码详解