Web系统设计【一】

一、基本概念


1、URL

统一资源定位系统(uniform resource locator;URL)用来指明文件在互联网中的位置

例如https://www.baidu.com/

分别为:

  • 协议:HTTPS
  • 主机地址(服务器地址、域名)www.baidu.com
  • 其它很多网址主机地址后面还会有文件路径和文件名,百度之所以没有文件名可以显示是因为在Web服务器配置中可以设定一个或多个默认文件名,浏览器会自动查找这些文件名

file:///C:/windows/Sandstone.html也是一个URL地址

“file://”指采用的直接文件方式访问; “/C:/windows/Sandstone.html”表示文件从根目录开始的路径

URL和URI的区别

统一资源标识符URI是一个用于标识某一互联网资源名称的字符串。 Web上可用的每种资源 -HTML文档、图像、视频片段、程序等都可由URI来定位。URL网址只是属于URI的一种,用来定位所需访问的网页地址。

​ URI、URL:http://www.yahoo.com.cn/index.html

​ URI: http://www.yahoo.com.cn/gif/stone.jpg

2、HTTP

超文本传输协议:HyperText Transfer Protocol,用于浏览网站的基本约束或规则

3、IP地址和DNS

浏览服务器上的资源,必须知道服务器在网络中的地址,这是通过IP地址来实现的。为了实现IP地址的易理解、易识别,又引入了域名的概念

域名解析系统:Domain Name System,域名通过域名解析系统保证每台主机的域名和IP地址一一对应。

例如:我们访问域名www.baidu.com,DNS解析后的地址可能为111.11.111.11(四组十进制数)

所以我们也由此得知:DNS故障后,我们通过IP地址访问是不影响的

4、Web和Internet的关系

Web不等于Internet,它只是Internet中的一个部分,而且和浏览器有关。以后只要提到Web,就一定是和浏览器有关的应用或其他事项。可以说Web是Internet中的一个子集或者说Web是互联网提供信息的一种手段。

5、Web服务器

Web服务器实际上就是一个软件系统。但它必须安装在一台高性能和高可靠性的计算机上,所以人们通常将那台计算机就叫做Web服务器。

  • Microsoft IIS
  • Oracle WebLogic
  • IBM WebSphere
  • 金蝶公司 Apusic
  • Apache 开源
  • Tomcat 开源
  • Jboss 开源

要使一台计算机成为Web服务器,必须安装上述专门的信息服务程序,并且安装UNIX、Linux或Windows 2003/2008/2012 Server等网络操作系统。一台计算机可以安装多个Web服务器。

为什么有些Web服务器需要花钱购买?

IIS、Tomcat、Apache和Jboss等,支持的并发访问用户数有限,适合作中小型网站系统的Web服务器,而WebLogic、WebSphere和金蝶Apusic等专业Web服务器,在并发用户大量增加的情况下,仍可保持较高的处理性能,适合作大型网站系统的Web服务器。购买专业版时又区分5用户、10用户、25用户、100用户的Web服务器,是指Web服务器最大支持的并发用户数。

6、Web页面

Web在提供信息服务之前,所有信息都必须以文件方式事先存放在Web服务器所管辖磁盘中某个文件夹下,其中包含了由超文本标记语言(HyperText Markup Language,HTML)组成的文本文件,这些文本文件称为超链接文件,又称网页文件或Web页面文件(Web page)。

同一个Web页面在不同的浏览器中可能具有不同的显示效果,为什么?

这是因为Web页面中可能使用了该浏览器不支持的属性或方法,或者浏览器所支持的技术在版本上有差异。有些浏览器使用的是独有的内核,有些浏览器内核是一样的,只是改头换面,变得更加符合用户需求。

网站和网页的区别:网站就是文件夹,网页就是文件

二、开发环境


原理上,任何文本编辑工具都可以用来开发,这里配置了VSCode的环境

  • Sublime
  • VSCode
  • notepad++

