JavaWeb入门看这一篇文章就够了

杀鸡焉用牛刀 · 2024-6-19 21:28:51

第一章 JavaWeb简介

第1

节什么是web

1

复制代码

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构

复制代码

第2节什么是JavaWeb

1

复制代码

使用Java技术实现上面的功能，即使用Java技术实现网络的互联互通

复制代码

第二章 JavaWeb的技能体系

[img=777,520]https://img-blog.csdnimg.cn/decf751

5afba45a0bf51

1

bc1

75544b7b.png[/img]

第三章 JavaWeb服务器

第1

节 JavaWeb服务器是什么

1

复制代码

JavaWeb服务器又被称为JavaWeb容器是为JavaWeb应用提供运行时环境，它负责管理Servlet和JSP的生命周期，以及管理它们的共享数据。

复制代码

第2节常见的JavaWeb服务器介绍

1

复制代码

常见的JavaWeb服务器有Tomcat,jetty,Weblogic等

复制代码

Tomcat当前最流行的web容器(免费)

1

复制代码

Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta（[dʒəˈkɑːtə]）项目中的一个核心项目由Apache、Sun(现已被oracle公司收购)和其他一些公司及个人共同开发而成

复制代码

jetty(免费)

1

复制代码

Jetty 是一个开源的servlet容器，它为基于Java的web容器，例如JSP和servlet提供运行环境。Jetty是使用Java语言编写的，它的API以一组JAR包的形式发布。开发人员可以将Jetty容器实例化成一个对象，可以迅速为一些独立运行（stand-alone）的Java应用提供网络和web连接

复制代码

Weblogic(收费)

1

复制代码

WebLogic是美国Oracle公司出品的一个application server，确切的说是一个基于JAVAEE架构的中间件，WebLogic是用于开发、集成、部署和管理大型分布式Web应用、网络应用和数据库应用的Java应用服务器。将Java的动态功能和JavaEnterprise标准的安全性引入大型网络应用的开发、集成、部署和管理之中

复制代码

第3节 Tomcat服务器

tomcat服务器介绍

1

复制代码

Tomcat 是一个免费的开放源代码的Servlet容器，它是Apache软件基金会的一个顶级项目，由 Apache，Sun和其他一些公司及个人共同开发而成。由于有了Sun 的参与与支持，最新的 Servlet和JSP规范总是能在Tomcat中的到体现

复制代码

[img=1

1

1

6,890]https://img-blog.csdnimg.cn/1

efd4a2e1

9e24dcf9f802221

e247683d.png[/img]

1
23456789

复制代码

1
. bin: 用来存放tomcat的命令,重要有两大类，一类是以.sh末端的（linux命令），另一类是以.bat末端的（windows命令）2. conf: 重要是用来存放tomcat的一些设置文件3. lib: 重要用来存放tomcat运行必要加载的jar包4. logs: logs目录用来存放tomcat在运行过程中产生的日记文件 -- 在windows情况中，控制台的输出日记在catalina.xxxx-xx-xx.log文件中 -- 在linux情况中，控制台的输出日记在catalina.out文件中5. temp: temp目录用户存放tomcat在运行过程中产生的临时文件6. webapps: webapps目录用来存放应用步伐，当tomcat启动时会去加载webapps目录下的应用步伐。可以以文件夹、war包、jar包的形式发布应用7. work: work目录用来存放tomcat在运行时的编译后文件

复制代码

tomcat的常用命令
1
2
复制代码
1
.启动 startup2.制止 shutdown
复制代码
tomcat的用户管理
1
复制代码
tomcat-users.xml用来配置管理tomcat的用户与权限
复制代码
tomcat的服务设置管理
1
复制代码
server.xml可以设置端口号、设置域名或IP、默认加载的项目、请求编码
复制代码
在一台服务器上设置多个tomcat的设置
1
234
复制代码
需要修改三个端口号
AJP
HTTP
SHUTDOWN
复制代码

第四章 JavaWeb的运行流程

[img=1

200,576]https://img-blog.csdnimg.cn/c1

2a3d35cfdd4401

8e33c5b1

58abd62d.png[/img]

第五章第一个JavaWeb应用

第1

节创建第一个JavaWeb项目

1
2345

复制代码

1
. 打开Eclipse2. File--> New-->Dynamic Web Project3. 设置Project name4. Dynamic web module version 选择2.55. finish

复制代码

第2节项目布局介绍

[img=287,21

6]https://img-blog.csdnimg.cn/2880820ebac24d5395b650a2bfe6e75d.png[/img]

1
234567

复制代码

1
. src 里面放的是 java 源步伐2. JRE System Library: 指Java SE 的常用库文件集合，也就是 jar 包3. Web App Libraries 是自己导入的项目依赖 jar 包4. WebContent&#xff1
a;一样平常我们用 Eclipse 的时候创建一个 Web Project，就会生成 WebContent 文件夹，用 MyEclipse 的时候创建一个 Web Project，就会生成 WebRoot 文件夹，这两个文件夹作用一样只是名称不同而已。WebContent 用来存放 JSP，JS，CSS，图片等文件，是项目访问的默认路径，也是工程的发布文件夹，发布时会把该文件夹发布到 tomcat 的 webapps 里.(用户可以直接访问到该目录下的资源)5. META-INF&#xff1
a;存放一些 meta information相关的文件的这么一个文件夹,一样平常来说只管不要自己手工放置文件到这个文件夹6. WEB-INF&#xff1
a;WEB-INF目录是一个专用区域，容器不能把此目录中的内容提供给用户。这个目录下的文件只供容器使用，里面包罗不应该由客户直接下载的资源。Web 容器要求在你的应用步伐中必须有 WEB-INF 目录。WEB-INF 中包罗着发布描述符（也就是web.xml文件）,一个classes目录和一个lib目录, 以及其它内容。留意&#xff1
a;如果你的Web应用步伐中没有包罗这个目录,它可能将无法工作.（这是一个安全目录，此目录下的资源不能被用户直接访问）7. WEB-INF/lib 目录，该目录中的jar包是运行时情况下使用的jar包,所谓运行时情况下使用的jar包,就是说你在运行你的项目的时候所必要使用的jar包的集合

复制代码

第3节第一个web页面

1
23

复制代码

在WebContent下创建一个index.html文件添加 <h1
>Hello JavaWeb</h1
>

复制代码

第六章 HTTP协议

第1

节 HTTP 基本概念

1
234

复制代码

HTTP 是超文本传输协议，也就是HyperText Transfer Protocol，我们可以将HTTP的名字「超文本协议传输」，拆成三个部门1
. 超文本2. 传输3. 协议

复制代码

超文本

1
234567

复制代码

HTTP 传输的内容是「超文本」
我们先来理解「文本」，在互联网早期的时候只是简单的字符文字，既现在「文本」
再来理解「超文本」，它就是超越了普通文本的文本，它是文字、图片、视频等的混合体最关键有超链接，能从一个超文本跳转到另外一个超文本
HTML 就是最常见的超文本了，它本身只是纯文字文件，但内部用很多标签定义了图片、视频等的链接，在经过浏览器的解释，呈现给我们的就是一个文字、有画面的网页了

复制代码

传输
1
复制代码
所谓的「传输」，很好理解，就是把一堆东西从 A 点搬到 B 点，或者从 B 点搬到 A 点
复制代码
协议
1
复制代码
行为约定和规范，HTTP 协议是一个双向协议
复制代码
HTTP 概念总结
1
复制代码
HTTP 是一个在计算机世界里专门在「两点」之间「传输」文字、图片、音频、视频等「超文本」数据的「约定和规范」
复制代码

第2节 HTTP 常见的状态码

状态码描述常见状态码2xx乐成,报文已经收到并被正确处置惩罚200,204,2063xx重定向,资源位置发生变动,必要客户端重新发送哀求301

,302,3044xx客户端错误,哀求报文有误,服务器无法处置惩罚400,403,4045xx服务器端错误,服务器在处置惩罚哀求时,内部发生错误500,501

,502,503

1
234567891
01
1
1
21
31
41
51
61
71
81
9

复制代码

