managerSystem全栈开发设计思路【思路】

全栈开发设计思路

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

一、主要功能

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

1. 操作员模块
   负责后台中心操作员账号管理，以超级管理员身份登录可以对账号进行添加，编辑，设置权限等操作。
2. 访客模块
   录入邀约访客信息，对访客信息进行管理查询；
3. 会员模块
   对成为学院会员的用户进行信息管理；
4. 日志模块
   工作日志、计划、内容管理，包含对日志的阅读回复
5. 音乐模块
   音乐资源管理，用于学院活动期间播放音乐和官网音乐展示等
6. 活动模块
   项目汇报、技术分享等活动流程管理

二、技术架构

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. 登录认证

2. 介绍: 在用户没有登录的情况下不允许访问相关页面；

   1. 实现思路:
   • 用户登录成功，保存登录状态信息
   • 在全局导航守卫处做统一登录认证
     • 检查不需要登录认证的路由，直接放行(在路由规则处设置 {meta:{requiresAuth: true}}进行判断)
     • 登录认证，获取登录成功保存状态信息，如果不存在说明未登录，重定向到登录界面

3. token身份认证

4. 介绍:
   token身份认证【令牌】是服务端对客户端请求进行身份检查的一种技术；
   用户登录成功后，服务端会生成token令牌响应给客户端；客户端后续请求必须携带此token，服务端获取token进行身份认证判断，确定该请求为正确请求后，才响应请求数据。

5. 前端实现思路：

   • 用户登录成功，保存服务端响应的token到本地
   • 在axios拦截器中设置token到Authorization 请求头

6. 后端实现思路:

   • 判断用户登录成功, 生成token令牌, 响应给用户
   • 拦截需要身份认证的所有请求，获取客户端发送的Authorization 请求头进行token验证

7. token时序图

8. 动态导航菜单

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

10. 实现思路：

    • 登录成功，加载菜单接口数据
    • 将菜单接口数据与vue路由router进行映射，核心是接口component组件字符串映射成本地组件对象

11. 动态导航标签

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

13. 实现思路:

    • 监听导航菜单路由信息变化$route，保存当前路由信息到vuex.store
    • 顶部导航标签数据从vuex.store中获取，通过vue计算属性动态提供

四、业务功能

1. 表单验证

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

3. 记住密码

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

5. 验证码

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

7. 图片上传

8. 介绍:
   用户上传图片时预览上传图片，显示上传后图片

9. 实现思路:

   • 请求方式： post
   • 请求数据类型: ectype: multpart-formdate
   • 构造FormData对象封装请求数据
   • 借助element-ui,上传组件绑定数据

10. 列表分页

11. 查询数据

12. 添加数据

13. 编辑数据

14. 删除数据

五、框架封装

1. 网络请求接口封装

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

3. UI组件封装

4. Menu 菜单组件

5. TagView 标签组件

6. Header 页头组件
   …

六、性能优化与问题解决

1. 刷新界面出现404错误

2. 原因:
   后台中心是基于vue的单页应用，只有一个index.html页面，所有页面的变化都是基于路由组件的变化，
   一个路由请求对应一个组件； 当刷新界面时，浏览器将路由请求当作url请求向后端请求数据，这时会出资源找不到错误404；

   1. 解决方法:
   • 后端接收到请求后，没有对应资源，全返回 index.html页面;
   • nginx服务端设置
     try_files $uri $uri/ /index.html;

3. 刷新界面数据丢失

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

   1. 解决方法：
      将缓存数据进行持久化存储，缓存不了的数据刷新时重新从服务加载。

5. 首屏加载缓慢

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

7. 解决办法

   1. 服务器开启 gzip资源压缩
   2. 组件按需引入
   3. 路由实例化使用懒加载
   4. 在html页面通用cdn引入js资源

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

9. 部署项目到云服务器

   1. 云服务器使用

10. 启动项目