1、Web主流开发平台

  • Microsoft .NET开发平台
  • Oracle Java EE开发平台
  • LAMP开发平台(Linux+Apache+MySQL+PHP)

2、VSCode环境配置和使用技巧

下载、中文切换自行百度

(1)Live Server插件

用于预览html

若出现Open a folder or workspace... (File -> Open Folder)

解决:把html文件放进一个文件夹里面,用vscode打开文件夹

(2)Emmet快速编写

Emmet 语法

(3)主题和图标和字体更改

可以在商店搜索其他主题修改

  • Tiny Light
  • 推荐One Dark Pro

图标:

  • vscode-icons

字体:在设置中可更改大小和其他设置

使用技巧

  • html文件中英文可自动配置初始的代码

其他:Vscode 常用快捷操作

三、Web前端技术


1、HTML

用HTML 4.0编写的网页一般可在当前流行的浏览器中正常显示,但用HTML5.0编写的网页只能在支持HTML5的浏览器中显示。只要安装各大浏览器的最新版本就能正常浏览器HTML5网页。IE8.0及以下版本不支持HTML5,由于Windows XP不能升级到IE9,所以在XP中只能用FireFox、Chrome等浏览器浏览HTML5网页。

2、CSS

CSS(Cascading Style Sheets,层叠样式单)是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准,最新版为CSS3(IE9以上支持)

我们可以用CSS来控制网页显示的格式。字体大小、位置、颜色、文字对齐方式、图片长宽、鼠标的形状等网页显示的格式,它们也是网页的重要内容。

3、DHTML/JavaScript

DHTML即动态的HTML语言(Dynamic HTML)。除了具有HTML语言的一切性质外,还可在下载网页后仍能实时变换页面元素效果,使人们在浏览网页时看到网页动态效果。
DHTML并不是一门新的语言,它是以下技术、标准或规范的一种集成:
1)HTML
2)CSS (Cascading Style Sheets,层叠样式单)
3)CSSL(Client-Side Scripting Language,客户端脚本语言)
4)HTML DOM(HTML文档对象模型,Document Object Model)

JavaScript是目前使用最广泛的脚本语言,它是一种介于Java与HTML之间、基于对象的事件驱动的编程语言。使用JavaScript,不需要Java编译器,而是直接在Web浏览器中解释执行。

VBScript脚本语言是Visual Basic Script(VBS)的简称,它是Microsoft Visual Basic的一个子集,可看作是VB语言的简化版。VBS和Javascript一样都用于创建客户方的脚本程序,并处理页面上的事件及生成动态内容。

HTML DOM是W3C建议的Web技术标准之一,它将网页中的所有HTML标记抽象成对象,每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events),它们可以通过JavaScript语言来进行控制。所有HTML标记中的元素(包括文本和属性)都可以通过DOM访问,可以动态创建新的HTML元素,页面显示内容可以被删除或修改。

4、ActiveX技术

微软ActiveX控件技术是一种可重用的软件技术。将一个或一组功能封装起来,以对象方式供开发者使用,例如将文件加密和解密做成一个ActiveX控件,网上银行将密码输入框做成一个ActiveX控件,防止木马读取密码等。有大量商用或免费ActiveX控件供开发人员使用,也可用VC、VB等来开发一个ActiveX控件。ActiveX控件可在页面中直接使用,例如ActiveMovie控件可用于播放声音与视频,只需在控件的属性中指定参数值,就可在Web页面中控制其播放。 IE、Netscape、Firefox等浏览器都支持ActiveX技术。

厂家在生产电脑时,CPU、内存、硬盘、电源、机箱等直接原厂定制(OEM)购买,仅仅生产主板和一些配件,组装成计算机测试后作为产品销售。
同样地,在开发一个软件产品时,开发人员不需要编写所有功能,可使用免费或开源的插件或者ActiveX控件,也可购买一些控件,组装到你所开发的代码中,如利用ActiveX控件Windows Media player完成声视频的播放,以加快软件开发速度,降低软件开发成本。所以软件开发的效率取决于你发现可重用软件的能力。

