JavaWeb

一数据库

1.1 mysql

数据库管理系统（DBMS）
关系型数据库：由多张互连的二维表组成的数据库
- 优点：易维护；使用通用的sql语言操作；数据存储在磁盘，安全

1.2 sql语法

结构化查询语言(Structured Query Language)
注释：单行：# 多行：/* */
DDL：操作数据库、表等
- 查询：show database 数据库名
- 创建：create database if not exists 数据库名
- 删除：drop database if exists 数据库名
- 使用：select database() //查询当前使用的数据库 ; use 数据库名

DML：对表数据进行增删改

创建表：

CREATE TABLE 表名(
		字段名1 数据类型1,
		字段名2 数据类型2,
		...
		字段名n 数据类型n
);

数据类型
删除表： DROP TABLE 表名

修改表：

ALTER TABLE 表名 RENAME TO 新表名;
ALTER TABLE 表名 ADD 列名 数据类型;
ALTER TABLE 表名 MODIFY 列名 新数据类型;
ALTER TABLE 表名 CHANGE 列名 新列名 新数据类型;
ALTER TABLE 表名 DROP 列名;

增加数据

1	INSERT INTO 表名(列1,列2...) values(值1,值2...),(值1,值2...),(值1,值2...)...;

修改数据

1 2	UPDATE 表名 set ... where 条件; eg: update stu set name = "张三" where id = "1";

删除
1
DELETE FROM 表名 [where 条件];

DQL：对表中数据查询

SELECT 
	字段列表(as)
FROM 	
	表名列表
WHERE
	条件列表(between...and...;or;and;in(...);is null;is not null;like)
	-- 模糊查询like通配符："-"：一个字符 "%"：多个字符
GROUP BY
	分组字段
	-- 聚合函数：count(列名) max(列名) min(列名) sum(列名) avg(列名)
	eg: select sex avg(math) from stu where math > 70 group by sex;
HAVING
	分组后条件
ORDER BY
	排序字段(asc:升序;desc:降序;) eg:.... ORDER BY math asc,english desc;
LIMIT
	分页限定(起始索引,分页条数)
	eg: select * from stu limit 0, 3;

DCL：对数据库进行权限控制

1.3 约束

作用于列，用于限制列中数据
非空约束 NOT NULL
唯一约束 UNIQUE
主键约束 PRIMARY KEY：非空且唯一
检查约束 CHECK
默认约束 DEFAULT：若没有值则制定默认值

外键约束 FOREIGN KEY：让两个表的数据建立连接，保证数据完整

/*
主表：部门id表
从表：员工表
*/

-- 创建表时添加约束
CREATE TABLE 表名(
	...
    [CONSTRAINT] [外键名] FOREIGN KEY(外键列名) REFERENCES 主表(主表名称)   
)

-- 建表完后添加外键
ALTER TABLE 名 ADD CONSTRAINT 外键名 FOREIGN KEY(外键字段名) REFERENCES 主表(主表名称)  

-- 删除外键
ALTER TABLE 表名 DROP FOREIGN KEY 外键名称

1.3 数据库设计

表关系
- 一对一
- 一对多：在多的一方建立外键指向一的部分的主键（在员工中建立外键指向部门主键）
- 多对多：通过建立一个中间表，里面有至少两个外键关联两个多表的主键

1.3 多表查询

从多张表中查询数据

连接查询

内连接：相当于查询AB交集数据

-- 隐式内连接
SELECT 字段列表 FROM 表1,表2... WHERE 条件;

-- 显式内连接
SELECT 字段列表 FROM 表1 [INNER] JOIN 表2 ON 条件;

外连接：

左外连接：相当于查询A表所有数据和交集部分
右外连接：相当于查询B表所有数据和交集部分

-- 左外连接
SELECT 字段列表 FROM 表1 LEFT [OUTER] JOIN 表2 ON 条件;

-- 右外连接
SELECT 字段列表 FROM 表1 RIGHT [OUTER] JOIN 表2 ON 条件;

子查询
- 嵌套查询

1.3 事务

一组数据库操作命令
要么同时成功，要么同时失败
开启事务（begin）-提交事务（commit）-回滚事务（rollback）
四大特性
- 原子性
- 一致性
- 隔离性
- 持久性

