前端学习日记2

学习目标：

掌握Web开发技术的相关内容

---

学习内容：

一.软件开发体系结构

1.程序和软件

程序是为了实现特定目标或解决具体问题而用计算机语言编写的指令和数据的有序集合。

程序=数据结构+算法

软件：程序以开发，使用和维护所需要的文档的总称。

软件=程序＋文档

程序是软件的必要元素，一个/套软件可以包含多个应用程序，如office办公软件。

2.系统软件和应用软件

计算机分为系统软件和应用软件两大类。

系统软件是指控制和协调计算机及外部设备，支持应用软件开发和运行，无需用户干预的各种程序的集合。如：操作系统，计算机程序编译器，数据管理系统等。

应用软件是为解决各种实际生产生活中的具体问题，而编制的计算机应用程序及其相关资料。如office,浏览器，QQ，微信等。

3.单机应用程序和Web应用程序

单机应用程序：所谓单机，即能在计算设备中独立运行且不借助Web网络服务的应用程序，如：计算机，扫雷，office软件,音视频播放器（古早时期），等等。

Web应用程序：广义上需要借助Web网络服务才能实现完整功能的应用程序都属于Web应用程序，如：QQ，微信，支付宝，教务系统，OA管理系统，等等。狭义上Web应用程序指的是基于B/S结构或模式（即浏览器/服务器）的应用程序，如：网页版QQ，微信，支付宝以及众多网站服务页面。

Web应用程序的两种模式：C/S和B/S。

C/S体系结构

C/S结构即客户端/服务器端（Client/Server），例如QQ；

在这种模式中，客户端负责提供人机交互界面，数据分析与决策和业务处理逻辑，服务器端只负责各种数据的管理和维护，客户端通过网络从服务器请求数据。

能充分发挥客户端PC或移动设备的处理能力，很多工作可以在客户端处理后再提交给服务器，是一种“胖客户机(Fat Client)","瘦服务器（Thin Server）”的网络结构模式。

特点：界面丰富，操作响应快，安全性好。客户端程序需要单独编写和安装，升级维护成本高。

B/S体系结构

B/S结构即浏览器/服务器端（Browser/Server），这种模式将数据和核心业务逻辑都存放在服务器上，客户端即浏览器，浏览器呈现交互界面，用户通过浏览器即可进行业务处理，是一种是一种“瘦客户机（ Thin Client）”、“胖服务器（Fat Server）”的网络结构模式。如：教务系统，京东商城，天猫商城，网页版微信，等等。

C/S和B/S体系结构的比较

（1）B/S结构无须单独编写和安装客户端程序，具有跨平台特性

（2）B/S结构只需编写和更新服务器端程序，采用标准化的http通信协议，简化了系统开发和维护

（3）B/S结构增加了服务器端的压力，界面响应速度对带宽要求更高，速度和安全性上处劣势

（4）B/S客户端用户体验（界面多样性和响应敏捷性）待提高

（5）B/S结构难发挥本地硬件优势（随着对H5支持的提高，有所缓解）

（6）C/S结构采用Socket（套接字）与服务器通信， B/S结构采用HTTP连接（请求-响应）（随着Ajax、WebSocket等通信技术的发展有所缓解）

C/S和B/S体系结构软件的界限越来越模糊，二者相互借鉴、相互融合的趋势越来越明显（背后的推动力是？！）

Android APP内嵌WebView，页面布局采用XML标记语言的方式来管理

Web APP支持WebSocket通信，可访问本地传感器如相机、GPS、陀螺仪，等等

二.HTTP协议

Hyper Text Transfer Protocol，超文本传输协议，是一种建立在TCP上的无状态连接应用层协议。这个协议详细规定了浏览器和万维网服务器之间相互通信的规则。

HTTP就是一个通信规则，通信规则规定了客户端发送给服务器的内容格式，也规定了服务器发送给客户端的内容格式。客户端发送给服务器的格式叫“请求协议”；服务器发送给客户端的格式叫“响应协议”。

基本工作流程：客户端发送一个HTTP请求，说明客户端想要访问的资源和请求的动作，服务端收到请求之后，服务端开始处理请求，并根据请求做出相应的动作访问服务器资源，最后通过发送HTTP响应（HTML形式）把结果返回给客户端。

主要特点：

支持B/S和C/S模式。

简单快速：客户向服务器请求服务时，只需传送请求方法和路径（是否需要上传数据视情况而定）。请求方法常用的有GET和POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

灵活：HTTP允许传输任意类型的数据对象。

无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。

无状态：对网络服务事务处理没有记忆能力，服务器端不保持客户端的状态，每次请求都是独立的。可以说是“无连接”的自然延伸。

对于简单Web网络服务，HTTP的无状态连接，可减少服务器负担，提高服务器网络服务资源的利用率。