当浏览的网页遇到ActiveX控件时,会检查用户本地系统的注册表,查看其是否已安装在本地机上。若已安装,浏览器显示该网页并激活控件。若未在用户本地安装,浏览器将查找并安装到本地。下载控件时,浏览器会缺省地显示一个消息框,通知用户将要开始下载,用户可以选择终止下载或继续下载(浏览器的Internet选项中设置)。

5、XML (eXtensible Markup Language,可扩展的标记语言)

HTML的不足:HTML不能适应信息检索和存档要求;无法描述矢量图形、科技符号和一些其他特殊显示效果;文档结构混乱而缺乏条理,导致浏览器的设计越来越复杂。

XML弥补了HTML的不足,将网络上传输的文档规范化,并赋予标记一定的含义,与此同时,还要保留其简捷、适于网上传输和浏览的优点。XML是标记语言,可根据需要自定义新的标记。XML已在文件配置、数据存储、异构数据交换等众多方面得到广泛应用。

四、Web后端开发技术


1、CGI

CGI是公共网关接口(Common Gateway Interface)的缩写,是用于连接WEB页面和应用程序的接口。可用VB、VC、Delphi、 Perl语言开发Web Server端运行的可执行程序,由网页的一个超链接激活进行调用,并对该程序的返回结果进行处理后,显示在页面上。 CGI编程困难且效率低,每一次修改程序代码后还须重新编译。另外每一个网上客户在访问CGI程序时,Web服务器都要单独建立应用进程,加重了服务器的负荷。CGI多用在安全级别要求高的Web应用中。

2、PHP

PHP,Hypertext Preprocessor,超文本预处理器

用开源和跨平台的PHP技术可创建动态网站,它包括完整的编程语言、支持因特网的各种协议、提供与MYSQL、SQL SERVER、ORACLE等多种数据库的访问能力,支持ODBC数据库连接方式。在Unix、GUN/Linux和微软Windows平台上均可运行。PHP的优点是安装方便、学习过程简单、数据库连接方便、兼容性强、扩展性强。

PHP程序需在Apache、Tomcat等Web服务器上运行Linux+PHP+MySQL+Tomcat+Apache+Dreamweaver是开发中小型企业网站系统的黄金组合,网站的运行效率佳,安全性高,可靠性和稳定性也非常好,受到广大开发者的青睐。

3、JSP

Java Server Page

JSP可用于建立先进、安全和跨平台的动态网页。JSP技术是以Java语言作为脚本语言的,使用JSP标识或者Java Servlet小脚本来生成页面上的动态内容。JSP可通过JDBC技术连接数据库。

JSP代码被编译成Servlet并由Java虚拟机执行,这种编译操作仅在对JSP页面的第一次请求时发生。跨平台应用是JSP的最大特色。作为Java平台的一部分,JSP拥有Java编程语言“一次编写,各处运行”的特点。不少大型企业使用Java EE平台提供的JSP技术构建Web应用系统。

4、ASP/ASP.NET

*Active Server Pages *

微软1996年11月推出ASP技术,可用VBScript或JavaScript脚本语言,结合HTML代码,快速完成服务器端动态网页的开发。Web服务器后台解释执行ASP动态网页,运行效率不高。2002年微软将ASP和.NET技术结合,推出了全新的ASP.NET技术,提供基于组件、事件驱动的可编程Web窗体,大大简化了编程,还可以用于建立Web服务。

ASP.NET与ASP有着本质的不同,ASP.NET完全基于模块与组件,具有更好的可扩展性与可定制性,数据处理方面引入了许多新技术,技术上远远超越了ASP,ASP.NET与Windows Server 家族的完美组合为各种的Web应用提供了一个更为稳定、高效、安全的运行环境。

