【Web通识】通过Web构成解读Web组件

一、总述

最早的Web只是用户通过客户端（浏览器）来访问服务器（站点主机）上的固定内容文件，且Web内容也仅由简单的HTML静态文件构成，因此称作静态网站（Static Website），用户访问的内容是提前写好的放在服务器上的固定文件。

但是随着互联网的发展，Web也由最初的形态发展为现在的 动态化、多维化、模块化，称之为动态网站（Dynamic website），一个这样的Web站点既有静态文件，还有动态文件，以及第三方插件、前端框架、服务端语言、Web容器、数据库等，这些统称为Web组件，一个Web站点由许多Web组件构成。

之所以Web发展为现在的组件化、模块化，是因为这样的模式不仅能满足用户的需求，达到高效、便捷的使用，更便于开发人员协同开发，方便管理。

总结起来就是：高聚合、低耦合、便于开发与维护。

二、Web组件

通过剖析Web的构成，可将Web组件（该组件可理解为组成部件）大致分为以下几种：

1. 第三方内容
2. Web前端框架
3. Web应用
4. Web开发框架
5. Web服务端语言
6. Web服务器
7. 存储
8. 操作系统

下面对其逐一进行简要介绍。

1、第三方内容

第三方内容就是位于Web站点上的一段代码，用于引用第三方网站的某些功能。

常见第三方内容组件：

• 广告统计、第三方UI、页面插件

这类第三方组件比如广告统计，就是在网站页面插入一段JS，引用第三方的数据统计服务，用于本页面的各类数据，如访问量、停留时间等。

2、Web前端框架

Web前端框架是用于将一些网页需要实现的功能比如图片效果、滑动效果、翻页效果、点击效果、显示效果等，集成到一起，便与开发。

常见Web前端框架：

• AngularJS、jQuery、Bootstrap、Vue.JS

1）AngularJS

• AngularJS是一个 JavaScript框架，它是一个以 JavaScript 编写的库，可通过 <script>
  标签添加到HTML 页面。

  AngularJS诞生于2009年，后被Google所收购，已经被用于Google的多款产品当中。

2）jQuery

• jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

  jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

3）Bootstrap

• 来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。

4）Vue.JS

• Vue 是一套用于构建用户界面的渐进式JavaScript框架，属于小体量级的框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。

  Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

除此之外，一些常用的前端框架（还包括一些应用框架）还有

3、Web应用

Web应用是一种介于Web前端和后端（内容创作）之间的软件系统，为了简化创作，因为不是所有使用Web进行编辑创作的工作人员，都熟悉SQL语法。

常见Web应用：

• BBS、CMS、BLOG

1）BBS（Bulletin Board System）网络论坛系统

• BBS（Bulletin Board System）翻译为中文就是“电子布告栏系统”，早期的BBS与一般街头和校园内的公告板性质相同，只不过是通过电脑来传播或获得消息而已。

  BBS多用于大型公司或中小型企业，开放给客户交流的平台，也就是我们现在熟知的论坛，提供给用户注册、登陆、发帖、删帖、回帖等功能。

2）CMS（Content Management System）内容管理系统

• CMS是一种位于Web前端（Web 服务器）和后端办公系统或流程（内容创作、编辑）之间的软件系统。

  内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切你想要发布到Internet、Intranet以及Extranet网站的信息。

  内容管理还可选地提供内容抓取工具，将第三方信息来源，比如将文本文件、HTML网页、Web服务、关系数据库等的内容自动抓取，并经分析处理后放到自身的内容库中。

• 常见CMS系统：

  php类cms系统：dedecms、帝国cms、php168、phpcms、cmstop、discuz、phpwind等
  asp类cms系统：zblog、KingCMS等
  .net类cms系统：EoyooCMS等
  国外的著名cms系统：joomla、WordPress 、magento、drupal 、mambo。

  （CMS内容管理系统的流行程度统计排名）
  

3）BLOG 博客系统

• 博客系统分为公共博客平台（比如CSDN）和个人博客平台，用于实现写文章、发文章、点赞、评论等功能。

• 常见的BLOG系统：

  mblog：
  mblog开源免费的博客系统, Java语言开发, 支持mysql/h2数据库, 采用spring-boot、jpa、shiro、bootstrap等流行框架开发。

  JPress：
  一个类似 WordPress 的系统，使用 JFinal 和 Jboot 开发。模板安装 模板卸载 在线编辑，完善的开发文档 极致的开发体验 用户独立登录和注册入口手机短信和邮箱激活配置，对于新手来讲有点部署难度。

  b3log-solo：
  Solo 是一个专业、简约、稳定、极速的开源 Java 博客程序。你可以自己搭建使用，也可以通过购买我们搭建好的服务来直接使用，社区活跃，功能齐全，部署难度同 jpress。

4、Web开发框架