二 JDBC

Java DataBase Connectivity：用java语言操作关系型数据库的API

2.1 JDBC简介

sun公司定义的一套操作数据库接口
注册驱动
- Class.forName("com.mysql.jdbc.Driver");//mysql 5之后不需要写了
获取连接
- Connection conn = DriverManager.getConnection(url, username, password)
定义sql语句
获取执行sql对象
- Statrment stmt = conn.createStatement()
执行sql
- int count = stmt.executeUpdate(sql)
处理返回结果
释放资源
- stmt.close();conn.close();

2.2 API

DriverManager
- 注册驱动 registerDriver()
- 获取数据库连接 getConnection(...)
Connection
- 进行连接
Statement
- 执行sql语句
ResultSet
- 结果集对象封装了DQL查询语句的结果
- next()：光标向前移动一行，判断是否为有效行，返回true/false
- getXxx(参数):Xxx为数据类型（int/String…）获取数据
  1
  2
  3
  4
  while(re.next()){
  //获取数据
  re.getXxx(参数);
  }
PreparedStatement
- 继承Statement
- 预编译Sql语句并执行：防止sql注入；效率更高（只进行一次检查sql语法和编译sql，Statement每次都要检查-编译-执行）
- 原理：对特殊字符进行了转义；进行了预编译功能（需要手动开启useServerPrepStmts = true）
- 使用
  - 获取PreperedStatement对象
    1
    2
    3
    4
    String sql = "select * from user where username = ? and password = ?";
    
    //通过Connection对象获取并传入对应的sql语句
    PreparedStatement pstmt = conn.prepareStatement(sql);
  - 设置参数值
    1
    setXxx(参数1,参数2);//参数1为?的索引，从1开始
  - 执行sql语句
    1
    2
    executeUpdate();
    executeQuery();

2.3 数据库连接池

是一个容器，负责分配、管理数据库连接（Connection）
优点：资源重用，提升系统响应速度，避免数据库连接遗漏
标准接口：DataSource
- sun公司提供，由第三方实现
- 功能：获取连接 Connection getConnection()
常用的数据库连接池
- DBCP
- C3P0
- Druid

Druid使用

导入jar包
定义配置文件

加载配置文件

1 2	Properties prop = new Properties(); prop.load(new FileInputStream("地址"))

获取数据库连接池对象

1	DataSource datesource = DruidDataSourceFactory.createDataSource(prop);

获取连接

1	Connection connection = datasource.getConnection();

三 Maven

3.1 简介

用于管理和构建java项目的工具，功能：
- 提供一套标准化项目结构
- 提供了一套标准化的构建流程（编译、测试、打包、发布）
- 提供了一套依赖管理机制
Maven笔记

四 MyBatis

4.1简介

负责讲数据保存到数据库的那一层代码
JavaEE三层结构：表现层、业务层、持久层
解决JDBC的问题
- 硬编码
  - 注册驱动、获取连接
  - SQL语句
- 操作繁琐
  - 手动设置参数
  - 手动封装结果集
官网链接
MyBatis笔记

4.2 demo步骤

创建user表，添加数据

创建模块，导入坐标

<dependency>
  <groupId>org.mybatis</groupId>
  <artifactId>mybatis</artifactId>
  <version>x.x.x</version>
</dependency>

编写Mybatis核心配置文件
编写sql映射文件
编码
- 定义pojo类
- 加载核心配置文件，获取SqlSessionFactory对象
- 获取SqlSession对象，执行SQL语句
- 释放资源

五 HTML&CSS&JavaScript

4.1 简介

HTML(Hyper Text Markup Language)：超文本标记语言
W3C标准
- 结构：HTML
- 表现：CSS
- 行为：JavaScript

4.2 HTML入门

基础标签（不区分大小写）

<h1 -- h6>：标题
<font>：字体
<b>：加粗
<i>：斜体
<u>：下划线
<center>：剧中
<p>：定义段落
<br>：定义拆行
<hr>：水平线

图片、音频、视频标签

<img>：图片
	src：定义图片url
	height：定义高度
		尺寸单位：px(像素)、百分比
	width：定义宽度
<audio>：音频
	src(MP3、WAV、OGG)
	controls：显示播放控件
