he19920226he / yiEduAdminSystem

易教育（在线教育平台）前端管理系统

易教育——一个简单的在线教育平台 查看客户端App

---

简介

本项目是‘易教育’在线教育平台后台管理系统前端项目

框架说明

• 基于第三方Vue管理系统框架开发——一个完全 开源免费 的企业中后台产品前端集成方案D2Admin

协作开发

• 全局框架配置——路由、状态管理(Vuex)、数据持久化、axious封装、封装一些复用的全局组件——表格+分页 组件

• 创建github项目，发起协作，上传全局配置好的框架，拟写协作文档

协作结果

• 由于多种原因，主要是团队成员只有我一个前端，总共开发人数也就3人，所以其他组员去开发后台

我的工作

• 整个项目的前端部分，包括前端需求分析、技术选型、框架配置、业务逻辑开发、单元测试

功能模块

• 用户管理 (超级管理员、教师、普通用户)

  • 添加用户
  • 查询用户
  • 用户订单

• 角色管理

  • 添加角色(角色名称、角色权限分配)
  • 查询角色

• 权限管理

  • 添加权限
  • 查询权限

• 课程管理

  • 添加课程 (课程基本信息、课程视频、课程试题、发布课程)
  • 查询课程(课程基本信息、课程视频管理)
  • 课程类别查询(树状结构显示类别关系)
  • 添加课程类别

• 积分管理

  • 查询用户积分
  • 积分兑换管理 (未开发)

• 评论管理

  • 查询评论和评论回复

开发心得

框架配置

• 框架文档

• 框架提供的相关解决方案

• 尽可能使用提供的相关方法，实现需求的功能

• vuex管理的数据，如果是vuex管理的数据，一般使用框架提供的那些方法修改，比如菜单的修改，框架是通过vuex实现菜单树的共享，如果你在某个地方修改了菜单话，需要重新调用设置菜单的vuex方法进行更新菜单。

• 入口文件、插件、组件配置；全局的路由拦截可以实现整个系统的很多需要的功能——属于全局配置

• 关于数据持久化：如果是数据持久化需要注意的是管理问题，这里提供了多种类型的持久化就很方便，比如区分用户、区分页面等。

• 业务架构与业务文件。

使用经验

• 由于前期时间不够的缘故，所以很多地方不不看文档就直接上手，导致踩了很多坑
• 对Vuex和vue路由的掌握不够，踩坑
• 对一些企业级的中后台管理系统的需求和解决方案不是很了解，导致对框架的某些功能踩坑
• 对webpack掌握还不太行，踩坑
• 环境变量文件env的好处，尤其是不同开发环境的接口修改
• Vue组件复用的深入考虑
• 用户交互的细节考虑；尤其是网络请求这部分，异步的处理
• 单页面引用的几个核心点:部分数据的持久化、部分数据的全局组件共享、模块化、组件化
• 其他；

之前比较少做过这种单页面应用的数据状态管理，其实也就是两个：复杂数据使用store进行多个组件的共享，数据获取和更新说明的都使用它提供的方法 需要持久化的数据（不过是一个数据源的持久化操作而已。）：肯定少不了存储，使用封装的本地存储方法，这里使用的是this.$store，注意调用对象，没有导入store的vue实例的地方无法调用， 此时就应该考虑了在vue页面调用。考虑我们需要持久化的数据有哪些，在哪里是它第一次获取的时候，进行存储比如登录获取菜单，在login页面就可以获取菜单 再通过上面的持久化方法进行保存还有通过store更新菜单的方法进行菜单的更新应响应视图。 关于数据与刷新问题：每一次刷新菜单数据都从缓存获取，通过store重新设置。同样更新菜单数据也一样。

• 好好学习js(es6)、node、webpack、vue，再回过头来深入理解这个项目的业务框架

console.log的封装使用

由于他调试的时候习惯使用console.log，结果造成了控制台一堆打印信息，一方面不美观，影响性能，另一方面是容易泄露信息 解决方案是一开始就自己封装console.log，全局引入，不使用的时候在对封装的方法进行修改

