CSS学习笔记

CSS

内容:

​ 1.CSS简述

​ 2.CSS选择器

​ 3.CSS样式

​ 4.CSS盒子模型

​ 5.CSS和HTML的结合方式


1.CSS简述

1.1 CSS是什么?

​ CSS (Cascading Style Sheets) :层叠样式表

​ 层叠:一层一层叠加

​ 样式表:存储样式的地方,多个样式

1.2 CSS与HTML的区别

​ HTML –> 页面的结构 –> 人的面部(素颜)

​ CSS –> 美化页面 –> 给人化妆

1558934192653

为什么使用CSS替代HTML属性设置样式?

因为HTML属性在单独使用时有一定的局限性,所以要配合CSS样式代码才可以展示更为丰富的效果。

1.3 CSS 的作用

​ CSS作用:修饰HTML页面,更丰富多彩地展示超文本信息

1.4 css的代码规范

放置规范:

​ 在标签方式

当某些样式在页面中被多个标签重复使用,为了编码更加灵活,避免书写重复代码,

我们将样式代码从标签style属性中抽取出来,统一写入到style标签中。

格式:

<style>
       css样式代码
</style>

应用环境:适合页面中进行样式复用

5.2 外部样式

1
2
3
4
5
6
7
8
9
<link/>标签方式
<link/>又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link>标签将样式连接到HTML文档中。

格式:
<link rel="stylesheet" type="text/css" href="css文件路径"/>

 rel="stylesheet" ,固定值,表示样式表
 type="text/css",固定值,表示css类型
 href ,表示css文件位置

适合:不同页面进行样式复用。

Cookie&Session

Cookie&Session

1. 什么是会话?

会话简单理解为:用户打开一个浏览器,点击多个超链接访问服务器的web资源,然后关闭浏览器,整个过程称为是一次会话。

2. 会话技术分类

2.1 Cookie技术

Cookie是客户端技术,程序把每个用户的数据以cookie的形式保存到各自浏览器中。当用户使用浏览器再次访问服务器中的web资源的时候,就会带着各自的数据过去。这样,web资源处理的就是用户各自的数据了。

2.2 Session技术

Session是服务器端技术,利用这个技术,服务器在运行时为每一个用户的浏览器创建一个独享的session对象。由于session为用户浏览器独享,所有用户在访问服务器的时候,可以把各自的数据放在各自的session中,当用户再次访问服务器中的web资源的时候,其他web资源再从用户各自的session中取出数据为用户服务。

3. 会话技术的实现原理

3.1 Cookie的实现原理

img

3.2 Session的实现原理

img

  • 获得从浏览器带过来的Cookie:

    img

  • 向浏览器回写Cookie:

    img

  • Cookie的构造

    img

4.2 Cookie的API的概述

  • ​ 获得Cookie的名称的方法

    img

  • 获得Cookie的值的方法

    img

  • 设置Cookie的有效域名

    img

  • 设置Cookie的有效路径

    img

  • 设置Cookie的有效时长

    img

5. Session

5.1 Session的API的使用

  • 向session中存入数据

    img

  • 从session域中获取数据

    img

  • 从session域中移除数据

    img

5.2 为什么有Cookie还要有Session

  • Cookie局限性:
    Cookie保存的数据是有个数和大小的限制的。
      数据是保存客户端浏览器上(相对不是很安全)。
  • Session
    Session没有个数和大小限制。
    数据是保存在服务器上(相对比较安全)。

6. Servlet的数据访问范围的总结

6.1 请求范围(ServletRequest)

  • 何时创建和销毁的

    创建:当用户向服务器发送一次请求,服务器创建一个request对象。
      销毁:当服务器对这次请求作出了响应,服务器就会销毁这个request对象。
  • 如何存取数据
    存数据:

    ​ void setAttribute(String name,Object value);

    取数据

    Object getAttribute(String name);

    作用范围

    作用范围:一次请求。(转发就是一次请求)。

6.2 会话范围(HttpSession)

  • 何时创建和销毁的
    创建:服务器端第一次调用getSession()方法的时候。
      销毁:三种情况。
              Session过期,默认的过期时间30分钟(web.xml中配置)。
              非正常关闭服务器。(正常关闭服务器—session会被序列化)。
              手动调用session.invalidate();
  • 如何存取数据
    存数据:
             void setAttribute(String name,Object value);
     取数据
             Object getAttribute(String name);
     作用范围
             作用范围:一次会话(多次请求)

6.3 应用范围(ServletContext)

  • 何时创建和销毁的
    创建:服务器启动的时候创建,为每个web项目创建一个单独ServletContext对象。 
      销毁:服务器关闭的时候,或者项目从服务器中移除的时候。
  • 如何存取数据
    存数据:
              void setAttribute(String name,Object value);
      取数据
              Object getAttribute(String name);
      作用范围
              作用范围:整个应用

7.用户登录代码

7.1 Controller

loginServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import java.io.IOException;
import java.net.HttpCookie;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import model.loginModel;
import domain.User;