「200 OK」是最常见的乐成状态码，表现一切正常。如果是非 HEAD 哀求，服务器返回的响应头都会有 body 数据。「204 No Content」也是常见的乐成状态码，与 200 OK 基本相同，但响应头没有 body 数据。「206 Partial Content」是应用于 HTTP 分块下载或断电续传，表现响应返回的 body 数据并不是资源的全部，而是其中的一部门，也是服务器处置惩罚乐成的状态「301
Moved Permanently」表现永久重定向，说明哀求的资源已经不存在了，需改用新的 URL 再次访问。「302 Found」表现临时重定向，说明哀求的资源还在，但临时必要用另一个 URL 来访问「304 Not Modified」不具有跳转的寄义，表现资源未修改，重定向已存在的缓冲文件，也称缓存重定向，用于缓存控制「400 Bad Request」表现客户端哀求的报文有错误，但只是个笼统的错误。「403 Forbidden」表现服务器禁止访问资源，并不是客户端的哀求堕落。「404 Not Found」表现哀求的资源在服务器上不存在或未找到，所以无法提供给客户端「500 Internal Server Error」与 400 类型，是个笼统通用的错误码，服务器发生了什么错误，我们并不知道。「501
Not Implemented」表现客户端哀求的功能还不支持「502 Bad Gateway」通常是服务器作为网关或代理时返回的错误码，表现服务器自身工作正常，访问后端服务器发生了错误。「503 Service Unavailable」表现服务器当前很忙，临时无法响应服务器，雷同“网络服务正忙，请稍后重试”的意思

复制代码

第3节 HTTP 常见属性字段

Host
1
23
复制代码
客户端发送请求时，用来指定服务器的域名。
Host: www.baidu.com
复制代码
Content-Length
1
23
复制代码
服务器在返回数据时，会有 Content-Length 字段，表明本次回应的数据长度
Content-Length: 23552
复制代码

Connection

1
2345

复制代码

Connection 字段最常用于客户端要求服务器使用 TCP 持久连接，以便其他请求复用
Connection: keep-alive
但是，这不是标准字段，为了兼容老版本的 HTTP

复制代码

Content-Type

1
2345

复制代码

Content-Type 字段用于服务器回应时，告诉客户端，本次数据是什么格式Content-Type: text/html; charset&#61
;utf-8上面的类型表明，发送的是网页，而且编码是UTF-8

复制代码

Content-Disposition

1
23456789

复制代码

如果服务器希望欣赏器不是直接处置惩罚响应的实体内容而是让用户将响应的实体内容保存到一个文件中，这个时候必要设置Content-Disposition字段方式: 1
.inline : 直接在欣赏器中打开2.attachment : 以附件的形式下载attachment的后面还可以指定filename参数例子: Content-Disposition: attachment;filename&#61
;xyz.zip

复制代码

Accept

1
234567

复制代码

客户端哀求的时候，可以使用 Accept 字段声明自己可以接受哪些数据格式Accept: text/html,application/xhtml+xml,application/xml;q&#61
;0.9,image/webp,image/apng,*/*;q&#61
;0.8,application/signed-exchange;v&#61
;b3;q&#61
;0.9q:相对品质因子,默认是1
,表现偏好哪一个设置Accept: */* 客户端声明自己可以接受任何格式的数据

复制代码

Content-Encoding

1
2345

复制代码

Content-Encoding 字段说明数据的压缩方法。表示服务器返回的数据使用了什么压缩格式
Accept-Encoding: gzip
上面表示服务器返回的数据采用了 gzip 方式压缩，告知客户端需要用此方式解压

复制代码

Accept-Encoding
1
23
复制代码
Accept-Encoding: gzip, deflate
客户端在请求时，用 Accept-Encoding 字段说明自己可以接受哪些压缩方法
复制代码
User-Agent
1
复制代码
用户代理，主要是告诉服务器我是用什么操作系统,什么浏览器发的请求,可以防止一部分机器人扫描网站数据.
复制代码

Referer

1
234

复制代码

一般被网站管理人员用来追踪访问者是如何导航进入网站的,因为进入一个网站不止可以从浏览器地址栏输入网址,还可以从一个超链接进入,通过这个属性来记录用户的访问来源,还可以防盗链.
什么叫防盗链?
比如一个网站,他自己的服务器上本身没有图片资源，但是他的网站上面却展示了很多图片资源,这些图片资源一般直接来源于别的网站,别的网站会根据此网站发送的图片请求,通过此属性判断是否为自己网站的请求,来禁止盗链

复制代码

哀求头
[img=1

200,306]https://img-blog.csdnimg.cn/ef702764d47d40698dfd81

374a9c1

90c.png[/img]

响应头

[img=660,358]https://img-blog.csdnimg.cn/86340040fab641

b0af6b6a3b4a6051

ec.png[/img]

第4节 GET和POST哀求

1
23

复制代码

客户端向服务器端发送请求的方式有两种
- GET请求
- POST请求

复制代码

GET哀求
1
复制代码
Get 方法的含义是请求从服务器获取资源，这个资源可以是静态的文本、页面、图片视频等
复制代码
POST哀求
1
复制代码
而POST 方法则是相反操作，它向 URI 指定的资源提交数据，数据就放在报文的 body 里
复制代码

第5节 HTTP协议特性(上风)

1

复制代码

HTTP 最凸出的优点是「简单、灵活和易于扩展、应用广泛和跨平台」

复制代码

简单
1
复制代码
HTTP 基本的报文格式就是 header + body，头部信息也是 key-value 简单文本的形式，易于理解。
复制代码

机动和易于扩展

1
234

复制代码

HTTP协议里的各类请求方法、URI/URL、状态码、头字段等每个组成要求都没有被固定死，都允许开发人员自定义和扩充
同时 HTTP 由于是工作在应用层(OSI 第七层)，则它下层可以随意变化
HTTPS 也就是在 HTTP 与 TCP 层之间增加了 SSL/TLS 安全传输层

复制代码

应用广泛和跨平台

1

复制代码

互联网发展至今，HTTP 的应用范围非常的广泛，从台式机的浏览器到手机上的各种 APP，从看新闻、刷贴吧到购物、理财,HTTP 的应用片地开花，同时天然具有跨平台的优越性

复制代码

HTTP缺点

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
2223

复制代码

HTTP 协议里有优缺点一体的双刃剑，分别是「无状态、明文传输」，同时另有一大缺点「不安全」1
. 无状态无状态的长处，由于服务器不会去记忆 HTTP 的状态，所以不必要额外的资源来记录状态信息，这能减轻服务器的负担，可以或许把更多的 CPU 和内存用来对外提供服务。无状态的坏处，既然服务器没有记忆本领，它在完成有关联性的操纵时会非常麻烦。比方登录->添加购物车->下单->结算->支付，这系列操纵都要知道用户的身份才行。但服务器不知道这些哀求是有关联的，每次都要问一遍身份信息对于无状态的问题，解法方案有很多种，其中比较简单的方式用 Cookie 技能2. 明文明文意味着在传输过程中的信息，是可方便阅读的，通过欣赏器的 F1
2 控制台或 Wireshark 抓包都可以直接肉眼查看，为我们调试工作带了极大的便利性但是这正是如许，HTTP 的所有信息都暴露在了光天化日下，相当于信息裸奔3. 不安全通讯使用明文（不加密），内容可能会被窃听。比如，账号信息容易走漏不验证通讯方的身份，因此有可能遭遇伪装。比如，访问假的淘宝、拼多多无法证实报文的完整性，所以有可能已遭窜改。比如，网页上植入垃圾广告，视觉污染HTTP 的安全问题，可以用 HTTPS 的方式办理，也就是通过引入 SSL/TLS 层，使得在安全上到达了极致

复制代码

第6节 HTTP 与 HTTPS

1
234567

复制代码

1
. HTTP 是超文本传输协议，信息是明文传输，存在安全风险的问题。HTTPS 则办理 HTTP 不安全的缺陷，在 TCP 和 HTTP 网络层之间参加了 SSL/TLS 安全协议，使得报文可以或许加密传输。2. HTTP 连接建立相对简单， TCP 三次握手之后便可举行 HTTP 的报文传输。而 HTTPS 在 TCP 三次握手之后，还需举行 SSL/TLS 的握手过程，才可进入加密报文传输。3. HTTP 的端口号是 80，HTTPS 的端口号是 443。4. HTTPS 协议必要向 CA（证书权威机构）申请数字证书，来包管服务器的身份是可信的

复制代码

第七章 Servlet组件

第1

节 Servlet是什么

1
23456

