也可以说为什么我们学习的项目和真实的项目区别这么大，一个完整的项目你不用会所有的 技术点，但是你最好搞懂为什么需要他们

今天我们通过一个简单的留言板案例来一起探讨一下这些技术点，不论你是前端还是后 端人员，都可以完整阅读

纯静态状态

老板说需要一个简单的留言板应用，此时只需要它是一个装饰品，不需要真的留言功能，通 过一个简单的文本标签就能实现

此时它过于简陋，为了使它更为美观，更良好的交互，我们会写一些简单的css样式 和JavaScript代码来装饰它

如果我们要制作更多的这样的页面，为了节省时间，我们会在项目中引入 bootstrapUI 样式和jquery库这样的工具来加速开发

老板说为了让我们的页面更为美观和友好，我们考虑请专业的设计人员通过 墨 刀、pxcook等工具来进行设计和标注，再由前端人员进行代码实现

此时我们需要在项目中使用 帧动画 、svg、canvas、webgl等技术来实现复杂的动效， 样式很多我们使用了 less这类的css预处理器

老板说我们的留言板项目受众非常广，所以需要还考虑不同浏览器的兼容性

老板说由于开发人员的增加，为了协同开发和管理代码，我们使用git来管理代码，使用 gitlab来搭建一个私有的代码仓库

为了提高用户打开网页的速度，我们将部分资源使用cdn进行加速

数据展示

老板说我们需要在留言板的上面展示一些别人的留言，此时就需要和后端进行交互，此时我 们还是原始的服务端渲染也就是前后端不分离状态，我们可以使使用Java的 jsp、thymeleaf，php的smarty等技术来完成页面渲染

老板听别人说单页面应用，前后端分离的体验更为友好，为了实现前后端分离，我们的前端 选择了vuejs框架来实现留言板

vuejs的mvvm架构，通过数据绑定实现这个功能非常简单，为了页面的美观，我们使用 elementui 或者 vant来构建页面

后端给我们说他们给我们的接口是 restful风格的，我们可以通过后端提供的 swagger接口文档来查看具体的请求方式，使用postman等工具来调试接口，使 用axios或者umi-request的这种进一步封装的网络请求库来完成网络请求

后端接口还没有写好的时候，我们也可以通过 mock来制造假数据来测试开发

在这个过程中，前端项目的JavaScript和css代码越来越多，为了更好地管理它们，实 现工程化开发，我们的前端项目使用 webpack进行打包和构建，我们发现 webpack还具有代码优化，自动添加浏览器兼容性代码，以及代码转化的功能

为了更好地学习和使用 webpack，我们需要学习更多的关于 nodejs的知识，才能知道 他是如何处理文件和网络请求的，当然了解这些设计，我们还需要一点设计模式的知识

老板说，你们的项目够规模了，不管前后端，你们都需要先进行单元测试，然后再提交 代码审核，测试人员会编写专门的Python脚本来自动化测试

突然老板说为啥我们前后端分离以后，有用户反映在百度搜索不到我们的应用，哦原来前后 端分离对网页的SEO不太友好，我们前端考虑使用Nuxt.js来实现服务端渲染，或者 使用Phantomjs来拦截爬虫

有天老板说，我想了解一些我们的应用情况，像电影里面的那种很炫酷的数据展示屏，我们 决定使用echart.js来完成报表

老板又说能不能让用户打印出自己的留言数据呢？我们后端决定使用easyexcel来导出 Excel数据，使用PDF Box来导出pdf数据

此时我们的变更越来越频繁，部署环境越来越复杂，我们给项目引入了CI&CD持续集成与 持续部署 我们决定使用docker来部署，使用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来 完成搜索项目的构建

用户在留言的时候，我们需要将留言存入搜索文档存储中，如果同步操作，有可能导致阻 塞，我们使用消息队列来实现异步操作，我们使用 kafka、mq来发布消息，使用logstash来 收集处理数据并传递给elasticsearch

同时我们的后台日志也由elk来完成收集和处理

拓展

我们的留言板应用越来越大了，也诞生了很多周边应用，老板说，我们的应用能不能做出一 个体系来，统一一下设计风格，就像阿里系和京东系那样的

我们决定自己开发一套 UI库，基于vuejs，我们阅读了elementui的源码，参考他们的设 计，设计了一个 lybui为了提升我们在业界的影响力，我们将UI开源，并且使用vuepress写 了一个详细的文档