/**
* loginServlet
*/
public class loginController extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
try {
// 获取数据
// 解决获取请求数据中文乱码
// 校验验证码
String checkcode1 = request.getParameter("checkcode");
String checkcode2 = (String) request.getSession().getAttribute(
"checkcode");

if (!checkcode1.equalsIgnoreCase(checkcode2)) {
request.setAttribute("msg", "验证码错误");
request.getRequestDispatcher("/login.jsp").forward(request,
response);
return;
}

request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");

// 封装数据
User user = new User();
user.setUsername(username);
user.setPassword(password);
// 处理数据
loginModel loginModel = new loginModel();
User existuser = loginModel.login(user);
// 根据处理结果跳转页面
if (existuser == null) {
// 登陆失败
request.setAttribute("msg", "用户名或密码错误!");
request.getRequestDispatcher("/login.jsp").forward(request,
response);
} else {
// 登陆成功
// 判斷是否记住用户名
String remember = request.getParameter("remember");
if (remember != null) {
if (remember.equals("true")) {
Cookie cookie = new Cookie("username",
existuser.getUsername());
// 设置路径
cookie.setPath("/web03_login");
// 设置时间
cookie.setMaxAge(60 * 60 * 24);
// 写回浏览器
response.addCookie(cookie);
}
}

HttpSession session = request.getSession();
session.setAttribute("user", existuser);
response.sendRedirect("/web03_login/success.jsp");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

CheckImgServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* 生成验证码图片
*
*
*/
public class CheckImgServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 禁止缓存
// response.setHeader("Cache-Control", "no-cache");
// response.setHeader("Pragma", "no-cache");
// response.setDateHeader("Expires", -1);

int width = 120;
int height = 30;

// 步骤一 绘制一张内存中图片
BufferedImage bufferedImage = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);

// 步骤二 图片绘制背景颜色 ---通过绘图对象
Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔
// 绘制任何图形之前 都必须指定一个颜色
graphics.setColor(getRandColor(200, 250));
graphics.fillRect(0, 0, width, height);

// 步骤三 绘制边框
graphics.setColor(Color.WHITE);
graphics.drawRect(0, 0, width - 1, height - 1);

// 步骤四 四个随机数字
Graphics2D graphics2d = (Graphics2D) graphics;
// 设置输出字体
graphics2d.setFont(new Font("宋体", Font.BOLD, 18));

String words = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
Random random = new Random();// 生成随机数

// 定义x坐标
int x = 10;
// 创建StringBuffer对象
StringBuffer b = new StringBuffer();
for (int i = 0; i < 4; i++) {
// 随机颜色
graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
// 旋转 -30 --- 30度
int jiaodu = random.nextInt(60) - 30;
// 换算弧度
double theta = jiaodu * Math.PI / 180;

// 生成一个随机数字
int index = random.nextInt(words.length()); // 生成随机数 0 到 length - 1
// 获得字母数字
char c = words.charAt(index);
// 拼接字符
b.append(c);
// 将c 输出到图片
graphics2d.rotate(theta, x, 20);
graphics2d.drawString(String.valueOf(c), x, 20);
graphics2d.rotate(-theta, x, 20);
x += 30;
}
// 将拼接的StringBuffer转换成字符串
String checkcode = b.toString();
// 将字符串存入session中
request.getSession().setAttribute("checkcode", checkcode);

// 步骤五 绘制干扰线
graphics.setColor(getRandColor(160, 200));
int x1;
int x2;
int y1;
int y2;
for (int i = 0; i < 30; i++) {
x1 = random.nextInt(width);
x2 = random.nextInt(12);
y1 = random.nextInt(height);
y2 = random.nextInt(12);
graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
}

// 将上面图片输出到浏览器 ImageIO
graphics.dispose();// 释放资源
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/**
* 取其某一范围的color
*
* @param fc
* int 范围参数1
* @param bc
* int 范围参数2
* @return Color
*/
private Color getRandColor(int fc, int bc) {
// 取其随机颜色
Random random = new Random();
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
}

logOutServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class logoutServlet
*/
public class logoutServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 清除session
request.getSession().invalidate();
// 跳转
response.sendRedirect("/web03_login/success.jsp");
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

7.2 Model

loginModel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import utils.JDBCUtils;
import domain.User;

public class loginModel {
public User login(User user) throws SQLException {
QueryRunner q = new QueryRunner(JDBCUtils.getDataSource());
User existuser = q.query(
"select * from user where username = ? and password = ?",
new BeanHandler<User>(User.class), user.getUsername(),
user.getPassword());
return existuser;
}
}

7.3 Domain

User

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
public class User {
private int uid;
private String username;
private String password;
private String nickname;
public int getUid() {
return uid;
}
public void setUid(int uid) {
this.uid = uid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
}

7.4 Utils

JDBCUtils

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import java.sql.Connection;
import java.sql.SQLException;

import org.apache.tomcat.jdbc.pool.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class JDBCUtils {
private static final ComboPooledDataSource d = new ComboPooledDataSource();

public static Connection getConnection() throws SQLException {
return d.getConnection();
}

public static ComboPooledDataSource getDataSource() {
return d;
}
}

7.5 配置文件

c3p0-config.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql:///web02</property>
<property name="user">root</property>
<property name="password">abc</property>

<property name="initialPoolSize">5</property>
<property name="minPoolSize">5</property>
<property name="maxPoolSize">20</property>
</default-config>

</c3p0-config>

7.6 JSP页面

login.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆</title>
<script type="text/javascript">
function changeIMG() {
document.getElementById("i1").src = "/web03_login/CheckImgServlet?time="
+ new Date().getTime();
}
</script>
</head>
<body>
<%
String msg = "";
if (request.getAttribute("msg") != null) {
msg = (String) request.getAttribute("msg");
}
%>
<h1>登陆页面</h1>
<h3>
<font color="red"> <%=msg%></font>
</h3>
<form action="/web03_login/loginController" method="post">
<table border="2" width="400">
<tr>
<td>用户名:</td>
<td><input type="text" name="username"
value="${cookie.username.value }"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" name="checkcode" size="6"> <img
id="i1" src="/web03_login/CheckImgServlet"><a href="#"
onclick="changeIMG()">看不清,换一张</a></td>
</tr>
<tr>
<td><input type="checkbox" name="remember" value="true"></td>
<td>记住用户名</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="登陆"></td>
</tr>
</table>
</from>
</body>
</html>

success.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@page import="domain.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
if (request.getSession().getAttribute("user") == null) {
%>
<h1>
你还没有登陆!请去<a href="/web03_login/login.jsp">登陆</a>
</h1>
<%
} else {
User user = (User) request.getSession().getAttribute("user");
%>
<h1>登陆成功!</h1>
<h3>
你好!<%=user.getNickname()%></h3>
<a href="/web03_login/logoutServlet">退出</a>

<%
}
%>
</body>
</html>

HTML学习笔记

1.HTML

目标:

​ 1.html的定义

​ 2.html的标签

1.1 HTML的简述

HTML:(Hyper Text Markup Language) 超文本标记语言

文本:相当于记事本里写的文字。 展示信息

超文本:超越了文本仅仅展示信息的功能范畴。泛指:图片、有样式的文字、点击跳转页面的文字

语言:工具。

标记:标签

HTML是由标签所组成的语言,能展示超文本效果

HTML用途

是用来写网页的,是设计页面的基础。

XML: (eXtensible Markup Language) 可扩展标记型语言
标记型语言:使用标签来操作

可扩展:标签可以自己定义,可以写中文的标签 .而html里面的标签是固定,每个标签都有特定的含义

xml用途
html是用于显示数据,xml可以显示数据(不是主要功能)

xml主要功能,为了存储数据

1.2 HTML标签

1.2.1 基本标签

  • 字体标签和格式化标签

    1. 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <font>
      字体标签,用于展示效果中修饰文字样式

      <font 属性名=”属性值”>文字</font>

      size:控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间,设置无效

      color:控制字体颜色. 使用英文设置(例如:red,blue…)

      face:控制字体类型。只能设置系统字库中存在的字体类型
  1. 1
    2
    3
    4
    <br/>
    HTML源码中换行,浏览器解析时会自动忽略。

    换行标签,用于展示效果中换行
  1. 1
    2
    3
    <h1></h1>
    标题标签,用于展示效果中划分标题
    其中<h1>最大,<h6>最小
  2. 1
    2
    3
    &nbsp;
    HTML源码中的多个空格,效果中最终会合并成一个。
    空格符号,用于展示效果中显示一个空白的位置
  3. 1
    2
    3
    4
    HTML注释
    用于注释HTML源码,不在HTML效果中展示。
    只能在源码中看到,页面展示效果中是没有
    格式:<!--HTML注释内容 -->
  4. 1
    2
    3
    4
    5
    6
    <p></p>
    段落标签,用于展示效果中划分段落。并且自动在段前和段后自动加空白行
    align:段落内容的对齐方式
    默认是left, 内容居左
    Right 右
    Center 居中
  • 图片标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <img/>
    用于在页面效果中展示一张图片。
    src:指明图片的路径。(必有属性)
    图片路径的写法:
    ①内网路径:
    绝对路径:文件在硬盘上的具体位置。【不建议使用】
    例如:C:\JavaWeb001_html\img\c_1.jpg
    相对路径:从引入者所在目录出发。【建议使用相对路径】
    例如:../img/c_1.jpg
    ../表示上一层目录
    ./表示当前目录
     width:图片宽度
    height:图片的高度
    宽度和高度的设置:
    默认单位是px,像素。例如:width=”400” 其实设置的是 width=”400px”。固定设置方式

    百分比设置。例如:width=”50%”。 是父标签的百分比。 动态改变的。
  • 列表标签

    1
    2
    3
    <ul></ul>	无序列表标签,用于在效果中定义一个无序列表
    <li></li> 列表条目项标签,用于在效果中定义一个列表的条目
    <ol></ol> 有序列表标签,用于在效果中定义一个有序列表
  • 超链接标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <a></a>	超链接标签,用于在效果中定义一个可以点击跳转的链接
    href:超链接跳转的路径 (必有属性)
    内网本机路径:相对路径和绝对路径
    互联网路径:http://地址
    本页:默认跳转到本页

    超链接正常工作:①a标签中必须有内容
    ②a标签必须有href属性
    注意:
    ①a标签内容体,不仅仅是文字,也可以是其他内容,例如图片
    ②a标签的href属性,不仅仅可以链接到html上,也可以链接到其他文件上,例如图片.
  • 表格标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <table></table>	表格标签,用于在效果中定义一个表格
    border:设置表格的边框粗细
    width:设置表格的宽度
    <tr></tr> 表格的行标签,用于在效果中定义一个表格行
    <td></td> 表格的单元格标签,用于在效果中定义一个表格行中的单元格
    <th></th> 表格的表头单元格标签,用于在效果中定义一个表格行中的表头单元格
    <th>和<td>唯一区别:<th>内容 居中加粗

    单元格合并
    <td>或者<th>都有两个单元格合并属性:
    colspan:跨列合并单元格
    rowspan:跨行合并单元格
  • 块标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <span></span>	行级的块标签,用于在效果中 一行上定义一个块,进行内容显示。
    ① span有多少内容,就会占用多大空间。
    ② Span不会自动换行
    适用于少量数据展示

    <div></div> 块级的块标签,用于在效果中 定义一块,默认占满一行,进行内容的显示

    ① 默认占满一行
    ② 会自动换行

    适用于大量数据展示

1.2.2 表单标签

  • 表单标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <form></form>标签。
    用于在效果中定义一个表单,用于提交用户填写的数据。

    action:将数据提交到何处。
    默认提交到本页。
    本机内网路径:
    相对路径:
    绝对路径:
    互联网路径:
    http://www.baidu.com/xxx

    method:将数据以何种方式提交
    默认为:get
    提交方式可定义:get 或者 post

    Get提交方式特点:把数据拼接到地址栏上
    Post提交方式特点:没有把提交数据拼接到地址栏上。请求体

    Get和post提交方式区别:
    ① get提交的参数列表拼接到了地址栏后面
    post方式不会 拼接地址栏
    ② get方式提交的数据 敏感信息不安全
    Post方式提交的数据 相对安全
    ③ get方式提交的数据量 有限的
    Post方式从理论上提交的数据量 无限大

    尽量使用post方式提交表单
  • 输入项标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <input/>标签
    表单输入项标签之一,用户可以在该标签上 通过填写和选择 进行数据的输入。
    type:设置该标签的种类
    text:文本框。 默认
    password:密码框。 内容为非明文
    checkbox:复选框。 在同一组内有复选效果
    submit:提交按钮。用于控制表单提交数据
    reset:重置按钮。 用于将表单输入项恢复到默认状态
    file:附件框。用于文件上传。
    hidden:隐藏域。一般用作提交服务器需要拿到,但用户不需要看到的数据。
    button:普通按钮。需要和JS事件一起用

    name: 单选框、复选框进行数据的分组。/ 设置该标签对应的参数名
    某个表单输入项需要通过参数列表提交,就必须设置name属性

    value:设置该标签对应的参数值。 / 作为按钮的名字
    value属性的设置策略:
    ①文本框、密码框这样的表单输入项,可以不强制指定value,因为用户可以自由输入
    ②单选框、复选框这样的表单输入项,必须强制指定value,因为用户无法输入,只能选择,如果不指定value,那么提交上去的只有on

    checked:设置单选框/复选框的默认选中状态
    readonly:设置该标签的参数值只读,用户无法手动更改。数据是可以正常提交
    disabled:设置该标签不可用,参数值无法更改,且参数值也无法提交
  • 选择框标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <select></select>标签  定义一个选择框

    name: 设置该标签对应的参数名
    multiple:设置该标签选项全部显示,并且可以进行多选提交。默认为单选。

    <option></option>标签
    选项标签,用于为一个选择框添加一个选项
    value:设置需要提交的参数值。
    selected:设置选项的默认选中状态

    注意事项:
    Option的内容体一般是用来进行展示
    参数值 应该是option的value属性值
  • 文本域标签

    1
    2
    3
    4
    5
    6
    7
    <textarea></textarea>标签
    表单输入项标签之一,用户可以在该标签上 通过输入 进行数据的输入。
    name: 设置该标签对应的参数名

    文本域和文本框区别:
    ① 文本框不能换行,文本域可以
    ② 文本框参数值是value属性,文本域参数值是标签的内容体
  • 提交表单注意事项

    为了保证表单数据传递时能更好区分出name和value。

    保证数据传递的完整性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    为什么要使用URL编码?
    正常提交数据:
    ?password=123&username=zhangsan

    非正常提交数据:
    ?password=123#ohheih&dlajfk&dskfklas&username=zhangsan

    URL编码解决方式:特殊符号,中文
    例如:& -> %26
    ?password=123#ohheih&dlajfk&dskfklas&username=zhangsan
    编码完:?password=123#ohheih %26dlajfk %26dskfklas&username=zhangsan
  • URL编码的表现形式&本质

    ①你好,进行普通的编码,编码成字节数组。【使用的是页面规定的字符集,例如utf-8】

    ① 字节数组中的每一个元素,都会从10进制,转为16进制

    ② 把已经转为16进制的字节数组,以%进行拼接 。拼接出的字符串,就是URL编码后的结果

    1
    2
    3
    4
    5
    6
    7

    例如:你好,用UTF-8编码,编码的字节数组为:

    [-28, -67, -96, -27, -91, -67]

    URL编码后:
    %E4%BD%A0%E5%A5%BD

IDEA快捷键

IDEA

自动代码

psvm public static void main(string[] args){}

sout System.out.println()

fori for(int i = 0; i< ; I++){}

users.for for(User user:users)

user.getName.var String name = user.getName();

快捷键

Cut 剪切 Ctrl + X

Copy 拷贝 Ctrl + C

Copy Path 拷贝路径 Ctrl + Shift + C

Copy Relative Path 拷贝相对路径 Ctrl + Alt + Shift + C

Paste 粘贴 Ctrl + V

Paste from History 从历史记录中粘贴 Ctrl + Shifr + V

Paste Simple 粘贴剪切板上的内容 Ctrl + Alt + Shift + V

Delete 删除选中文 Delete

Compare with 和其他文件对比 Ctrl + D

Class 快速定位一个java文件 Ctrl + N

File 快速定位一个文件 Ctrl + Shift + N

Line/Column 快速定位某一行 Ctrl + G

Back 标签页向左移动 Ctrl + ←

Forward 标签页向右移动 Ctrl + →

Last Edit Location 最后编辑的文件 Ctrl + Shift + Backspace

Override Methods 重写父类相关方法 Ctrl + O

Generate 创建常用方法,例如get、set或者构造函数等 Ctrl+Insert

Surround With 相关流程控制,或者捕获异常等 Ctrl + Alt + T

Move Line Down 当前行向下移动 Alt + Shift + ↑

Move Line Up 当前行向上移动 Alt + Shift + ↓

Rename 更改文件名以及相关引用的更改 Shift + F6

Extract->Variable 抽取一个变量 Ctrl + Alt + V

Extract->Field 抽取一个成员变量 Ctrl + Alt + F

Extract->Parameter 抽取一个入参 Ctrl + Alt + P

Extract->Method 抽取一个方法 Ctrl + Alt + M

DeBug模式

————-调试快捷键—————
其实常用的 就是F8 F7 F9 最值得一提的 就是Drop Frame 可以让运行过的代码从头再来
alt+F8 debug时选中查看值
Alt+Shift+F9,选择 Debug
Alt+Shift+F10,选择 Run
Ctrl+Shift+F9,编译
Ctrl+Shift+F8,查看断点
F7,步入
Shift+F7,智能步入
Alt+Shift+F7,强制步入
F8,步过
Shift+F8,步出
Alt+Shift+F8,强制步过
Alt+F9,运行至光标处
Ctrl+Alt+F9,强制运行至光标处
F9,恢复程序
Alt+F10,定位到断点

配置默认jdk环境

1561015996881

1561016063275

1561016116678

JavaScript学习笔记

JavaScript

内容:

​ 1.JavaScript概述

​ 2.JavaScript语法及规则

​ 3.BOM对象

​ 4.DOM对象


1.JavaScript概述

1.1 JavaScript是什么?有什么作用?

​ HTML:就是用来写网页的。 人的身体

​ CSS: 就是用来美化页面的。 人的衣服

​ JavaScript:前端大脑、灵魂。 人的大脑、灵魂

​ JavaScript是WEB上强大的脚本语言

​ 脚本语言:

​ 无法独立执行。必须嵌入到其他语言中,结合使用。

​ 直接被浏览器解析执行。

​ Java编程语言:

​ 独立写程序,独立运行。 编译—执行

​ 作用:控制页面特效展示。

​ 例如:

​ JS可以对HTML元素进行动态控制

​ JS可以对表单项进行校验

​ JS可以控制CSS的样式;

1.2 JavaScript的语言特征及编程注意事项

特征:
JavaScript无需编译,直接被浏览器解释并执行
JavaScript无法单独运行,必须嵌入到HTML代码中运行
JavaScript的执行过程由上到下依次执行

注意:
JavaScript没有访问系统文件的权限(安全)
由于JavaScript无需编译,是由上到下依次解释执行,所以在保证可读性的情况下,允许使用链式编程
JavaScript和java没有任何直接关系

1.3 JavaScript的组成

1559007509660

​ ECMAScript (核心):规定了JS的语法和基本对象

​ DOM 文档对象模型:处理网页内容的方法和接口

标记型文档。HTML

​ BOM 浏览器对象模型:与浏览器交互的方法和接口

1.4 JavaScript的引入方式

  • 内部脚本

    在当前页面内部写script标签,script内部即可书写JavaScript代码

    格式:

    示例:

    1559007643093

    注:script标签理论上可以书写在HTML文件的任意位置

  • 外部引入

    在HTML文档中,通过

    注:外部引用时script标签内不能有script代码,即使写了也不会执行。

    • script标签规范化的放置位置

      开发规范规定,script标签的放置位置为: Body结束标签前。

      优点:

      ​ 保证html展示内容优先加载,最后加载脚本。 增强用户体验性

    ##

    2. JavaScript语法及规则

    2.1 注释

    • 单行注释

      // Hbuilder快捷键 ctrl+/

    • 多行注释

    ​ /* */ Hbuilder快捷键 ctrl+shift+/

    2.2 变量

    • 变量简述

      变量:标示内存中的一块空间,用于存储数据,且数据是可变的。

      变量的声明:

      ​ var 变量名; //变量赋予默认值,默认值为undefined (未定义的)

      变量的声明和赋值:

      ​ var 变量名=值; //变量赋予对应的值

      在声明JavaScript变量时,需要遵循以下命名规范:

      • 必须以字母或下划线开头,中间可以是数字、字符或下划线

      • 变量名不能包含空格等符号

      • 不能使用JavaScript关键字作为变量名,如:function、this、class

      • JavaScript严格区分大小写。

    • 基本数据类型

      类似于java中的基本数据类型

      string 字符串类型。””和’’都是字符串。 JavaScript中没有单个字符

      boolean 布尔类型。 固定值为true和false

      number 数字类型。 任意数字

      null 空,一个占位符。

      undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未 定义具体的值。

    注:因为undefined是从null中派生出来的,所以undefined==null

    JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。

    通过typeof运算符可以分辨变量值属于哪种基本数据类型

    1559008192175

    ECMAScript实现之初的一个bug,null属于基本数据类型,typeof(null)-->object

    • 引用数据类型

      引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象

    标准创建方式:

    ​ var str = new String();//和java相同

    ​ var str = new String; //js独有的方式

    2.3 运算符

    • 比较运算符

      1559008319029

      ​ == 逻辑等。仅仅对比 值

      === 全等。 对比值并且对比类型。

      如果值和类型都相同,则为true;值和类型有一个不同,则为false

    • 逻辑运算符

      1559008369708

      ​ 注:JavaScript逻辑运算符没有 & |

    2.4 正则对象

    • RegExp对象的创建方式

      var reg = new RegExp("表达式"); (开发中基本不用)

      var reg = /^**表达式$/; 直接量(开发中常用)

      直接量中存在边界,即^代表开始,$代表结束

      直接量方式的正则是对象,不是字符串,别用引号

    • test方法

      正则对象.test(string); 用来校验字符串是否匹配正则。

      全部字符匹配返回true;有字符不匹配返回false

    • 正则对象使用注意事项

      /^表达式$/ 只要有无法成立正则的字符存在,即为false。

      全部符合为true

      (检查严格,眼睛不揉沙子)适用于表单校验

    /表达式/ 只要有成立正则的字符存在,即为true。

    全部不符合为false

    (检查不严格,懒人思想)适用于字符串查找、替换

    2.5 JS数组对象

    • JS数组的特性

      JS数组可以看做 Java中的ArrayList 集合。

      • 数组中的每一个成员没有类型限制,及可以存放任意类型

      • 数组的长度可以自动修改

    • JS数组的四种创建方式

      • var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5

      • var arr = new Array();创建一个数组对象,数组长度默认为0

        //数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)

      • var arr = new Array(4);

      • var arr = new Array(“a”,”b”,true); //创建了一个数组,长度3, 数组元素是”a”,”b”,true

    • JS数组的常用属性/方法

      1559008760061

    2.6 全局函数(global)

    • 执行

      1559197075599

      作用:用于增强程序的扩展性。

      注:只可以传递原始数据类型string,传递String对象无作用。

    • 编码和解码

      1559197121787

      URL/URI编码:中文及特殊符号 %16进制

      作用:保证数据传递的完整性。

    • URI和URL的区别

      URI是统一资源标识符。 标识资源详细名称。
      URL是统一资源定位器。 定位资源的网络位置。

    资源:可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS等等。。。。)

    URI标识资源的详细名称,包含资源名。
    URL定位资源的网络位置。包含http://

    • 字符串转数字

      1559197206138

      parseInt(string); string按照字面值转换为整数类型,小数点后面部分不关注。

      parseFloat(string); string按照字面值转换为小数类型。

      注:
       如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回前面正确的转换值。(例如:11.5a55,parseInt结果11,parseFloat结果11.5)

       如果字符串的第一个字符就无法从字面值上转为数字,那么停止转换,返回NaN
      NaN(Not A Number,一个数字类型的标识,表示不是一个正确的数字)

    2.7 自定义函数/自定义方法

    • 函数简述及作用

      如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。

    ​ 作用:增强代码的复用性

    • 函数格式

      1559197330842

       JavaScript函数定义必须用小写的function;
       JavaScript函数无需定义返回值类型,直接在function后面书写 方法名;
      参数的定义无需使用var关键字,否则报错;
       JavaScript函数体中,return可以不写,也可以return 具体值,或者仅仅写return;

    • 函数使用的注意事项

      • JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;

      • JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;

      • 因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;

      • 如果形参未赋值,就使用默认值undefined


    2.8 自定义对象

    • function构造函数

      我们知道,JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。

      相当于java中创建某个class类

    无形参格式:

    ​ function 对象名(){

    ​ 函数体

    }

    带参数格式:

    ​ function 对象名(参数列表){

    ​ 函数体

    }

    带参数格式:

    ​ function 对象名(参数列表){

    ​ 函数体

    }

    • 对象直接量

      开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为“对象直接量”。

      格式:

      ​ var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

      注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可

      • 应用场景:适用于快速创建实例对象及数据封装。

    3.BOM对象

    3.1 BOM对象是什么?

    BOM(Browser Object Model)浏览器对象模型
    浏览器:IE、火狐、谷歌等
    作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)

    一般情况下,window代表了BOM对象。
    window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。

    3.2 消息框

    • alert()

      警告框,用来弹出警告消息。

      示例:1559197942636

    • confirm()

      确认框,用于告知用户信息并收集用户的选择

      示例1:1559197995756

      该方法有返回值,用户通过选择“确定”或者“取消”,方法结束会返回boolean类型的值。
       “确定”返回ture;
       “取消”返回false;

    3.3 定时器

    • 循环定时器的设置和取消

      循环定时器,调用一次就会创建并循环执行一个定时器。

      格式:

      setInterval(调用方法,毫秒值);
      //毫秒值:  循环周期

      1559219537070

    • 停止循环定时器-clearInterval()

      setInterval方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
      此定时器ID在当前页面是不重复的。

      我们可以通过clearInterval方法,指定某个循环定时器 停止

      格式:

      clearInterval(定时器ID);

      1559219577272

    • 启动一次性定时器-setTimeout()

      一次性定时器,调用一次就会创建并执行一个定时器一次。

      格式:

      setTimeout(调用方法,毫秒值);

    1559219613582

    • 停止一次性定时器clearTimeout()

      setTimeout方法在创建一个定时器的同时,还会返回一个的定时器的ID,该ID就代表这个定时器。
      此定时器ID在当前页面是不重复的。

      我们可以通过clearTimeout方法,指定某个一次性定时器 停止

      格式:

      clearTimeout (定时器ID);

    3.4 location对象

    location 对象包含浏览器 地址栏 的信息。

    1559219686484

    设置href属性,浏览器就会跳转到对应的路径

    4.DOM对象

    4.1 DOM对象是什么?

    DOM(Document Object Model) 文档对象模型
    文档:标记型文档(HTML等)

    DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,

    通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的

    4.2 DOM树介绍

    1559219755135

    上述HTML文档会被浏览器 由上到下依次 加载并解析。

    加载到浏览器的内存,加载并解析到内存中,会生成一张DOM树

    1559219777852

    其中:

    l 每个标签会被加载成 DOM树上的一个元素节点对象。

    l 每个标签的属性会被加载成DOM树上的一个属性节点对象

    l 每个标签的内容体会被加载成DOM树上的一个文本节点对象

    l 整个DOM树,是一个文档节点对象,即DOM对象。

    l 一个HTML文档加载到内存中就会形成一个DOM对象

    DOM树的特点:

    l 必定会有一个根节点

    l 每个节点都是节点对象

    l 常见的节点关系:父子节点关系

    l 文本节点对象没有子节点---叶子节点

    l 每个节点都有一个父节点,零到多个子节点

    l 只有根节点没有父节点

    4.3 获取元素对象的四种方式

    在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
     getElementById(); ---通过元素ID获取对应元素对象
    可以通过ID获取对应的元素对象,如果找不到,返回null

     getElementsByName(); ---通过元素的name属性获取符合要求的所有元素
     getElementsByTagName(); ---通过元素的元素名属性获取符合要求的所有元素
     getElementsByClassName(); ---通过元素的class属性获取符合要求的所有元素
    可以获取到元素节点对象 数组;如果找不到,返回 空数组

    注:获取某个/某些元素节点对象,必须保证元素节点对象被先加载到内存中

    4.4 元素对象常见属性

    • value

      元素对象.value, 获取元素对象的value属性值。
      元素对象.value=属性值 设置元素对象的value属性值。

      修改元素的值

    • className

      元素对象.className, 获取元素对象的class属性值。
      元素对象. className =属性值 设置元素对象的class属性值。

      修改元素样式

    • checked

      元素对象.checked, 获取元素对象的checked属性值。
      元素对象. checked =属性值 设置元素对象的checked属性值。

      注:HTML中checked=”checked”,JavaScript中返回true,false

      修改单选/复选的 选中与否

    • innerHTM元素对象.innerHTML, 获取元素对象的内容体
      元素对象.innerHTML=值 设置元素对象的内容体

      操作元素的内容体L

    5. JS事件

    5.1 JS事件是什么

    通常鼠标或热键的动作我们称之为事件(Event)

    事件包括:点击、表单提交、值发生改变、鼠标移入、鼠标移出等等

    通过JS事件,我们可以完成页面的指定特效。

    5.2 JS事件驱动机制简述

    页面上的特效,我们可以理解在JS事件驱动机制下进行。
    JS事件驱动机制:

    ​ 警察抓小偷

     事件源 小偷
     事件 偷东西
     监听器 警察
     注册/绑定监听器 让警察时刻盯着小偷

    事件源:专门产生事件的组件。

    事件:由事件源所产生的动作或者事情。

    监听器:专门处理 事件源 所产生的事件。

    注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事件源产生指定事件,则调用监听器处理。

    5.3 常见的JS事件

    • 点击事件(onclick)

      点击事件:由鼠标或热键点击元素组件时触发

      示例:

      1559220084943

    • 焦点事件(onblur、onfoucs)

      • 失去焦点事件(onblur)

        焦点:即整个页面的注意力。

        默认一个正常页面最多仅有一个焦点。

    例如:文本框中闪烁的小竖线。
    
    ​    ![1559220128716](D:\typora笔记\Typora图片\1559220128716.png)                                              
    
    通常焦点也能反映出用户目前的关注点,或者正在操作的组件。
    
    获取焦点事件:当元素组件获取焦点时触发
    
    示例:![1559220154392](D:\typora笔记\Typora图片\1559220154392.png)
    • 失去焦点事件(onblur)

      失去焦点事件:元素组件失去焦点时触发

      示例:

      1559220188706

    • 域内容改变事件(onchange)

      域内容改变事件: 元素组件的值发生改变时触发

      示例:

      1559220216926

    • 加载完毕事件(onload)

      加载完毕事件:元素组件加载完毕时触发。

      示例:

      1559220255837

    • 表单提交事件(onsubmit)

      (必须绑定form标签 而不是submit标签)

      表单提交事件:表单的提交按钮被点击时触发

    注意:该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作。

    l 事件得到true,提交表单数据

    l 事件得到false,阻止表单数据提交

    示例:

    1559220336272

    • 键位弹起事件(onkeyup)

      键位弹起事件:在组件中输入某些内容时,键盘键位弹起时触发该事件

      示例:

    1559220372534

    • 常用鼠标事件

      • 鼠标移入事件:鼠标移入某个元素组件时触发

        示例:

        1559220425424

      • 鼠标移出事件(onmouseout)

        鼠标移出事件:鼠标移出某元素时触发

        示例:

        1559220452288

    5.4 JS事件的两种绑定方式

    • 元素事件句柄绑定

      将事件以元素属性的方式写到标签内部,进而绑定对应函数。

      示例1:【为事件绑定一个无参函数】

      1559220500712

      示例2:【为事件绑定一个有参函数】

      1559220524481

      示例3:【为事件绑定一个有参函数-this】

      1559220538031

      示例4:【为事件绑定多个函数】

      1559220550332

      事件句柄绑定方式-

      ​ 优点:①开发快捷

      ​ ②传参方便

      ​ ③可以绑定多个函数

      ​ 缺点:JS和HTML代码高度糅合在一起,不利于多部门的项目开发维护

    • DOM绑定方式

      使用DOM的属性方式绑定事件。

      示例1:【将下述绑定转为DOM方式绑定】

      1559220609168

      示例2:【使用DOM绑定方式,为文本框onclick事件绑定run1方法】

      1559220628475

      DOM绑定方式-

      ​ 优点:使得HTML代码和JS代码完全分离

      ​ 缺点:①不能传递参数。 解决:匿名函数是可以的

      ​ ②一个事件只能绑定一个函数 解决:匿名函数内部是可以绑定多个函数。

