全栈开发设计思路
后台管理中心是一款前后端分离的项目,前端基于vue框架实现,后端基于nodejs平台express框架实现(也可以基于java平台springboot+mybaits+mysql)。
一、主要功能
主要功能包含:操作员模块、访客模块、会员模块、日志模块(日志回复)、音乐资源模块、视频宣传模块(待实现)、活动模块(如:项目汇报、技术分享等,待实现)
- 操作员模块
负责后台中心操作员账号管理,以超级管理员身份登录可以对账号进行添加,编辑,设置权限等操作。 - 访客模块
录入邀约访客信息,对访客信息进行管理查询; - 会员模块
对成为学院会员的用户进行信息管理; - 日志模块
工作日志、计划、内容管理,包含对日志的阅读回复 - 音乐模块
音乐资源管理,用于学院活动期间播放音乐和官网音乐展示等 - 活动模块
项目汇报、技术分享等活动流程管理
二、技术架构
- vue全家桶: vue + vue-router + vuex
- elementUI组件库
- axios网络库
- localstoreage + cookie持久存储
- eslint 代码检查
- scss 预处理技术
- git 版本控制
- echarts 图表库
- quill富文本
- mockjs数据构造
三、核心功能
-
登录认证
-
介绍: 在用户没有登录的情况下不允许访问相关页面;
- 实现思路:
- 用户登录成功,保存登录状态信息
- 在全局导航守卫处做统一登录认证
- 检查不需要登录认证的路由,直接放行(在路由规则处设置 {meta:{requiresAuth: true}}进行判断)
- 登录认证,获取登录成功保存状态信息,如果不存在说明未登录,重定向到登录界面
-
token身份认证
-
介绍:
token身份认证【令牌】是服务端对客户端请求进行身份检查的一种技术;
用户登录成功后,服务端会生成token令牌响应给客户端;客户端后续请求必须携带此token,服务端获取token进行身份认证判断,确定该请求为正确请求后,才响应请求数据。 -
前端实现思路:
- 用户登录成功,保存服务端响应的token到本地
- 在axios拦截器中设置token到Authorization 请求头
-
后端实现思路:
- 判断用户登录成功, 生成token令牌, 响应给用户
- 拦截需要身份认证的所有请求,获取客户端发送的Authorization 请求头进行token验证
-
token时序图
-
动态导航菜单
-
介绍:
管理中心左侧菜单由后端接口动态返回,后端根据登录账号权限返回不同菜单列表; -
实现思路:
- 登录成功,加载菜单接口数据
- 将菜单接口数据与vue路由router进行映射,核心是接口component组件字符串映射成本地组件对象
-
动态导航标签
-
介绍
将用户页面导航以标签形式记录在主界面顶部,方便快速切换至上次访问页面 -
实现思路:
- 监听导航菜单路由信息变化$route,保存当前路由信息到vuex.store
- 顶部导航标签数据从vuex.store中获取,通过vue计算属性动态提供
四、业务功能
-
表单验证
-
介绍:
表单提交前,对表单项数据进行验证,包括非空验证,密码、邮箱数据规范等验证操作;目的减轻对服务端请求压力; -
记住密码
-
介绍:
用户登录时选中记住密码复选框,系统自己保存用户和密码,下次登录不再输入账号信息,直接登录;去掉记住密码复选框,清除密码; -
验证码
-
介绍:
防止恶意用户通过脚本等手段频繁请求登录接口,对服务器性能造成破坏; -
图片上传
-
介绍:
用户上传图片时预览上传图片,显示上传后图片 -
实现思路:
- 请求方式: post
- 请求数据类型: ectype: multpart-formdate
- 构造FormData对象封装请求数据
- 借助element-ui,上传组件绑定数据
-
列表分页
-
查询数据
-
添加数据
-
编辑数据
-
删除数据
五、框架封装
-
网络请求接口封装
-
介绍
网络请求使用axios库,axios拦截器中统一处理响应数据和异常,设置请求头;封装业务接口请求API; -
UI组件封装
-
Menu 菜单组件
-
TagView 标签组件
-
Header 页头组件
…
六、性能优化与问题解决
-
刷新界面出现404错误
-
原因:
后台中心是基于vue的单页应用,只有一个index.html页面,所有页面的变化都是基于路由组件的变化,
一个路由请求对应一个组件; 当刷新界面时,浏览器将路由请求当作url请求向后端请求数据,这时会出资源找不到错误404;- 解决方法:
- 后端接收到请求后,没有对应资源,全返回 index.html页面;
- nginx服务端设置
try_files $uri $uri/ /index.html;
-
刷新界面数据丢失
-
原因:
当刷新界面时,会重新创建vue实例,缓存在store中的数据都会丢失。- 解决方法:
将缓存数据进行持久化存储,缓存不了的数据刷新时重新从服务加载。
- 解决方法:
-
首屏加载缓慢
-
原因
vue单页应用项目编译打包后生成一个index.html页面,所有组件编译成js文件;当部署到服务端后,第一次请求时会将所有js文件和其它资源一起加载,如果项目包比较大,加载就会缓慢;一个2-3m的项目包,加载时间大概6s左右; 第二次请求优先从本地浏览器缓存中获取数据。 -
解决办法
- 服务器开启 gzip资源压缩
- 组件按需引入
- 路由实例化使用懒加载
- 在html页面通用cdn引入js资源
-
打包时 加上参数 --report, 生成report.html性能报告页,查看优化效果
-
部署项目到云服务器
- 云服务器使用
-
启动项目