简单了解动静分离和前后端分离

一、前端和后端的概念（怎么区分是前端还是后端）

什么是前端? 这又可以分解成几个小问题。
1.JS是前端么？ 2.只要用JS写的，都是前端么？ 3.只要是前端工程师写的，都是前端么？4.大前端就是指的用JS语言写的前端，哪怕它是运行在服务器那一端么？ 5.App算前端么？ 6.Html+CSS算前端么？ 7.小程序算前端么？ 8.ReactNative算前端么？
通常情况下，我们说的前端，都是指浏览器这一端，浏览器这一端，又在通常情况下，都是用JS来实现的，所以又会引申为，用JS写的大部分程序都是前端，包括App，小程序，H5等。而NodeJS出现之后，用NodeJS写的后端部分，也会被人归类为前端，为了区分之前的前端，就给他们起了一个名字，叫做“大前端”。

但，这种以语言为分界点去区分前后端，真的合理么？
在过去，我们是不分前后端的，无论是Java还是JS，全都是一个人来写。
到底是什么原因让我们开始区分前后端了？

第一个，是可以并行开发。前后端的进度互不影响，在过去，前后端不分离的情况下，前端的工作量相对较少，一个前端可以对四个后端。可以理解为，前端花了一周时间写好了静态页面，只需要调几个Ajax接口，不需要路由，也不需要渲染，所以他可以把时间继续在下一个项目里。
第二个，是成本问题。在过去，后端的成本还是比前端要高一些。同样的工作，如果能拆给两个人做，一个成本高一点，一个成本低一点，能接受。
第三个，CSS太难了。JS还好，和后端语言在对技能的训练上相差不大，可是CSS是什么鬼？记住那么多的属性，和Hash算法有关系吗？

所以才分成了前后端，而Html+CSS+JS，都是在浏览器端执行，统一称之为前端。而Java，C，Python，PHP这些可以运行在服务器端的，统一称之为后端。
所以前后端的定义，不应该是以语言来定义，而是应该以它的运行环境，如果是在服务器端，就应该被称之为后端，代表着你看不见，摸不着。
而如果运行在用户端，就应该被称之为前端，代表你是可以看得到的。

二、动静分离

静态页面：是指互联网架构中，几乎不变的页面(或者变化频率很低)。
动态页面：是指互联网架构中，不同用户不同场景访问，都不一样的页面。
动态资源 jps servlet spring mvc 与静态资源 js html img css 不会部署到同一个服务器。接口与视图分开部署，前端项目与后端项目都是独立部署的。也就是说前台通过后端提供的接口来拿到数据，后台只为前端提供接口。动静分离就是将动态请求和静态请求区分访问。将静态资源部署到一个服务器，动态资源部署到一个服务器，它们是分开部署的。

三、为什么要动静分离

静态页面访问路径短，访问速度快，几毫秒。动态页面访问路径长，访问速度相对较慢(数据库的访问，网络传输，业务逻辑计算)，几十毫秒甚至几百毫秒，对架构扩展性的要求更高。静态页面与动态页面以不同域名区分。
这样可以提升系统的访问速度，提升资源利用率。

四、前后分离

核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
前后端分离并非仅仅只是一种开发模式，而是一种架构模式（前后端分离架构）。千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了，需要区分前后端项目。前端项目与后端项目是两个项目，放在两个不同的服务器，需要独立部署，两个不同的工程，两个不同的代码库，不同的开发人员。前后端工程师需要约定交互接口，实现并行开发，开发结束后需要进行独立部署，前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑。

五、前后端交互

前后端数据交互均是json格式，前端传到后台的都是json格式的数据，即前端提交表单时会将表单数据序列化为json数据，那么在后台涉及到对象的都必须用@RequestBody接收。

参考博文：
（1） https://www.cnblogs.com/xixinhua/p/10265426.html （有助于理解什么是前后端）
（2） https://blog.csdn.net/sod5211314/article/details/80601724 （有助于理解前后端分离）