【前后端分离的Web系统开发 Springboot Vue】系列教程（一）- 前后端分离项目概念介绍

本系列教程适合有一定编程语言基础的，想往Web开发这块发展的程序员阅读，文章尽量用浅显易懂的语言解释一些复杂的概念，并会针对一些配置进行详细的介绍。本系列文章采用的技术栈是Springboot+Vue

1. 前后端不分离的年代

什么是前后端不分离的Web系统？一言蔽之就是，“界面展示交互和功能实现都在一套代码中实现”。大家还记得前后端不分离的年代，一个简单的系统是怎么实现的吗？

传统的JSP

有相关开发基础的读者应该会想起来过去盛行一时的JSP技术。一个JSP文件里，既有Java代码，又有HTML标签，还有CSS的样式。
那么在那时，一个点击按钮登录系统的功能是怎么完成的？实现过程可以简化为 “点击按钮 - 发送一个表单 -> 系统处理登录的校验 -> 登录的结果 -> 页面跳转”。
但要注意的是，这整个过程都是由你JSP的编译出来的Servlet实现的。简单说，就是界面展示和业务处理的逻辑都是一个程序提供的，我们将这种形式的系统叫做前后端不分离的系统。
此外，传统的桌面应用程序也可以叫做前后端不分离系统，不过这是广义上的了，狭义上的前后端一般指的是Web应用。

弊端

使用JSP开发的Web应用曾是我在大学时学习的噩梦，因为当时我已经接触了一些前后端分离的思想，特别是MVC的设计思路，于是对这种耦合度极高的构架及其反感。
显而易见，在今天，前后端不分离的Web系统弊端极多：

• 不易开发，写一个功能不但要兼顾实现，还要兼顾展示和交互，这对程序员的个人能力提出了极高的要求
• 不易维护，不易添加删减功能。一个功能可能存在于多个地方，需要改动需要改动极多的内容
• 无法支持日益增长的访问量。毕竟这类系统很难横向扩展，瓶颈摆在那，更别提分布式之类的实现了。

以JSP为代表的这类前后端不分离的系统迅速在商业化的开发中被淘汰掉了，现在沦为一些大学过时的教学项目，等着被更新换代。
当然，有一段时期市面上也出现过一些完全由后端实现功能，使用文本模板将静态化的界面填充上数据发送给用户浏览器的一些实现方式，这种呢，虽然有了前后端分离的思想，但本质上前端的界面代码也是由后端提供的，因此我也将其归类为前后端不分离系统。

2. 前后端分离思想

一直在讲，前后端分离，分离什么呢？可以这么说是分离两个东西，一个是分离技术，一个是分离职责。当然归根结底，核心目的是降低耦合。

分离职责

以前的Web项目，一个程序员不但要会写Java代码，也要会写html、css，又搞前端又搞后端。到今天呢，职责有了细分，有了前端工程师和后端工程师。前端工程师就老老实实写界面和交互，把页面搞好看点，把速度搞得流畅点；后端工程师就老老实实实现你的功能，把系统设计得更容易扩展些，访问压力承受更大些。这样，术业有专攻，世界也更加和谐了。
当然，对于Web项目来说，前后端分离，就是把展示界面的职责和实现业务的职责分开了。

分离技术

前后端分离开，相应的，技术也就分离开了。前端现在有自己的技术路线，后端也有自己的技术路线。
假设我是后端，我根本不关心前端采用什么技术实现的，我只要你前端能发送能适配api的请求，能接受响应，界面长啥样，怎么一个交互方式都不在乎；反过来，假设我是前端，我也不用在乎后端是采用什么方式连接的数据库，连接的哪个数据库，怎么获取的数据，我只要请求发给后端，后端能响应给我前端想要的数据就行了。

新的问题

综上呢，前后端分离的好处是很多的，在目前的web系统开发的趋势下，起码在没有什么重大革新的理念出现前，前后端分离的思想会是web开发的指导思想。
当然，坏处也是有的，前后端分离后，二者之间通过请求响应进行交互，就会出现一些安全的问题。如果系统设计不够严谨，很容易被人找到漏洞，进而造成损失。此外呢，分离后，也增多了前端开发人员和后端开发人员扯皮的时间...

3. 一些流行的框架

由于前后端分离后，前后端之间的交互以定义好的协议进行（大部分是HTTP协议），前端后端的技术实现不再被对方所关心，也不会成为阻碍，因此前端后端都发展出了许多各式各样的语言编写的优秀框架。下面简单列举几个常见的，耳熟能详的框架。

Web前端框架

• Vue https://cn.vuejs.org（目前比较流行，也是我用的最顺手的）
• React https://react.docschina.org/ （没深入开发过，不评价）
• Angular https://angular.io （不了解，不评价）
• Layui https://www.layui.com/ （自带组件的框架）

Web后端框架

• Django https://www.djangoproject.com/start/ （python编写的web框架，好用！）
• Spring https://spring.io （java的web全家桶，目前可以说是最主流的web后端开发框架，好不好用不对比不知道，但是生态是及其丰富的，我用的最多的）
• Ruby http://www.ruby-lang.org/zh_cn/ （ruby语言编写的，没用过，不评价）
• Flask https://dormousehole.readthedocs.io/en/latest/ （微型Django，没用过，不评价）

当然，框架虽多，从开发层面来说，适合项目的是最好的。假设你的Web项目是一个大型的企业级项目，涉及到分布式、高并发等听起来就很难的技术点，你就不能选择Flask这种框架来编写了，并不是说这类框架没办法实现那些技术点，只是作为企业级项目，当然要选择拥有最多解决方案，最海量的技术支撑的Spring全家桶了。假设你的项目只是课程设计的大作业，那么你可以采用Flask这类轻量级框架，快快写出代码然后把剩余时间拿去谈恋爱...
技术选型很重要！

4. 结语

大家好，我是axiangcoding，今天呢，就开启了构建前后端分离Web系统的系列教程这个天坑...我自己呢，是个初出茅庐的Web开发全栈程序员，写了2年多的代码，觉得自己积累了一点东西，就想分享出来，帮助大家少走一点弯路。特别是今年疫情，很多大学生觉得自己没有一技之长要焦虑秃了吧...那就好好跟我学下去吧。
当然，如果你刚好是这个行业的大牛，发现我的文章中有错误，请务必指出！错误的教程会影响到很多人，我就曾经因为一个错误的教程差点把祖传代码搞砸了，至今记忆犹新。

5. 小广告

本人承接中小型的Web系统项目、爬虫程序和系统集成、PC桌面应用程序等项目，从设计、实现到部署一条龙服务。
当然如果你是在校学生，在课设、毕设方面也有类似的需求，也可以和我联系，提供有偿指导，注意，是指导哦。
如果你有意愿想找我开发或者指导，请发生邮件至 [e-mail]或者联系QQ：3050419833，并简单介绍一下你的需求。
如果我自认为有能力承担你的项目或者接受你的求教，我会在第一时间反馈的哦