JavaWEB学习笔记

JavaWeb

1. Servlet

1.1 Servlet的生命周期

  • 什么是生命周期??

    生命周期:一个对象从创建到销毁的全过程.

  • Servlet的生命周期

    Servlet是在第一次被访问的时候会被实例化。只要Servlet一被实例化那么Servlet中的init方法就会执行(init只会执行一次)。任何一次从客户端发送来的请求,那么Servlet中的service方法就会执行(在service方法的内部根据请求的方式不同调用不同的doxxx方法)。当Servlet从服务器中移除或服务器关闭时Servlet对象被销毁,里面的destroy方法就会执行,然后垃圾回收器就会将其回收掉。

1.2 Servlet启动时加载

  • 为什么使用启动时加载

    Servlet对象是第一次被访问的时候会被创建的,init方法就会执行。假设在init方法中做了一些比较耗时的操作(比如:加载了一些配置文件并且解析可能需要花费3秒钟)。第一个用户第一次访问这个Servlet的时候,需要等待3秒钟。如何使第一个用户在第一次访问的时候不需要花费这么长时间?

    配置启动时加载: 在web.html中Servlet配置下设置2(数字越小优先级别越高)

    service.xml中有设置一个默认的servlet,它的启动时加载的优先级别为1.因此我们在设置启动时加载的优先级别从2开始。

