Vue学习总结——前后端分离

1.引言

可能有些小伙伴对前后端分离的理解不够深刻，只知道当今前后端分离项目当今的潮流，认为只要使用Vue+Springboot的架构就是前后端分离项目，我认为，开发一个前后端分离项目，我们首先需要对前后端分离这个概念有清晰的认识，我来谈谈自己对前后端分离的理解。

2.什么是前后端分离（是什么）

前后端分离，是开发模式上的前后端分离。

当然还有项目架构方面的前后端分离，也就是在考虑请求并发，服务器性能，处理请求的效率等因素，从而进行前后端分离，对于初学者的理解来说不是那么友好，因此我们只讨论开发模式上的分离。

先下定义：前后端分离就是前后端各司其职，专注处理自己的工作。

3.为什么要前后端分离（为什么）

开发模式上的前后端分离，其目的是：提高开发效率

3.1 前后端不分离的弊端

了解前后端分离，我们就要了解在前后端分离之前，不分离的项目是怎么样的，相信了解后端的小伙伴都清楚，在我们学习后端的各种技术的时候，我们免不了要学习Html,Css,Js这样技术，这三样不是前端的技术吗，为什么后端要学习呢?

3.1.1 项目结构上的不分离

这里我们以springboot项目举例。首先springboot前后端不分离的项目的静态资源是放在rescoures文件夹下，html文件放在templates中，css，js，图片，音视频等文件放在static中，前端html,css,js等文件都在springboot项目的目录下，这是项目结构上的不分离。但项目结构上的不分离并不是关键。重要的是开发模式上的不分离。

3.1.2 开发模式上的不分离

当前后端未分离时，开发模式是：

1. 前端人员写好静态页面，将页面打包给后端，后端人员将页面放到静态文件目录下，通过后端实现跳转页面，使用jsp或thymeleaf等技术渲染数据等逻辑。
2. 后端人员直接全栈开发，前端后端都由后端来完成。

我们会发现，会出现如下问题

1. 对于后端人员的工作量都太大了，后端人员的工作重心应该集中在处理业务逻辑上，而不是在编写页面，或者渲染页面上。相对的，前端人员只需要对静态页面进行编写。因此在那个时期，前端人员的重要性并不是那么的大。
2. 由于前后端的耦合度过大，导致交流成本过大，前端人员编写的js代码，后端人员不一定能看懂，当项目出现bug的时候，查找问题的根源就变得很困难了。

3.2 前后端分离的优势

前后端分离，降低了前后端之间的耦合度，

让前端人员专心开发前端页面，处理页面跳转逻辑，渲染数据。

让后端人员专心处理业务逻辑，数据持久等操作。

出现了问题，前端的问题前端解决，后端的问题后端解决，纠错成本降低。

4.如何实现前后端分离（怎么办）

前面我们了解了什么是前后端分离，为什么要进行前后端分离，最后就应该说如何实现前后端分离了。

首先我们了解前后端分离的架构（图片引用自CSDN的大佬）

 前后端未分离时，所有项目运行在一台服务器上

前后端分离时前端项目和后端项目运行在不同的服务器上，前端和后端的服务器之间进行通信获取数据。普遍的，前端项目使用vue或react进行编写，运行在nginx服务器上。后端项目使用springboot，运行在tomcat服务器上。

前后端服务器通信的实现方式是使用ajax这门技术，在Vue中对官方推荐使用的是axios技术，是对ajax的一个封装增强，本质上还是ajax。这门技术前后端都必须要掌握，十分重要。

前端服务器向后端服务器接口发送ajax请求，获取数据，使用vue框架，将数据渲染在页面上。

后端编写api接口，接受前端请求，将查询出来的数据封装起来返回给前端服务器。

至此，前端人员只需要编写页面，发送请求，获取数据，渲染页面。后端人员只需要编写接口，接受请求，处理业务，数据持久化。做到了前后端各司其职，高效开发。