缺点：单纯的HTTP协议无法实现长连接，导致的重要功能缺失之一是：服务器无法主动推送消息给客户端（服务器压根不知道客户端在哪儿，IP地址、路由。。。）

常见的响应状态码的含义

200---OK/请求已经正常处理完毕

301---/请求永久重定向

302---/请求临时重定向

304---/请求被重定向到客户端本地缓存

400---/客户端请求存在语法错误

401---/客户端请求没有经过授权

403---/客户端的请求被服务器拒绝，一般为客户端没有访问权限

404---/客户端请求的URL在服务端不存在

500---/服务端永久错误 503---/服务端发生临时错误

三.Web应用程序工作原理

工作原理：

目前大多数Web应用程序采用B/S软件体系结构

 浏览器端与服务器端的交互模式过程描述：

客户端（通常是浏览器，如Chrome、IE、Firefox等）接受用户的输入，如用户名、密码、查询字符串等  

客户端向Web服务器发送请求：客户端把请求信息（包含表单中的输入以及其他请求信息）发送到Web服务器端，客户端等待服务器端的响应

 四.Web前端开发技术

静态网页和动态网页的比较

静态网页一般指HTML及其相关的CSS、JavaScript片段或文档，静态网页一经发布到网站服务器上其内容就不能改变，若想修改就必须更新和重新发布静态网页；当用户访问通过URL地址静态网页时，Web服务器不做诸如数据库访问等操作而直接将静态网页发送给用户浏览器浏览，用户也无法通过静态网页与Web服务器进行交互（超链接除外）。静态网页一般指HTML及其相关的CSS、JavaScript片段或文档，静态网页一经发布到网站服务器上其内容就不能改变，若想修改就必须更新和重新发布静态网页；当用户访问通过URL地址静态网页时，Web服务器不做诸如数据库访问等操作而直接将静态网页发送给用户浏览器浏览，用户也无法通过静态网页与Web服务器进行交互（超链接除外）。 动态网页与静态网页相对，动态网页如jsp、php、asp页面中除了HTML标记以外，还包括一些特定功能的程序代码，这些代码可以使得浏览器和服务器交互，服务器端根据客户的不同请求动态的生成网页内容。 注意：采用AJAX异步通信的HTML网页应也属于动态网页范畴。

动态网页与静态网页相对，动态网页如jsp、php、asp页面中除了HTML标记以外，还包括一些特定功能的程序代码，这些代码可以使得浏览器和服务器交互，服务器端根据客户的不同请求动态的生成网页内容。 注意：采用AJAX异步通信的HTML网页应也属于动态网页范畴。动态网页中可包含静态网页的内容，如jsp页面常包含html、CSS、JavaScript等（本质上jsp就是在HTML页面中嵌入java服务器端程序代码）。

静态网页和动态网页都是存储在服务器上，二者的核心区别是是否需要服务器进行进一步数据或业务逻辑处理后才能返回给客户端浏览器。

一个简单的检验办法：静态网页能够直接在浏览器上打开和显示，而动态网页不能！

HTML

HTML（HyperText Mark-up Language）超文本标记语言是Web应用程序客户端开发技术的基础，它是一种文本形式的标记符号语言，主要用于描述网页信息。所谓超文本是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

CSS

CSS（Cascading Style Sheet）称为级联或层叠样式表，用于控制页面的显示风格，如页面的布局、字体、颜色、背景、动画等。

在HTML基础上，使用CSS不但能够统一、高效地组织页面上的元素，而且还可以使页面的外观具有多样化。

JavaScript

JavaScript是一种广泛用于Web前端开发的解释型脚本语言，不需要编译，具有跨平台性，脚本嵌入到网页中，随同页面被下载到客户端，由浏览器解释执行。

常用来为网页添加动态效果（如根据用户操作动态修改网页内容和外观），表单验证，与服务器通信（如AJAX），HTML5 API应用，等等

Web前端应用开发环境

HTML、CSS、 JavaScript文档可以使用任何文字处理软件进行编辑处理，例如记事本、Notepad++、Subline、EditPlus、VScode。目前市面上已经有很多种工具可以完成可视化的Web前端开发，例如：Dreamweaver、HBuilder等。

五.Web服务器端开发技术

Servlet

Servlet是在JSP之前就存在的运行在服务端的一种Java技术，它是用Java语言编写的服务器端程序。Servlet主要用于处理Http请求，并将处理的结果传递给浏览器生成动态Web页面。Servlet具有可移植（可在多种系统平台和服务器平台下运行）、功能强大、安全、可扩展和灵活等优点。

JSP

JSP（Java Server Page，Java服务器页面）是由Sun公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP是在传统的网页HTML文件中嵌入Java程序代码段和JSP标记，从而形成JSP文件，后缀名为“.jsp”。

PHP