1.3 Servlet路径配置

  • 全路径匹配

    以/开始 比如:/ServletDemo1 /aaa/ServletDemo2

  • 目录匹配

    以 / 开始,以 /结束 比如:/ /aaa/* /aaa/bbb/*

  • 扩展名匹配

    不能以 / 开始,以开始 比如:.action *.do *.jsp

访问的优先级别:完全路径匹配 > 目录匹配 > 扩展名匹配

1.4 ServletConfig对象

​ ServletConfig用来获得Servlet的相关的配置的对象。

  • 获得ServletConfig对象

    img

  • ServletConfig对象的API

    img

     获得Servlet的初始化参数 getInitParameter(String name)

    ​ getInitParameterNames()

     获得ServletContext对象 getServletContext()

     获得Servlet的名称 getServletName()

  • 配置初始化参数

    1559478471685

1.5 ServletContext对象

  • 什么是ServletContext

    ServletContext:Servlet的上下文对象。ServletContext对象对Servlet之前和之后的内容都知道。这个对象一个web项目只有一个。在服务器启动的时候为每个web项目创建一个单独的ServletContext对象。

  • ServletContext获取工程信息

    因为一个web项目只有一个ServletContext对象,所以这个对象对整个项目的相关内容都是了解的。

    • 获取文件的MIME类型:getMimeType(String File)

      img

    • 获取web项目请求工程名:getContextPath()

      img

    • 获取web项目的初始化参数:getInitParameter(String name)

      ​ getInitParameterNames()

      img

  • 配置全局初始化参数

    1559479154836

  • Servlet对象读取web项目下的文件

    之前使用IO流就可以读取文件(java项目中)。现在是一个web项目,web项目需要发布到tomcat下才能访问的。获取web项目下的文件如果使用传统的IO就会出现问题(原因:路径中使用的是相对路径,相对的是JRE环境)。

    1559479472885

    getServletContext() –> 获取ServletContext对象

    方法一:通过ServletContext的getResourceAsStream(“路径”)方法获取输出流

    方法二: 通过ServletContext的getRealPath(“路径”)方法获得文件的真正路径


  • ServletContext作为域对象

    域对象:指的是将数据存入到域对象中,这个数据就会有一定的作用范围。域指的是一定的作用范围。

    • ServletContext是在服务器启动的时候为每个web项目单独创建一个ServletContext对象。当web项目从服务器中移除,或者是关闭服务器的时候ServletContext对象会被销毁。向ServletContext中保存的数据一直存在(当服务器关闭的时候ServletContext对象被销毁,然后里面数据才会失效)。范围:整个web应用。

    • ServletContext作为域对象的API

      存入数据的方法:setAttribute(String name, Object value)

      img

    • 获取数据的方法: getAttribute(String name)

      img

    • 移除数据的方法: removeAttribute(Steing name)

      img

2.Response对象

2.1 什么是Response

​ 开发的软件是B/S结构的软件,可以通过浏览器访问服务器的软件。从浏览器输入一个地址访问服务器(将这个过程称为是请求)。服务器接收到请求,需要进行处理,处理以后需要将处理结果显示回浏览器端(将这个过程称为是响应)。

img

2.2 Response对象的API

  • Response关于相应行的方法

    img

    setStatus(int sc)

    响应码:

     200 正确
     302 重定向
     304 查找本地缓存
     404 请求资源不存在
     500 服务器内部错误

  • Response关于响应头的方法

    img

    set开头的方法:针对一个key对应一个value的情况.

     举例:比如有一个头 content-Type:text/html setHeader(“content-Type”,”text/plain”);
     最终得到头的结果:content-Type:text/plain

    img

    add开头的方法:针对一个key对应多个value的情况。

 举例:比如有一个content-Type:text/html addHeader(“content-Type”,”text/plain”);
 最终得到头的结果:content-Type:text/html,text/plain

  • Response关于响应体的方法

    img

    获得输出流

  • Response其他的API

    • 重定向的方法 sendRedirect(String Location)

      img

    • 设置浏览器打开页面时候采用的字符集 setContentType(String type)

      img

    • 设置响应字符流的缓冲区字符集 setCharacterEncoding(String charset)

      img

    • 服务器向浏览器回写Cookie的方法 addCookies(Cookies cookies)

      img

2.3 Response对象API的代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ResponseDemo02 extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println(1);
//重定向
//设置状态码
response.setStatus(302);
//设置重定向地址
response.setHeader("Location", "/web01/HelloServlet");
//重定向的常用方法
response.sendRedirect("/web01/HelloServlet02");
//定时刷新
response.setHeader("Refresh", "5;url=/web01/HelloServlet03");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

2.4 Response对象响应的中文乱码处理

1
2
3
4
5
6
// 字节流输出中文(乱码是由于字节流bytes数组编码格式和浏览器默认的编码格式不一致)
// 设置浏览器的默认编码格式
response.setHeader("Content-Type", "text/html;charset=UTF-8");
// 设置bytes数组的编码格式
byte[] bytes = "中文".getBytes("UTF-8");
response.getOutputStream().write(bytes);
1
2
3
4
5
6
7
8
// 字符流输出中文(乱码是由于浏览器的缓冲区的默认编码格式为"ISO-8859-1",该编码不支持中文)
// 修改缓冲区编码格式
// response.setCharacterEncoding("UTF-8");
// // 修改浏览器默认编码格式
// response.setHeader("Content-Type", "text/html;charset=UTF-8");
//简便方法
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("中文");

3. Request对象

3.1 什么是Request对象

​ 开发的软件都是B/S结构软件,从浏览器向服务器提交一些数据,将这些内容进行封装就封装成了一个请求对象(Request对象)。

3.2 Request对象的API

获得客户机信息

  • 获取请求方式 getMethod()
  • 获取请求路径后的提交参数的字符串 getQueryString()
  • 获得请求路径的URL和URI
    • getRequestURI
    • getRequestURL
  • 获得客户机的IP的方法 getRemoteAddr()

获得请求头的方法

  • 获得一个key对应一个value的请求头 getHeader(String name)
  • 获得一个key对应多个value的请求头 getHeaders(String name)

获得请求参数的方法

  • 获得提交的参数(一个name对应一个key) getParameter(String name)

  • 获得提交的参数(一个name对应多个key) getParameterValues(String name)

  • 获得提交的参数,将提交的参数的名称和对应的值存进一个Map集合中

    getParameterMap()

Resquest作为域对象存取数据的方法(域作用)范围为本次请求响应)

  • 从request域中存数据 addAtrribute(String name, Object o)
  • 从request域中获取数据 getAttribute(String name)
  • 从request域中移除数据 removeAtrribute(String name)

request作为域对象的作用范围:

Request对象其实就是从客户端浏览器向服务器发送的一次请求信息的封装。那么实质上向Request中所保存的数据有效期也是一次请求范围

一次请求范围:从客户端浏览器向服务器发送一次请求,服务器针对这次请求对浏览器作出响应。当服务器作出响应之后,请求对象就销毁了,保存在其中的数据就无效了。

3.3 Request对象API的代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//获取请求方法
String method = request.getMethod();
System.out.println(method);
//获取客户机ip
String ip = request.getRemoteAddr();
System.out.println(ip);
//获取请求参数的字符串
String queryString = request.getQueryString();
System.out.println(queryString);
//获取请求路径的URL和URI
StringBuffer url = request.getRequestURL();
System.out.println("URL---" + url);
String uri = request.getRequestURI();
//获取用户浏览器信息
System.out.println("URI---" + uri);
System.out.println(request.getHeader("User-Agent"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import java.io.IOException;
import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.Enumeration;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RequestDemo01 extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 通过request.getParameter(name)获取request请求中的参数
// String username = request.getParameter("username");
// String password = request.getParameter("password");
// String sex = request.getParameter("sex");
// String city = request.getParameter("city");
// String[] hobby = request.getParameterValues("hobby");
// String info = request.getParameter("info");
// System.out.println(username);
// System.out.println(password);
// System.out.println(sex);
// System.out.println(city);
// System.out.println(Arrays.toString(hobby));
// System.out.println(info);
// 通过request.getParameterNames()方法获取request中的参数
// 此方法适用于一个key对应一个value的情况
// Enumeration<String> names = request.getParameterNames();
// while (names.hasMoreElements()) {
// String name = names.nextElement();
// String value = request.getParameter(name);
// System.out.println(name + "---" + value);
// }
// 通过request.getParameterMap()来获取request的参数
Map<String, String[]> map = request.getParameterMap();
for (String key : map.keySet()) {
String[] value = map.get(key);
if (value.length == 1) {
System.out.println(key + "---" + value[0]);
} else {
System.out.println(key + "---" + Arrays.toString(value));
}
}
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

3.4 Request对象接收表单请求参数的中文乱码处理

1
2
3
4
5
6
7
//post提交方式,请求参数中文乱码是由于post的请求参数是从请求体中拿到缓冲区中,而缓冲区的默认编码格式为ISO-8859-1,需设置缓冲区的编码格式
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
System.out.println(username);
}

//get提交方式,请求参数中文乱码是由于get的请求数据是先通过UTF-8的Url编码变成%十六进制的形式拼接在请求行,再存储在缓冲区,缓冲区的默认编码格式为ISO-8859-1.为了将参数转换成中文提取出,需要先以ISO-8859-1的编码格式从缓存区中取出数据,再把数据进行UTF-8的解码,解析成中文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String name = request.getParameter("username");

// String encode = URLEncoder.encode(name, "ISO-8859-1");

// String decode = URLDecoder.decode(encode, "UTF-8");

// System.out.println(decode);

//常用方法

String username = new String(name.getBytes("ISO-8859-1"), "UTF-8");

System.out.println(username);

}

JDBC高级

JDBC高级

1. JDBC事务管理

事务指的是逻辑上的一组操作,组成这组操作各个逻辑单元要么全都成功,要么全都失败。

事务的特性:原子性,一致性,隔离性,持久性

​ Connection对象
​ setAutoCommit(boolean flag) 将此连接的自动提交模式设置为给定状态。
​ commit() 使所有上一次提交/回滚后进行的更改成为持久更改,并释放此 Connection 对象当前持有的所有数据库锁。
​ rollback() 取消在当前事务中进行的所有更改,并释放此 Connection 对象当前持有的所有数据库锁。

2.连接池(DataSource)

​ 目的是为了节省创建连接和销毁连接所需要花费的时间 提高程序的执行效率

2.1 Druid

DruidDataSource
    创建连接池对象
        1:
            DruidDataSource d = new DruidDataSource();
            d.setDriverClassName();
            d.setUrl()
            d.setUserName()
            d.setPassword()
        2:    准备一个db.properties    
            Properties p = new Properties();
            p.load("src/db.properties"):
            DruidDataSource d = DruidDataSourceFactory.createDataSource(p);

2.2 C3P0

1
2
3
4
5
6
7
8
9
10
11
C3P0
1:
ComboPooledDataSource d = new ComboPooledDataSource();
d.setDriveClass()
d.setJdbcUrl()
d.setUser()
d.setPassword()

2: 在src下面 准备c3p0-config.xml
ComboPooledDataSource d = new ComboPooledDataSource();
ComboPooledDataSource d = new ComboPooledDataSource(String DataSource);//"指定名称的连接池"

2.3 JDBCUtils

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import java.sql.Connection;
import java.sql.SQLException;

import org.apache.tomcat.jdbc.pool.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class JDBCUtils {
private static final ComboPooledDataSource d = new ComboPooledDataSource();

public static Connection getConnection() throws SQLException{
return d.getConnection();
}

public static ComboPooledDataSource getDataSource(){
return d;
}
}

3. DButils工具类

DButils工具类

​ QueryRunner
​ QueryRunner() 需要事务管理
​ QueryRunner(DataSource ds) 不需要事务管理

//可以实现增删改操作
update(String sql,Object...params)
update(Connection conn,String sql,Object...params)

//实现查询操作
query(String sql,ResultSetHandler rs,Object...params)
query(Connection conn,String sql,ResultSetHandler rs,Object...params)

ResultSetHandler是一个接口 该接口中有一个抽象方法handle()
作业:自定义实现类实现ResultSetHandler接口并重写其handle方法(方法体的实现参看下午demo1)

ArrayHandler        把每条表记录封装到一个Object数组中
ArrayListHandler    把每条表记录封装到一个Object数组中 再把所有数组放入list集合中

BeanHandler            把每条表记录的字段封装到指定类型的属性上
BeanListHandler        把每条表记录的字段封装到指定类型的属性上 并且把多个该类型的对象放入list集合中

MapHandler            把每条表记录的字段名和字段值放入到Map集合中
MapListHandler        把每条表记录的字段名和字段值放入到Map集合中 再把所有的Map集合封装到List集合中

//了解
columnListHandler    封装指定列的查询记录
scalarHandler        查询单值记录
keyedHandler        把查询到的每条记录放入Map集合中 再把该Map集合放入外层Map集合的value位置 key是指定列名称

​ ​

JDBC学习笔记

JDBC-1

1. JDBC的概述

​ JDBC是什么?/

img

​ 什么是数据库驱动?

​ 驱动:两个设备(应用)之间通信的桥梁。

2.使用JDBC

2.1 使用JDBC的四个步骤(记住!)

加载驱动

1
Class.forName("com.mysql.jdbc.Driver");

获得连接

1
2
3
4
5
String url = "jdbc:mysql://localhost:3306/test01";  //默认不开启批处理 
// 开启批处理需在 url后加上 "?rewriteBatchedStatements = ture"
username = "root";
password = "abc";
Connection conn = DriverManager.getConnection(url,username,password);

执行SQL

1
2
3
4
5
6
7
8
9
10
// 1.创建SQL语句执行对象
Statement stmt = conn.createStatement();
// 2.编写SQL语句
String sql = "select * from user";
// 3.执行SQL语句
ResultSet rs = stmt.executeQuery(sql);
// 4.遍历结果集
while(rs.next()){
System.out.println(rs.getInt("id")+" "+rs.getString("username")+" "+rs.getString("password"));
}

释放资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
if(rs != null){
try{
rs.close();
}catch(Exception e){
e.printStackTrace();
}
rs = null;//加快被垃圾回收器处理
}

if(stmt != null){
try{
stmt.close();
}catch(Exception e){
e.printStackTrace();
}
stmt = null;
}
if(conn != null){
try{
conn.close();
}catch(Exception e){
e.printStackTrace();
}
conn = null;//加快被垃圾回收器处理
}

2.2 JDBC的4个API

DriverManager

​ 作用一:注册驱动

img

这个方法可以完成驱动的注册,但是实际开发中一般不会使用这个方法完成驱动的注册!!!

原因:

如果需要注册驱动,就会使用DriverManager.registerDriver(new Driver());,但是查看源代码发现,在代码中有一段静态代码块,静态代码块已经调用了注册驱动的方法。

img

l 如果再手动调用该方法注册驱动,就会导致驱动被注册两次。实际开发中一般会采用:

img

作用二:获得连接

img

这个方法就是用来获得与数据库连接的方法:这个方法中有三个参数:

l url :与数据库连接的路径

l user :与数据库连接的用户名

l password :与数据库连接的密码

主要关注的是url的写法:

jdbc:mysql://localhost:3306/web_test3

l jdbc :连接数据库的协议

l mysql :是jdbc的子协议

l localhost :连接的MySQL数据库服务器的主机地址。(连接是本机就可以写成localhost),如果连接不是本机的,就需要写上连接主机的IP地址。

l 3306 :MySQL数据库服务器的端口号

l web_test3 :数据库名称

url如果连接的是本机的路径,可以简化为如下格式:

jdbc:mysql:///web_test3


Connection

作用一:创建执行SQL语句的对象

1558603443765

执行SQL语句对象:
 Statement :执行SQL
 CallableStatement :执行数据库中存储过程
 PreparedStatement :执行SQL.对SQL进行预处理。解决SQL注入漏洞

作用二:管理事务

1558603549213


Statement

作用一:执行SQL

1558603617085

 boolean execute(String sql); 执行查询,修改,添加,删除的SQL语句。
 ResultSet executeQuery(String sql); 执行查询(执行select语句)。
 int executeUpate(String sql); 执行修改,添加,删除的SQL语句。

作用二:执行批处理

1558603744629


ResultSet

​ ResultSet:结果集

​ 通过select语句的查询结果。

img

结果集遍历原理

img

代码实现

img

结果集的获取

1558603990700

 结果集获取可以使用结果集中的:
getXXX();方法通常都会有一个重载的方法。
 getXXX(int columnIndex);
 getXXX(String columnName);


3. 使用JDBC去实现增删改查(补齐)

1
2


4. SQL注入漏洞

​ 原因: 在变量中存在SQL中的关键字

​ or

​ –

​ 处理方案:使用预编译的statement PreparedStatement
​ 编写SQL时 参数需要用?代替 编译之后再给占位符上的参数赋值

改写案例:
使用JDBC去实现增删改查(普通的statement替换成PreparedStatement)

5. 批处理:

addBatch(String sql)
excuteBatch();
clearBatch();

数据库默认没有开启批处理
url=jdbc:mysql://locahost:3306/test?rewriteBatchedStatements=true

JQuey学习笔记

jQuery

1. jQuery核心函数

核心:把页面中的标签转换成jQuery对象,然后调用jQuery中的相关函数和属性操作该标签

jQuery(calllback):页面加载完成就执行括号中的函数

可简写为$(function{})

jQuery(html,[ownerDoc]):把html代码表示的元素标签转换成jQuery对象

主要用来向页面中插入html代码

$(html代码的字符串格式)

jQuery([selector,[context]]):把选择器表示的元素标签转换成jQuery对象

$(“选择器”)

2. jQuery选择器

2.1 基本选择器

#id

element

.class

*

selector1,selector2,selector3

2.2 层级选择器

空格 所有子元素;>大于号 直接子元素;

+加号 下一个兄弟元素;`波浪线 所有兄弟元素;

3. JQuery过滤器

3.1 基本过滤选择器

:first

:last

:not()

:odd奇数

:even偶数

:eq()

:gt()

:lt()

:header

3.2 内容过滤选择器

:contains(text)

:empty没有子元素或文本的元素

:has(selector)

:parent含有子元素或文本的元素

3.3 可见性过滤选择器

:hidden

:visible

3.3 属性过滤选择器

[attribute]

[attribute=value]

!=;^=;匹配开始

$=;匹配结尾

*=;匹配包含

3.4 子元素过滤选择器

:nth-child序号从1开始

:first-child

:last-child

:only-child只有一个子元素的信息

4.jQuery文档操作

内部插入

.prepend($(“插入内容”))

$(“插入内容”).prependto()

.append($(“插入内容”))

$(“插入内容”).appendto()

外部插入

before($(“插入内容”));

$(“插入内容”).insertbefore();

after($(“插入内容”))

$(“插入内容”).insertafter();

删除

empty()

remove()连注册的事件都删除

detach()注册的事件不会删除

克隆’

clone(boolean,boolean)事件的克隆取决于boolean

.replaceWith()用什么替换

.replaceAll()替换什么

5. jQuery方法属性

html()获得html所有信息;传参数可设置html信息

text()只能获得文本信息,传参数可设置文本信息

each(function(n){})遍历 n代表元素序号

index()搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

size();length 个数

.css({name:value,name::value})设置样式

.addClass(“class名”)添加class样式

.val()获取文本框的值

.show()显示

.hide()隐藏

.attr(name,value)设置被选元素的参数

6.jQuery事件

bind’()只能给存在的元素绑定事件

unbind()

live()可以为后续添加的元素添加事件

die()

one()

trigger()

hover()

toggle()

Ajax

1.创建xmlHttpRequest对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false;
}
}
}

2.调用回调函数

1
xmlHttp.onreadystatechange = callback;

3.设置请求方式

1
xmlHttp.open("GET", "http://localhost:8080/jquery/ajaxServlet", true);

如果请求方式为POST,要设置请求头setRequetstHeader(“content-type”,

4.发送请求

1
xmlHttp.send(null);

5.接收响应数据

1
2
3
4
5
6
function callback() {
if (xmlHttp.readyState == 4) {
var value = xmlHttp.responseText;
alert(value);
}
};

$.post(url,{name:value},function(data){},”接收数据类型”)

data为接收的响应数据

$.get(url,{name:value},function(data){},”接收数据类型”)

1560430648450

jquery对象.load(url,{name:value},function(data){}]

  1. load方法是将服务器响应的数据直接插入到指定的dom元素中。
  2. jquery中的load方法它的请求方式是什么?
    a) 如果有参数请求方式是post
    b) 如果没有参数请求方式是get

Json

  • 将java对象转换成json对象

String json=JSONObject.toJsonString(java对象);

  • json设置别名

1560430740378

  • 将jjava对象中存在日期类型属性java.util.Date用指定的格式来转换成json。

    1560430833938

  • 过滤器来设置转换成json的信息

    1560430889030

  • 取消循环引用

    1560430916048

xml

  • 将java对象转换成xml对象

1560430947123

  • 设置别名

1560431014154

1560431027029

  • 忽略属性

    1560431079180

  • 将类的属性设置成xml中字段的属性

    1560431119237

  • 注解使用

    要想使用XStream的注解,必须开启注解扫描.

    1560431153170

    1560431160993

#

JSP&EL&JSTL

JSP&EL&JSTL

1. JSP

1.1 Jsp概述

什么是JSP

JSP:Java Server Pages Java服务器端页面。

JSP 就是 HTML + Java代码 + JSP自身东西。

JSP的运行原理

JSP在执行时,会被服务器翻译为Servlet编译执行,JSP就是一个Servlet。

JSP脚本元素

<%! %> :JSP声明 翻译成 Servlet成员部分的内容。声明变量,方法,内部类。

<%= %> :翻译out.print(),在service方法内部。用于生成HTML页面源码。

<% %> :嵌入Java代码 翻译成service方法内部的代码块。声明变量,内部类。

1.2 JSP的注释

HTML的注释

  • 写法:

    • <!--HTML的注释 -->
  • 存在时机

    • 存在JSP的源码中,翻译成Servlet后这个注释也存在,在生成HTML响应到页面的时候这个注释也会存在。

Java代码的注释

  • 写法:

    • <% // 单行注释

    • /* 多行注释 */

    • /**文档注释*/

    • %>

  • 存在时机

    • 存在JSP的源码中,翻译成Servlet后Java代码的注释也会存在,但是生成HTML响应到页面后,这种注释就消失了。