export default function $Console(){
  console.log.apply(console,arguments);
}

更好的方式，利用环境变量控制

function _console(data){
  if(App.env == "production" || !window.console) return;
  console.log.call(console, data);
  return;
};

还有一种解决方案是配置webpack，build后自动取消console.log

杂项

1. 菜单数据、用户信息的持久化和共享：状态共享：封装的vuex；持久化：使用基于localStorage封装的方法。
2. 数据持久化，其实就是使用h5的缓存方法，缓存可以实现数据持久化的需求，但是太多的缓存不容易管理，会导致项目难以维护，建议封装的缓存方法加入缓存日志记录，对项目中缓存了那些属性做到心中有数
3. 后台扁平化权限数组结构转换成树状的菜单数组结构——路由权限、菜单的实现，使用数组reduce方法封装了一个插件 4 axious封装，统一管理状态码，对后台不同模块的接口调用进行封装——api文件夹，接口调用参数的处理——多条件查询 5 全局组件的封装——项目多个页面都要使用到表格+分页功能，于是基于element ui的表格和分页插件进行二次封装——可以配置表格头部、表格数据、表格每一行最后的操作栏、是否开启表格选中功能、是否开启分页功能
4. 网络变化的监听：chrome12以上
5. 未作移动端适配，鉴于element ui部分组件在移动端会被缩放到很小，做一点简单样式优化，主要是：限制在容器的最小宽度，使用min-width属性
6. 视频上传添加进度管理控制，由于elemen ui 文件上传组件的on-progress事件在项目启用mock模拟请求数据的时候，无法触发，所以再项目不需要mock的时候把它移除掉

npm remove mockjs --save
删除 src/mock
删除 vue.config.js 中相关代码
// 判断环境加入模拟数据
const entry = config.entry('app')
if (process.env.VUE_APP_BUILD_MODE !== 'nomock') {
  entry
  .add('@/mock')
  .end()
}

一些应用

• 单页面应用的状态共享：高级操作封装和优雅使用达到优雅地实现都组件共享一个状态信息--vuex

应用一：菜单动态修改后自动更新菜单栏

// 设置顶栏菜单数据
 this.$store.commit('d2admin/menu/headerSet', menuHeader)

应用二：当前账号登录者修改自己的账号信息后自动更新其他组件使用到相关信息的地方

       // vuex存储的登录账号信息更新
        this.$store.dispatch('d2admin/user/set',
          {
            name: this.formAdminer.name
          },
          {
            root: true
          }

• 数据持久化：封装localStorage

业务逻辑功能实现设计

• 多级查询功能的设计和优化：

条件字段封装，数据绑定， 条件字段统一过滤处理，每次查询，根据过滤后的条件判断是否根据数目条件进行查询，得到传递给后台的参数data，再调用 对应的 封装 的api模块获取查询结果。 封装调用api发送请求模块，多出入口仅仅需要调用模块

• video相关：

当video src载入的资源还有载入完毕时，无法获取video dom元素 初次载入视频（这里video采用的是仅仅预先加载元数据），网络连接问题的判断和处理 视频播放过程的error监听处理 视频刷新按钮 视频dialog的关闭：仅暂停视频，不销毁当前载入的视频，这样一方面可以避免重复加载相同的视频，另一方面也是一种实现进度保存的简单方法，再次进入同一个视频可以从之前观看的位置开始

开发分支与master分支

• 测试无误，合并到master分支后，再进行一些额外的代码优化和其他一些细节处理,比如master分支安装依赖包会自动删除console.log等控制台打印信息
• 打包，自动部署到服务器。

部署相关

• 后台部分：开发时，我从github上拉取小伙伴开发的后台项目到本地进行开发，现在我把后台（自己利用了点时间试着修复了一两个bug，仍然有几个bug)项目部署到我自己阿里云服务器的tomcat上
• 前端部分：使用scp2插件实现打包后自动化部署到自己服务器的静态网站目录，静态资源服务器是nginx，部署前端项目和配置代理接口，真正实现前后台分离开发、部署。