PHP（Personal Home Page）由创始人Rasmus Lerdorf于1994年提出，1995年发布第一个公开版本，是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，可以比CGI或者Perl更快速地执行动态网页。PHP易学易用，广泛用于Web服务器端程序开发。它具有多平台特性、能够无缝运行在UNIX、Linux和Windows平台上。它支持多种通用的Web服务器（如IIS、Apache等），在变换平台时，不需要改变PHP代码。PHP对数据库的操作具有很强的兼容性，几乎支持所有的主流和非主流数据库，如Oracle、Sybase、MySQL、informix、Access和dBase等。

ASP

ASP（Active Server Pages）技术是Microsoft公司在1996年底推出的一种开发服务器端的Web应用程序技术。ASP的主要特点是：把HTML、脚本和数据库的访问功能结合在一起，组成了服务器端的应用程序。ASP的编程语言是VBScript和JScript，易于掌握，降低服务器端应用程序的编程难度。ASP包含内置对象、内置组件、外置组件和ADO数据库访问接口。

ASP.NET

ASP.NET又称为ASP+，不仅仅是ASP的简单升级，而是微软公司推出的新一代脚本语言。ASP.NET基于.NET Framework的Web开发平台，不但吸收了ASP以前版本的最大优点并参照Java、VB语言的开发优势加入了许多新的特色，同时也修正了以前的ASP版本的运行错误。 ASP.NET具备开发网站应用程序的一切解决方案，包括验证、缓存、状态管理、调试和部署等全部功能。在代码撰写方面特色是将页面逻辑和业务逻辑分开，它分离程序代码与显示的内容，让丰富多彩的网页更容易撰写。同时使程序代码看起来更洁净、更简单。

Web前端技术和Web后端技术比较

Web前端技术，包括html、CSS、JavaScript，以及AJAX和Websocket等前后端通信技术，也就是静态网页技术+前后端通信技术的前端部分。

Web后端技术，如Servlet技术，就是运行在服务端的一种特殊Java程序。

动态网页一：如jsp、php、asp等是一种Web前后端不完全分离的技术，通常包含了部分Web后端技术，比如JSP页面中嵌入了Java代码（在使用中服务器将会把Java代码转换成Servlet程序）。

动态网页二：如HTML+前后端通信构成的html网页，是前后端完全分离的技术，已逐渐成为一种主流的网页/Web App技术实现架构。 在Web应用开发过程中，Web前后端工程师需要合理分工同时密切配合。

六.Java Web开发环境的搭建

Web服务器

 Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求，会返回一个HTTP响应，可以是静态页面或图片（如Apache、 IIS 、Nginx等服务器），也可以将动态内容(如JSP程序)委托给其它应用服务器进行处理（如Tomcat）后再返回给客户端/浏览器。

Apache HTTP Server（简称Apache）是Apache软件基金会的一个开放源码的免费网页服务器，由于其多平台和安全性被广泛使用，是最流行的Web服务器端软件之一。

Tomcat是一个免费的开放源代码、运行servlet和JSP Web程序的基于Java的web应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用。同时，Tomcat也支持HTTP协议可以处理静态页面请求，但这方面性能不如Apache，Tomcat常被用来和Apache服务器配合使用。

JDK安装与设置

从Oracle甲骨文公司http://www.oracle.com/下载JDK（Java Develop Kit），如jdk-6u7-windows-i586.exe（32位），双击后根据提示进行安装，建议修改安装路径如：D:\jdk6。 配置环境变量。  （1）配置环境变量：右击“计算机”---->“高级”---->“环境变量”。        

 （2）在系统变量里新建JAVA_HOME变量，变量值为： JDK的安装路径，如D:\jdk6。        

 （3）在path变量添加变量值：%JAVA_HOME%\bin;        

 （4）新建classpath变量，值为：                         .;%JAVA_HOME%\lib;  JAVA_HOME%\lib\tools.jar;

Tomcat安装与设置

从http://tomcat.apache.org下载免费的Tomcat 版本，如： apache-tomcat-6.0.13.exe。

双击Tomcat安装文件启动Tomcat安装程序，根据引导安装该程序。 为了方便以后使用Tomcat最好不要使用默认的安装目录 可以修改默认的端口号（默认8080），但最好不要用1～1024之间的端口号，或安装后在conf文件夹中的server.xml进行修改：

双击执行bin文件夹中的startup.bat来启动Tomcat服务器，关闭服务器可双击执行shutdown.bat

七.Java Web项目的创建部署

建立与部署Java Web项目的步骤

（1）启动Eclipse。

（2）建立Java Web项目。

（3）添加、编辑JSP程序、Servlet或html网页。

（4）部署项目。

（5）启动Web 服务器（Tomcat）。

（6）在浏览器中测试Web程序。

Eclipse IDE 中创建Web项目

创建Dynamic Web Project

File->New->Dynamic Web Project

创建jsp文件

new->JSP File

编写jsp代码

部署到Tomcat服务器

Run as->Run on Server

---

学习时间：

周四下午14：30