内部人员管理系统复盘
简介
一般的人员管理系统(后台管理系统+小程序或H5)包括：
人员信息管理(人员信息多字段增删改查)
内部活动报名管理(活动信息增删改查、批量报名/取消报名、活动签到、活动剪影编辑展示与存储)
内部知识库管理(文件上传、文件预览、文件下载、文件搜索、文件查看记录)
内部积分管理(积分排名展示、积分记录查询、积分数据导出、积分兑换)
内部用户权限管理(用户角色管理、用户权限管理、机构层级管理)
PC端与小程序端用户登录(PC端通过小程序扫码登录、小程序通过微信登录)
全栈开发过程中的重点功能点
1.活动剪影内容的编辑展示与存储(富文本编辑器)
编辑
在内容的编辑功能用主流的富文本编辑器就可以，如wangEditor、quill、tinymce等。
我这边使用的是wangEditor，它的文档和api非常详细，而且有丰富的插件，非常适合当前的需求。
存储
存储有两种思路方案：
将富文本编辑器里的html代码弄成string字符串存储到数据库中，前端渲染时直接将html代码渲染到富文本编辑器中。
图片的话采用每次上传都将图片上传到服务器，然后在html里使用的是图片url的方式。
图片和文字分开存储，图片存在服务器文件夹里，文字(包括图片的链接)存到数据库里(longtext)。
弊端是当图片较多时会走特别多请求，还要兼顾图片是否上传但是又在文章中删除的情况，需要一个删除图片接口在这种情况下调用。
直接将富文本编辑器里的html代码包括图片弄成一个完整的html文件，当作正常的文件上传到服务器当中
图片是base64编码的格式，直接与文字一起存到服务器的数据库中。
弊端是图片是base64编码的(base64格式下的图片大小比原本图片大小大概多三分之一)，如果图片多会导致整个html文件大小过大。
展示
在网页端展示时：直接将html代码渲染到富文本编辑器中即可。
在小程序端展示时：
如果是使用第一种存储方案，小程序就需要先去通过接口请求数据库中对应的文章html字符串，然后通过vue中的v-html指令渲染到页面上。
如果是使用第二种存储方案，小程序直接就通过web-view组件去展示，直接将文章的后端html地址传给该组件就能够直接展示，前提是在小程序后台管理那边设置业务域名白名单成功，不然也没得展示。
2.文件上传与预览
文件上传
文件上传主要还是单文件上传、大文件分片上传与断点续传，考虑到一般内部使用的系统基本也不可能有重复的文件要上传，所以就没搞快传功能。
使用单文件上传还是大文件分片上传的文件大小边界设定是10MB，小于10MB的文件使用单文件上传，大于10MB的文件使用大文件分片上传。
单文件上传：
用UI库里的组件uploader或者自己自定义上传请求到服务器，服务器接收二进制文件并且存到本地或者存到对应oss服务器中，上传成功后将文件的url存到数据库中。
注意自定义请求中不要自己设定请求头，因为上传组件已经帮你设定好了请求头，否则会导致文件上传失败(报400错误)。
大文件分片上传：
先将文件切割成若干个小文件，然后将这些同一个文件分割出来的小文件上传到服务器，服务器接收这些小文件时做好统一的标识，可以将这些小文件存到同一个文件夹中。
等到前端将小文件上传完(可以是前端传点参数告诉后端是否上传完毕)后再将这些小文件进行拼接，最后拼接成一个完整的文件。
为了保证上传小文件有统一标识方便后端进行文件合并，采用MD5算法算出大文件的hash值并跟随小文件一同上传至服务器。同时为了避免阻塞主线程，使用 Web Worker 来计算文件的hash值。
具体使用：Web Worker优化
断点续传
断点续传就是在上传文件时，如果上传失败或者中途中断，可以从上次中断的地方继续上传，而不是从头开始上传。
首先需要得到这个文件的唯一标识，才能知道是不是这个文件中断没传完，可以使用MD5算法得到文件的唯一标识。
还需要大文件分片上传时尽量按顺序上传，这样就可以直接在服务器中找到上次中断的地方，然后前端从对应的小文件块继续上传后续的小文件块。
文件预览
文件预览就要分成很多类，因为文件有很多类型，如图片、视频、PPT、word文档、PDF等等。
图片
图片的预览在网页与小程序中都直接使用image组件就可以了，因为图片的预览是直接在小程序端展示，所以不需要后端做什么处理，直接将图片的url传给image组件就可以了。
视频
视频的预览有限制，比如网页端的video元素正常只能预览h264编码格式的视频，小程序也不支持H.265（HEVC）编码的视频播放。
在当前这个项目中没有搞视频文件上传后端后进行转码存储，而是直接在前端进行限制，使用MP4Box这个库对视频进行分析，如果分析出视频不是h264的就不让用户上传。
后端使用静态资源请求处理器ResourceHttpRequestHandler能够自动将视频文件进行分片，前端就能够不需要下载整个文件再预览，而是有进度条的加载，加快用户的预览体验。
PPT、word文档、PDF
这些文件的预览在小程序中可以使用web-view组件，将文件的url传给该组件就能够直接展示，前提是在小程序后台管理那边设置业务域名白名单成功，不然也没得展示。
在网页端预览的话，需要使用vue-office库，它能够直接预览这三种文件。
3.扫码登录
这个项目的后台管理系统(网页端)设计成只能通过小程序扫码登录，需要再小程序上登录后，再扫码登录后台管理系统。
一般扫码有两种开发方案，一种是轮询，另一种是websocket。
轮询
轮询是在后台管理系统(网页端)上每隔一段时间去请求后端接口，看是否有用户登录，如果有用户登录就将用户信息返回给后台管理系统(网页端)，然后后台管理系统(网页端)就能够拿到用户信息，然后将用户信息存到本地缓存中，这样就能够在后台管理系统(网页端)上使用用户信息了。
websocket
websocket是在小程序端与后台管理系统(网页端)之间建立一个长连接，当小程序端登录后，后台管理系统(网页端)就能够收到小程序端的登录信息，然后将用户信息存到本地缓存中，这样就能够在后台管理系统(网页端)上使用用户信息了。
小程序
对于小程序来说都是扫码获取二维码的信息，把这个信息通过后端接口进行请求，告诉后端是哪个用户扫码登录了，然后后端将这个用户信息再传给网页端，
这就是正常的扫码登录流程。
4.活动管理设置活动地点（百度+高德）
网页端：在活动管理模块当中，设置活动地点时，需要能够同时集成百度地图和高德地图去查询选择地址，而不是单纯的填写地址文字。
小程序：可以根据地址在直接在微信中看到具体的地点，方便活动人员导航到具体位置去签到。
这就需要使用百度地图和高德地图的api，然后将这些api封装成一个组件，在活动管理中使用这个组件去查询并选择地址。
使用两个以上的地图SDK的话，在使用的时候需要注意一些问题：
不同的地图SDK不同，影响面也不同，所以需要进行JS隔离，避免不同的地图SDK之间的冲突。
所以需要采用 JS沙箱 的技术去隔离多个地图SDK的使用。
具体使用：JS沙箱
5.接口加密
接口加密的目的是为了防止接口被攻击，因为接口是直接暴露在公网上的，所以需要对接口进行加密处理。
这里使用的是非对称加密的方式，因为非对称加密的方式比较安全，所以这里使用的是RSA算法。
具体使用：RSA加密