【REST系列】C/S(B/S)架构和web“前后端分离“的联系 ——REST‘C/S约束‘知识扩充

已于 2022-10-21 22:50:34 修改
阅读量6.1k 收藏 16
点赞数 7
分类专栏： 互联网架构 文章标签： mvc java restful
于 2021-08-20 01:43:31 首次发布
本文为博主原创文章，未经博主允许禁止转载。如有问题，欢迎指正。
本文链接：https://blog.csdn.net/qq_43413788/article/details/119798255
版权

文章目录

REST的第一条约束：Client-Server，也就是C/S架构

论文原文 5.1.2 Client-server
在这里插入图片描述
这条约束取自 3.4.1小节
在这里插入图片描述

C/S架构分离了客户端和服务器的关注点，使得他们可独立地进化
目前服务器和客户端的进化表现为：

  • 服务器关注数据处理。用集群、分布式、微服务等技术来提高处理速度和稳定性。
  • 客户端关注用户界面。因为客户端直接与人交互，涉及到人们的各种需求，所以发展的非常丰富：桌面应用、浏览器、手机App、智能穿戴设备App、小程序等等。

客户端和服务器通过网络接口来进行通信，这种促进服务器和客户端独立进化的软件架构，提高了web的丰富性

C/S(B/S)约束 和 web的"前后端分离" 的联系

"前后端分离"是B/S架构上的概念。B/S架构属于C/S的变种，他们有一些差异：

  • B/S相比于C/S 最大的好处是：用户仅需要安装一个浏览器，就可以使用各种各样的网络服务，而不需要下载专门的客户端软件；开发人员也不需要考虑客户端的跨平台的问题，只需要浏览器厂商开发不同平台上的浏览器即可
  • 在提供用户界面的方式上：C/S的用户界面完全构建在客户端，而B/S的用户界面则需要浏览器向服务器请求

为什么要讨论 C/S约束 和 “前后端分离”？
我认为它们是有联系的，根据C/S约束的描述，可以套用：“前后端不分离”，会限制服务器的进化，降低用户界面的可移植性

在"前后端分离技术"时代之前，是"动态页面技术"时代，是"前后端不分离"的

web前端发展过程
web最早期是静态网页时代，静态网站只能够根据用户的请求返回指向的网页，除了进行超链接跳转，没办法实现任何交互
为了做到用户和网站的动态交互，出现了以3P(PHP、JSP、ASP)为代表的"动态页面技术"
这些服务器端的动态页面技术使得网页可以获取服务器的数据并保持动态更新，推动了Google为代表的搜索引擎和各种论坛的出现，万维网开始快速发展

动态页面技术(非前后端分离)的缺点

  1. 限制了服务器的进化。它降低了服务器的专注性，服务器不仅要进行数据处理，还要渲染出HTML代码发送给客户端。
  2. 降低了用户界面的可移植性。用户界面跨平台移植意味着，用户界面可以做到一次编写就能部署到多个平台。这要求客户端具备相当的独立进化能力。前后端不分离时，前端代码必须要在后端编写，甚至前端代码会和后端代码同时写在一个文件里。这极大地限制了前端的进化能力，它并不是一个独立的组件，很难进化出可移植能力。
    另外，B/S的请求需要接口返回嵌入了数据的HTML代码，而C/S则只需要返回纯数据，所以他们的接口是不通用的，需要分别写接口。分别写接口又进一步限制了服务器的进化，因为返回HTML代码的数据量比只返回纯数据的数据量大得多，给服务器的带来的压力更大，两种数据量差异很大的接口同时存在，降低了对服务器压力预判的可靠性 (所以当时最好的做法可能是单独写个B/S端的服务器组件，代理C/S的纯数据接口返回HTML页面)
  3. 开发模式不专业。前端代码要在服务端工程中开发，要么需要服务端懂前端，要么需要前端懂服务端。随着前端发展的越来越完善、庞大，这种开发方式也越来越不专业。

直到Ajax的出现，让前后端分离成为了可能

Ajax 和 “前后端分离”
Ajax由微软开发，从1998年开始初步应用，但当时并没有火(好像是因为速度比较慢，人们对交互的需求也还不高)。
直到2005年初，Google在它发布的著名的交互应用程序(Google Map、Gmail、Google讨论组、Google搜索建议等)中大量使用了Ajax异步通讯，这让页面无需刷新就可以发起HTTP请求，用户也不用专门等待请求的响应，而是可以继续网页的浏览或操作。
Google在当时可以说将Ajax运用到了登峰造极的地步，突然间刺激了人们的神经，刷新了交互的需求，开发者们迅速关注起Ajax。从此Ajax开始普及，AJAX的广泛使用，标志了 Web2.0 时代的开启。
得益于AJax的异步通讯，前端技术发展的越来越快，专业的web前端工程师也开始出现。前端为了寻求良好的可维护性和可复用性，也不得不参考后端 MVC 进行了设计和拆分，后来出现了三大前端框架：AngularJS(2009)、React(2010)、Vue(2014)，"前后端分离的时代"正式来临

