作为前端需要了解的B/S架构

   2016-10-31 0
核心提示: C/S架构简要介绍  在了解什么是B/S架构之前,我们有必要了解一下什么是C/S架构:  C/S架构是第一种比较早的软件架构,主要用于局域网内。也叫客户机/服务器模式。  它可以分为客户机和服务器两层:第一层是在客户机系统上结合了界面显示与业务逻辑,

 C/S架构简要介绍

  在了解什么是B/S架构之前,我们有必要了解一下什么是C/S架构:

  C/S架构是第一种比较早的软件架构,主要用于局域网内。也叫 客户机/服务器模式

  它可以分为客户机和服务器两层:第一层是在客户机系统上结合了界面显示与业务逻辑,第二层是通过网络结合了数据库服务器。

  简单的说就是第一层是用户表示层,第二层是数据库层。

  这里需要补充的是,客户端不仅仅是一些简单的操作,它也是会处理一些运算,业务逻辑的处理等。也就是说,客户端也做着一些本该由服务器来做的一些事情

  如图所示:

  C/S架构软件有一个特点,就是如果用户要使用的话,需要下载一个客户端,安装后就可以使用。比如QQ,OFFICE软件等。

  C/S架构的优点:

  1 C/S架构的界面和操作可以很丰富。(客户端操作界面可以随意排列,满足客户的需要)

  2 安全性能可以很容易保证。(因为只有两层的传输,而不是中间有很多层。

  3 由于只有一层交互,因此响应速度较快。(直接相连,中间没有什么阻隔或岔路,比如QQ,每天那么多人在线,也不觉得慢)

  C/S架构的缺点:

  可以将QQ作为类比:

  1 适用面窄,通常用于局域网中。

  2 用户群固定。由于程序需要安装才可使用,因此不适合面向一些不可知的用户。

  3 维护成本高,发生一次升级,则所有客户端的程序都需要改变。

 什么是B/S架构

  B/S架构的全称为Browser/Server,即浏览器/服务器结构。

  Browser指的是Web浏览器,极少数事务逻辑在前端实现,但主要事务逻辑在服务器端实现。

  B/S架构的系统无须特别安装,只有Web浏览器即可。

  其实就是我们前端现在做的一些事情,大部分的逻辑交给后台来实现,我们前端大部分是做一些数据渲染,请求等比较少的逻辑。

  B/S架构的分层:

  与C/S架构只有两层不同的是,B/S架构有三层,分别为:

  第一层表现层:主要完成用户和后台的交互及最终查询结果的输出功能。

  第二层逻辑层:主要是利用服务器完成客户端的应用逻辑功能。

  第三层数据层:主要是接受客户端请求后独立进行各种运算。

  如图所示:

 

  B/S架构的优点:

  1、客户端无需安装,有Web浏览器即可。

  2、BS架构可以直接放在广域网上,通过一定的权限控制实现多客户访问的目的,交互性较强。

  3、BS架构无需升级多个客户端,升级服务器即可。可以随时更新版本,而无需用户重新下载啊什么的。

  B/S架构的缺点:

  1、在跨浏览器上,BS架构不尽如人意。

  2、表现要达到CS程序的程度需要花费不少精力。

  3、在速度和安全性上需要花费巨大的设计成本,这是BS架构的最大问题。

  4、客户端服务器端的交互是请求-响应模式,通常需要刷新页面,这并不是客户乐意看到的。(在Ajax风行后此问题得到了一定程度的缓解)

 B/S架构的几种形式

  第一种:客户端-服务器-数据库

 

  这个应该是我们平时比较常用的一种模式:

  1、客户端向服务器发起Http请求

  2、服务器中的web服务层能够处理Http请求

  3、服务器中的应用层部分调用业务逻辑,调用业务逻辑上的方法

  4、如果有必要,服务器会和数据库进行数据交换. 然后将模版+数据渲染成最终的Html, 返送给客户端

  第二种:客户端-web服务器-应用服务器-数据库

 

  类似于第一种方法,只是将web服务和应用服务解耦

  1、客户端向web服务器发起Http请求

  2、web服务能够处理Http请求,并且调用应用服务器暴露在外的RESTFUL接口

  3、应用服务器的RESTFUL接口被调用,会执行对应的暴露方法.如果有必要和数据库进行数据交互,应用服务器会和数据库进行交互后,将json数据返回给web服务器

  4、web服务器将模版+数据组合渲染成html返回给客户端

  第三种方法:客户端-负载均衡器(Nginx)-中间服务器(Node)-应用服务器-数据库

  这种模式一般用在有大量的用户,高并发的应用中。

 

  1、整正暴露在外的不是真正web服务器的地址,而是负载均衡器器的地址

  2、客户向负载均衡器发起Http请求

  3、负载均衡器能够将客户端的Http请求均匀的转发给Node服务器集群

  4、Node服务器接收到Http请求之后,能够对其进行解析,并且能够调用应用服务器暴露在外的RESTFUL接口

  5、应用服务器的RESTFUL接口被调用,会执行对应的暴露方法.如果有必要和数据库进行数据交互,应用服务器会和数据库进行交互后,将json数据返回给Node

  6、Node层将模版+数据组合渲染成html返回反向代理服务器

  7、反向代理服务器将对应html返回给客户端

  Nginx的优点有:

  1、它能够承受、高并发的大量的请求,然后将这些请求均匀的转发给内部的服务器,分摊压力.

  2、反向代理能够解决跨域引起的问题,因为Nginx,Node,应用服务器,数据库都处于内网段中。

  3、Nginx非常擅长处理静态资源(img,css,js,video),所以也经常作为静态资源服务器,也就是我们平时所说的CDN

  比如:前一个用户访问index.html, 经过Nginx-Node-应用服务器-数据库链路之后,Nginx会把index.html返回给用户,并且会把index.html缓存在Nginx上,

  下一个用户再想请求index.html的时候,请求Nginx服务器,Nginx发现有index.html的缓存,于是就不用去请求Node层了,会直接将缓存的页面(如果没过期的话)返回给用户。

 发展前景

  C/S和B/S各有优势,C/S在图形的表现能力上以及运行的速度上肯定是强于B/S模式的,不过缺点就是他需要运行专门的客户端,而且更重要的是它不能跨平台,用c++在windows下写的程序肯定是不能在linux下跑的。

  B/S模式就,它不需要专门的客户端,只要浏览器,而浏览器是随操作系统就有的,方便就是他的优势了。而且,B/S是基于网页语言的、与操作系统无关,所以跨平台也是它的优势,而且以后随着网页语言以及浏览器的进步,B/S在表现能力上的处理以及运行的速度上会越来越快,它的缺点将会越来越少。尤其是HTML5的普及,在图形的渲染方面以及音频、文件的处理上已经非常强大了。不过,C/S架构也有着不可替代的作用。

 
标签: 前端
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • React前端框架路由跳转,前端回车事件、禁止空
    react router - historyhistory.push() 方法用于在JS中实现页面跳转history.go(-1) 用来实现页面的前进(1)和后退(-1)访问js连接后+?v1清缓存标签中的Class=“a b c”a b c分别代表3个样式名称!分别用空格隔开!Struts2》ajax请求后台,后台转换json返回aja
    03-08
  • 基于ZR.VUE 前端的改造,页面刷新报错
     问题描述:前后端分离开发,分开部署. 页面刷新 直接报404 错误的解决办法提示:  先在 .env.development 中 配置 VUE_APP_BASE_API , 将 '/' 替换为 后端地址 'http://localhost:8888/'如果是对应的发布的正式环境,也要修改  .env.production 的VUE_APP_
    03-08
  • Vue.js 前端项目在常见 Web 服务器上的部署配置
    Vue.js 前端项目在常见 Web 服务器上的部署配置
    Vue.js 前端项目在 Web 服务器上的部署配置Web 服务器是一种用于存储,处理和传输Web内容的软件。它是一种特殊类型的服务器,具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言,如 PHP,JavaScript,Ruby,Python 等,
    03-08
  • 基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程
    基于Vue3实现前端埋点上报插件并打包发布到npm
    目录项目环境搭建插件开发点击事件上报vue自定义指令手动上报方法页面访问次数上报(pv,uv)页面停留时间(TP)获取公共参数引入axios打包发布使用说明OptionOptions 示例点击指令上报手动上报写在最后前端埋点对于那些营销活动的项目是必须的,它可以反应出
    03-08
  • javascript前端如何使用google-protobuf
    1.首先下载google的protobuf的compiler,通过编译器可以将.proto文件转换为想要的语言文件。下载地址:https://repo1.maven.org/maven2/com/google/protobuf/protoc/2.写一个proto文件syntax = "proto3";message messagebody{//工厂 3Gstring factory = 1;//
    03-08
  • 前端笔记之JavaScript(六)让人头疼的正则表达式
    前端笔记之JavaScript(六)让人头疼的正则表达
    1.1正则概述和体验正则表达式是被用来匹配字符串中的字符组合的模式,常用来做表单验证。在JavaScript中,正则表达式也是对象,是一种引用类型。案例:正确输入一个电话号码,010-12345678,用户输入正确返回“对”,错误返回“错” var tel = prompt("请输
    03-08
  • 前端笔记之JavaScript(八)关于元素&计算后的样式
    前端笔记之JavaScript(八)关于元素&计算后的
    1.1概述得到id元素的方法 document.getElementById()得到一个元素。事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: document.getElementsByTagName(); 全线浏览器兼容的,得到元素的方法,就这两个:document.getElementById()      
    03-08
  • 前端优化分析 之 javascript引用位置优化
    在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢我通过firebug进行了下简单的分析 看下图  本页面首尾都存在javascript代码 我们分析得出 1、整个页面文档家在结束才开始加载css和js以及其他的数据 2、当顶部的所有js都家在结束之
    03-08
  • 500行JavaScript代码在前端根据数据生成CAD工程
    前言 用数据生成CAD图,一般采用的ObjectArx对CAD二次开发完成。ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包,它提供了以C++为基础的面向对象的开发环境及应用程序接口,能访问和创建AutoCAD图形数据库。而由于现在懂C++的人
    03-08
  • 学习前端页面css定位 网页前端设计css
    一、相对定位:absolute  相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。position:relative;同时可以设置上下左右位置偏移;rela
    03-08
点击排行