JSP注释

  • 写法:

    • <%-- JSP的注释 --%>
  • 存在时机:

    • 存在JSP的源码中,翻译Servlet后注释就没有了。

注意:Java代码注释的话不要使用HTML的注释!!!

1.3 JSP的指令元素的概述

JSP指令元素作用

  • 用于指示JSP执行的某些步骤

  • 用于指示JSP变现特定行为

JSP指令元素的语法

  • 语法:

    • <%@ 指令名称 属性名称=属性的值 属性名称=属性的值 %>

JSP指令元素的分类

  • page指令:指示JSP的页面设置属性和行为

  • include指令:指示JSP包含哪些其他页面

  • taglib指令:指示JSP页面包含哪些标签库

1.4 JSP的指令-page指令

Page指令简介

  • 写法:

    • <%@ page 属性名=属性值 %>
  • Page指令用来定义JSP文件的全局属性。

  • 这些属性可以单独使用,也可以几个或多个同时使用。

  • 在JSP页面中,只有import属性可以出现多次,其他属性都只能出现一次。

Page指令属性

  • language属性: 声明使用脚本的语言。只能是java。

  • extends属性: 标明JSP编译成Servlet的时候继承的类。默认值:HttpJspBase。

  • session属性: 标明JSP中是否可以直接使用session对象。默认值是true。

  • buffer属性: 标明JSP对客户端输出缓冲区大小。默认值8kb。

  • autoFlush属性: 如果缓冲区大小溢出,是否自动刷出。默认true。

  • import属性: 用于导入Java包或类。

  • contentType属性:标明JSP被浏览器解析和打开的时候采用的默认的字符集。

  • pageEncoding属性:JSP文件及JSP翻译后的Servlet保存到硬盘上采用字符集。

  • isErrorPage属性: 处理JSP页面异常。

  • errorPage属性: 处理JSP页面异常。

  • isELIgnored属性: 通知JSP是否忽略EL表达式。