<video>：视频
	src(MP4、WebM、OGG)
	controls

超链接标签

<a>
	href：制定访问资源的url
	target：制定资源打开方式
		_self：默认值，在当前页面打开
		_blank：在空白页面打开

列表标签

<ol>：有序列表
	<type>：标号格式(一般不用，在CSS中修改)
	<li>：列表项
<ul>：无序列表
	<li>：列表项

表格标签

<table>：border(边框)、width、cellspacing(单元格之间的空白)
	<tr>：行 aligh(对齐方式)
		<td>：单元格 rowspan(规定单元格横跨的行数) colspan(...列数)
		<th>：表头（加粗的）

表单标签

<form>  
	action(规定提交表单的时候向何处发送数据，url) 
    method(规定发送表单数据的方式)
    	get：浏览器会将数据直接附在表单的action URL之后，大小由限制(请求会拼接在URL后面所以长度有限制)
    	post：浏览器会将数据放到http请求消息体中，大小无限制
	<input>：定义表单项，通过type属性设置输入形式
    	type属性:text、password、radio(单选)、checkbox(复选)、file、hidden(隐藏的输入字段)、submit、reset、button
	<label>：为表单定义标注
	<select>：定义下拉列表
	<option>：定义下拉列表选择项
	<textarea>：定义文本域
	
eg：
<form action="#" method="get">
	<input type="text" name="username">
	<input type="submit">
</form>

4.3 CSS入门

CSS（Cascading Style Sheet）控制网页表现

CSS导入方式

内联样式（用的少）
1
<div style="color:red">Hello CS</div>

内部样式

<style type="text/css">
	div{
		color:red;
	}
</style>

外部样式

<link rel="stylesheet" href="demo.css">

demo.css中
div{
    color:red;
}

CSS选择器：选取需要设置样式的元素（标签）
- 元素选择器 元素名称{color:red}
- id选择器 #id属性值{color:red}
- 类选择器 .class属性值{color:red}
CSS属性

4.4 JavaScript入门

跨平台、面向对象的脚本语言（不需要编译），来控制网页行为，使网页可以交互
JavaScript引入方式
- 内部脚本：将JS定义在HTML中
  - 一般把脚本放在文档底部，加快执行速度
- 外部脚本：定义在外部JS中 <script src="....js"></script>
  - 注意：外部脚本不能包含<script>标签；这个时候在html中<script>标签不能自闭合

基础语法

分号可有可无，区分大小写
注释和java一样
{}表示代码块
输出语句
- window.alert()：写入警告框
- document.wirte()：写入html输出
- console.log()：写入浏览器控制台
变量
- var来声明变量，可以存放不同类型的值
  1
  2
  var test = 20;
  test = "张三"