复制代码

1
. 从广义上来讲，Servlet规范是Sun公司订定的一套技能尺度，包罗与Web应用相关的一系列接口，是Web应用实现方式的宏观办理方案。而详细的Servlet容器负责提供尺度的实现2. 从狭义上来讲，Servlet指的是javax.servlet.Servlet接口及其子接口，也可以指实现了Servlet接口的实现类3. Servlet作为服务器端的一个组件，它的本意是“服务器端的小步伐”。Servlet的实例对象由Servlet容器负责创建;Servlet的方法由容器在特定情况下调用;Servlet容器会在Web应用卸载时销毁Servlet对象的实例

复制代码

第2节 Servlet的技能体系

1
2345

复制代码

1
. Servlet接口:是sun公司针对于web技能提供的一套尺度(接口)2. GenericServlet:对servlet功能举行了封装和美满，将service方法保留为抽象方法,让使用者仅关心业务实现。3. HttpServlet抽象类是对GenericServlet进一步封装和扩展更贴近HTTP协议下的应用步伐编写，在service方法中根据不同HTTP哀求类型调用专门的方法举行处置惩罚4. 以后在实际使用中我们只必要继承HttpServlet而且实现doget和dopost方法即可。5. ServletConfig接口&#xff1
a;封装了Servlet设置信息

复制代码

第3节 ServletConfig设置获取

1
234567891
01
1
1
21
31
41
5

复制代码

// 在web.xml中设置<servlet> <servlet-name>HelloServlet</servlet-name> <servlet-class>com.qianfeng.servlet.HelloServlet</servlet-class>  <init-param> <param-name>userName</param-name> <param-value>admin1
23</param-value> </init-param></servlet><servlet-mapping> <servlet-name>HelloServlet</servlet-name> <url-pattern>/HelloServlet</url-pattern></servlet-mapping>

复制代码

[img=564,293]https://img-blog.csdnimg.cn/8391

537a1

5094c0fa72be321

7c84b44b.png[/img]

1
23456

复制代码

在servlet组件中获取设置信息//获取上下文ServletConfigServletConfig servletConfig &#61
; getServletConfig();String userName &#61
; servletConfig.getInitParameter("userName");System.out.println(userName);

复制代码

第4节 Servlet使用

使用Servlet接口实现Web的方式一

1
2345

复制代码

1
. 使用eclipse创建JavaWeb动态工程 (2.5版本的web项目)2. 添加jar包 javaee-api-7.0.jar3. 创建MyServlet类，extend Servlet接口4. 在web.xml中注册MyServlet类5. 创建哀求页面,编写业务代码

复制代码

使用GenericServlet类实现Web的方式二
1
复制代码
GenericServlet类是对Servlet接口的进步一封装，并且将service方法抽象化，让用户将重心放在具体的业务上
复制代码

使用HttpServlet类实现Web的方式三

1
234567891
01
1
1
21
31
41
5

复制代码

HttpServlet类是对GenericServlet类的更进步一封装，而且抽象出doGet、doPost方法，更方便用户处置惩罚前端发送过来的GET/POST哀求request对象的常用方法?1
. String getParamter(String name) : 返回指定name参数的参数值2. String[] getParameterValues(String name) : 返回包罗name参数的所有值3. void setAttribute(String, object) : 存储此哀求域中的数据4. Object getAttribute(String) : 从域中取出对象5. String getProtocol() : 返回哀求中的协议类型及版本号6. String getServerName() : 返回接受哀求的服务器主机名7. int getServerPort() : 获取服务器对应的端口号8. String getCharacterEncoding() : 返回字符集编码9. void setCharacterEncoding() : 设置哀求的字符集编码1
0. int getContentLength() : 返回哀求体的长度【字节数】1
1
. String getRemoteAddr() : 返回发送此哀求的客户端IP地点

复制代码

第5节转发和重定向

哀求转发

1
23456

复制代码

1
. Servlet接受欣赏器发送过来的哀求之后举行初步处置惩罚而不是直接响应给前端页面，而是在服务器内部转发给其他的servlet步伐继续处置惩罚，这种情况下欣赏器只发出了一次哀求，欣赏器地点栏不会发生变化，用户不会感知到地点栏被转发2. 转发哀求的Servlet和目标Servlet共享同一个request对象3. 转发可以访问WEB-INF目录下的资源转发语法:request.getRequestDispatcher("/ok.html").forward(request, response);

复制代码

哀求重定向

1
23456

复制代码

1
. Servlet吸收到欣赏器端哀求并处置惩罚完成后，给欣赏器端一个特殊的响应，这个特殊的响应要求欣赏器去哀求一个新的资源，整个过程中欣赏器端会发出两次哀求，且欣赏器地点栏会改变为新资源的地点2. 重定向的情况下，由于发送两次哀求,所以原Servlet和目标资源之间就不能共享哀求数据了3. 重定向不能访问WEB-INF下的资源(由于重定向是客户端发出的动作)重定向语法:resp.sendRedirect("ok.html");

复制代码

转发和重定向的区别

[td=3,1

]转发和重定向转发重定向欣赏器地点栏不改变改变发送哀求次数1

2能否共享request对象数据是否目标资源&#xff1

a;WEB-INF下的资源能访问不能访问第6节登录例子练习

[img=1

200,902]https://img-blog.csdnimg.cn/e02dd7898b31

4e1

5a6e757fcdb1

b7cba.png[/img]

第八章 JSP技能

第1

节动态网页技能

常见的动态网页技能
1
23
复制代码
1
. ASP Microsoft2. PHP3. JSP
复制代码

动态网页技能办理的问题

1
23

复制代码

1
. Html&#xff1
a;用来显示页面，缺点&#xff1
a;不能使用变量和java代码2. Servlet:可以写页面，也可以在页面中使用变量,写代码方便，但是写页面麻烦3. JSP&#xff1
a;html+servlet强强联合，在页面中可以使用html标签也可以使用java代码

复制代码

第2节 JSP简介

JSP是什么

1

复制代码

JSP全名Java Server Pages，根本就是一个简化的Servlet,主要实现了在Java当中使用HTML标签。Jsp是一种动态网页的技术,标准也是JavaEE的标准,Jsp与Servlet一样,是在服务端运行的

复制代码

JSP特点

1
23

复制代码

1
. 其本身是一个动态网页技能尺度，它的重要构成有HTML网页代码、Java代码片段、JSP标签几部门构成，后缀是.jsp2. JSP相比HTML页面来说，最直观的功能就是可以在页面中使用变量，这些变量一样平常都是从域对象中获取。有了变量的长处就是我们的页面可以动态的显示信息3. 相比于Servlet，JSP更加善于处置惩罚显示页面，而Servlet跟擅长处置惩罚业务逻辑，两种技能各有专长，所以一样平常我们会将Servlet和JSP结合使用，Servlet负责业务，JSP负责显示

复制代码

第3节 JSP页面构成

1
23456

复制代码

1
. 指令2. 解释3. 小脚本(在JSP页面中执行的Java代码)4. 声明(在JSP页面中界说一些变量大概方法)5. 表达式(可以在JSP页面中执行表达式)6. 静态内容(HTML/CSS/JavaScript等)

复制代码

指令

1
23456789

复制代码

1
. page —> 位于JSP页面的顶端,同一个页面可以有多个page —> language:java —> import : 导包 —> contentType: 内容和编码2. include —> 将一个外部文件嵌入到当前的JSP文件中，同时解析这个页面中的JSP语句3. taglib指令 —> 使用标签库界说新的自界说标签，在JSP页面中启动定制活动

复制代码