1.5 JSP的指令-include和taglib指令

Include指令简介

  • 写法:

    • <%@ include 属性名=属性值%>
  • 作用:

    • 在JSP页面中静态包含一个文件,同时由该JSP解析包含的文件内容。

Include指令属性

  • file属性: 指示JSP页面包含页面路径。

Include指令原理(静态包含原理)

1560152560143

  • 注意地方:

    • 应该将被包含的页面的结构去掉。

    • 在被包含的页面中定义变量,在包含的页面中还可以使用。

Taglib指令简介

  • 写法

    • <%@ taglib 属性名=属性值%>
  • 作用:

    • 用于在JSP页面中引入标签库。

Taglib指令属性

  • uri属性: 引入的标签库的路径

  • prefix属性: 引入标签库的别名

1.6 JSP的内置对象

什么是JSP的内置对象

JSP的内置对象:指的是可以直接在JSP页面中使用的对象。

JSP的内置对象有哪些

JSP当中有9大内置对象:

  • request :从客户端向服务器发送的请求对象

  • response :从服务器端向客户端作出响应对象

  • session :服务器为客户端创建会话对象

  • application :代表应用。获得的ServletContext对象。

  • out :向输出流写入内容的对象。

  • page :当前的JSP翻译成Servlet后的对象的引用。

  • pageContext :本JSP的页面的上下文对象。

  • config :本JSP的ServletConfig对象。

  • exception :表示JSP页面运行时产生的异常对象。