5、ADO/ADO.NET

Microsoft ActiveX Data Object

ADO技术使得客户端应用程序可通过ODBC(Open DataBase Connectivity)、OLE DB等方式来访问和操作DB Server,易于使用、速度快、内存支出少、占用磁盘空间少,但它是面向连接的数据访问方式,即在操作数据库时,必须与数据库服务器进行联机操作。当并发用户操作时,会影响数据库性能。

ADO.NET技术是.NET平台上的全新数据访问方式,数据源的数据可作为XML文档进行传输和存储。在访问数据的时候ADO.NET会利用XML制作数据的一份副本,用户可断开与数据库服务器的连接直接在副本上进行操作,最后根据需要再将副本中的数据更新到数据库服务器,以大大提高数据访问性能。

6、Web Service

Web Service可以是一个小粒度的组件完成一个简单功能,也可是一个大粒度的应用程序。不管是作为组件还是应用程序,它都会向外界暴露一个能够通过Web进行调用的API,这就是说,能够用编程的方法通过Web访问来使用它。试设想,很多公司可以将某一具有独立功能的软件形成Web服务放在Web上,当某用户需要开发一个大型软件时,很多功能不需要自己开发,这部分功能可直接通过某种方式连接提供Web服务的主机得到。这样一来,你的应用系统会在开发人力、开发周期、开发成本、维护成本等方面大大减少或降低。其实网上已存在大量Web服务可供使用,例如发送和接收短消息功能、专业加密和解密功能、专业报表处理功能、微软的MapPoint Web服务等,当然或许你得为使用这些Web服务而付费。用户在调用这些Web服务时,只需要提供输入数据就可得到返回的结果,然后对返回的结果进行加工即可。

在Web应用程序中无需下载安装Web服务可直接调用Web服务提供的方法来实现某个功能,而通过ActiveX控件来实现某个功能时,必须将它下载到客户端,在客户端安装后才可使用。所以Web服务可实现分布式应用。

7、WCF

Windows Communication Foundation,Windows通讯接口

WCF是由微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,由.NET Framework 3.0开始引入,与Windows Presentation Foundation及Windows Workflow Foundation并列为新一代Windows操作系统的三大重要应用程序开发类库。WCF集合了几乎由.NET Framework所提供的所有通讯方法,可利用WCF来创建面向服务的应用程序。

WCF具有以下优点:统一性、互操作性、安全和可信赖、兼容性。

五、Web发展中的其他应用


1、AJAX

Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)最早由Jesse James Garrett提出。区别于传统的Web应用,Ajax应用的主要目的就是提高用户体验:

  • 不刷新整个页面,在页面内与服务器通信;
  • 使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的的响应能力;
  • 应用系统不需要由大量页面组成。大部分交互在页面内完成,不需要切换整个页面。

由此可见,Ajax使得Web应用更加动态,带来了更高的智能,并且可以提供表现能力丰富的Ajax UI组件。这样一类新型的Web应用叫做RIA(Rich Internet Application)应用。

2、Blog

Blog的全名是Web log,后来缩写为Blog,中文意思是“网络日志”,一般人们喜欢称之为“博客”。Blog是一个易于使用的网站,您可以在其中迅速发布想法、与他人交流以及从事其它活动,所有这一切都是免费的。

3、Wiki

Wiki一词来源于夏威夷语“wee kee wee kee”“快点快点”的意思,译为“维客”或“维基”。

它是一种多人协作的写作工具。Wiki站点可以有多人,甚至任何访问者维护,每个人都可以发表自己的意见,或者对共同的主题进行扩展或者探讨。 Wiki指一种超文本系统。这种超文本系统支持面向社群的协作式写作,同时也包括一组支持这种写作的辅助工具。

-----------------------本文结束 感谢阅读-----------------------
坚持原创技术分享,您的支持将鼓励我继续创作!恰饭^.^~