马蹄清洗机
•山东外事职业大学 迟殿委
车辆调度本文首先分析了Web应用开发架构之经典的MVC模式
在服务端资源占用和用户访问网页的体验两方面的不足，提出了前后端分离的架构设计，从前后端分离架构风格的交互协议和特点、前端进一步分离并接管控制路由、前后端开发前的接口约定等几个方面进行了阐述，最后对该架构风格的应用场景做了总结。
螺蛳剪尾机Web之MVC架构
传统Web应用开发架构经历了从视图和业务逻辑完全混在一起的单体应用发展到视图和业务逻辑分离的MVC结构。最大的优点就是层与层之间实现了解耦，业务逻辑、跳转控制、视图展示各司其职。
1. MVC模式缺点
在MVC模式中控制器非常重要，是模型和视图进行沟通的桥梁，简单来说模型其实就是一个实体类对象，视图就是诸如JSP、HTML等页面模板，而请求首先到达控制器，控制器请求项目核心业务获取数据封装到模型对象，最后将模型传递到视图中进行展现。 这个模式有两个缺点：
1、用户每次想要看到最终页面必须要经过控制器、模型、视图三层。
2、视图到达浏览器之前的所有渲染工作都在后端服务器进行，占用了服务器运算资源，同时页面性能无法得到很好的优化。 为了提高用户的流畅上网体验，同时防止高并发对服务器造成资源占用，应将页面渲染工作从后端服务器转移到前端进行，后台只负责提供数据，前端负责解析数据和页面渲染，这种架构就是前后端分离架构。
2. MVC模式中引入Ajax
将视图页面中的动态数据全部交给ajax发送请求到服务器，服务器返回json格式的数据，视图页面进行数据解析和界面渲染，这样就会让view
负责数据展现和渲染，减轻了服务端压力和资源占用，提供更好的用户体验。改造后结构如下图所示：
这其实就是前后端分离的初步构想，简化后就是前后
端分离模式。
前后端分离架构
假如把浏览器页面作为前端，其他提供数据的都作为后端的话，可以简化为如下所示前后端分离模式：
前后端之间通过RESTFUL风格的url发出ajax请求。REST(Representational State Transfer)即表述性状态传递，它的核心思想是将互联网资源对应到一个url上，对资源的相关操作分别用HTTP协议里的GET,POST,DELETE,PUT表示。RESTFUL既简单又直观，通过HTTP的方法对资源进行操
作，简化了客户端和服务器之间交流的表达。RESTFUL风格的请求样例如下所示：
跨域解决方案
前后端通过ajax访问还有一个问题就是跨域，因为ajax 的xhr对象是不允许跨域访问的，要解决跨域问题可以采用以下解决方案。步态识别
《智慧工厂》Smart factory
June 2019
38│Solution For the Club │解决方案俱乐部
1. JSONP
基本原理就是通过动态创建script 标签，然后利用src 属性进行跨域，但是要注意JSONP 只支持GET 请求，不支持POST 请求。
2. CORS （跨域资源共享）
利用nginx 或者php 、java 等后端语言设置允许跨域请求header('Access-Control-Allow-Origin:*');//允许所有来源访问；
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式。
3. nginx服务器
直接使用nginx 服务器来部署前端项目，前端页面ajax 请求的url 直接指向nginx 服务器的地址，由nginx 反向代理指向后端服务器即可，相对来说这种方式是最佳解决跨域的方案。
前端进一步分离
无人驾驶系统从项目部署的角度来看，前后端彻底分离，需要为前端静态资源（html 、css 、图片等）配置一台服
务器，负责页面跳转路由等，后端配置一台服务器，负责数据提供，前端异步调用后端提供的接口，并获得数据，这样加快整体响应速度。
传统前后端分离架构，后端还是有控制层负责转发请求，获取业务逻辑处理结果。而请求跳转本应该属于前端的操作，所以目前比较流行的前端框架比如React 、Vue 、Angular 等均支持控制路由跳转的功能，这样后端就不需要控制器进行跳转，纯粹执行业务逻辑即可，这样的前后端分离是最为彻底的。
前端框架如VUE 等框架技术采用的架构准确来讲是MVVM 模式，该模式是工程师在解决WPF 应用程序开发复杂度时提出的解决方案，它实现了View 和Model 的自动同
步，开发者不需要再手动的绑定输入监听和手动的将数据结果展示在View 上，这就是双向数据绑定的优势，这是其与传统MVC 模式最大的不同。其架构模式如下图所示：
ViewModel 解决了View 和Model 之间转换的开发效率问题。但是ViewModel 内部的复杂度又变成了新的问题，其中一个问题就是双向数据绑定劣势。在双向数据绑定中，Model （可以理解为状态的集合） 中可以修改自己或其他Model 的状态，用户的操作（如在输入框中输入内容）也可以修改状态。这使得改变一个状态有可能会触发一连串的状态的变化，最后很难预测最终的状态是什么样的，使得代码变得很难调试。
为了解决这个问题便有了后来的Vue 单向数据流的解决方案-Vuex 。在复杂度较高的业务上使用单向数据流来解耦View 和Model 的关系。
前后端的分工和交互
前后端分离之后，后端工程师专注于业务逻辑代码和数据库访问代码，不需要了解前端框架和技术，同样，前端开发人员也不需要学习后台编程，专注于前端框架和页面开发即可，这样分工可以让软件开发分工明确，团队成员做自己擅长的事情。在某个功能模块出现问题的时候，可以准确定位是谁的问题，避免出现代码堆在一起时互相指责的问题。
当然，前后端肯定是需要交互的，即前端工程师如何通过url 调用后端开发人员提供的数据。项目开发初期需要前后端工程师协商形成一套标准的接口，即调用的API ，其中的接口方法的访问路径、参数、类型等需达成一致。这套接口后续可以修改，但尽量不要做过多改动。形成API 文档可以在项目中集成swagger2来构建RESTFUL API 文档，通过在访问接口上直接添加注释就能实现。
方案评估
任何软件架构风格都不可能适合所有场景，前后端分离也不例外。如果我们项目符合以下情景，可以考虑采用前后端分离架构：
1、团队成员不是全栈工程师，大部分都擅长前端或者后台之一。
2、对网页性能和用户体验要求较高，尤其是展示类网站和移动APP 。
3、高并发访问造成服务器压力过大，适合前端资源和后台逻辑部署到不同服务器上，减少对服务器直接访问量。
（完）
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议