JSP的内置对象具体类型

  • request HttpServletRequest

  • response HttpServletResponse

  • session HttpSession

  • application ServletContext

  • config ServletConfig

  • page Object

  • pageContext PageContext

  • out JspWriter

  • exception Throwable

1.7 pageContext对象的概述

pageContext对象简介

pageContext对象直接翻译为”页面上下文”对象,代表的是当前页面运行的一些属性。

它是javax.servlet.jsp.PageContext类的实例对象。

pageContext对象作用

  • 提供了page范围的数据存取的方法:

    • 向page范围中存入数据:

1560152657200

  • 从page范围获取数据

1560152670664

  • 从page范围移除数据

1560152684686

  • 查找属性的方法:

1560152698712

  • 通过这个对象获得其他的8个内置对象:

    • 获得其他8个内置对象的方法

1560152707661

1560152740321

1.8 JSP的四个作用范围

JSP的四个作用范围概述

  • PageScope :页面范围。

    • 页面范围指的是在当前的页面内有效,出了这个页面,用pageContext保存的数据就无效了。
  • RequestScope :请求范围。

    • 从客户端向服务器发送一次请求,服务器对这次请求作出了响应之后,用request保存的数据就无效了。
  • SessionScope :会话范围。

    • 每个浏览器向服务器发送请求(多次请求)。将该会话结束。
  • ApplicationScope :应用范围。

    • 在整个应用中任意的地方都可以获取。