所以，"前后端分离"更加符合C/S约束，更加有利于服务端和客户端组件的独立进化。服务端有了更强的伸缩性，客户端也更加专业和丰富。现在的多平台客户端：百度网盘、爱奇艺等等，它们可以在网页、桌面应用、手机App等平台使用，所有平台上的同样功能调用的都是同一个接口

“前后端分离”，是一定意义上的C/S

B/S架构其实无论怎样都做不到像C/S架构一样真正的客户端-服务器分离，因为浏览器不可能保存所有网站的用户界面，用户界面必须向服务器请求。

但是我们可以变通地将"服务器"分为：“用户界面服务器” 和 “数据服务器”。事实也是如此，这个"用户界面服务器"叫做"静态资源服务器"

利用"前后端分离"开发出来的程序，可以将前端工程部署到专门的静态资源服务器(Apache、Nginx)。

这就实现了一定意义上的 “客户端-服务器分离”：客户端由 浏览器 + 静态资源服务器 组成，数据服务器专心做数据处理

无数_mirage
关注
  • 7
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript为什么强大，BS/CS，前后端分离演变史
Lieutenant的博客
09-13 4418
JavaScript王者归来 JavaScript最初只是一个脚本语言，为了给浏览器渲染的页面一点绚丽的效果，这时MVC正在大行其道，前端完全依赖后端 第一次变革是在2005年Google推广Ajax，使得人们第一次意识到了JS的强大，能够使网页异步无刷新显示数据 这时前端由于有了交互的本领，已经可以叫做App了，所以叫做Single Page Application，SPA单页面应用时代 于是前...
高性能低耦合，前后端分离的低代码平台赞爆了
LowCode_的博客
05-31 796
编者按：据说前后端分离很好用？那么实现前后端分离的低代码平台怎么样呢？本文详细介绍了前后端分离的概念及其作用，并进一步指出的前后端分离架构在低代码平台中的应用。 概要： （1）前后端分离是什么 （2）为什么需要前后端分离 （3）前后端分离的低代码平台 前后端分离是什么 简而言之，前后端分离指的是一种系统架构，也可以用来描述一种开发模式。如果想更加详细了解前后端分离的系统架构之前，我们需要先了解几个概念。 C/S架构 即Client/Server（客户端/服务器）结构，它是一种网络体
前后端分离原理
qq_40890660的博客
09-23 1343
前言 前后端分离已成为互联网项目开发的业界标准使用方式，通过Nginx+Tomcat的方式（也可以中间加一个Node.js）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端HTML页面通过Ajax调用后端的restuful ap...
前后端分离扫盲
起舞的日子
04-15 1万+
话说 各位读者盆友！周末愉快呀。今天我们了解下前后端分离-一种软件架构模式。 这篇博客的意义在于，如果贵公司软件架构就是前后端分离，或者你对前后端分离感兴趣，那么笔者这篇博客比较汇总，看这一篇博客就够了，在下集中了不少优秀的连接，最大的价值就类似与hao123。 前后端分离这个在17年火起来的吧。 目录： 参考文章 1.什么是前后端分离？ 2.你熟悉的软件架构模式是什么？ 3....
Spring boot项目前后端分离开发的基础知识和基本环境配置
最新发布
YUMIAloogy的博客~
04-17 998
Spring Boot是由Pivotal团队提供的基于Spring的全新框架，旨在简化Spring应用（有很多个pom文件）的初始搭建和开发过程。Spring Boot是所有基于Spring开发项目的起点Spring Boot就是尽可能地简化应用开发的门槛，让应用开发、测试、部署变得更加简单。
Spring boot 前后端分离项目的环境及准备
qq_69635978的博客
07-11 856
主要是对Spring boot中前后端分离项目的前端环境后后端环境进行学习
前后端分离开发架构
qq_54525448的博客
06-07 4141
前后端分离
基于AXIS2/C的C语言库实现对提供RESTAPI的系统进行数据访问
01-30
： 目前，通过RESTAPI来提供数据访问接口的系统已经非常普遍。但是对于某些使用C语言系统框架的程序，如需访问其它系统提供的 RESTAPI，就要C语言提供相应...AXIS2/C是基于AXIS2架构且用C语言实现的WebService 引擎。它
Rest风格前后端分离 web项目demo
05-03
**前后端分离与REST风格** 在现代Web应用开发中，前后端分离已经成为了一种主流模式。这种模式将前端用户界面的开发与后端业务逻辑的处理分离开来，以提高开发效率，提升用户体验，同时也更好地适应了敏捷开发的...
REST风格前后端分离框架（mavne分模块）
11-01
REST风格的前后端分离框架是现代Web开发中的一个重要概念，旨在提高系统的可伸缩性、灵活性和维护性。在这个框架中，"REST"代表表述性状态转移（Representational State Transfer），它是一种网络应用程序的设计风格...
Web框架，用于以C语言构建REST API，Webservices或任何HTTP端点。 可以流式传输大量数据，将JSON数据与Jansson集成，并创建websocket服务-C/C++开发
05-26
与嵌入式系统应用程序一样，用于以较小的内存占用量促进在C程序中创建Web应用程序。 您可以在HTTP或HTTPS模式下创建Web服务，流数据或实现服务器WebSocket。 你好，世界！ 示例应用程序您好的源代码
软件架构风格-BS三层架构
一步一个脚印，踏实努力，向着目标前进
10-17 4418
BS三层架构（Browser/Server three-tier architecture）是一种常见的软件架构模式，将一个应用程序分为三个主要的逻辑层：表示层（Presentation Layer）、业务逻辑层（Business Logic Layer）和数据访问层（Data Access Layer）。每个层有不同的职责和功能，通过清晰的分层结构提高了应用程序的可维护性、可扩展性和可测试性。
论前后端分离的好处
左直拳的马桶_日用桶
10-14 2547
前后端分离最大的意义在于前后端可以并行开发。 现在搞BS架构程序，前后端分离应该是主流了。前后端分离有什么好处呢？我认为最大的好处是，使得前后端可以并行开发。其次是前后端分离成2个不同的工种，好比桥接模式，各自独立演化，使得各自的水平会越来越高。 前后端分离对于产品来说，并没有很明显的好处。也就是说，前后端分离，并不比前后端不分离的程序更好。表现都是一样的。反而不分离的程序，页面输出时，就能夹带一些服务器变量，不必页面加载完毕后又请求一轮，可能性能会更好一些。当然啦，如果服务器输出这些变量要做很长时间的运算
【原】作为前端需要了解的B/S架构
weixin_33775572的博客
10-23 3132
其实B/S架构是属于后台方面的东西，不过作为一个前端，也是需要了解一下滴 C/S架构简要介绍 在了解什么是B/S架构之前，我们有必要了解一下什么是C/S架构： C/S架构是第一种比较早的软件架构，主要用于局域网内。也叫客户机/服务器模式。 它可以分为客户机和服务器两层：第一层是在客户机系统上结合了界面显示与业务逻辑，第二层是通过网络结合了数据库服务器。 简...
Springboot医院信息管理系统源码 带电子病历和LIS Saas应用+前后端分离+B/S架构
源码技术栈的博客
02-19 2065
云HIS系统采用主流成熟技术开发，软件结构简洁、代码规范易阅读，SaaS应用，全浏览器访问前后端分离，多服务协同，服务可拆分，功能易扩展。多集团统一登录患者主索引建立、主数据管理，统一对外接口管理。
java bs项目_BS（Java平台）
weixin_33997566的博客
02-13 2688
采用前后端分离的体系架构。采用前后端分离的开发模式的好处是前端、后台互不影响，发挥各自的特长，提高工作效率。前后端根据约定好的接口规范，按照规范的报文格式分别进行独立开发。前后端开发完成后，进行前后端联调，联调过程中对前后端的参数传递，页面串联，业务逻辑等进行验证。架构采用成熟的开源组件搭建，具有高并发、高性能、组件化等特点。前端前端开发框架在开源技术之上进行封装。用到的开源组件有：jQuery、...
大型医院云HIS系统：采用前后端分离架构，前端由Angular语言、JavaScript开发；后端使用Java语言开发 融合B/S版电子病历系统
baina666的博客
03-06 4318
(功能主要包括：处方管理、药品出、入库管理、库存管理、药房盘点门诊发药、付药统计、统计查询、发药患者查询统计、对发药、报损、退药、退货任意时间段的动态查询，药品效期、药品数量上、下限控制。(功能主要包括：处方管理、药品出、入库管理、库存管理、药房盘点、病区摆药、付药统计、统计查询，对发药、报损、退药、退货任意时间段的动态查询。药品效期、药品数量上、下限控制。(功能主要包括：住院登记、押金管理、住院情况查询、病历号替换、患者费用查询、中结帐单、出院结算、医嘱查询打印、费用查询打印、收入科室核算、数据维护等。
到底什么是前后端分离
顺其自然~专栏
08-16 3万+
1.到底什么是前后端分离？ 前后端分离的"前"特指浏览器端(或客户端)，直接呈现给用户的；后端是服务器端，处理业务逻辑和数据，不呈现给用户。 Java服务器端初学者最容易引起误解的一个概念就是：JSP是前端技术。 JSP一定一定一定要知道全称：Java Server Page。是运行在服务器端JVM之上Servlet容器里的，只是执行的结果是HTML，响应给浏览器。 Java EE先有的Servlet，那时候已经有了ASP(同样要知道是Active Server Page的意思)。 由于要在Ser
前后端分离开发模式介绍
热门推荐
weixin_45774195的博客
08-11 4万+
1.1 什么是前后端分离 前后端分离是目前一种非常流行的开发模式，它使项目的分工更加明确： 后端：负责处理、存储数据 前端：负责显示数据 前端和后端开发人员通过 接口 进行数据的交换。 1.2 为什么要进行前后端分离 前后端可以身心愉快地专注于各自擅长的领域 避免后端写前端代码（基本上1天时间，20%写后端代码，80%写页面…） 前端配置后端代码运行环境（简直是要疯… 装一堆环境，而且有些开发环境是windows，前端是macos，装环境就要装好几天） 避免前后端打架，推诿，甩锅… 提高开发效率 分
B/S架构的实现代码用例
06-09
以下是一个简单的B/S架构实现的代码用例，使用Java语言和Spring框架： 1. 前端代码（HTML、CSS、JavaScript）： ```html <!DOCTYPE html> <html> <head> <title>B/S Architecture Example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h1>B/S Architecture Example</h1> <div class="form-group"> <label for="input-text">Enter some text:</label> <input type="text" class="form-control" id="input-text" placeholder="Type something..."> </div> <button type="button" class="btn btn-primary" onclick="sendText()">Send</button> <hr> <div id="output"></div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.2.0/dist/tf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/universal-sentence-encoder@4.2.0/dist/universal-sentence-encoder.min.js"></script> <script src="app.js"></script> </body> </html> ``` 2. 后端代码（Java + Spring）： ```java package com.example.bsaexample; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; import org.tensorflow.Tensor; import org.tensorflow.Tensors; import org.tensorflow.framework.ConfigProto; import org.tensorflow.framework.GPUOptions; import org.tensorflow.framework.Session; import org.tensorflow.framework.Session.Runner; import org.tensorflow.framework.TensorShape; import java.util.Arrays; @SpringBootApplication @RestController public class BsaExampleApplication { public static void main(String[] args) { SpringApplication.run(BsaExampleApplication.class, args); } @PostMapping(value = "/predict", consumes = MediaType.APPLICATION_JSON_VALUE, produces = MediaType.APPLICATION_JSON_VALUE) public String predict(@RequestBody String input) { GPUOptions gpuOptions = GPUOptions.newBuilder().setVisibleDeviceList("0").build(); ConfigProto configProto = ConfigProto.newBuilder().setGpuOptions(gpuOptions).build(); try (Session session = Session.create(configProto.toByteArray())) { Tensor<String> inputTensor = Tensors.create(new String[] { input }); Runner runner = session.runner().feed("input", inputTensor).fetch("output"); Tensor<Float> outputTensor = runner.run().get(0).expect(Float.class); float[] output = outputTensor.copyTo(new float[1][512])[0]; return Arrays.toString(output); } catch (Exception e) { e.printStackTrace(); return "Error: " + e.getMessage(); } } } ``` 3. 前后端交互代码（JavaScript）： ```javascript async function sendText() { const input = $("#input-text").val(); if (input.trim() !== "") { $("#output").text("Loading..."); const output = await predict(input); $("#output").text(output); } } async function predict(input) { const model = await tf.loadGraphModel("model/model.json"); const encoder = await use.load(); const encodedInput = await encoder.embed([ input ]); const inputTensor = tf.tensor(encodedInput); const outputTensor = model.execute({ "input": inputTensor }); const output = await outputTensor.array(); return output; } ``` 这个例子实现了一个简单的文本编码预测功能，用户在前端输入一段文本，通过JavaScript调用后端的REST API进行计算，后端使用TensorFlow进行计算并返回结果。这个例子还包括了一些常见的开发框架和库，如Spring、Bootstrap、jQuery、TensorFlow.js和Universal Sentence Encoder。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值