- var的作用域
  - 全局变量，在代码块中定义，在代码块外面仍然可以访问
  - 可以重复定义
    1
    2
    var test = 20
    var test = 30`
- let定义的具有局部作用域的性质
- const表示常量
数据类型
- 使用 typeof 名称可以获取类型
- 原始类型
  - number
  - string
  - boolean
  - null
  - undefined
- 引用类型
运算符：和java类似
流程控制语句：同java

函数

function 名称(参数1, 参数2, ...){//形参不需要写类型
	//执行的代码
    return ...;//也可以不return
}

eg:
function add(a,b){
    return a + b;
}

let result = add(1,2);
let result1 = add(1,2,3);//也是可以的

Array对象
- 定义：var 名 = new Array(元素列表)或者 var 名 = [元素列表]
- 访问：arr[索引]
- 注：类似于java的集合，长度、类型都可以改变
- 方法
  - arr.length
  - arr.push()//添加
  - arr.splice()//删除
String对象
- 定义： var 名 = new String(..)或者 var 名 = ...
- 属性方法参考手册

自定义对象

var 名 = {
	属性名1:属性值1,
	属性名2:属性值2,
	...
	函数名:function(形参){
		...
	}
	...
}

BOM对象
- Browser Object Model ：浏览器对象模型
- JavaScript将浏览器的各个组成部分封装为对象
- 组成
  - Window：浏览器窗口对象
    - 可以直接使用，省略”Window.” 比如：alert("abc")
  - Navigator：浏览器对象
  - Screen：屏幕对象
  - History：历史记录对象
    - window.history.方法() （也可以省略window）
  - Location：地址栏对象
    - 同理
    - location.href属性
DOM对象
- Document Object Model：文档对象模型
- 将标记语言的各个组成部分封装为对象
- 组成
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
- 通过DOM可以修改HTML中的内容：修改内容、样式等

事件监听

事件绑定

//方式1 通过html标签中的事件属性进行绑定
<input type="button" onclick='on()'>
	function on(){
		//执行语句
	}

//方式2 通过DOM元素属性绑定(推荐)
<input type="button" id="btn">
    
document.getElementById("btn").onclick = function(){
    //执行语句
}

正则表达式

定义了字符串的组成规则

定义

1
2
3

var reg = /^/w{6,12}$/;

var reg = new RegExp("^//w{6,12}$")

方法
1
test(str)//返回true/false

语法

^		表示开始
$		表示结束
[]  	代表某个范围内的单个字符，如[0-9]
.		代表任意单个字符，除了换行和行结束符
/w  	代表单词字符：字母、数字、下划线。相当于[A-Za-z0-9_]
/d  	代表数字字符，相当于[0-9]
+   	至少一个
*   	零个或多个
?   	零个或一个
{x} 	x个
{m,}	至少m个
{m,n}	至少m，至多n个

六 Web核心

6.1 javaWeb

用java技术解决相关web互联网领域的技术栈
B/S架（Browser/Server）：浏览器/服务器架构
静态资源：HTML、CSS、JavaScript、图片等，负责静态展示
动态资源：Servlet、JSP等，负责动态展示
技术栈：数据库、HTML、CSS、JavaScript、HTTP协议、Servlet、Tomcat web服务器

6.2 HTTP

Hyper Text Transfer Protocol：超文本传输协议，规定了浏览器和服务器之前数据传输的规则
特点：
- 基于TCP协议：面向连接、安全
- 基于请求-响应模型的：一次请求一次响应
- HTTP协议是无状态的协议：对事务处理没有记忆，每次请求-响应都是独立的
  - 缺点：多次请求不能数据共享（Java中使用会话技术——Cookie、Session来解决这个问题）
  - 优点：速度快
请求数据格式
- 请求行：请求数据的第一行，其中GET表示请求方式，/表示请求资源路径，HTTP/1.1表示协议版本
- 请求头：第二行开始，格式为：key：value形式
  - Host：表示请求主机名
  - User-Agent：浏览器版本
  - Accept：表示浏览器能接收的资源类型，如text/，image/ 或者 / 表示所有
  - Accept-Language
  - Accept-Encoding：表示浏览器支持的压缩形式
- 请求体：POST请求最后一部分，存放请求参数
  - 请求体和请求头之间有一个空行隔开
  - 如 username=superbaby&password=123456
响应数据格式
- 响应行：第一行
  - HTTP1.1表示协议版本，200表示响应状态码，OK表示状态码描述
  - 响应状态码
    - 1xx：响应中
    - 2xx：成功
      - 200：OK
    - 3xx：重定向
    - 4xx：客户端错误
      - 404：URL有误
    - 5xx：服务器错误
      - 500：去看日志
- 响应头：第二行开始，格式为key：value
  - Content-Type
  - Content-Length
  - Content-Encoding
  - Content-Control
- 响应体：最后一行，存放响应数据
  - 和响应头有一个空行隔开

6.3 Web服务器

是一个应用程序，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，主要功能是“提供网上信息浏览服务”
- 作用：封装HTTP，部署Web项目到服务器中
Tomcat：Apache软件基金会的一个核心项目，支持Servlet/JSP少量javaEE规范
- 也称为Web容器，Servlet需要依赖Tomcat才能运行
JavaEE：java企业版，包含13项技术规范：JDBC、JNDI、EJB、RMI、JSP、Servlet、XML、JMS、Java IDL、JTS、JTA、Java Mail、JAF
tomcat安装
- bin
- conf：配置
- lib：依赖
- logs：日志
- webapps：项目目录
- 关闭：
  - 直接x掉黑窗（强制关闭，不推荐）
  - ctrl+c（推荐）
  - bin/shutdown.bat：正常关闭（麻烦）

6.4 Tomcat使用

配置
- 修改启动端口号：conf/server.xml，HTTP协议默认80，如果修改为了80，则不需要再输入端口号
- 端口号冲突：找到对应程序关闭
- 启动窗口一闪而过：检查Java环境变量配置
部署
- 项目放在webapps文件夹中
  - 一般打包为war包（会自动解压）
MavenWeb项目
- 开发中的项目
  - WEB-INF放的web的配置文件
- 部署的javaweb项目：开发完成可以部署的项目
- maven项目中要在pom.xml中添加打包方式： <packaging>war</packaging>或者jar

idea中启动项目集成到tomcat并启动

方式一：添加tomcat

方式二：pom.xml中添加tomcat导入坐标

<!--build标签下 -->
<plugins>
      <!--tomcat插件 -->
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
      </plugin>
</plugins>

然后右键run maven -tomcat7:run

七 Servlet

7.1 简介

java提供的一种动态web资源开发技术
javaEE规范之一，就是一个接口，以后定义Servlet类实现Servlet接口，由web服务器运行

7.2 demo

创建web项目，导入servlet依赖坐标

<dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
</dependency>

创建：定义一个类，实现Servlet接口，并重写接口中所有的方法，并在service方法中输入一句话
1
2
3
public class ServletDemo1 implements Servlet{
public void service(){}
}
配置：在类上使用 @WebServlet注解，配置改Servlet访问路径
1
@WebServlet("/demo1")
访问：启动Tomcat，浏览器输入URL，访问servlet
1
http://localhost:8080/tomcat-dome1/demo1

7.3 执行流程，生命周期

localhost:8080访问web服务器(tomcat)，tomcat-dome1访问项目 /demo1访问类，在tomcat中自动创建Servlet类对象
生命周期
- 加载和实例化：默认情况当Servlet第一次被访问时，由容器创建Servlet对象
- 初始化：创建后调用Servlet对象的init()方法
- 请求处理：每次请求Servlet时，容器都会调用Servlet的service()方法
- 服务终止：关闭服务器/释放内存时，调用destroy()方法

7.4 方法介绍

初始化
1
void init(ServletConfig config)

提供服务

1	void service(ServletRequest req, ServletResponse res)

销毁
1
void deatroy()
获取ServletConfig对象
1
ServletConfig getServletConfig()
获取Servlet信息
1
String getServletInfo()

7.5 体系结构

继承HttpServlet，重写doGet和doPost方法(就可以不用重写Servlet这么多方法了)

7.6 urlPattern配置

一个servlet可以配置多个urlPattern

@WebServlet("/demo1", "/demo2"...)
urlPattern匹配规则
- 精确匹配：@WebServlet("/demo1", "/demo2"...)
- 目录匹配：@WebServlet("/demo1/*")
- 扩展名匹配：@WebServlet("*.do")
- 任意匹配：@WebServlet("/")或@WebServlet("/*")

八 Request&Response

8.1 简介

request：设置请求数据
- 继承体系
- 使用request对象，查阅javaee api的HttpServlerRequest接口
response：设置响应数据

8.2 Request

获取请求数据

请求行

String getMethod();//获取请求方式
String getContextPath();//获取虚拟目录(项目访问路径)
StringBuffer getRequestURL();//获取URL(统一资源定位符)长的
String getRequestURI();//获取URL(统一资源标识符)短的
String getQueryString();//获取请求参数(GET方式)

结果：

请求头
1
String getHeader(String name)

请求体 username=zhangsan&hobby=1&hobby=2

1 2	ServletInputStream getInputStream();//获取字节输入流 BufferReader getReader();//获取字符输入流（POST方式，和getQueryString相对应）

使用通用的方式获取请求参数

```java
Map getParameterMap();//获取所有参数Map集合
String[] getParameterValues(Stirng name);//根据参数名取值
String getParameter(String name);//同上


    ![image-20230109110717875](https://myl-mdimg.oss-cn-beijing.aliyuncs.com/TyporaImg/javaweb.assets/image-20230109110717875.png)

- 中文乱码

  - POST：（底层是流获取参数）`requests.setCharacterEnconding("UTF-8")`

  - GET：（底层是字符串获取参数）

    - 乱码原理

    ![image-20230109111549537](https://myl-mdimg.oss-cn-beijing.aliyuncs.com/TyporaImg/javaweb.assets/image-20230109111549537.png)

    - URL编码

      - 将字符串按编码方式转为二进制

      - 每个字节转为2个16进制并在前面加上%

        ![image-20230109111802261](https://myl-mdimg.oss-cn-beijing.aliyuncs.com/TyporaImg/javaweb.assets/image-20230109111802261.png)

    - 解决方式

      - 将URL解码后再转换为字节数据（编码）

      - 将字节数据转为字符串（解码）

        ```java
        Byte[] bytes = username.getBytes(StandardCharsets.ISO_8859_1);
        
        username = new String(bytes, StandardCharsets.UTF_8);
        
        //一行代码
        new String(username.getBytes("ISO-8859-1"), "UTF-8");

请求转发

一种在服务器内部的资源跳转方式
req.getRequestDispatcher("资源B路径").forward(req, resp);

共享数据

1
2
3

void setAttribute(String name, Object o);//存储数据到request域中
Object getAttribute(String name);//获取
void removeAttribute(String name);/删除

8.3 Response

响应数据

响应行

1	void setStatus(int sc);//设置相应状态码

响应头

1	void setHeader(String name, String value);//设置相应键值对

响应体

1 2	PrintWriter getWriter();//获取字符输出流 ServletOutPutStream getOutPutStream();//获取字节输出流

重定向
- 一种资源跳转方式
  1
  2
  3
  4
  resp.setStatus(302);
  resp.setHeader("location", "资源B路径");
  
  response.sendRedirect("资源b路径");//简化写法
- 资源路径问题
  - 明确路径给谁使用
    - 浏览器用（浏览器发出的请求）：需要加虚拟目录（项目访问路径）
    - 服务器用（服务器发出的请求）：不需要

响应字符数据

```java
PrintWriter writer = resp.getWriter();//通过Response对象获取字符输出流，不需要关闭，response释放后自动关闭

writer.write(“aaa”);//写数据
1
2
3

- 中文乱码问题
resp.setContentType(“text/html;charset=utf-8”);
1
2
3
4
5
6
7

- 响应字节数据

- 读取文件

```java
FileInputStream fis = new FileInputStream("url");

获取response字节输出流

1	ServletOutPutStream os = response.getOutPutStream();

完成流的copy

byte[] buff = new byte[1024];
int len = 0;
while((len = fis.read(buff)) != -1){
	os.write(buff, 0, len);
}

fis.close();

九 JSP

9.1 简介

java Server Pages：java服务端页面
一种动态技术，既可以定义html、js、css等静态内容，又可以定义java代码的动态内容
jsp = html + java
作用：简化开发，避免了在servlet中直接输出html标签

9.2 入门

maven中导入坐标
- <scope>provided</scope>和servlet一样
创建jsp文件
编写html和java代码

9.3 原理

本质上是一个servlet，用out.write输出java代码

9.4 JSP脚本

用于在页面内定义java代码

分类

1
2
3

<%...%>：内容会直接放到_jspService()方法中
<%=...%>：内容会放到out.print()中，作为out.print()的参数
<%!...%>：内容会放到_jspService()方法之外，被类直接包含

上面三个标签可以截断，自由组合

9.5 JSP缺点

书写麻烦，特别是复杂页面，阅读麻烦
复杂度高。，运行依赖各种环境：JRE、JSP容器、JavaEE
占内存，调式困难
解决：逻辑处理放在Servlet中，JSP只负责获取数据，遍历展现
逐渐退出舞台 ==> Servlet + html + Ajax（主流）
- 发展： Servlet ==> JSP ==> Servlert + JSP ==> Servlet + html + Ajax

9.6 EL表达式

Expression Language 表达式语言，用于简化JSP页面内的java代码

主要功能：获取数据

1	${expression}:获取域中存储的key作为brands的数据

javaweb四大域对象：
- page：当前页面有效
- request：当前请求有效
- session：当前会话有效
- application：当前应用有效
el表达式从上到下依次寻找，找到为止

9.7 JSTL标签

Jsp Standard Tag Library：JSP标准签库，使用标签取代jsp页面上的java代码

快速入门

导入坐标：jstl和standard

在jsp页面顶部上引入jstl标签

1	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

使用

<c:if test = "逻辑表达式">
	test为true执行
</c:if>

<c:forEach items="被遍历的容器" var="遍历产生的临时变量" varStatus="遍历状态对象">
	遍历操作
</c:forEach>

<c:forEach begin="0" end="10" step="1" var="i"> //普通for循环
	遍历操作
</c:forEach>

9.8 MVC模式和三层架构

MVC模式是一种分层开发模式
- M：model，业务模型，处理业务
- V：view，视图，页面展示
- C：controller，控制器，处理请求，调用模型和视图
MVC优点
- 职责单一
- 分工协作
- 利于组件重利用
三层架构
- 表现层
  - 接收请求，封装数据，调用业务逻辑层，响应数据
- 业务逻辑层
  - 对业务逻辑的封装，组合数据访问数据层中的基本功能
- 数据访问层
  - 对数据库的CRUD
MVC和三层架构

十会话跟踪技术

10.1 简介

会话：用户打开浏览器，访问web服务器资源，会话建立，直到有一方断开连接，会话结束，在一次会话中可以包含多次请求和响应。
会话跟踪：一种维护浏览器状态的方法，服务器需要识别多次请求是否来自同一个浏览器，以便在同一次会话的多次请求间共享数据
HTTP协议是无状态的（保证了每次请求速度快），每次浏览器向服务器请求时，服务器都会将该请求是为新的请求，因此需要会话跟踪技术来实现会话内数据共享
实现方式：
- 客户端会话跟踪技术：Cookie
- 服务端会话跟踪技术：Session

基本使用
- Cookie：客户端会话技术，将数据保存到客户端，以后每次请求都携带Cookie数据进行访问
- 创建对象
  1
  Cookie cookie = new Cookie("key", "value");
- 发送Cookie到客户端：使用respondse对象
  1
  response.addCookie(cookie);
- 获取客户端携带的所有cookie，使用request对象
  1
  Cookie[] cookies = request.getCookies()
- 遍历数组，获取每一个Cookie对象
- 使用Cookie对象方法获取数据
  1
  2
  cookie.getName();
  cookie.geyValue();
原理
- 原理：基于HTTP协议
  - 响应头：set-cookie
  - 请求头：cookie
使用细节
- 默认情况下，cookie是存放在浏览器内存中，当浏览器关闭，内存释放，则cookie被销毁
  - setMaxAge(int seconds)：设置cookie存活时间
    - 正数：写入硬盘，到时间后自动删除
    - 负数：默认值，浏览器关闭则自动关闭
    - 零：删除对应cookie
- cookie不能直接存储中文
  - 转码 URLEncoder.encode(value, "UTF-8")
  - 之后获取再解码 URLDecoder.decode(value, "UTF-8")

10.3 Session

基本使用

Session：服务端会话跟踪技术：将数据保存到服务端
- javaEE提供http接口，实现一次会话的多次请求间数据共享功能

获取对象

1	HttpSession session = request.getSession();

Session对象功能：

1
2
3

void setAttribute(String name, Object o);//存储数据到session域中
Object getAttribute(String name);//根据key获取值
void removeAttribute(String name);//根据key删除值

原理
- session实现是基于cookie的
使用细节
- session钝化、活化
  - 服务器重启后，session中的数据是否存在？
  - 钝化：在服务器正常关闭后，tomcat会自动将session数据写入硬盘的文件中
  - 活化：再次启动服务器后，从文件中加载数据到session中
- session销毁
  - 默认情况下，无操作，30分钟自动销毁
    1
    2
    3
    <session-config>
    <session-timeout>30</session-timeout>
    </session-config>
  - 调用Session对象的 invalidate()方法

10.4 小结

区别：
- 存储位置：cookie客户端，session服务端
- 安全性：session安全
- 数据大小：cookie最大3kb，session无限制
- 存储时间：cookie可长期存储，session默认30min
- 服务器性能：session占用服务器资源

十一 Filter

11.1 简介

Filter表示过滤器，是javaWeb三大组件之一（Servlet、Filter、Listener）
可以对资源的请求拦截下来，从而实现一些统一的功能
过滤器一般完成一些通用的操作，入：权限控制、统一编码处理、敏感字符处理等

11.2 快速入门

定义类，实现Filter接口，并重写所有方法

@WebFilter("/*")//拦截路径
public class FilterTest implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("filter exec");
        
        chain.foFilter(servletRequest, servletResponse);//放行
    }

    @Override
    public void destroy() {
        Filter.super.destroy();
    }
}

配置Filter拦截资源路径：在类上定义@WebFilter注解
在doFilter中输出一句话，并放行

11.3 执行流程

放行前response没有数据，所以一般放行前处理request，放行后处理response数据

11.4 Filter拦截路径

路径
- 拦截具体资源：/index.jsp
- 目录拦截：/user/*
- 后缀名拦截：*.jsp
- 拦截所有：*/
过滤器链
- 按照过滤器的字符串排序来确定执行顺序

11.5 Listener

在类前加入 @WebListener注解

十二 AJAX

12.1 简介

Asynchronous JavaScript And XML：异步的JavaScript和XML
作用：
- 和服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
  - 可以替换JSP ==> HTML + AJAX
- 异步通信：在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分网页的技术，如：联想搜索…

12.2 快速入门

编写AjaxServlet，并使用response输出字符串

创建XMLHttpRequest对象：用于和服务器交换数据

var xhr;
if (window.XMLHttpRequest){
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xhr = new XMLHttpRequest();
} else {
  // IE6, IE5 浏览器执行代码
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

1 2	xhr.open("GET", "url", true);//true是异步，false是同步，默认异步，所以一般不写第三个参数，url写绝对路径 xhr.send();

获取服务器的响应数据

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText); // responseText获取字符串形式的响应数据  responseXML获取XML形式的响应数据
    } 
}

12.3 Axios异步框架

对原生的Ajax进行封装

引入axios的js文件

1	<script src="js/axios-0.18.0.js"></script>

使用axios发送请求，并获取响应结果

axios({
	method:"get"
	url:"..."
}).then(function(resp){
	alert(resp.data)
})

   axios({   
	method:"get"
   url:"..."
   data:"..."
}).then(function(resp){
	alert(resp.data)
});

12.4 JSON

JavaScript Object Notation：javaScript对象表示方法
由于语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
基础语法
- 定义
  1
  2
  3
  4
  var 变量名 = {"key1":value1,
  "key2":value2,
  ...
  };
- value数据类型
  - 数字
  - 字符串(双引号中)
  - 逻辑值（true/false）
  - 数组(方括号中)
  - 对象(花括号中)
  - null
- 获取数据
  - 变量名.key
与java对象的转换
- Fastjson：阿里巴巴提供的一个java语言编写的高性能功能完善的json库，是目前java语言中最快的json库，实现java和json字符串的相互转换
- 引入坐标
  1
  2
  3
  4
  5
  <dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.66</version>
  </dependency>
- java对象转json
  1
  String jsonStr = JSON.toJSONString(obj)
- json字符串转java对象
  1
  User user = JSON.parseObject(jsonStr, User.class)

十三 VUE

13.1 简介

一套前端框架，免除javaScript中的DOM操作，简化书写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程重点放到数据上
- MVC只能实现模型到视图的单向展示（模型变了数据不会跟着马上变，要自己写操作）

13.2 快速入门

新建html页面，引入Vue.js文件
1
<scirpt src="js/vue.js"></script>

在js代码区域创建Vue核心对象，进行数据绑定

new Vue({
	el:"#app",//设置vue的作用范围是id为app的标签包裹的内容
	data(){
		return{
			username;""
		}
	}
})

编写视图

<div id="app">
	<input name="username" v-model="username">
	{{username}}
</div>

13.3 常用指令

13.4 生命周期

mounted：挂载完成，vue初始化成功，html页面渲染成功
- 发送异步请求，加载数据

十四 Element

14.1 简介

饿了么公司前端开发团队提供的一套基于vue的网络组件库，用于快速构建网页

14.2 快速入门

引入Element的css、js文件和Vue.js

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import css -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

创建vue核心对象
官网cv代码