JSP的四个作用范围演示

pageContext对象向四个域范围存取数据

1560152913558

findAttribute方法:

查找属性方法:先根据小范围的名称进行查找,如果找到了就返回,如果没有找到就会去比其大一个域的范围进行查找。

1.9 JSP的动作标签

什么是JSP的动作标签

JSP的动作标签用于在JSP页面中提供业务逻辑功能,避免在JSP页面中直接编写Java代码,造成jsp页面难以维护。

常用的动作标签

  • <jsp:forward/> :请求转发。

  • <jsp:include/>:包含(动态包含)。

  • <jsp:param/>:传递参数。

演示JSP的动作标签

静态包含和动态包含区别

静态包含:在翻译阶段就将代码复制过去了,而动态包含是包含最终的执行结果

动态包含的原理

1560152943493

2. EL

2.1 EL的概述

EL:Expression Language表达式语言。

EL的作用: EL和JSTL一起使用取代JSP页面中嵌入Java代码写法。

EL功能

  • EL获取数据

  • EL执行运算

  • EL获取web开发常用的对象

  • EL调用Java方法

EL语法

  • 语法:

    • ${ EL表达式 }

2.2 EL获取数据

EL如何获取数据

EL表达式语句在执行的时候,会调用pageContext.findAttribute()方法。分别从page、request、session、application范围查找相应对象,找到就会返回相应对象,找不到返回””(不是null,是空的字符串)。EL所获取的数据需要在四个作用范围中。

演示EL获取数据

1560153179088

2.3 EL获取数组和集合中的数据

获取数组的数据

1560153212543

获取List集合的数据

1560153225590

获取Map集合的数据

1560153239967

  • 注意:

    • 如果map的key中包含了特殊字符,不能使用.必须使用[]。

      • .用来获取对象的属性的。

      • []用来获得下标。

1560153268543

2.3 EL执行运算

  1. 执行算数运算

1560153328563

执行关系运算

1560153340123

执行逻辑运算

1560153349545

执行三元运算

1560153359007

empty运算符

1560153369984

2.4 EL获取web开发常用对象

常用对象有哪些

EL表达式定义了11个web开发常用对象。使用这些对象可以很方便获取web开发冲的一些常见对象,并可以读取这些对象中的数据。

  • pageContext :相当于JSP内置对象中pageContext

  • pageScope :获取指定域下的名称的数据

  • requestScope :获取指定域下的名称的数据

  • sessionScope :获取指定域下的名称的数据

  • applicationScope :获取指定域下的名称的数据

  • param :在页面中接收请求参数(接收一个名称对应一个值参数)。

  • paramValues :在页面中接收请求参数(接收一个名称对应多个值参数)。

  • header :在页面上获取请求头(获取一个key对应一个value 头)

  • headerValues :在页面上获取请求头(获取一个key对应多个value 头)

  • cookie :访问cookie的名称和值(${cookie.key.name} ${cookie.key.value})

  • initParam :获取全局初始化参数的值

3. JSTL

什么是JSTL

JSTL:JSP的标准标签库。

为什么学习JSTL

主要和EL来取代传统页面上直接嵌入Java代码写法。提升程序可读性、维护性和方便性。

JSTL的版本

JSTL1.0、JSTL1.1和JSTL1.2版本

  • 1.0版本不支持EL表达式。

  • 1.1和1.2支持了EL表达式。

JSTL的标签库

  • c标签(core标签库)

  • fmt标签(国际化标签库)

  • xml标签

  • sql标签

引入标签库

1560153463551

使用JSTL

1560153471704

JSTL的if标签

if的标签使用

1560153507140

if标签的属性

  • test属性 :条件

  • var属性 :将test中的条件的值赋给一个变量,在var中定义变量

  • scope属性:作用范围

JSTL的foreach标签

1
2
3
4
5
6
7
8
9
<h3>遍历</h3>
<c:forEach var="i" begin="2" end="100" step="1" varStatus="s">
<c:if test="${s.count % 2 == 0}">
<font color="red">${i}</font>
</c:if>
<c:if test="${s.count % 2 != 0}">
<font color="blue">${i}</font>
</c:if>
</c:forEach>

###