设计与实现Web前端开发的基础

1 概要

对于前端的学习内容，应该从如下几个方面进行从而对整体的业务以及技术的定义、作用、相互之间的关系，以及在各个阶段使用什么样的技术有一个简单的了解以及认知。

2 知识列表

2.1 什么是程序？

2.2 网络交互的基本原理

2.3 网络交互含模块内容

2.4 网站访问的过程

3 详细介绍

3.1 什么是程序

通常情况下，根据开发者的认识，程序是什么？代码！其实不对。程序的目的在于复用性、高效性、可维护性从而能够保证程序的可持续的利用以及维护。那么如何能够保证程序具备如上的优点呢？首先需要知道什么是程序。

根据《软件工程（第四版）》的主要内容的认知，程序的内容可以划分为：源码、文档以及数据^【1】。

①源码：能够进行进行输入操作，在一定的业务逻辑辅助的条件下进行合理数据输出的代码的集合称为源码。

②文档：根据软件开发的生命周期过程（包括：可行性研究、需求分析、概要设计、详细设计、程序实现、程序测试以及调试）中具有引导以及说明的文字性文件。

③数据：数据结构，在程序的设计过程中需要相应的设计，其中就包括数据结构。

3.2 网络交互的基本原理

3.2.1 URL的概念

①URL:统一资源定位符

②可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。

③互联网上的每个文件都有一个唯一的URL，包含:文件的位置、处理逻辑处理它^【2】。

3.2.2 地址的基本样式

http://ip-adress:port/project-name/program-name?parameter=value

其中，http指的是http协议，ip-address指的是IP地址，port服务器相应的端口号project-name指的是在服务器上运行的程序项目编号，program-name指的是在项目中运行的程序名称，问号是通配符，后边紧接参数名称以及参数值。

开发者可以在服务器的配置文件中进行相应的域名匹配，从而隐藏掉相应的ip地址以及相应的端口号，对进行网络交互的信息进行第一重的保护。

诸如：http://www.zhihu.com/question/22689579

其中，用域名“www.zhizhu.com”将相应的IP地址以及端口号进行匹配以及隐藏。

根据软件工程的主要特点包括：①模块化②抽象③自顶向下④逐步求精⑤信息隐藏。其中，信息隐藏就是将不想展开给用户的信息进行信息隐藏^【1】。

3.2.3 网络访问的基本思想

网络访问，可以简单划分为两部分：

①浏览器与服务器之间的交互。

②服务器与数据库之间的交互。

图3-1 网络数据访问的基本业务流程图

 

如图3-1所示，使用者通过客户端的PC浏览器中，对地址栏中输入相应的Url(统一资源定位符)，http请求中，会具有两种方式进行相应的数据请求(Get方法、Post方法)^【3】，将相应的数据请求发送给服务器，服务器中程序（war包）具有过滤器，将会根据映射的内容，将相应的数据进入到相应的程序中，并且进行相应的数据查询操作，这一请求将会对服务器端的数据库信息进行交互（使用到SQL语句）如果数据库中具有相应的数据信息，则反馈成功，否则，反馈失败。将查询的结果信息反馈给服务器，通过Http协议进行相应的数据信息相应，根据原路径传递回客户端的浏览器^【4】。

3.2.4 网络访问反馈信息的内容

如上一项的内容表达，网络访问反馈的是什么东西？网络中反馈回来的实际上HTML页面，即：http中响应的body中方法体的内容，并且在浏览器中进行重新渲染。Html是一种标记语言，常见的内容包括:

①[img]图片地址[/img]：网页中进行图片数据的加载

②[url]链接地址[/url]:网页中进行链接的数据的加载

③[del]需要删除内容[/del]：标签中应该被删除的文本内容

当浏览器接收到相应的body文件，重新进行组合，进行相应的页面渲染，如果不用相应的CSS的话，效果就是简单的html样式的堆叠。因此，我们常常需要进行自定义的样式操作，一般将样式写在CSS文件当中，当要进行动态相应的话，则将相应的代码写在JavaScript文件当中。

3.3 网络交互含模块内容

网络交互的模块只要根据作用的位置不同主要可以划分为：①前端②后端，其中前端主要指PC机上浏览器所呈现出来的样式内容，后端通常指的是服务器的内容效果。

在此处还要提到两个概念即：软件开发过程中将会提及的B/S结构以及C/S结构，其中B/S结构就是Browser/Server结构（浏览器/服务器）结构以及C/S结构就是Client/Server（客户端/服务器）结构。两种网络交互的开发结构需要根据实际问题进行选择。

3.3.1 前端所含技术

就客户端而言，前端技术目前可以包括的内容，主要有：①HTML/HTML5、②CSS、③JavaScript脚本、④Ajax

其中，HTML包含了很多的标签内容，这对于页面进行解析具有比重要的意义，而HTML5则是在HTML的基础上，对象标签的内容进行了完善（适当增加、减少、修改），HTML页面和CSS组成了静态的网页，但是静态的网页不能满足目前人们对于视觉上的感官需要，于是JavaScript（JS）技术可以为静态页面提供一些动态效果。