Web开发框架也可认为是Web应用框架（Web application framework），是将用于实现网站功能的一些模块，集成到一起的一个开发平台，用来支持动态网站、网络应用程序及网络服务的开发。
其类型有基于请求和基于组件两种架构

常见Web开发框架：

• Django、Rails、ThinkPHP

1）Django

• Django是Python的一个Web开发框架，基于MVC模式，诞生于2003年秋天，2005年发布正式版本，性能良好，且足够应对比较大的项目，与Flask相比，体量更大，由于创建使用Django项目后，所有的位置、目录均已生成好，因此灵活度比较低。

  下图是一个使用Django框架创建的blog项目：
  

2）Rails

• Ruby on Rails，简称 RoR 或 Rails，是一个使用 Ruby 语言写的开源 Web 应用框架，基于MVC模式，它结合了PHP体系的优点（快速开发）和Java体系的优点（程序规整），因此发展迅速。

3）ThinkPHP

• ThinkPHP是PHP语言的Web开发框架，免费开源、快速简单、面向对象、轻量，创立于2006年初，遵循Apache2开源协议。

除此之外，一些其他的Web开发框架：

---

附：MVC架构

在说Web开发框架时，一直提到MVC模式，那到底什么是MVC模式？

MVC全称 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种将业务逻辑、数据处理、用户界面分离组织的软件设计典范。

该设计模式将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑，达到了模块化的开发，让软件更加具有可维护性、可移植性和代码的可重用性，提高开发效率。其中

• M： 模型（Model） ，即数据层，负责定义一些数据对象和一些操作类；
  V： 视图（View），即界面显示层，负责对数据进行对点创建试图；
  C： 控制器（Controller），即业务逻辑层，负责从视图读取数据，控制用户输入，并调用合适的模型处理数据，为视图准备合适的数据。

模型层又分两层：

• Dao层（Database Accept Object）：负责数据的读取，也就是直接对数据库进行查询操作，获取结果集，将结果集中的数据装到OV（Object Value）对象中，之后再返回给Service层。
• Service层：负责一些业务处理，比如说：获取数据库连接，关闭数据库连接，事务回滚或者一些复杂的逻辑业务处理。

整个MVC的逻辑图如下：

也就是说，控制器模块（Controller）在MVC框架的软件系统中起一个桥梁作用，它负责从视图模块（View）中读取数据并选择合适的模型模块（Model）继续宁数据处理，，当模型中发生数据变化时，再将相应变化告知并及时更新视图。

但是在实际开发中，并不能完全按照以上理想模型进行设计，在小型项目中，Ｍ和Ｖ之间还是可能会有部分数据交互，比如Ｖ调用Ｍ的方法从数据库取数据等。

如果小型项目一味地严格追寻MVC模式，只会使得开发更加困难，增加结构的复杂性，并可能产生过多的更新操作，降低运行效率。

MVC暂时总结至此，后续有理解再进行补充

---

5、Web服务端语言

Web服务端语言也就是后端语言，即服务器开发语言，嵌入在HTML中的语言。

常见的Web服务端语言：

• PHP、ASP.NET、Java、

1）PHP（Hypertext Preprocessor）

• 开源免费的服务端编程语言，1995-06-08首次使用，1997-11-01PHP首个发行版。

2）ASP.NET（Active Server Page .NET）

• ASP.NET又称为ASP+，不仅仅是ASP的简单升级，而是微软公司推出的新一代脚本语言。ASP.NET基于.NET Framework的Web开发平台，不但吸收了ASP以前版本的最大优点并参照Java、VB语言的开发优势加入了许多新的特色，同时也修正了以前的ASP版本的运行错误。

3）Java

• Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。

  Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。

• Java语言的特点有：
  1-> 面向对象
  2-> 语法简单
  3-> 安全性高
  4-> 平台无关性
  5-> 支持多线程

（服务端编程语言的流行程度统计排名）

6、Web服务器

Web服务器（软件）是配置在服务器主机（硬件）上的一个服务支持软件，负责处理浏览器的请求（通过响应HTML静态文档，来处理浏览器HTTP请求），向浏览器提供其请求的文档，但是只能处理静态文档。

常见Web服务器：

• Apache、Nginx、IIS

1）Apache

• Apache全称Apache HTTP Server，是一款开源、免费、跨平台的Web服务器软件，也是目前最流行的服务器，它简单、速度快、性能稳定，并可做代理服务器来使用。
• 目前许多中小型站点都采用Wamp来建立站点，即Windows + Apache + PHP + MySQL的，这三款产品都是开源免费，且高效稳定。
  

2）Nginx（engine x）

• Nginx是一款轻量级的Web 服务器、反向代理服务器，其特点是占有内存少，并发能力强，与Apache相比较有更好的性能，在高并发下，由于其基于事件为导向的处理方式，可以达到比Apache更好的性能，因此目前发展极其迅速。
• 国内使用Nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

