程序员经常谈论的前后端分离,前后端解耦( 四 )

  • 填充html,展现动态效果,在页面上进行解析并操作DOM 。
  • (有兴趣的童鞋可以访问一下阿里巴巴等大型网站,然后按一下F12,监控一下你刷新一次页面,他的http是怎么玩的,大多数都是单独请求后台数据,使用json传输数据,而不是一个大而全的http请求把整个页面包括动+静全部返回过来)
    总结一下新的方式的请求步骤:
    大量并发浏览器请求--->web服务器集群(nginx)--->应用服务器集群(tomcat)--->文件/数据库/缓存/消息队列服务器集群
    同时又可以玩分模块,还可以按业务拆成一个个的小集群,为后面的架构升级做准备 。
    前后分离的优势1、可以实现真正的前后端解耦,前端服务器使用nginx 。
    前端/WEB服务器放的是css,js,图片等等一系列静态资源(甚至你还可以css,js,图片等资源放到特定的文件服务器,例如阿里云的oss,并使用cdn加速),前端服务器负责控制页面引用&跳转&路由,前端页面异步调用后端的接口,后端/应用服务器使用tomcat(把tomcat想象成一个数据提供者),加快整体响应速度 。
    这里需要使用一些前端工程化的框架比如nodejs,react,router,react,redux,webpack
    2、发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象 。
    页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责 。
    接口数据出错,数据没有提交成功,应答超时等问题,全部由后端工程师来解决 。
    双方互不干扰,前端与后端是相亲相爱的一家人 。
    3、在大并发情况下,我可以同时水平扩展前后端服务器,比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv 。
    去参加阿里的技术峰会,听他们说他们的web容器都是自己写的,就算他单实例抗10万http并发,2000台是2亿http并发,并且他们还可以根据预知洪峰来无限拓展,很恐怖,就一个首页 。。。
    4、减少后端服务器的并发/负载压力
    除了接口以外的其他所有http请求全部转移到前端nginx上,接口的请求调用tomcat,参考nginx反向代理tomcat 。
    且除了第一次页面请求外,浏览器会大量调用本地缓存 。
    5、即使后端服务暂时超时或者宕机了,前端页面也会正常访问,只不过数据刷不出来而已 。
    6、也许你也需要有微信相关的轻应用,那样你的接口完全可以共用,如果也有App相关的服务,那么只要通过一些代码重构,也可以大量复用接口,提升效率 。(多端应用)
    7、页面显示的东西再多也不怕,因为是异步加载 。
    8、nginx支持页面热部署,不用重启服务器,前端升级更无缝 。
    9、增加代码的维护性&易读性(前后端耦在一起的代码读起来相当费劲) 。
    10、提升开发效率,因为可以前后端并行开发,而不是像以前的强依赖 。
    11、在nginx中部署证书,外网使用https访问,并且只开放443和80端口,其他端口一律关闭(防止黑客端口扫描),
    内网使用http,性能和安全都有保障 。
    12、前端大量的组件代码得以复用,组件化,提升开发效率,抽出来!
    注意事项1、在开需求会议的时候,前后端工程师必须全部参加,并且需要制定好接口文档,后端工程师要写好测试用例(2个维度),不要让前端工程师充当你的专职测试,
    推荐使用chrome的插件postman或soapui或jmeter,service层的测试用例拿junit写 。ps:前端也可以玩单元测试吗?
    2、上述的接口并不是java里的interface,说白了调用接口就是调用你controler里的方法 。
    3、加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性 。
    4、我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能 。(上面提到的那些前端框架) 。
    5、如果你的项目很小,或者是一个单纯的内网项目,那你大可放心,不用任何架构而言,但是如果你的项目是外网项目,呵呵哒 。
    6、以前还有人在使用类似于velocity/freemarker等模板框架来生成静态页面,仁者见仁智者见智 。
    7、这篇文章主要的目的是说jsp在大型外网java web项目中被淘汰掉,可没说jsp可以完全不学,对于一些学生朋友来说,jsp/servlet等相关的java web基础还是要掌握牢的,不然你以为springmvc这种框架是基于什么来写的?
    8、如果页面上有一些权限等等相关的校验,那么这些相关的数据也可以通过ajax从接口里拿 。


    推荐阅读