前后端分离浅析以及分离教程

什么是前后端分离？

这里是经常容易被混淆的一些概念。

在说前后端分离之前，要先弄清楚：

1、什么是前端？

2、什么是后端？

3、什么前后端不分离？

4、什么是动态数据？

5、什么是静态文件？

6、什么是动静分离？

搞清楚这几个问题之后，什么是前后端分离就可以很清楚了。

所以，先来看第一个问题：什么是前端？

这又可以分解成几个小问题。

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 这些可以运行在服务器端的，统一称之为后端。

所以前后端的定义，不应该是以语言来定义，而是应该以它的运行环境，如果是在服务器端，就应该被称之为后端，代表着你看不见，摸不着。而如果运行在用户端，就应该被称之为前端，代表你是可以看得到的。

按照这种说法，前端和后端就分的很清楚了。

什么是前后端不分离

在 Android 和 IOS 没有出现的年代，还有一种流行的说法，叫做 C/S 和 B/S 架构。现在已经很少有人提了，如果你知道，这又是一个暴露年龄的名词。

C/S 架构，指的就是 Client-Server，意思就是在桌面程序上，有一个客户端，然后远程连接服务器端，用 Socket 或者是 Http 传输数据。

而 B/S 架构，就是指通过浏览器访问，不用提前安装一个客户端。

B/S 架构，曾一度被认为是 C/S 架构的替代者，好处就是无须安装，简单方便，研发速度也快。

在那个时候，JSP，ASP，PHP 还被称为三驾马车。

那个时候的写法，就是后端去控制一切。http://game.ptteng.com 是我很久之前写的一个前后端不分离的网站，右键的话，可以看到是一个完整的 Html 页。

这是什么意思呢？就是指，浏览器访问的是一个完整的 Html 网页，而这个网页呢，并不是一个静态的网页，写好在服务器上的，而是应用程序从数据库里取数据生成的，动态网页。

所以，前后端不分离的交互方式很简单，就是浏览器发请求，服务器端给出一个完整的网页，浏览器再发请求，服务器端再给出一个完整的网页。

坏处很明显，传输的重复数据比较多，网络又会有延迟。所以有没有办法，只传送必要的数据？

这是 Ajax 的起源。

Ajax 就是只传递数据，不传递整个网页。这也是被用来在翻页，注册，发送验证码等场景，但也仅仅止布于此了。

怎么样提升访问的性能，更多的人用的是网页静态化的技术。

就是把所有的动态数据都提前生成很多很多静态的 Html 网页，这样就避免了从数据库里取数据的时间。

这种方式本来不会发生变化，大家都习惯了这种做法。

突然有一天，苹果说我们发布了 Iphone。这个 Iphone 居然可以让程序运行在手机上。

很有一种 C/S 架构的感觉。

只是过去的 C/S 架构并没有大规模的应用在互联网上，多数上传统行业，互联网还是前后端不分离的多一些。

可是后端在写这些被称之为客户端的程序，就觉得太爽了。

过去还要套页面，还要控制跳转，现在呢？

面向 Api 编程啊，只需要告诉我 Api 是什么，我的每一个 Api 都是独立的，互相之间没有依赖。

App 自己做控制，做缓存，做跳转，做交互。

后端神马都不用管，只需要保证自己的 Api 接口是好的。Postman 很好用啊。还能自我验证。

但是不爽的在哪里？

就是针对客户端会有一个 ApiServer，然后针对网页，还会有一个 Home。

两个功能经常会一致，但是后端人员要写两套代码。一套是生成 Json 的，一套是生成 Html 网页的。

前端 JS 也很羡慕客户端的开发人员啊。过去前端就是一个打边角料的角色，只能写写静态文件，看着后端去把页面套的错误百出，偶尔写个校验，发送一个请求。

可是人家客户端！跟后端就没什么废话说，你只需要把 API 保证正确，剩下的全部我来。

两者之间的交互简单方便，快捷省力。多好的方式？

所以网页能否和客户端一样，也把决策权拿自己手里？

实际上是可以的啊。Angular 就这么干了！

这就是 SPA 的含义之一，总之，到这个时候，前后端分离的意义才展示出来。

再说什么叫做动静分离，这里还牵涉到一个叫做打版本的概念。

一般而言，会分成开发，测试和线上的环境。

在 SVN 的年代，分成 Trunk，Branches 和 Tags。

Tag，就是一个版本的快照。

为什么要有版本的快照？是希望能够在发生错误的时候回滚。

所以在前后端不分离的时候，如果发现网页上有一个错别字，怎么办？

不好意思，拉一个分支出来，重新打 Tag，前端后端的代码一起打。不允许你手动修改。

但是后端的发布是需要重启服务的啊。

为嘛我改一个错别字就需要重启服务？有没有办法让后端和前端不在一起部署？

互相独立？前端你写错字了，你自己来，反正 你又不需要重启？

这就是动静分离的起源。

把动态程序和静态程序分开，大家互相不影响，各自部署分开。

搞清楚这些概念之后我们再来看看具体怎么分离。因为不是一两句话可以讲清的，所以这里就把常用的几种分离提一下，具体的教程参考了网上很多文章之后整理了一本电子书，大概内容如下，需要的朋友可以直接点击领取>>前后端分离