HTML
- HTML,超文本标记语言。
- 常见的 HTML 标签:
<body>
、<title>
、<head>
、<html>
、<hr>
、<br>
、<h1>
、<img>
、<table>
、<tr>
、<td>
、<th>
、<ul>
、<ol>
、<li>
、<div>
、<audio>
、<video>
、<a>
。 <img>
的常用属性:src
、height
、width
、alt
。<audio>
的常用属性:src
、controls
、autoplay
。
- 查看网页HTML源代码:右键→查看源代码。
- HTML 文件可以直接双击打开,文件后缀名为.html。
W3C
- 万维网联盟,致力于制定各种规范,包括HTML、、HTTP、CSS等。
- W3C 定义了网页由三部分组成,即 HTML + CSS + JavaScript。分别负责网页的结构、表现和动作。
- 网址:
https://www.w3school.com.cn/
。
表单标签
- 常用的表单标签包括:
<form>
、<input>
、<select>
、<button>
、<textarea>
、<option>
。
<form>
标签常用的属性包括:action
、method
。<input>
标签中,常用的属性有:type
、name
、value
、readonly
、disabled
、size
。<button>
标签常用的属性包括:type
、onclick
。
CSS
- CSS:层叠样式表。
- CSS语句一般定义在
<style>
标签中。 - CSS选择器主要有:元素选择器、ID 选择器、类选择器、通用选择器。
- ID选择器的语法:# + id属性值。
- 每个元素的id属性是唯一的,而且ID不能以数字开头。
- ID选择器案例:
#para1 {
text-align: center;
color: red;
}
- 类选择器的语法为:. + class属性值。
- 元素的class属性可以相同,而且同一个元素可以有多个不同的class属性,但注意,类名不能以数字开头。
- 类选择器案例:
.center {
text-align: center;
color: red;
}
- 特殊的类选择器案例,在这个例子中,只有具有 class=“center” 的
元素会居中对齐:
p.center {
text-align: center;
color: red;
}
- 通用选择器案例:
* {
text-align: center;
color: blue;
}
CSS导入
- 导入CSS有三种方法:外部CSS、内部CSS、行内CSS。
- 三种CSS引入方式中,优先级最高的是行内CSS。
- 多个外部CSS之间,是存在优先级的,最后引入的文件,优先级是最高的。
- 外部CSS案例,通过标签来引入外部CSS,一般放在
<head>
标签中,通过rel
、type
、href
三个属性引入:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部CSS放在
<style>
标签中,内部CSS案例:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
- 行内CSS定义在相关元素的style属性中,行内CSS案例:
<p style="color:red;">This is a paragraph.</p>
JavaScript
- 开关灯案例,使用 JavaScript 实现:
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
- JavaScript 代码必须位于
<script>
与</script>
标签之间。 - JavaScript 脚本可被放置于 HTML 页面的
<body>
或<head>
部分中,或兼而有之。 - 把 JavaScript 脚本置于
<body>
元素的底部,可改善显示速度,因为 JavaScript 脚本编译会拖慢显示。 - 可通过完整的 URL 或相对于当前网页的路径引入外部 JavaScript 脚本:
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
- 推荐使用外部 JavaScript 脚本,因为外部脚本分离了 HTML 和代码,使 HTML 和 JavaScript 更易于阅读和维护;而且已缓存的 JavaScript 文件可加速页面加载。
- JS 的标识符命名规则主要有三个:大小写敏感、不能以数字开头、使用 var 修饰变量。
使用JS输出
- 使用JS输出,有四种方法:
- window.alert()
- document.write()
- innerHTML()
- console.log()
- 在 HTML 文档完全加载后使用 document.write() ,将会删除覆盖所有已有的 HTML,所以这个方法一般只用于测试。
- 通过 F12 来激活浏览器控制台,并在菜单中选择控制台,可以在其中看到console.log() 方法打印的内容。
- 使用 window.alert() 写入警告框。
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
- 使用 document.write() 写入 HTML 输出。
- 使用 innerHTML 写入 HTML 元素。
<p id="demo"></p>
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName;
</script>
- 使用 console.log()写入浏览器控制台。
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
let与const
- JavaScript 中,用于声明变量的关键字一共有三个:let、const、var。
- let的作用域仅限于函数内部。
- var的作用域可以覆盖全局。
- const的作用相当于Java中的final关键字。
语法
- JavaScript 中的数据类型有:数值、字符串值、数组、对象。
==
和===
的主要区别在于比较时是否进行类型转换。
5 === '5' // false(类型不同)
true === 1 // false(类型不同)
null === undefined // false(类型不同)
[] === false // false(类型不同)
{} === {} // false(不同对象,引用地址不同)
- NaN === NaN 返回 false(因为 NaN 不等于任何值,包括自身)。
- 判断 NaN 用 isNaN() 或 Number.isNaN()。
- typeof运算符:用于检测给定变量的数据类型,返回一个表示数据类型的字符串。
- typeof 可能返回以下字符串之一:undefined、boolean、number、string、bigint、symbol、function、object
- JS 函数的关键字:function。
- 在 JavaScript 中,函数可以设置返回值,关键字是return,且无需设置返回值的类型。
JS 中的常用对象
- JS 中的常用对象有:String对象、Array对象、自定义对象。
- 在String对象中,内容相同的字符串,
==
的结果为true,但是使用new String()创建的string对象,无论内容是否相同,==的结果一定为false,原因在于,JavaScript对象无法进行对比,比较两个JavaScript对象,将始终返回false。
- String 对象的定义方式有两种:
var s = "str";
var s = new String("str");
- Array对象数组的定义案例:
var cars = ["Saab","Volvo","BMW"];
- Array 对象中,重要的方法push()和pop():
cars.push("Audi");//向Array对象数组cars中添加元素
cars.pop("Audi");//删除Array对象数组cars中的元素
cars.pop();//删除Array对象数组cars中的最后一个元素
- 自定义对象案例,注意,对象中也可以包含函数:
var car = {type:"porsche", model:"911", color:"white"};
DOM和BOM
- DOM是文档对象模型。
- DOM 中的常用方法:
<script>
document.getElementById("demo").innerHTML = "Hello World!";
document.getElementByTagName("demo");
</script>
- DOM 的常用对象:
- document:整个文档对象
- element:元素对象
- text:文本对象
- BOM是浏览器对象模型。
- BOM中的常用对象:
- Window:所有浏览器都支持 window 对象
事件监听
- 常见的事件:
- onchange
- onClick
- onmouseover
- onmouseout
XML与JSON
XML
- XML是“可拓展标记语言”,专用于传输和存储数据,相比HTML,HTML 重在显示数据,XML 重在传输和存储数据。
- XML 文档中的第一行,是 XML 声明。
- 不建议使用属性。
- XML 标签对大小写敏感。
- XML 中,预定义的实体引用:大于、小于、和、单引号、双引号。
XML约束
- XML约束分为两种:DTD约束、Schema约束。
- 约束的作用是验证 XML 是否是合法的。
- 引入DTD约束文件:
<!DOCTYPE note SYSTEM "Note.dtd">
。 - DTD文件的后缀名为 .dtd
- Schema文件的后缀名是.xsd
- Schema约束和DTD约束的关系是:Schema 是 DTD 的继承者,Schema 是格式更加严谨的 XML 文件。
- 引入Schema约束文件:xsi:schemaLocation = “绝对路径或网址”;。
XML解析
- XML 解析的目的,是实现 Java 代码与 XML 文档的交互。
- XML解析方式有两种:DOM、SAX。
- DOM会将文件一次性读入内存,形成树结构,所以它可以对文档进行修改,但是会占用较多的内存。
- SAX则是逐行读取,基于事件驱动,占用的内存少,但是不能修改文档。
- 常见的解析器有:JAXP、DOM4J、Jsoup。
- DOM4J学习网址:
https://dom4j.github.io
。
- 使用 DOM4J 解析 XML 文档的步骤:
- 在 pom.xml 文件中,引入 dom4j 的 GAV 坐标。
- 刷新,更新 Maven。
- 解决引入失败的问题(groupId 错误,所以尽量从官网复制正确的 GAV 坐标。)
- 从 dom4j 官网复制解析的模板代码。
- 从 dom4j 官网复制读取、操作、获得具体元素的模板代码。
- 将从 XML 文件中获取的数据,封装到具体的实体类中(一般会将这个流程,封装为一个工具类)。
JSON
- JSON 即JavaScript 对象标记法,是一种存储和数据交换的语法。
- JSON 对象:
{"name " : "Bill Gates"}
。 - JavaScript 对象:
{name : "Bill Gates"}
。 - JavaScript 对象和 JSON 对象的区别是:JavaScript 对象的
key
没有双引号。 - JavaScript 中使用 JSON:
JSON.parse(str);//将 JSON 字符串转换成 JS 对象
JSON.stringify(str);//将 JS 对象转换成 JSON 字符串
Fastjson
- Fastjson来自阿里巴巴。
- 遇到程序包不存在问题,可能是 IDEA 和 Maven 之间的构建出现问题,解决办法是删除 IDEA 的构建,使用Maven 的构建。
- Fastjson中的常用方法:
JSON.toJSONString(obj)
JSON.parseObject(jsonString,Person.class);//注意有两个参数
HTTP
- HTTP 协议是一种无状态协议。
- 请求数据由请求行、请求头、请求体三部分组成。
- “无状态”协议指每个请求都被视为独立的、完整的操作,服务器不会依赖之前的请求内容来处理当前请求。前后请求之间数据不共享。
- 常用的请求方式包括:POST、GET、DELETE、PUT。
- 请求头中的“host”表示请求的服务器地址。
- GET请求和POST请求的区别在于GET请求的没有请求体,所有数据都保存在请求行中;POST请求有请求体,数据的大小没有限制。
- 响应数据由响应行、响应头、响应体三部分组成。
- POST请求一般都需要表单来完成。
状态码
- 200 OK表示请求成功。
- 400 Bad Request表示客户端请求有语法错误,服务器无法理解。
- 403 Forbidden表示服务器接收到请求,但拒绝提供服务,可能是没有权限访问相关资源。
- 404 Not Found表示找不到请求资源。
- 405 Method Not Allowed表示请求方式类型不匹配。比如应该用GET请求方式,但却使用了POST请求方式。
- 500 Internal Server Error表示服务器发生不可预期的错误。
请求头
- 状态码在响应行中。
- host表示请求的服务器地址。
- accept表示浏览器能接受的资源类型,如application/json,text/plain。
Maven创建Web项目
- Maven 创建 Web 项目有两种方式:普通创建方式和使用Maven骨架创建Web项目。
- 项目创建出现问题的时候,该删除重建的就直接重建,不用花大力气检查错误。
Web项目结构
- java:保存源代码
- resources:资源目录
- WEB-INF:Web的核心目录
- web.xml:web的配置文件,在WEB-INF文件夹下。
IDEA
- 右上角配置打开,可以设置项目的部署方式,访问地址等。
- 在Project Structure中查看项目的文件路径是否设置正确。
- 当项目出现部署问题时,可以从右上角配置和Project Structure两个方向进行检查。
- 很多时候,项目部署出现问题时,也可能是因为打包不及时,代码并未更新,所以需要留心检查target文件夹下的字节码文件是否正确。
- 如果不麻烦,每次重新启动项目时,可以删除target文件夹,以防出现问题。
- 如果删除target文件夹也没能解决问题,可以去Tomcat目录下,删除对应的部署文件试一下,或者清除一下浏览器的缓存。
MVC 模式
- MVC模式是一种软件架构模式,M、V、C的含义分别是:Model、View、Controller。
三层架构
- 三层架构是将我们的项目分成了三个层面,分别是:表现层、业务逻辑层、数据访问层。
web服务器
- 常见的Web服务器有Tomcat、Jetty。
- JavaEE 是 Sun 公司推出的企业级应用程序版本,相关主要技术包括:JDBC、EJB、JPA。
- Web 服务器其实是一个应用程序,用于对HTTP进行封装,简化程序员的开发,提供网络信息的交互和浏览,解析HTTP协议,处理请求数据。
- .bat是Windows 可执行文件。
- .sh是Linux 可执行文件。
Tomcat
- Tomcat和Maven都是apache基金会产品。
- Tomcat的官网是:。
- 在 Tomcat 中部署项目,需要将 Java 代码打包成为一个 war 包,然后将这个 war 包,放在 webapps 目录下。
- webapps文件夹下的其它目录和文件,都是可以删除的。
- 有两种方法可以将项目部署到 Tomcat 上,分别是:直接部署、使用工具(如IDEA)集成。
- 运行startup.bat 文件,启动 Tomcat,如果启动闪退,可能是配置路径有冲突,或端口重复等问题。
- 运行shutdown.bat文件,关闭 Tomcat。
- Ctrl + C,关闭 Tomcat。
- 使用浏览器访问http://localhost:8080访问部署在Tomcat中的项目。
- Address already in use的问题,原因是端口被占用,可以通过修改conf 文件夹下的配置文件server.xml中的端口号来解决。
- 当环境变量JAVA_HOME设置错误时,Tomcat 的启动将会失败,且可能出现闪退的情况。
- 使用 cmd 启动 Tomcat 的话,可以看到报错,不会闪退。
- 通过 IDEA 部署项目到 Tomcat,需要在 IDEA 中,
- 点击右上角Add Configuration
- 进入Run/Debug Configurations界面
- 找到Tomcat Server
- 选择Local
- Tomcat目录结构:
- bin:各种可执行文件;
- conf:配置文件;
- lib:各种依赖jar包;
- logs:各种项目日志文件;
- temp:临时文件;
- webapps:应用发布文件夹;
- work:工作目录。
Servlet
- Java Servlet 是运行在 Web 服务器或应用服务器上的程序,是 Web 浏览器和服务器的中间层。
- Servlet 的本质是 JavaEE 的规范,其实就是个接口。
- 程序包 javax.servlet 不存在的问题, 可以通过修改BuildA,Execution,Deployment→BuildTools→Maven→Runner中的Delegate IDEA build/run actions to Maven来实现。
- 可以通过@WebServlet()注解和web.xml文件两种方式配置 Servlet,使用注解配置访问地址时,注意不要忘了写双引号""。
- Tomcat 会为我们的 MyServlet 创建一个对象,调用自己的service()方法。
- Servlet 是 Tomcat 服务器创建的对象。
- service()方法有两个参数,分别是ServletRequest和ServletResponse。前者用于封装请求数据,后者用于封装响应数据。这两个参数能实现前端和后端的交互。
- service()方法的执行和Java的多态有关系,当调用Servlet时,必然会调用其service()方法,由于多态的原因,也会调用其子类的service()方法。
- Maven 仓库访问网址:https://mvnrepository.com。
- @WebServlet介绍:
- urlPatterns的值是我们通过Tomcat访问项目的地址,
- loadOnStartup的值,是servlet的默认加载机制,当该值不是负数的时候,就会在容器启动的时候,立刻调用init()方法,但默认情况下,该值为负数,所以属于懒加载机制,只有第一次调用的时候,才会调用init()。
生命周期
- Servlet的生命周期,就是指Servlet从创建到销毁的一个过程。
- Servlet的生命周期和三个方法有关系,它们分别是:init()、service()、destroy()。
- Servlet的生命周期大概分为创建、业务操作、销毁三个阶段。
- 第一次访问servlet时,服务器会调用init()方法,创建 servlet,且init()方法只会调用一次。
- 懒加载机制,最大的优点是节约内存,但是懒加载会影响用户的体验感,为提升用户体验感,可以在注解中,添加loadOnStartup=0的内容,这样,当容器加载的时候,就会调用init()方法。
- 可以手动调用destroy()方法。
体系结构
- HttpServlet是抽象类,也是GenericServlet的子类。
- GenericServlet也是抽象类。
- HttpServlet在javax.servlet.http包中。
- 一般情况下,继承了HttpSrevlet之后,会重写其中的doGet()或者doPost()方法。
- 启动子级时发生错误的问题,可能是因为@WebServlet(“servlet”)注解语法错误,正确的语法为:@WebServlet(“/servlet”)。
- doGet()方法会在init()方法执行之后执行。
HttpServletRequest
- 一般会将service()方法的参数servletRequest强转为HttpServletRequest类型使用。
- HttpServletRequest是一个接口,其中的getMethod()方法可以查看当前的请求方式。
- HttpServletRequest是ServletRequest的子接口。
urlPattern
- @WebServlet()中的urlPattern用于配置访问路径,其本质上其实是一个数组,所以我们可以配置多个访问地址。
- 多访问地址的配置示例:
@WebServlet(urlPatterns = {"/servlet1","/servlet2"})
。 - urlPattern配置既可以精确配置,也可以模糊配置,如
@WebServlet("/*")
。 - 精确配置的优先级高于模糊配置,建议都使用精确配置。
- 还有一种特殊的配置方式:
@WebServlet("/my.do")
。
XML配置Servlet
- XML配置Servlet需要
<servlet>
和<servlet-mapping>
两个标签,它们是一一对应的关系,通过<servlet-name>
标签来确定对应关系。 <servlet>
中包含<servlet-name>
和<servlet-class>
标签,前者用于匹配<servlet-mapping>
,后者用于配置指定的servlet类的全限定类名。<servlet-mapping>
中包含<servlet-name>
和<url-pattern>
标签,前者用于匹配指定的<servlet>
,后者用于配置 servlet 的访问路径。
Filter
- Filter 主要用于对请求和响应进行预处理和后处理。
- Filter常见的用途:权限验证、日志记录、字符编码设置、数据压缩、XSS防护。
- Filter 的配置方法和Servlet一样,分为注解配置和配置文件配置两种:
- 使用@WebFilter配置。
- 在web.xml中配置。
- @WebFilter(“/*”)表示拦截所有资源。
- 使用@WebFilter注解来配置过滤器拦截的资源路径。
- 多个 Filter 形成处理链后,按照拦截路径配置的精确度确定优先级。
- Filter基本实现案例,主要实现三个方法:init、doFilter、destroy:
@WebFilter("/*")
public class MyFilter implements Filter {
public void init(FilterConfig config) throws ServletException {
// 初始化代码
}
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
// 请求处理前代码
chain.doFilter(request, response); // 传递给下一个Filter或Servlet
// 响应处理后代码
}
public void destroy() {
// 销毁代码
}
}
Listener
- Listener 用于监听 Web 应用中的事件,当特定事件发生时执行相应操作。
- Listener的主要类型有很多,主要分为以下三大类:
- ServletContext 监听器
- Session监听器
- Request监听器
- Listener的常见用途:
- 应用初始化(如加载配置文件等)
- 统计在线人数
- 资源释放
- 监控用户行为
- ServletContext 监听器有两种:
- ServletContextListener:监听 Web 应用启动和关闭
- ServletContextAttributeListener:监听上下文属性变化
- Session监听器有四种:
- HttpSessionListener:监听 session 创建和销毁
- HttpSessionAttributeListener:监听 session 属性变化
- HttpSessionActivationListener:监听 session 活化和钝化
- HttpSessionBindingListener:监听对象绑定到 session
- Request监听器有两种:
- ServletRequestListener:监听请求创建和销毁
- ServletRequestAttributeListener:监听请求属性变化
- Listener基本实现,实现的两个要素,是注解@WebListener和实现对应的监听器接口:
@WebListener
public class MyListener implements ServletContextListener {
public void contextInitialized(ServletContextEvent sce) {
// Web应用启动时执行
}
public void contextDestroyed(ServletContextEvent sce) {
// Web应用关闭时执行
}
}
Request与Reponse
- Request用于封装请求数据,包括请求头、请求行、请求体。
- Response用于封装响应数据,包括响应头、响应行、响应体以及业务的相关数据。
- Tomcat会解析请求数据,将其封装在request对象中;servlet对象会将数据封装在reponse对象中,Tomcat会按照特定格式解析,返回给浏览器。
- HttpServletRequest是一个接口,位于javax.servlet.http包中,它是ServletRequest接口的子接口。
- HttpServletRequest封装http协议内容,HttpServletRequestWrapper提供具体的实现。
- HttpServletRequestWrapper继承了ServletRequestWrapper。
getParameter()
是request对象的常用方法之一,以下为使用示例:
String username = req/getParameter("username");
setHeader()
是response对象中常用的方法之一,以下为使用示例:
resp.setHeader("content","text/html;charset=utf-8");
- 一般通过
getWriter()
方法实现后端向前端数据的响应,以下为使用示例:
resp.getWriter().write(ret);
获取请求数据
- 这里的请求数据,包括请求头、请求行、请求体。
- JavaEE官方文档地址:
https://docs.oracle.com/javaee/7/api/toc.html
。 - 获取请求头中的数据:
String getHeader(String name)
,逻辑是根据各个键值对中的键名,来获取数据。使用示例:
String accept = req.getHeader("Accept");
- 获取请求方法:getMethod()。
- 获取请求路径(也就是项目的访问路径):getContextPath()。
- 获取URL(统一资源定位符):getRequestURL()。
- 获取URI(统一资源标识符):getRequestURI()。
- 获取GET的请求参数:getQueryString()。
- 获取请求行中的数据:getMethod()、getContextPath()、getRequestURL()、getRequestURI()、getQueryString()。以下为使用实例:
String method = req.getMethod();
System.out.println(method);//输出结果:GET
String contextPath = req.getContextPath();
System.out.println(contextPath);//输出结果:/x
String requestURL = req.getRequestURL();
System.out.println(requestURL);//输出结果:http://localhost:8082/x/request
String requestURI = req.getRequestURI();
System.out.println(requestURI);//输出结果:/x/request
String queryString = req.getQueryString();
System.out.println(queryString);//输出结果:username=sy
- 获取请求体中的数据:getReader()、getInputStream()。以下为使用实例:
BufferedReader reader = req.getReader();
String s = reader.readLine();
System.out.println(s);//输出结果:null
ServletInputStream inputStream = req.getInputStream();
byte[] buffer = new byte[1024];
int len = 0;
while((len = inputStream.read(buffer)) != -1){
System.out.println(new String(buffer,0,len));
}
inputStream.close();//记得关闭流
- 注意,GET请求是没有请求体的。
- 获取字符输入流:BufferedReader getReader() throws IOException。
- 获取字节输入流:ServletInputStream getInputStream() throws IOException。
获取请求参数值
- GET请求的请求参数在请求行中,POST请求的请求参数,既可以在请求行中,也可以在请求体中,但是一般在请求体中。
- 获取GET的请求参数:getQueryString()。
- 表单数据也可以以GET方式提交。
- 获取单个参数:String getParameter(String name)。
- 获取所有请求参数的map集合:Map<String,String[]> getParameterMap()。
- 如果使用的是 Tomcat7,就可能出现 GET 请求乱码的问题,解决方法就是:在获取请求参数之前,使用req.setCharacterEncoding(“UTF-8”)设置一下字符编码方式。
- Tomcat 默认的编码方式是 ISO-8859-1。
- 可以通过特定的网站来简单对编码进行解码操作,或者使用URLEncoder.encode()和URLEncoder.decode(),来编码和解码。以下为使用示例:
String ret = URLEncoder.encode("张三","UTF-8");
Syetem.out.println(ret);//输出结果为:%E5%BC%A0%E4%B8%89
String ret = URLEncoder.decode("%E5%BC%A0%E4%B8%89");
Syetem.out.println(ret);//输出结果为:张三
请求转发
- 请求转发的实现,需要通过两个方法,分别是:
getRequestDispatcher()
forward()
RequestDispatcher getRequestDispatcher(String path)。
void forward(ServletRequest request,ServletResponse response) throws ServletException,IOException
req.getRequestDispatcher("/word").forward(req,resp);
- 请求转发的数据是共享的。
- 通过resp.getWriter().write(“str”)将响应数据传递给前端。
- 请求转发中,可以通过以下几个方法实现数据的共享:
void setAttribute(String name, Object o)
Object getAttribute(String name)
void removeAttribute(String name)
- 请求转发的过程中,浏览器地址栏的内容不会改变。
- 不同服务器之间无法实现请求转发,必须是内部服务器。
- 请求转发只能发起一次。
Response
- HttpServletResponse是ServletResponse的子接口。
- HttpServletResponseWrapper提供具体的实现。
- 通过addHeader()方法来向响应头中封装数据。
void addHeader(String name, String value)
- 通过setStatus()方法,向响应行中封装数据。
void setStatus(int sc)
- 以下为addHeader()方法使用实例,我们可以在浏览器的响应头中发现这些数据:
@WebServlet("/resp")
public class RespServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.addHeader("userdiv","12321312");
}
}
- 以下为setStatus()方法使用实例,我们可以在浏览器的响应行中发现这些数据:
@WebServlet("/resp")
public class RespServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setStatus(500);
}
}
- 通过getOutputStream()和getWriter()方法,向响应体中封装数据。
ServletOutputStream getOutputStream()
PrintWriter getWriter()
- 向响应体重封装数据:
@WebServlet("/resp")
public class RespServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置响应体
resp.getOutputStream().write(12123);
}
}
- 下载一张服务器上的 tomcat 图片:
@WebServlet("/resp")
public class RespServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//从服务器上读取图片资源
File file = new File("D:\\02-WEB\\JAVA_WEB\\homework\\ReqResp-web\\src\\main\\resources\\tomcat.png");
FileInputStream in = new FileInputStream(file);
//循环写出
ServletOutputStream out = resp.getOutputStream();
byte[] buffer = new byte[1024];
int len = 0;
while ((len = in.read(buffer)) != -1){
out.write(buffer,0,len);
}
}
}
重定向
- 重定向前后属于两次请求,所以重定向会使浏览器地址栏发生变化,且可以跳转到任何位置,但也因此不能共享数据。
void sendRedirect(String location)
- 重定向有跨域和不跨域两种情况,必须有http://的前缀,才能实现跨域的重定向。
//跨域
resp.sendRedirect("http://www.sycoder.cn");
//不跨域
resp.sendRedirect("/login");
JSP
- JSP 全称Java Server Pages,是一种动态网页开发技术。JSP = 静态页面 + java 动态展示。
- 使用JSP之前,请确保Apache Tomcat已经安装在C:\apache-tomcat-7.0.2目录下并且运行环境已经正确设置。
- HTML 中添加 JSP 示例:
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
- 将以上代码保存在hello.jsp中,然后将它放置在 C:\apache-tomcat-7.0.2\webapps\ROOT目录下,打开浏览器并在地址栏中输入http://localhost:8080/hello.jsp,就可以正确运行。
- 如果我们要在页面正常显示中文,我们需要在 JSP 文件头部添加一些代码,就像下面这样:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
Hello World!<br/>
<%
out.println("你的 IP 地址 " + request.getRemoteAddr());
%>
</body>
</html>
- JSP 与 纯Servlet对比:纯Servlet需要写大量的println语句,JSP可以更方便的编写或修改HTML。
- JSP 与JavaScript对比:JavaScript 很难与客户端交互,所以不能提供访问数据库和图像处理等复杂的服务。
- JSP 与静态HTML对比:静态HTML不能展示动态信息。
语法
- JSP脚本程序的语法格式:
<% 代码片段 %>
- 与其等价的XML语句,就像下面这样:
<jsp:scriptlet>
代码片段
</jsp:scriptlet>
- 任何文本、HTML标签、JSP元素必须写在脚本程序的外面。
- 一个JSP表达式中包含的脚本语言表达式,先被转化成String,然后插入到表达式出现的地方。
- JSP声明的语法格式:
<%! declaration; [ declaration; ]+ ... %>
- JSP注释,注释内容不会被发送至浏览器甚至不会被编译:
<%-- 注释 --%>
- JSP程序示例,运行后的结果为今天的日期是: 2016-6-25 13:40:07:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
今天的日期是: <%= (new java.util.Date()).toLocaleString()%>
</p>
</body>
</html>
指令
- JSP指令用来设置与整个JSP页面相关的属性。
- JSP指令有三种:
<%@ page ... %>
:定义页面的依赖属性,比如脚本语言、error页面、缓存需求等等。<%@ include ... %>
:包含其他文件。<%@ taglib ... %>
:引入标签库的定义,可以是自定义标签。
隐含对象
- JSP 支持九个自动定义的变量,它们是在 JSP 页面中自动可用的对象,无需额外的声明或初始化。
- 九个自动定义的变量:
- request
- response
- out
- session
- application
- config
- pageContext
- page
- exception
JSTL
- JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能。
- 导入JSTL依赖:
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
- JSTL循环标签
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:forEach items="${product}" var="i" begin="1" end="5">
<tr align="center">
<td>${i.id}</td>
<td>${i.name}</td>
<td>${i.price}</td>
<td><a href="#">编辑</a><a href="#">删除</a></td>
</tr>
</c:forEach>
EL表达式
- EL(全称Expression Language )表达式语言,用于简化 JSP 页面内的 Java 代码,默认 EL表达式已经被禁用了,需要使用需要手动开启。
- EL表达式主要是用来获取数据的。
- 语法:
${表达式}
Cookie与Session
- Cookie与Session都是会话跟踪技术。
- Cookie是客户端会话跟踪技术,可以将数据存储到客户端,以后每次请求访问的时候,客户端都会携带 Cookie 数据访问。
- Session是服务端会话跟踪技术,将数据保存到服务端。
- Session是基于Cookie实现的。
- Cookie将数据存储到客户端,会存在一定的安全隐患。而Session的数据在服务器端,会相对更安全。
- Cookie的数据可以长期存储,但是Session的数据一般都有时间限制,一般为30min。
- Cookie可存储的数据比较有限,一般最大为3KB;Session一般没有数据大小限制。
- Session的数据可以共享。
- 向服务器发送请求时,我们会根据Cookie中的JSESSIONID找到对应的session对象。
- 在Cookie中,直接使用中文,会出现乱码问题,所以我们在设置和读取的时候,要统一编码方式。
Cookie的基本使用
- 添加依赖:
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
<!--提供provided 编译和测试有效,避免和 tomcat 中的 servlet-api 包冲突报错-->
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>taglibs</groupId>
<artifactId>standard</artifactId>
<version>1.1.2</version>
</dependency>
- 使用Cookie的相关方法:
Cookie cookie = new Cookie(String name, String value); //创建 Cookie 对象
void addCookie(Cookie cookie); //响应Cookie 给客户端
Cookie[] getCookies(); //获取Cookie
String getName(); //Cookie常用方法
String getValue(); //Cookie常用方法
public void setMaxAge(int expiry); //设置 Cookie 存活时间
- Cookie有效时间设置案例:
Cookie cookie = new Cookie("username", "sy");
cookie.setMaxAge(0); //0 :删除 Cookie
cookie.setMaxAge(24*60*60); //正数:设置过期时间,到时间自动删除
cookie.setMaxAge(-1); //负数:浏览器关闭时,自动删除
Session 的基本使用
- 常用方法:
HttpSession getSession(); //获取 Session 对象(如果第一次请求没有,就创建一个)
void setAttribute(String name,Object value); //设置值进 Session 中
Object getAttribute(String name); //从 Session 中取值
void removeAttribute(String name); //从 Session 中删除属性
Session 的钝化与活化
- 钝化与活化应用场景:
- 第一次请求,获取的Session存储到服务器之后,网站公司内部重启服务器,导致用户第二次去访问的时候,Session 已经不存在了,从而对用户的体验感造成影响。
- 钝化:
- 服务器正常关闭的时候,tomcat 会把 session 数据写入硬盘work 目录下(sessions.ser文件)。
- 活化:
- 服务器启动的时候,tomcat 读取 sessions.ser 中的数据,并且删掉这个文件。
- 删掉的目的是为了减少不需要的钝化文件污染磁盘,造成磁盘空间的浪费。
Session的销毁
- Session的销毁有两种方式:
- 手动销毁:调用invalidate()方法。
- 自动销毁:默认30min无操作,自动销毁Session,销毁时间可以在web.xml中配置。
- 手动销毁案例:
@WebServlet("/reqSession")
public class ReqSession extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取session对象
HttpSession session = req.getSession();
//做数据共享
session.setAttribute("age",18);
session.invalidate();
}
}
Ajax
- Ajax (Asynchronous JavaScript and XML) 是一种用于创建快速动态网页的技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。
- Ajax需要JavaScript支持。
- Ajax核心概念:
-
- 异步通信:Ajax 允许浏览器在后台与服务器通信,而不会阻塞用户界面
-
- 局部更新:可以只更新页面的某一部分,而不需要重新加载整个页面
-
- 基于标准技术:结合使用 JavaScript、XML(现在更多使用 JSON)、HTML 和 CSS
- Ajax工作原理:
-
- 用户触发事件(如点击按钮)
-
- JavaScript 创建 XMLHttpRequest 对象
-
- 该对象向服务器发送请求
-
- 服务器处理请求并返回响应
-
- JavaScript 处理响应并更新页面内容
- Ajax实现案例:
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'api/data', true);
// 设置回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理响应数据
var response = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = response.data;
}
};
// 发送请求
xhr.send();
- Ajax的优点:
-
- 改善用户体验,减少页面刷新
-
- 减少服务器负载(只传输必要数据)
-
- 异步处理,不阻塞用户界面
Axios
- 虽然原始的 XMLHttpRequest 仍然可用,但现代开发更常使用Axios。
- Axios 是一个基于 Promise 的现代化 HTTP 客户端库,用于浏览器和 Node.js 环境。它提供了简单易用的 API 来处理 HTTP 请求,是当前最流行的前端 HTTP 请求库之一。
- 官网地址:https://www.axios-http.cn/docs。
- 引入axios的js文件:。
- 可以进入官网的 Axios api 查看具体使用方法细节。
Vue
- Vue 学习中文文档:https://vuejs.bootcss.com/guide/。
- Vue.js (通常简称为 Vue) 是一个渐进式 JavaScript 框架,用于构建用户界面。
- Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
- 引入vue.js文件:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- Vue示例:
<!DOCTYPE html>
<html>
<head>
<title>Vue 3 示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<button @click="count++">点击次数: {{ count }}</button>
<p v-if="count > 5">点击次数已超过5次!</p>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const title = ref('Vue 3 示例')
const count = ref(0)
return {
title,
count
}
}
}).mount('#app')
</script>
</body>
</html>
- Vue示例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue 11111!'
}
})
</script>
</body>
</html>
语法
- 常用指令:
-
- v-bind:为HTML标签绑定属性值,如设置 href , css样式等
-
- v-model:在表单元素上创建双向数据绑定
-
- v-on:为HTML标签绑定事件
-
- v-if:条件性的渲染某元素,判定为true时渲染,否则不渲染
-
- v-else:条件性渲染某元素 执行 else语句
-
- v-else-if:条件性渲染某元素 执行 else if语句 判断
-
- v-show:根据条件展示某元素,区别在于切换的是display属性的值
-
- v-for:列表渲染,遍历容器的元素或者对象的属性
Element
- Element中文学习地址: https://element.eleme.cn/#/zh-CN/component/installation。
- Element是饿了么公司前端开发出来的一套组件库,是基于 Vue。
- 引入Element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入js 和 css-->
<script src="/js/vue.js"></script>
<script src="/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
</head>
面试
- 介绍一下HTML、CSS、JavaScript三者的关系和各自的作用。
- 介绍一下Servlet、Filter和Listener。
- 介绍JavaScript中,let和const的区别。
- 介绍一下Cookie和Session。
- 介绍一下XML约束和XML解析。
- 介绍一下Ajax。
- 介绍一下Element。