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

Vue学习总结——前后端分离,第1张

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接口,接受前端请求,将查询出来的数据封装起来返回给前端服务器。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/740577.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-28
下一篇 2022-04-28

发表评论

登录后才能评论

评论列表(0条)

保存