浏览器中具备一些JS中使用的工具(函数、对象)，将代码保存在js文件中，html中通过<script>及进行页面的关联，效果就开始能够进行使用和再现。例如使用的AJAX，在不用刷新页面就能够与服务器进行相应的交互，从而更新页面中的一小部分。

浏览器可以使用多种语言进行相应的页面内容的解析，但是目前浏览器默认使用JavaScript进行相应的浏览器的解析。

3.3.2 后端所含的技术

服务端常会用到的知识包括：①Web Server ②Web Services，浏览器向服务器发送请求时，首先请求需要和相应有一个通用的写法，即：HTTP协议。当服务器被进行请求时，如何能够使得页面获得服务端的反馈，并且知道相应的请求结果呢？

① HTTP协议

服务器通常的相应都会标记相应的状态码：其中，200 OK表示成功，即：服务其中具有请求的东西；404 Not Found 表示没有请求东西。诸如此类的状态码需要进行相应知识的总结和归纳。

除此之外，HTTP协议除了反馈相应的标识符以外，还会返回的内容有：Content-Type：表示服务器发送过来的文件类型是什么。由于网络服务器器的相应不可能进行时文字类的字符串，其包含的内容种类也是多样的，包括（文本、动画、图片、音频），通过这个相应的标志，将文件发送给使用者浏览器知道如何向用户进行展示。

图3-2 HTTP协议的结构

 

如图3-2所示，HTTP协议主要可以包括两部分，分别是Header以及Body部分，两个部分各有自己的作用，其中Header中主要用来存放服务器对于请求以后的返回结果，其中包括相应的①状态②Content-Type③Content-Encoding等等。

其中，状态用来判断服务器的反馈结果类别，Content-Type用来表明反馈值为哪种类型，从来帮助浏览器知道如何进行相应的数据处理。Content-Encoding表示的内容的编码集内容。

② 服务器的使用情况，作为服务器而言，作为目的性的设备而言，其并没有明显的分类，其可以是大型机也可以是个人PC，只要是能够帮助将程序进行实际运行的硬件设备都可以看作是服务器。同样客户端也可以是各种软件。其运行平台主要可以是：A.个人设备B.移动设备C.App

③ 网络数据的传输，需要对数据进行传递，但是通常情况下，在网络进行数据交互的过程中，不仅仅传递HTML页面，还会将相应的数据信息以字符串以及封装对象的数据形式进行数据传递。

对数据信息进行相应的交互时，需要协议（HTTP/HTTPS）以及封装格式（HTML/XML）,作为网络服务器Web Server提供相应的Web Service，指协议加上相应的格式交流体系。

但是，由于Web Service的生态系统和HTML的标准不同，用户可以选择不同通讯协议以及数据封装格式。其中HTTP+HTML是其中一种方式。某些封闭系统内的交流还可以是用自定义端的协议、格式运行。

Web Service将数据传输到本地客户端（例如浏览器）上，对其进行相应的分析、渲染，从而将数据以普通人能够理解的形式进行展示，其中Web Service的对象为开发者

④ 服务器端，根据相应的业务流程代码内容称为脚本。Web Service传输的数据，由服务器脚本生成并且交给Web Server，按照协议装备好相应的格式，并且可以将相应的数据信息返回给客户端。

3.4 网站访问的过程

通常情况下的网站访问的操作，分别为：

①用户操作浏览器，进行访问，浏览器向服务器发送HTTP请求。

②服务器接收到HTTP请求，Web Server进行初步处理，使用服务器脚本生成页面。

③服务器脚本（利用Web Framework）调用本地和客户端传送来的数据，生成页面。

④Web Server将生成的页面作为HTTP响应的body，根据不同的处理结果生成HTTP Header，并且将相应的结果发送给客户端。

⑤客户端（浏览器）接收HTTP响应的结果，将其根据HTTP Header，HTTP Body两部分进行数据的解析。

⑥解析过程中，需要对服务器上的资源（CSS、JS、图片、视频、音频以及附件等），再向Web Server发送请求，Web Server找到对应的文件，发送回来。

⑦浏览器解析HTML包含的内容，用得到的CSS代码对外观进行进一步的渲染，JS代码会对外观进行递进式的数据处理（其中，处理包括对于数据的特效处理）。

⑧在进行数据的交互过程中，可能需要向服务器索契或者提交额外的数据（局部刷新），常用方法：A.直接跳转B.重定向C.JS代码（响应某个动作）向Web Server发送请求，Web Server再用服务器脚本进行处理（生成资源或者写入数据之类），将资源发送给客户端，客户端根据资源实现响应的动态效果或者页面变化。

 

参考目录

[1] 张海藩，吕云翔 编著 《软件工程（第四版）》 人民邮电出版社

[2] Elizabeth Castro．HTML XHTML CSS基础教程．北京：人民邮电出版社，2007.8：35-37

[3] 耿祥义 编著 《JSP使用教程（第三版）》 清华大学出版社 2015.01.01

[4] 林信良 编著 《JSP Servlet 学习笔记（第2版）》 清华大学出版社 2012.05.01

转载于:https://www.cnblogs.com/Zhugeyang1104/p/Zhugeyang01.html