3）IIS（Internet Information Services）

• IIS是微软的一款付费Web服务器软件，只适用于Windows操作系统，主要支持ASP语言环境，配置简单。因此如果语言环境是ASP则选择IIS服务器，若是PHP语言环境则选择Apache服务器，且Apache服务器比较稳定。

（Web服务器的流行程度统计排名）

---

附：Web服务器与Web容器

在写Web服务器部分时，发现对Web服务器和Web容器的概念不清楚，经过查询各种文章最终有了一个大概的理解：

<Web服务器>

• Web服务器（Web Server）可以视为存在于服务器主机（硬件）上用于提供Web服务的最底层软件系统，为其余Web应用提供环境（更多是为Web容器提供环境），负责响应浏览器的请求，属于被动软件系统，只有当浏览器主动发起请求时才会进行响应，只能处理（响应）静态文档如HTML，使用的协议是HTTP，因此也可以理解为响应HTTP请求。
• 以Apache服务器为例，Web请求与响应如下：
  

<Web容器>

• web容器是一种服务程序，在服务器一个端口就有一个提供相应服务的程序，而这个程序就是处理从客户端发出的请求，如JAVA中的Tomcat容器，ASP的IIS或PWS都是这样的容器。一个服务器可以有多个容器。

以上是Web容器的百科词条，不太好理解，我理解如下：

• Web容器就是为Web应用程序组件提供环境，如PHP、JSP、ASP等，可以解析动态页面，弥补了Web服务器只能处理静态页面的短板，一个Web服务器可以部署多个Web容器。
• 当服务器（如Apache）收到用户请求时，如果是静态页面请求，则直接将响应的静态页面反馈给浏览器；若是动态页面请求，则将该请求交给相应的Web容器处理，如jsp请求交给Tomcat，Tomcat将页面处理为静态页面后，再反馈给Apache服务器，服务器将其反馈给浏览器。
• 带有Web容器的请求响应过程如下：
  
• 常见的Web容器有Tomcat（Servlet容器，可以解析JSP），IIS（ASP容器），Jboss（EJB容器）

Web服务器与Web容器的理解暂时总结至此，后续有理解再进行补充

---

7、存储

存储是指网站文件的存储方式，该文件是指Web站点在提供服务时所设计的所有资源，如Cookie凭证、临时缓存、用户信息、站点文件等。

常见存储方式：

• 文件存储、数据库存储、内存存储

1）文件存储

• 文件存储的内容有一些比如站点静态文件、Cookie凭证、网页插件等。
  

2）数据库存储

• 现在的动态站点离不开数据库的支持，构建动态页面时必须实时从数据库拿出数据生成页面，因此数据库用于存储用户信息、页面内容等这类时常变化的数据。
• 常用数据库有MySQL、MsSQL、Orcal、SQLserver等。

3）内存存储

• 内存存储一般是存储一些临时文件，如页面临时缓存等。

8、操作系统

此处操作系统是指部署服务器的系统，也包含部署数据库等服务的操作系统环境。

常见服务器系统：

• Windows、Linux、NetWare、Unix

1）Windows

• 用于部署服务器的Windows系统是指Windows Server，于2003年4月24日由微软推出，其核心是WSS（Microsoft Windows Server System）。
• 主要有WINNT 4.0 Server、Win2000/AdvancedServer、Win2003/AdvancedServer、WINDOWS SERVER 2008，Windows服务器操作系统派应用，结合.Net开发环境，为亲微软企业用户提供了良好的应用框架。
  

2）Linux

• 开源免费，基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的类Unix操作系统。由于开源一直被维护，因此比较安全且稳定，较适用于较小型的网络。
  

3）NetWare

• NetWare是一款NOVELL公司推出的网络操作系统，基于基本模块设计思想的开放式系统结构，是一个开放的网络服务器平台，可以方便地对其进行扩充，具有安全稳定的系统性能。
• 现在使用该操作系统的较少，但是NetWare操作系统仍以对网络硬件的要求较低（工作站只要是286机就可以了）而受到一些设备比较落后的中、小型企业，特别是学校的青睐。
  

4）Unix

• Unix是一款付费系统，一般用于大型的网站或大型的企、事业局域网中，特点是极其安全与稳定，所有操作几乎使用命令行完成，因此不容易上手，但是一旦熟悉后就极其方便。
  

目前大多服务器都部署在Linux操作系统上，因为其免费开源，稳定且便于维护与远程管理的优点，相比之下Windows Server与Unix由于其收费系统的巨大开支，一般的小公司无法承担此高额费用，所以使用Unix和Win的都是一些较大型网站，尤其是Unix，大型网站使用较多。

---

Web组件相关知识暂时总结至此，如有问题请指出。