Web项目的所有技术点

Web项目的所有技术点

说明：对B站视频 完成一个项目为什么需要这么多技术点，项目是怎么一步步变复杂的， 的总结，up主：lookroot（应该是一个前端？）

应用	技术
简单留言板、装饰品不要真的留言功能	文本标签、CSS、JS
页面美观	、bootstrapUI、jqery、墨刀、pxcook
动效	帧动画、svg、canvas、webgl
给css加料	CSS预处理器：less
不同浏览器兼容性	google、firefox、opera、safari、IE
开发人员增加、协同开发、管理代码	git
私有代码仓库	gitlab
用户打开网页的速度	cdn
展示别人的留言、原始的服务端渲染即前后端不分离	java的JjSP、thymeleaf，PHP的smarty
前后端分离	vue.js的MVVM架构，elementUI或vant
后端给的接口	restful风格的接口
查看具体的请求方式	swagger接口文档
调试接口	postman
完成网络请求	axios或umi-request
制造假数据来测试开发	Mock.js
管理过多的JS、CSS代码 ，打包和构建前端项目，代码优化，自动添加浏览器兼容性代码，代码转化功能	webpack
如何处理文件和网络请求	node.js 设计模式
项目到规模后，要进行单元测试 ，才能提交代码审核	UI、Service、Unit，git
测试人员编写自动化测试脚本	Python
前后端分离对网页的SEO不友好	前端Nuxt.js完成服务器渲染，使用phantomjs拦截爬虫
了解我们的应用情况，数据展示屏 ，报表	echart.js
用户打印自己的留言数据	easyexcel导出Excel数据，PDF Box导出pdf数据
变更逐渐频繁，部署环境越来越复杂	CI&CD持续集成与持续部署，doicker部署，Sonar检查代码，Jenkins持续集成，k8s完成服务编排
网页弄成小程序	人手不够，决定采用跨平台框架，又因我们是vue技术栈，所以我们选择了uniapp，且我们是前后端分离故接口可以直接用
目前为止：留言板是动态的了，原本使用php构建后端服务，但前后端分离后Java更具优势，ssh过时ssm也不方便	springboot
构建和打包后端项目	maven
原本mysql持久化存储留言数据，使用mybatis和springdatajpa来操作数据库，访问人数增多数据库扛不住，使用redis缓存数据，实现分库分表和读写分离，为了体验友好和减轻服务器压力，使用vuex和localstorage来讲数据缓存在浏览器中
防止用户乱点和爬虫脚本	，前端需防抖和节流来控制用户操作，后端通过redis限制用户操作频率，用nginx限制用户IP访问，监测系统和用户操作用sentry搭建前端监控服务，后端使用log4j或者logback来收集日志
注册和登陆，前后端未分离时通过cookie和session来验证用户真实性	项目足够规格时使用shiro和spring security这类安全框架来规定用户的操作，前后端分离后，刻意使用token和jwt来验证用户真实性
留言板项目的账号可以登录公司旗下额的聊天项目，像微信一样可以授权很多平台的登录	oauth2和sso的单点登录
为了安全访问	将http切换为https
用户、留言越来越多，单击不能支撑这个服务	分布式springcloud 或dubbo zookeeper，nginx的负载均衡
大牛	项目的迭代优化、架构设计、JVM调优，通过用户画像推荐相关的热门留言
留言太多，有些问题已经有人问过了	，给页面添加一个搜索功能
项目规模太大，继续用数据库的like搜索不行了	给系统加入文档搜索和中文分词，使用elasticsearch、kibana来完成搜索项目的构建
用户留言时我们需要将留言存入搜索文档存储中，如果同步操作可能导致阻塞	使用消息队列实现异步操作，使用kafla、mq来发布消息，使用logstash来收集处理数据并传递给elasticsearch，后台日志由elk来完成收集和处理
留言板应用越来越大，诞生了很多周边应用，老板说我们的应用能不能做出一个体系来统一下设计风格，就像阿里系和京东系那样	自己开发一套UI库基于vue.js，阅读elementUI的源码，参考他们的设计设计了一个叫做lybUI，为了提升业界影响力，我们将UI开源并使用vuepress写了一个详细的文档