YuguoManager

介绍

雨果学院后台管理中心是一款前后端分离的项目，前端基于vue框架实现，后端基于nodejs平台express框架实现(也可以基于java平台springboot+mybaits+mysql)。

主要功能包含：操作员模块、访客模块、会员模块、日志模块(日志回复)、音乐资源模块、视频宣传模块(待实现)、活动模块(如:项目汇报、技术分享等,待实现)

1. 操作员模块

负责后台中心操作员账号管理，以超级管理员身份登录可以对账号进行添加，编辑，设置权限等操作。

1. 访客模块

录入邀约访客信息，对访客信息进行管理查询；

1. 会员模块

对成为学院会员的用户进行信息管理；

1. 日志模块

工作日志、计划、内容管理，包含对日志的阅读回复

1. 音乐模块

音乐资源管理，用于学院活动期间播放音乐和官网音乐展示等

1. 活动模块

项目汇报、技术分享等活动流程管理

界面

技术架构

1. vue全家桶: vue + vue-router + vuex

2. elementUI组件库

3. axios网络库

4. localstoreage + cookie持久存储

5. eslint 代码检查

6. scss 预处理技术

7. git 版本控制

8. echarts 图表库

9. quill富文本

10. mockjs数据构造

核心功能

1. 登录认证

1. 介绍:  在用户没有登录的情况下不允许访问相关页面；
    2. 实现思路: 
 * 用户登录成功，保存登录状态信息
 * 在全局导航守卫处做统一登录认证
   + 检查不需要登录认证的路由，直接放行(在路由规则处设置 {meta:{requiresAuth: true}}进行判断)
   + 登录认证，获取登录成功保存状态信息，如果不存在说明未登录，重定向到登录界面

2. token鉴权

1. 介绍:

token鉴权【令牌】是服务端对客户端请求进行检查的一种技术；

用户登录成功后，服务端会生成token令牌响应给客户端；客户端后续请求必须携带此token，服务端获取token进行鉴权判断，确定该请求为正常请求，然后响应请求数据。

1. 实现思路：

2. 用户登录成功，保存服务端响应的token

3. 在axios拦截器中设置token到请求头

3. 动态导航菜单

1. 介绍：

管理中心左侧菜单由后端接口动态返回，后端根据登录账号权限返回不同菜单列表；

1. 实现思路：

2. 登录成功，加载菜单接口数据

3. 将菜单接口数据与vue路由router进行映射，核心是接口component组件字符串映射成本地组件对象

4. 动态导航标签

1. 介绍

将用户页面导航以标签形式记录在主界面顶部，方便快速切换至上次访问页面

1. 实现思路:

2. 监听导航菜单路由信息变化$route，保存当前路由信息到vuex.store

3. 顶部导航标签数据从vuex.store中获取，通过vue计算属性动态提供

业务功能

1. 表单验证

1. 介绍:

表单提交前，对表单项数据进行验证，包括非空验证，密码、邮箱数据规范等验证操作；目的减轻对服务端请求压力；

2. 记住密码

1. 介绍:

   用户登录时选中记住密码复选框，系统自己保存用户和密码，下次登录不再输入账号信息，直接登录；去掉记住密码复选框，清除密码；

3. 验证码

1. 介绍:

防止恶意用户通过脚本等手段频繁请求登录接口，对服务器性能造成破坏；

4. 图片上传

1. 介绍:

用户上传图片时预览上传图片，显示上传后图片

1. 实现思路:

2. 请求方式： post

3. 请求数据类型: ectype: multpart-formdate
4. 构造FormData对象封装请求数据
5. 借助element-ui,上传组件绑定数据

5. 列表分页

6. 查询数据

7. 添加数据

8. 编辑数据

9. 删除数据

### 10 ....

框架封装

1. 网络请求接口封装

1. 介绍

网络请求使用axios库，axios拦截器中统一处理响应数据和异常，设置请求头；封装业务接口请求API；

2. UI组件封装

1. Menu 菜单组件

2. TagView 标签组件

3. Header 页头组件

.....

性能优化与问题解决

1. 刷新界面出现404错误

1. 原因:

   后台中心是基于vue的单页应用，只有一个index.html页面，所有页面的变化都是基于路由组件的变化，

   一个路由请求对应一个组件； 当刷新界面时，浏览器将路由请求当作url请求向后端请求数据，这时会出资源找不到错误404；

   1. 解决方法:

   2. 后端接收到请求后，没有对应资源，全返回 index.html页面;

   3. nginx服务端设置

   try_files $uri $uri/ /index.html; 
   

2. 刷新界面数据丢失

1. 原因:

   当刷新界面时，会重新创建vue实例，缓存在store中的数据都会丢失。

   1. 解决方法：

   将缓存数据进行持久化存储，缓存不了的数据刷新时重新从服务加载。

3. 首屏加载缓慢

1. 原因

vue单页应用项目编译打包后生成一个index.html页面，所有组件编译成js文件；当部署到服务端后，第一次请求时会将所有js文件和其它资源一起加载，如果项目包比较大，加载就会缓慢；一个2-3m的项目包，加载时间大概6s左右； 第二次请求优先从本地浏览器缓存中获取数据。

1. 解决办法

2. 服务器开启 gzip资源压缩

3. 组件按需引入
4. 路由实例化使用懒加载

5. 在html页面通用cdn引入js资源

6. 打包时 加上参数 --report， 生成report.html性能报告页，查看优化效果

4. 部署项目到云服务器

1. 云服器使用

2. nginx项目部署配置