第1讲：前后端分离思想

什么是前端

前端其实是个很大的范畴。

  简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript。

上古时代

  这个节点不得不说一下，世界上第一款浏览器 NCSAMosaic ，是网景公司（Netscape）在1994年开发出来的，它的初衷是为了方便科研人员查阅资料、文档（这个时候的文档大多是图片形式的）。那个时代的每一个交互，按钮点击、表单提交，都需要等待浏览器响应很长时间，然后重新下载一个新页面给你看，大概是这样：

铁器时代（小前端时代）

  1995年，这是个好年份，又是这个搞事的网景公司，拜托一位叫布兰登·艾奇的大佬，希望开发出一个类似 Java 的脚本语言，用来提升浏览器的展示效果，增强动态交互能力。结果大佬喝着啤酒抽着烟，十来天就把这个脚本语言写出来了，功能很强大，就是语法一点都不像 Java。这样就渐渐形成了前端的雏形：HTML 为骨架，CSS 为外貌，JavaScript 为交互。

  同时期微软等一些公司也针对自家浏览器开发出了自己的脚本语言。浏览器五花八门，虽然有了比较统一的 ECMA 标准，但是浏览器先于标准在市场上流行开来，成为了事实标准。导致，现在前端工程师还要在做一些政府古老项目的时候，还要去处理浏览器兼容（万恶的 IE 系列）。

信息时代（大前端时代）

  自 2003 以后，前端发展渡过了一段比较平稳的时期，各大浏览器厂商除了按部就班的更新自己的浏览器产品之外，没有再作妖搞点其他事情。但是我们程序员们耐不住寂寞啊，工业化推动了信息化的快速到来，浏览器呈现的数据量越来越大，网页动态交互的需求越来越多，JavaScript 通过操作 DOM 的弊端和瓶颈越来越明显（频繁的交互操作，导致页面会很卡顿），仅仅从代码层面去提升页面性能，变得越来越难。于是优秀的大佬们又干了点惊天动地的小事儿：

• 2008 年，谷歌 V8 引擎发布，终结微软 IE 时代。

• 2009 年 AngularJS 诞生、Node诞生。

• 2011 年 ReactJS 诞生。

• 2014 年 VueJS 诞生。

全能前端时代

  2009年开始，大屏智能手机开始陆续出现，到后来 4G 移动网络的普及。使得前端从单一的基于的 PC 浏览器 展示的 web 应用，开始向手机、平板覆盖（HTML，CSS，JavaScript 也陆续推出了自己的新标准）。前端对于跨端浏览的需求越来越大，前端不再仅仅是 PC web 方面的开发，手机配置，与 app 进行 hybird 开发，变成了常态。甚至于 Facebook 推出了 React-Native，国内微信、支付宝推出小程序，试图整合web、native 开发。

前后端分离

明晰概念

  前后端分离是通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

  它的 核心思想 是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

没有前后端分离时的开发

  以前的javaWeb项目大多数使用jsp作为页面层展示数据给用户，因为流量不高，因此也没有那么苛刻的性能要求。但现在是大数据时代，对于互联网项目的性能要求是越来越高，因此原始的前后端耦合在一起的架构模式已经逐渐不能满足我们，因此我们需要需找一种解耦的方式，来大幅度提升我们的负载能力。

前后端分离的意义

  前后端分离可以实现真正的前后端解耦，前端服务器使用nginx。

  前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还可以css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快整体响应速度。（这里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack） 发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。

  双方互不干扰，前端与后端是相亲相爱的一家人。