舆情项目难点总结

舆情项目难点总结

项目功能方面

1. 前端做幂等
有时候新增舆情信息或者是删除舆情信息的时候，因为网络等原因导致客户端不能及时收到服务器的反馈，会导致用户多次提交。
解决方案1：
从样式修改，将按钮置为灰色的，隐藏，不可点击的方式。
解决方案2：
请求之前 ajax beforesend弹遮罩。
解决方案3：
提交时进行信息的判断，不允许重复信息的录入。

2. 采用了动态菜单，针对不同的用户
系统管理员admin、网信办工作人员、责任单位工作人员等角色，每个用户的权限不一样看到界面也不一样。

3. 采用了jwt认证
jwt就是对token的加密与解析，登录时后端加密传给前端token，token中会包含jwt的签发时间和其过期时间，不在白名单的请求会在服务器中解析token，比较过期时间与当前时间，判断是否过期

4. 针对不同分辨率屏幕做适配
采用的是flex布局加上百分比，在利用媒体函数进行不同屏幕适配。

5. 文件的下载
考虑到get方法进行下载有时候参数太长会超出限制，同时也是出于安全考虑采用post请求结合a标签进行文件下载

    let a = document.createElement('a');
    let url = window.globalConfig.contextPath+'/api/info/infoPartExcel?ids='+ids;
    let filename = '舆情总台账.xls';
    a.href=url;
    a.download = filename;
    a.click();

6. 同一文本框需要调多个函数，逻辑较为复杂
例如新增用户，需要根据选择的角色自动生成用户名，用户可以自己修改用户名，离开文本框需要判断用户名是不是唯一。如果是新增责任单位用户，还需要显示责任单位的input用来选择责任单位自动生成用户名。 所以同一文本框进行了多个事件绑定，需要进行事件的解绑。

项目优化方面

1.将所有的引用的文件进行下载，本地引用，图片格式的选择（根据实际情况），减少文件体积，压缩代码
2.功能相同的代码避免重复书写，抽取成函数，样式表合并
3.减少相同接口调用次数
4.对用户的信息进行缓存
5.js引用优化，根据不用情况选择不同模式。
普通模式，JS 会阻塞浏览器，浏览器必须等待 index.js 加载和执⾏完毕才能去做其它事情。一般将此类js放在在标签的底部，减少对整个页面下载的影响。

<script src="index.js"></script>

async 模式：JS 不会阻塞浏览器做任何其它的事情。它的加载是异步的，当它加载结束，JS 脚本会⽴即执⾏。

<script async src="index.js"></script>

defer 模式：JS 的加载是异步的，执⾏是被推迟的。等整个⽂档解析完成DOMContentLoaded 事件即将被触发时，被标记了defer 的 JS ⽂件才会开始依次执⾏

<script defer src="index.js"></script>

⼀般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时，我们会选⽤ async；当脚本依赖于 DOM元素和其它脚本的执⾏结果时，我们会选⽤ defer。

6.CSS异步加载
将马上要用到的文件，放在页面头部加载。其他模块的CSS可以使用loadCSS 和 Preload待页面渲染完后异步加载