解释
1
2
复制代码
1
. HTML解释 2. JSP解释 <%-- 解释—%> 由于JSP中可以写Java语言,所以也可以使用Java语言解释
复制代码
小脚本
1
2
复制代码
<% Java代码 %>
<% out.println(“大家好，我是一个JSP脚本"); %>
复制代码

声明

1
234567891
01
1
1
2

复制代码

<%! Java代码; %> —> 声明变量—> 声明方法例子:<%! int i&#61
;1
0; public int add(int a,int b){return a+b;}%><%&#61
;i %><%&#61
; add(1
00,300) %>

复制代码

表达式
1
复制代码
<%&#61
; 表达式 %> 表达式不以分号结束
复制代码
静态内容
1
复制代码
HTML、CSS、JavaScript等
复制代码
第4节 JSP的生命周期
1
复制代码
JSP生命周期就是从创建到销毁的整个过程，类似于servlet生命周期，区别在于JSP生命周期还包括将JSP文件编译成servlet
复制代码
JSP生命周期的几个阶段
- [list=1
  
  ]
- 编译阶段
  1
  复制代码
  Servlet容器编译JSP源文件，生成servlet类
  复制代码

[list=1

]
初始化阶段
1
复制代码
加载与JSP对应的Servlet类，创建其实例，并调用它的初始化方法
复制代码

[list=1

]
执行阶段
1
复制代码
调用与JSP对应的Servlet实例的服务方法
复制代码

[list=1

]
销毁阶段
1
复制代码
调用与JSP对应的Servlet实例的销毁方法，然后销毁Servlet实例
复制代码

[img=961

,677]https://img-blog.csdnimg.cn/a7560c321

a1

a4d789b29c48e8a8ef4c5.png[/img]

第5节 JSP九大隐含对象

1

复制代码

JSP内置对象是Web容器创建的一组对象，不使用new关键字就可以使用的内置对象

复制代码

out : JspWriter实例，相当于response.getWriter()获取的对象，用于在页面中显示信息

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
2223

复制代码

9*9乘法表1
*1
&#61
;1
2*1
&#61
;2 2*2&#61
;4 3*1
&#61
;3 3*2&#61
;6 3*3&#61
;9 4*1
&#61
;4 4*2&#61
;8 4*3&#61
;1
2 4*4&#61
;1
6 5*1
&#61
;5 5*2&#61
;1
0 5*3&#61
;1
5 5*4&#61
;20 5*5&#61
;25 6*1
&#61
;6 6*2&#61
;1
2 6*3&#61
;1
8 6*4&#61
;24 6*5&#61
;30 6*6&#61
;36 7*1
&#61
;7 7*2&#61
;1
4 7*3&#61
;21
7*4&#61
;28 7*5&#61
;35 7*6&#61
;42 7*7&#61
;49 8*1
&#61
;8 8*2&#61
;1
6 8*3&#61
;24 8*4&#61
;32 8*5&#61
;40 8*6&#61
;48 8*7&#61
;56 8*8&#61
;64 9*1
&#61
;9 9*2&#61
;1
8 9*3&#61
;27 9*4&#61
;36 9*5&#61
;45 9*6&#61
;54 9*7&#61
;63 9*8&#61
;72 9*9&#61
;81
<% for(int i&#61
;1
;i<&#61
;9;i++){ for(int j&#61
;1
;j<&#61
;i;j++){ out.print(i+"*"+j+"&#61
;"+i*j+" "); } out.print("<br/>"); }%>

复制代码

request : HttpServletRequest对象

1
234567891
01
1
1
21
31
41
51
61
71
8

复制代码

表现一次的客户端哀求客户端的哀求信息被封装进request对象中是HttpServletRequest的实例对象request具有哀求域,在一个哀求没有完成之前，该对象不停有效request对象的常用方法?1
. String getParamter(String name) : 返回指定name参数的参数值2. String[] getParameterValues(String name) : 返回包罗name参数的所有值3. void setAttribute(String, object) : 存储此哀求域中的数据4. Object getAttribute(String) : 从域中取出对象5. String getProtocol() : 返回哀求中的协议类型及版本号6. String getServerName() : 返回接受哀求的服务器主机名7. int getServerPort() : 获取服务器对应的端口号8. String getCharacterEncoding() : 返回字符集编码9. void setCharacterEncoding() : 设置哀求的字符集编码1
0. int getContentLength() : 返回哀求体的长度【字节数】1
1
. String getRemoteAddr() : 返回发送此哀求的客户端IP地点1
3. getRequestDispatcher("/转发的地点").forward(request, response) : 哀求转发

复制代码

response : HttpServletResponse对象

1
2345

复制代码

1
. 向前端打印消息 response.getWriter()2. 用于重定向 response.sendRedirect(目标地点)3. 设置字符编码 - response.setCharacterEncoding("UTF-8"); - response.setContentType("text/html;charset&#61
;UTF-8");

复制代码

session : HttpSession对象

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
222324252627

复制代码

表现客户端与服务端的一次会话web中session指的是用户欣赏某个网站，从进入网站到欣赏结束关闭欣赏器所颠末的这段时间session应该是一个特定的时间概念在第一个jsp页面被装载时自动创建，到客户关闭欣赏器脱离服务器结束session是HttpSession的实例session的常用方法1
. long getCreateTime() : 返回session创建时间2. public String getId() : 返回session创建时jsp引擎为他创建的唯一id3. public setAttribute(String,Object) : 将一个对象设置到session会话中4. Object getAttribute(String name) : 取出session中的对象5. String[] getValueNames() &#xff1
a; 返回此session中多所有可用属性的数组6. int getMaxInactiveInterval() &#xff1
a; 返回两次哀求间隔多长时间此session被取消(单位秒)7. void setMaxInactiveInterval(1
0) &#xff1
a; 设置超时时间session销毁的方式1
.调用session.invalidate()2. session过期 —>tomcat默认超时时间是30分钟 —>在web.xml中设置session过期时间3. 服务器重启web.xml设置session过期时间（分钟）<session-config> <session-timeout>1
0</session-timeout></session-config>

复制代码

application : ServletContext对象

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
2223

复制代码

实现用户间数据共享，可以存放全局变量开始于服务器启动，结束于服务器终止在相同用户大概不同用户之间的连接中，可以对application举行同一个属性值的操纵在任何地方对此对象操纵都会影响其他用户对此访问服务器的启动和关闭决定了此对象的生命周期常用方法:1
. void setAttribute(Srting,object) : 向域中设置数据2. Object getAttribute(String name) : 从域中拿出数据3. String getServerInfo() : 返回JSP引擎名和版本号统计当前页面的pv(页面访问量)<% if(application.getAttribute("count")!&#61
;null){ int count &#61
; (Integer)application.getAttribute("count"); application.setAttribute("count", count+1
); }else{ application.setAttribute("count", 0); }%><%&#61
; application.getAttribute("count") %>

复制代码

page : object对象,对应当前Servlet对象，实际上就是this
pageContext : 当前页面的上下文
1
2
复制代码
获取绝对路径
pageContext.request.contextPath
复制代码
config : 对应Servlet中的ServletConfig对象
exception : 错误页面中异常对象

第九章 EL/JSTL表达式

第1

节 EL表达式简介

1
234

复制代码

1
. EL是JSP内置的表达式语言，用以访问页面的上下文以及不同作用域中的对象，取得对象属性的值，或执行简单的运算或判断操纵。EL在得到某个数据时，会自动举行数据类型的转换2. EL表达式用于代替JSP表达式(<%&#61
; %>)在页面中做输出操纵3. EL表达式仅仅用来读取数据，而不能对数据举行修改4. 使用EL表达式输出数据时，如果有则输出数据，如果为null则什么也不输出

复制代码

第2节 EL表达式的使用

EL表达式的语法格式
1
复制代码
${表达式}
复制代码
EL表达式获取域中数据的方式
1
2
复制代码
1
. 获取域中对象 ${user}2. 获取域中对象的属性${user.name}（留意:此name不是类中的成员变量的属性名,而是set/get方法的getName名字）
复制代码
EL表达式的常见隐含对象
1
23
复制代码
1
. requestScope2. sessionScope3. applicationScope
复制代码

EL表达式获取指定域中数据的方式

1
234567

复制代码

在EL表达式中如果我们直接使用属性名如&#xff1
a;${user}，它将会在四个域中由小到大依次查找。顺序&#xff1
a;requestScope、sessionScope、applicationScope还可以从指定的域中直接归去数据1
. ${requestScope.user}&#xff1
a;当前哀求2. ${sessionScope.user}&#xff1
a;当前会话3. ${applicationScope.user}&#xff1
a;当前应用

复制代码

第3节 EL表达式运算符

[img=1

200,1

200]https://img-blog.csdnimg.cn/58a86249fea24beba70776ae7cc8436d.png[/img]

第4节 JSTL标签库

1
234567

复制代码

JSTL（JavaServer Pages Standard Tag Library，JSP尺度标签库)1
. JSP固然为我们提供了EL表达式用来替代JSP表达式，但是由于EL表达式仅仅具有输出功能，而不替代页面中的JSP脚本片段2. 为了办理这个问题，JSP为我们提供了可以自界说标签库(Tag Library)的功能3. 所谓自界说标签库就是指可以在JSP页面中以雷同于HTML标签的形式调用Java中的方法。使用方法和我们JSP动作标签雷同4. 为了方便开发使用Sun公司又界说了一套通用的标签库名为JSTL(JSP Standard Tag Library)，里面界说很多我们开发中常用的方法，方便我们使用5. JSTL由5个不同功能的标签库构成

复制代码

JSTL使用
1
2
复制代码
1
. 导入jar包大概依赖2. 在JSP页面通过taglib标签引入标签库
复制代码
JSTL标签库

[img=1

200,490]https://img-blog.csdnimg.cn/2397c1

66e9a743459e36de4ad8dd2cd6.png[/img]

JSTL常用标签

[img=1

1

59,1

1

81

]https://img-blog.csdnimg.cn/f58b99d91

93346f481

2d9dbef2a65ee2.png[/img]

---

[img=979,623]https://img-blog.csdnimg.cn/d6d6e962efa641

1

7b7e755c6b00a91

1

3.png[/img]

第5节 JSTL时间格式化

1
23

复制代码

导入fmt核心库<fmt:formatDate value&#61
;"${date.date }" pattern&#61
;"yyyy-MM-dd HH:mm:ss"/>

复制代码

第十章 Filter过滤器

1
23

复制代码

1
. Filter中文意思为过滤器。顾名思义，过滤器可在欣赏器以及目标资源之间起到一个过滤的作用2. 对于WEB应用来说，过滤器是一个驻留在服务器中的WEB组件，他可以截取客户端和WEB资源之间的哀求和响应信息3. WEB资源可能包括Servlet、JSP、HTML页面等

复制代码

[img=1

200,273]https://img-blog.csdnimg.cn/d1

f729ecb3c6473bb89df1

a603cf6b26.png[/img]

1
234

复制代码

Filter的使用:1
. 自界说类，而且实现Filter接口2. 在web.xml中举行注册(注册方式和servlet雷同 (在拦截时指定拦截的url地点,可以设置成 /* 拦截全部))3. dofilter方法里面有一个chain.doFilter(request, response);方法是调用下一个拦截器的，如果不放行不能举行下一步的动作

复制代码

1
2345

复制代码

Filter的生命周期:1
. 构造器&#xff1
a;创建Filter实例是调用，Filter实例服务器一旦启动就会被创建2. init()&#xff1
a;实例创建后马上被调用，用来对Filter做一些初始化的操纵3. doFilter()&#xff1
a;Filter的重要方法，用来完成过滤器重要功能的方法，每次访问目标资源时都会调用4. destroy()&#xff1
a;服务器制止时调用，用来开释资源

复制代码

第十一章 Listener监听器(了解)

第1

节 Listener简介

1
23

复制代码

1
. 用于监听JavaWeb步伐中的事件2. 比如ServletContext、HttpSession、ServletRequest的创建、修改和删除3. 当监听的某些事件发生变化时被调用

复制代码

第2节观察者模式

1
2

复制代码

1
. Listener的原理是基于观察者模式的，所谓观察者模式简单来说，就是当被观察者的特定事件被触发（一样平常这某些方法被调用）后，会关照观察者（调用观察者的方法），观察者可以在自己的方法中来对事件做一些处置惩罚2. 在我们的JavaWeb中，观察者就是Listener，而被观察者可能有三个ServletContext、HttpSession、ServletRequest。而事件指的就是这些对象的创建、修改和删除等

复制代码

第3节监听器分类

监听对象
1
23
复制代码
1
. ServletContextListener2. HttpSessionListener3. ServletRequestListener
复制代码
监听对象中属性的变化
1
23
复制代码
1
. ServletContextAttributeListener2. HttpSessionAttributeListener3. ServletRequestAttributeListener
复制代码

第4节监听器举例

1

复制代码

以监听请求域中的属性变化为例ServletRequestAttributeListener

复制代码

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
2223

复制代码

1
. 创建MyListener类实现ServletRequestAttributeListener接口public class MyListener implements ServletRequestAttributeListener { public MyListener() { System.out.println("ServletRequestAttributeListener监听被创建了"); } public void attributeRemoved(ServletRequestAttributeEvent srae) { System.out.println("属性被移除了"); } public void attributeAdded(ServletRequestAttributeEvent srae) { System.out.println("属性被添加了"); } public void attributeReplaced(ServletRequestAttributeEvent srae) { System.out.println("属性被改变了"); }}2. Servlet中测试public void doGet(ServletRequest req, ServletResponse res) throws ServletException, IOException { req.setAttribute("name", "lilei"); //修改属性值 //req.setAttribute("name", "lilei1
1
1
1
1
");}

复制代码

第十二章文件上传和下载

1
23

复制代码

1
. 文件的上传在web应用中是很常见的操纵,比如我们注册用户时上传头像,大概我们发送邮件时，有的必要发送附件,那个附件必要从我们本机上传到服务器.2. 文件的下载,一样平常情况下只要资源存放在用户可访问的目录中,用户就可以直接通过地点下载3. 上传/下载必要添加common-io/common-fileupload两个jar包

复制代码

第1

节文件上传

文件上传的步骤

1
2345

复制代码

1
. 用户在页面中选择要上传的文件，然后将哀求提交到Servlet2. Servlet收到哀求，解析用户上传的文件，然后将文件存储到服务器3. jar - commons-fileupload-1
.4.jar - commons-io-2.6.jar

复制代码

文件上传代码操纵

创建上传文件的表单

1
2345678

复制代码

<form action&#61
;"#" method&#61
;"post" enctype&#61
;"multipart/form-data"> <input type&#61
;"file" name&#61
;"file"/><br><br> <input type&#61
;"submit" value&#61
;"上传"/></form>1
. 表单的method属性必须为post2. 表单的enctype属性必须为multipart/form-data3. 上传文件的控件是intput，type属性为file

复制代码

编写文件上传代码

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
22232425262728293031
32333435363738394041
424344

复制代码

DiskFileItemFactory factory &#61
; new DiskFileItemFactory();ServletFileUpload fileUpload &#61
; new ServletFileUpload(factory);//设置单个文件为3MfileUpload.setFileSizeMax(1
024*1
024*3);//总文件大小为30MfileUpload.setSizeMax(1
024*1
024*3*1
0);try { //获取所有的表单项(平凡表单项/文件表单项) List<FileItem> list &#61
; fileUpload.parseRequest(request); for (FileItem fileItem : list) { //平凡表单提交 if(fileItem.isFormField()) { //获取表单的name名 String fieldName &#61
; fileItem.getFieldName();//获取元素名称 //获取表单的value值 String value &#61
; fileItem.getString("UTF-8"); //获取元素值 System.out.println(fieldName+" : "+value); }else { //文件上传表单 //获取文件名 String name &#61
; fileItem.getName(); //防止重名,使用时间戳 String id &#61
; new Date().getTime()+""; //重新生成文件名称 name &#61
; id + name; //上传到指定位置 String realPath &#61
; getServletContext().getRealPath("/upload"); System.out.println(realPath); //获取路径 File f &#61
; new File(realPath); //判断是否存在 if(!f.exists()){ //如果不存在就创建 f.mkdir(); }; //将文件写到服务器当中 fileItem.write(new File(realPath+"/"+name)); //清空缓存 fileItem.delete(); } }catch (Exception e) { e.printStackTrace();}

复制代码

第2节文件下载

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
22232425262728

复制代码

//获取文件真实路径String realPath &#61
; getServletContext().getRealPath("/1
23.pdf");//获取文件的抽象对象File file &#61
; new File(realPath);//获取文件输入流FileInputStream inputStream &#61
; new FileInputStream(file);//获取文件类型String mimeType &#61
; getServletContext().getMimeType(realPath);//设置内容格式response.setContentType(mimeType);/** * 设置Content-Disposition * 设置fileName */String fileName&#61
;"1
23.pdf";String disposition &#61
; "attachment;filename&#61
;"+fileName;response.setHeader("Content-Disposition", disposition);//设置内容大小long size &#61
; file.length();response.setContentLength((int)size);//发送文件ServletOutputStream outputStream &#61
; response.getOutputStream();byte[] c &#61
; new byte[1
024];int len&#61
;0;while((len&#61
;inputStream.read(c))!&#61
;-1
) { outputStream.write(c, 0, len);}inputStream.close();

复制代码

办理各欣赏器中文名字乱码问题

1
234567891
0

复制代码

String fileName&#61
;"中国.pdf";//获取欣赏器代理String ua &#61
; request.getHeader("User-Agent");if(ua.contains("Firefox")) { //火狐欣赏器 fileName &#61
; "&#61
;?utf-8?B?"+new BASE64Encoder().encode(fileName.getBytes("utf-8"))+"?&#61
;";}else { //谷歌及其他 fileName &#61
; java.net.URLEncoder.encode(fileName,"utf-8");}

复制代码

第十三章 json

第1

节 json的介绍

1

复制代码

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率.

复制代码

第2节 json的数据格式

对象
1
复制代码
{"name": "John Doe", "age": 1
8}
复制代码
数组
1
复制代码
[3, 1
, 4, 1
, 5, 9, 2, 6]
复制代码
对象数据混合
1
2
复制代码
{"a": 1
, "b": [1
, 2, 3]}[1
, 2, "3", {"a": 4}]
复制代码
第3节常用的json工具

fastjson

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
2223

复制代码

官网: https://github.com/alibaba/fastjson/wiki/Quick-Start-CN使用方式:1
. 添加jar包 fastjson-1
.2.68.jar2. 调用API方法POJO--> JSONString text &#61
; JSON.toJSONString(obj); //序列化JSON--> POJOVO vo &#61
; JSON.parseObject("{...}", VO.class); //反序列化fastjson时间格式化:Person person &#61
; new Person(1
00, "user01
", new Date());String format &#61
; JSON.toJSONStringWithDateFormat(person, "yyyy-MM-dd HH:mm:ss", SerializerFeature.WriteDateUseDateFormat);大概:String format &#61
; JSON.toJSONString(person, SerializerFeature.WriteDateUseDateFormat);System.out.println(format);{"createTime":"201
9-09-1
8 1
9:49:35","pId":1
00,"pName":"user01
"}

复制代码

gson

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
22232425262728

复制代码

使用方式:1
. 添加jar包 gson-2.8.6.jar2. 调用API方法POJO--> JSONGson gson &#61
; new Gson();User user &#61
; new User("张三",24);String jsonObject &#61
; gson.toJson(user);JSON--> POJOGson gson &#61
; new Gson();String jsonString &#61
; "{"name":"张三","age":24}";User user &#61
; gson.fromJson(jsonString, User.class);日期格式化:List<Person> pList &#61
; new ArrayList<>();Person p1
&#61
; new Person(1
001
,"李雷1
",new Date());Person p2 &#61
; new Person(1
002,"李雷2",new Date());Person p3 &#61
; new Person(1
003,"李雷3",new Date());pList.add(p1
);pList.add(p2);pList.add(p3);Gson gson &#61
; new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();String json &#61
; gson.toJson(pList);System.out.println(json);

复制代码

Jackson

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
22232425262728293031

复制代码

jackson-core-2.2.3.jar（核心jar包）jackson-annotations-2.2.3.jar（该包提供Json注解支持）jackson-databind-2.2.3.jar//创建ObjectMapperObjectMapper om &#61
; new ObjectMapper();//创建测试数据List<Person> pList &#61
; new ArrayList<>();Person p1
&#61
; new Person(1
001
,"李雷1
",new Date());Person p2 &#61
; new Person(1
002,"李雷2",new Date());Person p3 &#61
; new Person(1
003,"李雷3",new Date());pList.add(p1
);pList.add(p2);pList.add(p3);//序列化对象,将对象序列化成json字符串 writeValueAsStringString pJsons &#61
; om.writeValueAsString(pList);System.out.println(pJsons);//对带有时间格式的序列化(自界说时间格式)//设置时间格式om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));String pJson &#61
; om.writeValueAsString(p1
);System.out.println(pJson);//反序列化对象 Person list &#61
; om.readValue(pJson, Person.class);System.out.println(list);

复制代码

背景返回JSON数据中文乱码办理
1
2
复制代码
response.setCharacterEncoding("utf-8");response.setContentType("text/html; charset&#61
;utf-8");
复制代码

第十四章 Ajax技能

第1

节 AJAX简介

1
23

复制代码

1
. AJAX 是 Asynchronous([eɪˈsɪŋkrənəs]) JavaScript And XML的简称。直译为，异步的JS和XML2. AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技能3. AJAX也可以简单的理解为通过JS向服务器发送哀求

复制代码

第2节 AJAX使用

XMLHttpRequest对象简介

1
23

复制代码

1
. XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操纵都是基于该对象的2. XMLHttpRequest对象用来封装哀求报文，我们向服务器发送的哀求信息全部都必要封装到该对象中3. 这里必要稍微留意一下，XMLHttpRequest对象并没有成为尺度，但是现在的主流欣赏器都支持该对象，而一些如IE6的老版本欣赏器中的创建方式有一些区别

复制代码

XMLHttpRequest对象创建

1
23

复制代码

1
. var xhr &#61
; new XMLHttpRequest():目前主流欣赏器都支持2. var xhr &#61
; new ActiveXObject("Msxml2.XMLHTTP"):IE6支持的方式（了解）3. var xhr &#61
; new ActiveXObject("Microsoft.XMLHTTP"):IE5.5以下支持的方式（了解）

复制代码

AJAX发送HTTP哀求

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
22232425262728293031
32333435363738394041
42434445464748495051
52535455565758596061
62636465666768697071
7273

复制代码

<body> <button id&#61
;"btn1
">GET测试</button> <button id&#61
;"btn2">POST测试</button> <script type&#61
;"text/javascript"> /* 测试GET哀求 */ var btn1
&#61
; document.getElementById("btn1
"); btn1
.οnclick&#61
;function(){ //创建XMLHttpRequest var request &#61
; new XMLHttpRequest(); //设置哀求的基本信息 //① 哀求方式 ② 哀求地点 ③ 是否异步 request.open("get","HelloServlet?user&#61
;Tom&pwd&#61
;1
23456",true); //用于将哀求发送到服务器 request.send(); request.onreadystatechange&#61
;function(){ /* 0: 哀求未初始化 1
: 服务器连接已建立 2: 哀求已吸收 3: 哀求处置惩罚中 4: 哀求已完成，且响应已就绪 */ if(request.readyState&#61
;&#61
;4){ /* 哀求响应码 200: 乐成 404: 页面找不到 500: 服务器内部错误 */ if(request.status&#61
;&#61
;200){ var result &#61
; request.responseText; alert(result); } } } } /* 测试POST哀求 */ var btn2 &#61
; document.getElementById("btn2"); btn2.οnclick&#61
;function(){ //创建XMLHttpRequest var request &#61
; new XMLHttpRequest(); //设置哀求的基本信息 //① 哀求方式 ② 哀求地点 ③ 是否异步 request.open("post","HelloServlet",true); // 添加http头，发送信息至服务器时内容编码类型 request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //用于将哀求发送到服务器 request.send("user&#61
;Jim&pwd&#61
;321
321
"); request.onreadystatechange&#61
;function(){ /* 0: 哀求未初始化 1
: 服务器连接已建立 2: 哀求已吸收 3: 哀求处置惩罚中 4: 哀求已完成，且响应已就绪 */ if(request.readyState&#61
;&#61
;4){ /* 哀求响应码 200: 乐成 404: 页面找不到 500: 服务器内部错误 */ if(request.status&#61
;&#61
;200){ var result &#61
; request.responseText; alert(result); } } } } </script></body>

复制代码

第3节 jQuery实现AJAX技能

1
234567891
01
1
1
21
31
41
51
61
71
81
920

复制代码

$.get(url,[data],[fn],[type])
- url:请求URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式，xml, html, script, json, text, _default。
***************************************
$.getJSON(url,[data],[fn])
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
***************************************
$.post(url,[data],[fn],[type])
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:发送成功时回调函数。
- type:返回内容格式，xml, html, script, json, text, _default。

复制代码

第十五章 Bootstrap框架

1

复制代码

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单

复制代码

中文官网
1
复制代码
https://v3.bootcss.com/
复制代码
第1

节 HTML5文档类型
1
复制代码
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置
复制代码
1
234
复制代码
<!DOCTYPE html><html lang&#61
;"zh-CN"> ...</html>
复制代码
情况搭建导入css/js/jquery

BootStrap模板

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
22232425262728

复制代码

<!DOCTYPE html><html lang&#61
;"zh-CN"> <head> <meta charset&#61
;"utf-8"> <meta http-equiv&#61
;"X-UA-Compatible" content&#61
;"IE&#61
;edge"> <meta name&#61
;"viewport" content&#61
;"width&#61
;device-width, initial-scale&#61
;1
"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后&#xff01
; --> <title>Bootstrap 1
01
Template</title>  <link href&#61
;"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel&#61
;"stylesheet">  <!-- 警告&#xff1
a;通过 file:// 协议（就是直接将 html 页面拖拽到欣赏器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src&#61
;"https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src&#61
;"https://cdn.jsdelivr.net/npm/respond.js@1
.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1
>你好，世界&#xff01
;</h1
>  <script src&#61
;"https://cdn.jsdelivr.net/npm/jquery@1
.1
2.4/dist/jquery.min.js"></script>  <script src&#61
;"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body></html>

复制代码

第2节移动设备优先

1

复制代码

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap3中，重写了整个框架，使其一开始就是对移动设备友好的。

复制代码

1
23

复制代码

为了确保适当的绘制和触屏缩放，必要在 head 之中添加 viewport 元数据标签<meta name&#61
;"viewport" content&#61
;"width&#61
;device-width, initial-scale&#61
;1
">

复制代码

1

复制代码

在移动设备欣赏器上，通过为视口（viewport）设置 meta 属性为 user-scalable&#61
;no 可以禁用其缩放（zooming）功能。如许禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。

复制代码

1

复制代码

<meta name&#61
;"viewport" content&#61
;"width&#61
;device-width, initial-scale&#61
;1
, maximum-scale&#61
;1
, user-scalable&#61
;no">

复制代码

第3节布局容器

1

复制代码

Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套.

复制代码

.container 类用于固定宽度并支持响应式布局的容器。
1
23
复制代码
<div class&#61
;"container"> ...</div>
复制代码
.container-fluid 类用于1

00%宽度，占据全部视口（viewport）的容器。
1
23
复制代码
<div class&#61
;"container-fluid"> ...</div>
复制代码
第4节栅格体系
1
复制代码
Bootstrap 提供了一套响应式、移动设备优先的流式栅格体系，随着屏幕或视口（viewport）尺寸的增长，体系会自动分为最多1
2列。
复制代码
4.1

简介
1
复制代码
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
复制代码
“行（row）”必须包罗在 .container （固定宽度）或 .container-fluid （1

00% 宽度）中，以便为其赋予符合的排列（aligment）和内补（padding）。
通过”行（row）”在程度方向创建一组”列（column）”。
你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
栅格体系中的列是通过指定1

到1

2的值来表现其凌驾的范围。比方，三个等宽的列可以使用三个 .col-xs-4 来创建
如果一“行（row）”中包罗了的“列（column）”大于1

2，多余的“列（column）”地点的元素将被作为一个整体另起一行排列。

4.2 栅格参数

	超小屏幕手机 (<768px)< td>	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1 200px)
栅格体系活动	总是程度排列[/td][td=3,1 ]开始是堆叠在一起的，当大于这些阈值时将变为程度排列
.container 最大宽度	None （自动）	750px	970px	1 1 70px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数[/td][td=4,1 ]1 2
最大列（column）宽	自动	~62px	~81 px	~97px
槽（gutter）宽[/td][td=4,1 ]30px （每列左右均有 1 5px）
可嵌套[/td][td=4,1 ]是
偏移（Offsets）[/td][td=4,1 ]是
列排序[/td][td=4,1 ]是

4.3 从堆叠到程度排列

1

复制代码

使用单一的一组 .col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内

复制代码

[img=1

200,475]https://img-blog.csdnimg.cn/d8b0d1

dac87e4724aa54dc8836fd1

60b.png[/img]

1
234567891
01
1
1
21
31
41
51
61
71
81
92021
222324252627

复制代码

<div class&#61
;"row"> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div> <div class&#61
;"col-md-1
">.col-md-1
</div></div><div class&#61
;"row"> <div class&#61
;"col-md-8">.col-md-8</div> <div class&#61
;"col-md-4">.col-md-4</div></div><div class&#61
;"row"> <div class&#61
;"col-md-4">.col-md-4</div> <div class&#61
;"col-md-4">.col-md-4</div> <div class&#61
;"col-md-4">.col-md-4</div></div><div class&#61
;"row"> <div class&#61
;"col-md-6">.col-md-6</div> <div class&#61
;"col-md-6">.col-md-6</div></div>

复制代码

4.4 流式布局容器
将最外貌的布局元素.container修改为.container-fluid，就可以将固定宽度的栅格布局转换为 1

00% 宽度的布局

1
2345

复制代码

<div class&#61
;"container-fluid"> <div class&#61
;"row"> ... </div></div>

复制代码

4.5 移动设备和桌面屏幕

1

复制代码

是否不希望在小屏幕设备上所有列都堆叠在一起&#xff1
f;那就使用针对小屏幕和大屏幕设备所界说的类吧，即.col-lg-*和.col-md-*。请看下面的实例，研究一下这些是怎样工作的。

复制代码

[img=1

200,93]https://img-blog.csdnimg.cn/485a67f561

d34bff855e800cc2e56df5.png[/img]

1
234

复制代码

<div class&#61
;"row"> <div class&#61
;"col-lg-6 col-md-1
2" style&#61
;"background-color: red;">col-lg-6 col-md-1
2</div> <div class&#61
;"col-lg-6 col-md-1
2" style&#61
;"background-color: #1
B6D85;">col-lg-6 col-md-1
2</div></div>

复制代码

4.6 列偏移

1

复制代码

使用 .col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

复制代码

[img=1

200,341

]https://img-blog.csdnimg.cn/dbc1

ce3dcb394273881

57a31

6701

2b0d.png[/img]

1
234567891
01
1

复制代码

<div class&#61
;"row"> <div class&#61
;"col-md-4" style&#61
;"background-color: red;">.col-md-4</div> <div class&#61
;"col-md-4 col-md-offset-4" style&#61
;"background-color: blue;">.col-md-4 .col-md-offset-4</div></div><div class&#61
;"row"> <div class&#61
;"col-md-3 col-md-offset-3" style&#61
;"background-color: yellow;">.col-md-3 .col-md-offset-3</div> <div class&#61
;"col-md-3 col-md-offset-3" style&#61
;"background-color: yellowgreen;">.col-md-3 .col-md-offset-3</div></div><div class&#61
;"row"> <div class&#61
;"col-md-6 col-md-offset-3" style&#61
;"background-color: blueviolet;">.col-md-6 .col-md-offset-3</div></div>

复制代码

4.7 嵌套列

1

复制代码

为了使用内置的栅格体系将内容再次嵌套，可以通过添加一个新的.row元素和一系列 .col-sm-*元素到已经存在的.col-sm-*元素内。被嵌套的行（row）所包罗的列（column）的个数不能凌驾1
2（其实，没有要求你必须占满1
2列）。

复制代码

[img=1

200,232]https://img-blog.csdnimg.cn/bd5d031

2b0d5405889f9c49c6d021

b7d.png[/img]

1
234567891
01
1
1
21
3

复制代码

<div class&#61
;"row"> <div class&#61
;"col-sm-9"> Level 1
: .col-sm-9 <div class&#61
;"row"> <div class&#61
;"col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class&#61
;"col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div></div>

复制代码

第5节排版

5.1

标题

HTML 中的所有标题标签，h1

到 h6 均可使用。

1
23456

复制代码

<h1
>h1
. Bootstrap heading</h1
><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6>

复制代码

在标题内还可以包罗small标签或赋予.small类的元素，可以用来标志副标题

1
23456

复制代码

<h1
>h1
. Bootstrap heading <small>Secondary text</small></h1
><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6>

复制代码

5.2 页面主体

1

复制代码

Bootstrap 将全局 font-size设置为1
4px，line-height设置为1
.428。这些属性直接赋予 body元素和所有段落元素。别的，p（段落）元素还被设置了等于 1
/2 行高（即 1
0px）的底部外边距（margin）。

复制代码

1

复制代码

<p>...</p>

复制代码

5.3 标志文本

将文本使用mark标签标注
1
复制代码
You can use the mark tag to <mark>highlight</mark> text.
复制代码
5.4 被删除的文本
1
复制代码
<del>This line of text is meant to be treated as deleted text.</del>
复制代码
5.5 无用文本
对于没用的文本使用 s 标签。
1
复制代码
<s>This line of text is meant to be treated as no longer accurate.</s>
复制代码
5.6 插入文本
额外插入的文本使用 ins 标签。
1
复制代码
<ins>This line of text is meant to be treated as an addition to the document.</ins>
复制代码
5.7 带下划线的文本
为文本添加下划线，使用 u 标签
1
复制代码
<u>This line of text will render as underlined</u>
复制代码
5.8 对齐
1
23
复制代码
<p class&#61
;"text-left">Left aligned text.</p><p class&#61
;"text-center">Center aligned text.</p><p class&#61
;"text-right">Right aligned text.</p>
复制代码
5.9 改变大小写
1
23
复制代码
<p class&#61
;"text-lowercase">Lowercased text.</p><p class&#61
;"text-uppercase">Uppercased text.</p><p class&#61
;"text-capitalize">Capitalized text.</p>
复制代码

第6节表格

6.1

基本实例

为任意 table 标签添加.table类可以为其赋予基本的样式—少量的内补（padding）和程度方向的分隔线.

1
234567891
01
1
1
21
31
41
51
6

复制代码

<table class&#61
;"table"> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <td>1
001
</td> <td>李雷</td> <td>1
0</td> </tr> </tbody></table>

复制代码

6.2 条纹状表格

通过 .table-striped 类可以给 tbody 之内的每一行增长斑马条纹样式
1
23
复制代码
<table class&#61
;"table table-striped"> ...</table>
复制代码
6.3 带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增长边框
1
23
复制代码
<table class&#61
;"table table-bordered"> ...</table>
复制代码

6.4 鼠标悬停

通过添加 .table-hover 类可以让 tbody 中的每一行对鼠标悬停状态作出响应
1
23
复制代码
<table class&#61
;"table table-hover"> ...</table>
复制代码
6.5 紧缩表格
1
23
复制代码
<table class&#61
;"table table-condensed"> ...</table>
复制代码
6.6 状态类
通过这些状态类可以为行或单元格设置颜色。

Class描述.active鼠标悬停在行或单元格上时所设置的颜色.success标识乐成或积极的动作.info标识平凡的提示信息或动作.warning标识警告或必要用户留意.danger标识伤害或潜在的带来负面影响的动作

1
234567891
01
1
1
21
31
41
5

复制代码

<tr class&#61
;"active">...</tr><tr class&#61
;"success">...</tr><tr class&#61
;"warning">...</tr><tr class&#61
;"danger">...</tr><tr class&#61
;"info">...</tr><tr> <td class&#61
;"active">...</td> <td class&#61
;"success">...</td> <td class&#61
;"warning">...</td> <td class&#61
;"danger">...</td> <td class&#61
;"info">...</td></tr>

复制代码

6.7 响应式表格

将任何 .table 元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）程度滚动。当屏幕大于768px宽度时，程度滚动条消散。

1
2345

复制代码

<div class&#61
;"table-responsive"> <table class&#61
;"table"> ... </table></div>

复制代码

留意:Firefox欣赏器对fieldset元素设置了一些影响width属性的样式，导致响应式表格出现问题.

第7节按钮

7.1

可作为按钮使用的标签或元素

1

复制代码

为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式

复制代码

1
234

复制代码

<a class&#61
;"btn btn-default" href&#61
;"#" role&#61
;"button">Link</a><button class&#61
;"btn btn-default" type&#61
;"submit">Button</button><input class&#61
;"btn btn-default" type&#61
;"button" value&#61
;"Input"><input class&#61
;"btn btn-default" type&#61
;"submit" value&#61
;"Submit">

复制代码

7.2 预界说样式

使用下面列出的类可以快速创建一个带有预界说样式的按钮。

1
234567891
01
1
1
21
31
41
51
61
71
81
920

复制代码

<button type&#61
;"button" class&#61
;"btn btn-default">（默认样式）Default</button><button type&#61
;"button" class&#61
;"btn btn-primary">（首选项）Primary</button><button type&#61
;"button" class&#61
;"btn btn-success">（乐成）Success</button><button type&#61
;"button" class&#61
;"btn btn-info">（一样平常信息）Info</button><button type&#61
;"button" class&#61
;"btn btn-warning">（警告）Warning</button><button type&#61
;"button" class&#61
;"btn btn-danger">（伤害）Danger</button><button type&#61
;"button" class&#61
;"btn btn-link">（链接）Link</button>

复制代码

7.3 尺寸

1
234567891
01
1
1
21
31
41
51
6

复制代码

<p> <button type&#61
;"button" class&#61
;"btn btn-primary btn-lg">（大按钮）Large button</button> <button type&#61
;"button" class&#61
;"btn btn-default btn-lg">（大按钮）Large button</button></p><p> <button type&#61
;"button" class&#61
;"btn btn-primary">（默认尺寸）Default button</button> <button type&#61
;"button" class&#61
;"btn btn-default">（默认尺寸）Default button</button></p><p> <button type&#61
;"button" class&#61
;"btn btn-primary btn-sm">（小按钮）Small button</button> <button type&#61
;"button" class&#61
;"btn btn-default btn-sm">（小按钮）Small button</button></p><p> <button type&#61
;"button" class&#61
;"btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type&#61
;"button" class&#61
;"btn btn-default btn-xs">（超小尺寸）Extra small button</button></p>

复制代码

通过给按钮添加 .btn-block类可以将其拉伸至父元素1

00%的宽度，而且按钮也变为了块级（block）元素.

1
2

复制代码

<button type&#61
;"button" class&#61
;"btn btn-primary btn-lg btn-block">（块级元素）Block level button</button><button type&#61
;"button" class&#61
;"btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

复制代码

7.4 图片形状

通过为 img 元素添加以下相应的类，可以让图片呈现不同的形状
1
23
复制代码
<img src&#61
;"..." alt&#61
;"..." class&#61
;"img-rounded"><img src&#61
;"..." alt&#61
;"..." class&#61
;"img-circle"><img src&#61
;"..." alt&#61
;"..." class&#61
;"img-thumbnail">
复制代码
留意: IE8不支持 CSS3 圆角属性

7.5 关闭按钮

1

复制代码

<button type&#61
;"button" class&#61
;"close" aria-label&#61
;"Close"><span aria-hidden&#61
;"true">×</span></button>

复制代码

7.6 三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能，反方向请参考组件下的Glyphicons 字体图标
1
复制代码
<span class&#61
;"caret"></span>
复制代码
7.7 显示或隐藏内容
.show 和 .hidden 类可以逼迫任意元素显示或隐藏
1
2
复制代码
<div class&#61
;"show">...</div><div class&#61
;"hidden">...</div>
复制代码

第十六章 Bootstrap框架+练习(JSP/html/css/jquery)

功能介绍

[img=809,356]https://img-blog.csdnimg.cn/2ebe201

a90994eca81

cddd4c535c1

31

5.png[/img]

[img=1

200,497]https://img-blog.csdnimg.cn/b3f80cf47aeb41

4b9fcd0fa6f297ec45.png[/img]

[img=737,586]https://img-blog.csdnimg.cn/62d3096bcb054c3b92de9f1

bc397429f.png[/img]

[img=838,230]https://img-blog.csdnimg.cn/9e81

7bbaec77441

2b6ede3fd3dac1

590.png[/img]

[img=652,379]https://img-blog.csdnimg.cn/409ed095fec443fa8a21

6ea1

4940f435.png[/img]

技能介绍
1
2345
复制代码
1
. JSP servlet filter mysql2. EL JSTL3. jQuery cookie jquery.cookie.js4. bootstrap5. 分页记住我
复制代码

1
2345

复制代码

课件用到的资料文件以及练习题静态页面链接:https://pan.baidu.com/s/1
Ff_FMfzDYqdXh3LoKnSvzQ提取码:kkgm复制这段内容后打开百度网盘手机App，操纵更方便哦

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao1

23.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

JavaWeb入门看这一篇文章就够了

0 个回复

快速回复

楼主热帖

标签云