zoukankan      html  css  js  c++  java
  • 浅析前后台分离

    一、传统开发模式(前后台不分离)

      概念:传统项目都是单节点项目,即所有的模块都是在一个项目中,然后把前后台代码都编译打包部署到一个web容器中,静态资源和数据库访问都是在一个项目中。

      开发方式:前台人员开发模板页面,然后将开发好的页面交给后台,后台去套模板,然后进行后台开发,前后台高度耦合,出现一些问题就需要从新将也模板页面打回或者后台人员进行修改。

      软件运行流程:用户通过url发出请求到服务器,服务器查找数据并且以流的形式生成页面返回到用户。如果页面中有ajax请求,当页面在浏览器总渲染的时候,再次发送ajax请求到服务器请求,当数据完全到页面则当前请求渲染成功。

      优点:对于小型项目开发比较快,对于浏览器的渲染压力比较小,服务器将页面大部分数据加载好然后返回给浏览器,对于seo也有较好的支持,对于权限管理比较好。

      缺点:不适合大型项目的分工,一旦有需求的改变,需要前后台同时做出改变,很有可能将所有的代码作废,不支持集群开发,不支持负载均衡。

    二、前后台分离开发

      概念:前台和后台部署在不同的服务器上,开发的时候约定一个接口,然后各自去开发,并且可以单独进行测试用例。在开发的途中前后台可以不相互依赖,并且上线后前后台的耦合度也比较低。

      类别:目前主流的有三种形式,nginx+server、node.js+server和nginx+node.js+server。

      1、nginx+server

        工作流程:这是我们目前使用的方式,nginx最为一个转发的服务器,具有动静分离、负载均衡的作用。浏览器发送url请求,所有的请求都经过nginx,如果是静态的资源(html、css等),直接将页面发送给浏览器,浏览器接收页面后进行渲染,页面中的ajax请求再次发送请求,Nginx判断是动态请求,将请求进行转发到web服务器,web服务器访问数据库将数据进行序列化(目前主流是json格式)返回给浏览器,浏览器完成页面渲染。

        优点:开发的时候前端人员部署一个Nginx服务器,开发过程可以不用完全依赖后台,可以做到前台后台同时开发。上线后后台服务也是可以部署多个,能够进行横向的扩展,并且可以配置Nginx进行负载均衡或者使用一致性hash算法增强高可用。

                  

        缺点:对于浏览器的渲染负担加重,并且对于seo支持不好。局部响应时间快。

        配置:Nginx配置 略,后台放开跨域权限

          springboot配置(使用java配置方案,也可以用xml形式):其中allowedOrigins表示哪些域名能够来跨域访问(*表示所有)。

    @Configuration
    public class CorsConfig extends WebMvcConfigurerAdapter  {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*")
                    .allowedMethods("GET", "HEAD", "POST","PUT", "DELETE", "OPTIONS")
                    .allowCredentials(false).maxAge(3600);
        }
    }

     

     2、node.js+server

        工作流程:目前node.js非常的火,所以使用的也不少,这种架构和第一种Nginx+server非常相似,node.js充当前台和后台的中间层。运行的过程略有不同,首先用户通过url进行请求,node.js将静态页面以及静态页面需要的数据加载好,然后返回给浏览器,这个和传统有点相同,但是可以通过rpc调用web服务,减少浏览器渲染。相当于多加了一个中间层。

        优点:和第一个大致相同。

      3、node.js+nginx+server   

          前后端分离之后,我们在原先的架构只上再单独增加了一个Node Server作为中间层,将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务,负责与提供数据的后端服务进行通信。

        并且还在这个基础上增加并使用了前端机(前端机是对所有的请求进行预处理和负载均衡,然后再转发给后端机。)的Nginx服务,浏览器发起的请求经过前端机的Nginx进行分发,URL请求统一分发到Node Server,在Node Server中根据请求类型从后端

        服务器上通过RPC服务请求页面的模板数据,然后进行页面的组装和渲染;API请求则直接转发到后端服务器,完成响应。

        

     

    结语

    前后端分离并非仅仅只是前后端开发的分工,而是在开发期进行代码存放分离、前后 端开发职责分离,前后端能够独立进行开发测试;在运行期进行应用部署分离,前后 端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比,能为我们 提升开发效率、增强代码可维护性,让我们有规划地打造一个前后端并重的精益开发 团队,更好地应对越来越复杂多变的Web应用开发需求。

      

  • 相关阅读:
    javaScript系列---【js中获取元素的方式】
    javaScript系列---【js运算符类型】
    javaScript系列---【数据类型的强制转换】
    javaScript系列---【解析js基本数据类型】
    javaScript系列---【操作元素样式】
    Typora系列---【Typora常用快捷键】
    nyoj--239--月老的难题(最小点覆盖)
    nyoj--284--坦克大战(bfs模板)
    hdoj--3339--In Action(最短路+01背包)
    hdoj--2015--偶数求和(水题)
  • 原文地址:https://www.cnblogs.com/fengmao/p/8257804.html
Copyright © 2011-2022 走看看