JavaWab(一)
Maven
Apache Maven 是一个项目管理和构建工具,它基于项目对象模型(POM)的概念,通过一小段描述信息来管理项目的构建、报告和文档。
官网 :http://maven.apache.org/
Maven简介
- 什么是Maven?这里先引用知乎的一个回答
我先不说maven,也不说java开发,先说做菜,你可能像做个红烧小排(HongshaoxiaopaiApp),你需要的材料是:
1、小排(xiaopai.jar),要小猪的(version=little pig)。
2、酱油(jiangyou.jar),要82年的酱油(version=1982)
3、盐(yan.jar)
4、糖(tang.jar),糖要广东产的(version=guangdong)
5、生姜(shengjiang.jar)
6、茴香(huixiang.jar)
于是,你要去菜场买小排,去门口杂货店买酱油,买盐……可能你家门口的杂货店还没有1982年的酱油,你要去3公里外的农贸市场买……你买原材料的过程估计会很痛苦,可能买到的材料不是1982年的,会影响口感。
在你正式开始做小排前,你会为食材的事情,忙得半死。
现在有个超市出了个盒装版的半成品红烧小排,把生的小排,1982年的酱油,盐,广东产的糖等材料打包成一个盒子里,你回家只要按照说明,就能把红烧小排做出来,不用考虑材料的来源问题。
Maven就是那个超市,红烧小排就是你要开发的软件,酱油、盐什么的就是你开发软件要用到的jar包——我们知道,开发java系统,下载一堆jar包依赖是很正常的事情。有了maven,你不用去各个网站下载各种版本的jar包,也不用考虑这些jar包的依赖关系。Maven会给你搞定,就是超市的配菜师傅会帮你把红烧小排的配料配齐一样。
现在你应该明白Maven是做什么的了吧。
Maven是专门用于管理和构建Java项目的工具,它的主要功能有:
- 提供了一套标准化的项目结构
- 提供了一套标准化的构建流程(编译,测试,打包,发布……)
- 提供了一套依赖管理机制
标准化的项目结构:
项目结构我们都知道,每一个开发工具(IDE)都有自己不同的项目结构,它们互相之间不通用。我再eclipse中创建的目录,无法在idea中进行使用,这就造成了很大的不方便
而Maven提供了一套标准化的项目结构,所有的IDE使用Maven构建的项目完全一样,所以IDE创建的Maven项目可以通用。如下图右边就是Maven构建的项目结构。标准化的构建流程:
例如我们开发了一套系统,代码需要进行编译、测试、打包、发布,这些操作如果需要反复进行就显得特别麻烦,而Maven提供了一套简单的命令来完成项目构建。依赖管理:
依赖管理其实就是管理你项目所依赖的第三方资源(jar包、插件)。如之前我们项目中需要使用JDBC和Druid的话,就需要去网上下载对应的依赖包,复制到项目中,创建一个lib文件夹存放各种jar包,还要将jar包加入工作环境这一系列的操作。
而Maven使用标准的坐标
配置来管理各种依赖,只需要简单的配置就可以完成依赖管理。
下面的代码就是mysql驱动包的坐标,在项目中只需要写这段配置,其他都不需要我们担心,Maven都帮我们进行操作了。
市面上有很多构建工具,而Maven依旧还是主流构建工具。1
2
3
4
5
6
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.34</version>
</dependency>
IDEA中使用Maven
以后开发中我们肯定会在高级开发工具中使用Maven管理项目,而我们常用的高级开发工具是IDEA,所以接下来我们会讲解Maven在IDEA中的使用。
IDEA配置Maven环境
- 选择 IDEA中 File —> Settings
- 在Setting页面搜索maven
- 设置 IDEA 使用本地安装的 Maven,并修改配置文件路径(默认的jar包下载路径在C盘,我们最好把它改到D盘)
Maven坐标详解
什么是坐标?
- Maven 中的坐标是
资源的唯一标识
- 使用坐标来定义项目或引入项目中需要的依赖
- Maven 中的坐标是
Maven 坐标主要组成
- groupId:定义当前Maven项目隶属组织名称(通常是域名反写,例如:com.itheima)
- artifactId:定义当前Maven项目名称(通常是模块名称,例如 order-service、goods-service)
- version:定义当前项目版本号
下面的代码就是用坐标表示一个项目
1
2
3
4
<groupId>com.alibaba</groupId> <!--隶属组织阿里巴巴-->
<artifactId>druid</artifactId> <!--模块名称是德鲁伊-->
<version>1.1.12</version> <!--版本号是1.1.12-->
IDEA 创建 Maven项目
IDEA 导入 Maven项目
- 选择右侧Maven面板,点击 + 号
- 选中对应项目的pom.xml文件,双击即可
依赖范围
通过设置坐标的依赖范围(scope),可以设置 对应jar包的作用范围:编译环境、测试环境、运行环境。
如下图所示给 junit
依赖通过 scope
标签指定依赖的作用范围。 那么这个依赖就只能作用在测试环境,其他环境下不能使用。
1 |
|
那么 scope
都可以有哪些取值呢?
依赖范围 | 编译classpath | 测试classpath | 运行classpath | 例子 |
---|---|---|---|---|
compile | Y | Y | Y | logback |
test | - | Y | - | Junit |
provided | Y | Y | - | servlet-api |
runtime | - | Y | Y | jdbc驱动 |
system | Y | Y | - | 存储在本地的jar包 |
- compile :作用于编译环境、测试环境、运行环境。
- test : 作用于测试环境。典型的就是Junit坐标,以后使用Junit时,都会将scope指定为该值
- provided :作用于编译环境、测试环境。我们后面会学习
servlet-api
,在使用它时,必须将scope
设置为该值,不然运行时就会报错 - runtime : 作用于测试环境、运行环境。jdbc驱动一般将
scope
设置为该值,当然不设置也没有任何问题
如果引入坐标不指定 scope
标签时,默认就是 compile 值。以后大部分jar包都是使用默认值。
MyBatis
MyBatis 是一款优秀的持久层框架
,用于简化 JDBC 开发
MyBatis 本是 Apache 的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis 。2013年11月迁移到Github
官网:https://mybatis.org/mybatis-3/zh/index.html
MyBatis概述
- 持久层:
- 负责将数据到保存到数据库的那一层代码。
以后开发我们会将操作数据库的Java代码作为持久层。而Mybatis就是对jdbc代码进行了封装。
- 负责将数据到保存到数据库的那一层代码。
- 框架:
- 框架就是一个半成品软件,是一套可重用的、通用的、软件基础代码模型
- 在框架的基础之上构建软件编写更加高效、规范、通用、可扩展
MyBatis快速入门
查询user表中的数据
1、创建user表,添加数据
1 |
|
2、创建模块,导入坐标
下面是官方文档的叙述
要使用 MyBatis, 只需将 mybatis-x.x.x.jar 文件置于类路径(classpath)中即可。
如果使用 Maven 来构建项目,则需将下面的依赖代码置于 pom.xml 文件中:
1 |
|
由于涉及到了数据库的相关操作,所以我们也要将数据库的jar包的坐标导入。同理,我们还可以导入一些其他需要的jar包,例如junit单元测试,写日志的logback等
1 |
|
随后将logback需要的XML配置文件存放在src/main/resource
目录下
1 |
|
3、编写MyBatis核心配置文件 —> 替换连接信息 解决硬编码问题
这里继续看看官网怎么说的
每个基于 MyBatis 的应用都是以一个 SqlSessionFactory 的实例为核心的。SqlSessionFactory 的实例可以通过 SqlSessionFactoryBuilder 获得。而 SqlSessionFactoryBuilder 则可以从 XML 配置文件或一个预先配置的 Configuration 实例来构建出 SqlSessionFactory 实例。
从 XML 文件中构建 SqlSessionFactory 的实例非常简单,建议使用类路径下的资源文件进行配置。 但也可以使用任意的输入流(InputStream)实例,比如用文件路径字符串或 file:// URL 构造的输入流。MyBatis 包含一个名叫 Resources 的工具类,它包含一些实用方法,使得从类路径或其它位置加载资源文件更加容易。
1 |
|
XML 配置文件中包含了对 MyBatis 系统的核心设置,包括获取数据库连接实例的数据源(DataSource)以及决定事务作用域和控制方式的事务管理器(TransactionManager)。后面会再探讨 XML 配置文件的详细内容,这里先给出一个简单的示例:
1 |
|
我们继续在src/main/resource
目录下创建一个mybatis-config.xml,将示例给出的XML代码复制到我们创建好的XML文件中,将数据库的连接信息改成我们自己的数据库链接信息。那现在还差一个SQL映射文件
4、编写SQL映射文件 —> 统一管理SQL语句,解决硬编码问题
继续看看官网怎么说的
探究已映射的 SQL 语句
现在你可能很想知道 SqlSession 和 Mapper 到底具体执行了些什么操作,但 SQL 语句映射是个相当广泛的话题,可能会占去文档的大部分篇幅。 但为了让你能够了解个大概,这里先给出几个例子。
在上面提到的例子中,一个语句既可以通过 XML 定义,也可以通过注解定义。我们先看看 XML 定义语句的方式,事实上 MyBatis 提供的所有特性都可以利用基于 XML 的映射语言来实现,这使得 MyBatis 在过去的数年间得以流行。如果你用过旧版本的 MyBatis,你应该对这个概念比较熟悉。 但相比于之前的版本,新版本改进了许多 XML 的配置,后面我们会提到这些改进。这里给出一个基于 XML 映射语句的示例,它应该可以满足上个示例中 SqlSession 的调用。
1 |
|
继续在src/main/resource
目录下UserMapper文件(命名规则:操作对象User+Mapper,根据不同的操作对象,将User换成不同的名称),将示例代码粘贴进去,随后将resultType
改成User类的路径,那么查询结果就会自动返回一个User类型,同时在src/main/java
目录下,新建com.blog.pojo.User类
,属性与数据库中的User表相对应。
- XML映射文件
- User类
查询语句改为了查询user表中的所有数据,同时将id改为selectAll用来标识此sql语句,resultType改为我们刚刚创建的User类的路径,namespace我们后面再说
然后将第3步的映射文件路径改为我们新创建的UserMapper路径 <mapper resource="UserMapper.xml"/>
1 |
|
5、编码 —> 定义POJO类,加载核心配置文件 —> 获取SqlSessionFactory对象 —> 获取SqlSession对象,执行SQL语句 —> 释放资源
看看官网怎么说
从 XML 文件中构建 SqlSessionFactory 的实例非常简单,建议使用类路径下的资源文件进行配置。 但也可以使用任意的输入流(InputStream)实例,比如用文件路径字符串或 file:// URL 构造的输入流。MyBatis 包含一个名叫 Resources 的工具类,它包含一些实用方法,使得从类路径或其它位置加载资源文件更加容易。
1
2
3
4
String resource = "org/mybatis/example/mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
我们在java目录下新建com.blog.MyBatisDemo
类,将示例代码粘贴进去,将resource的路径改为我们的mybatis-config.xml
文件路径
1 |
|
Mapper代理开发
Mapper代理开发概述
之前我们写的代码是基本使用方式,它也存在硬编码的问题,这里调用 selectList()
方法传递的参数是映射配置文件中的 namespace.id值。如果参数写错了,程序就无法执行,而参数的内容也没有IDE的自动补全功能,也不利于后期的维护
1 |
|
如果使用 Mapper 代理方式则不存在硬编码问题。
1 |
|
通过上面的描述可以看出 Mapper 代理方式的目的:
- 解决原生方式中的硬编码
- 简化后期执行SQL
Mybatis 官网也是推荐使用 Mapper 代理的方式。
为了这个简单的例子,我们似乎写了不少配置,但其实并不多。在一个 XML 映射文件中,可以定义无数个映射语句,这样一来,XML 头部和文档类型声明部分就显得微不足道了。文档的其它部分很直白,容易理解。 它在命名空间 “org.mybatis.example.BlogMapper” 中定义了一个名为 “selectBlog” 的映射语句,这样你就可以用全限定名 “org.mybatis.example.BlogMapper.selectBlog” 来调用映射语句了,就像上面例子中那样:
1 |
|
你可能会注意到,这种方式和用全限定名调用 Java 对象的方法类似。这样,该命名就可以直接映射到在命名空间中同名的映射器类,并将已映射的 select 语句匹配到对应名称、参数和返回类型的方法。因此你就可以像上面那样,不费吹灰之力地在对应的映射器接口调用方法,就像下面这样:
1 |
|
第二种方法有很多优势,首先它不依赖于字符串字面值,会更安全一点;其次,如果你的 IDE 有代码补全功能,那么代码补全可以帮你快速选择到映射好的 SQL 语句。
使用Mapper代理要求
使用Mapper代理方式,必须满足以下要求:
设置SQL映射文件的namespace属性为Mapper接口全限定名
1
2XML
<mapper namespace="com.blog.mapper.UserMapper">在 Mapper 接口中定义方法,方法名就是SQL映射文件中sql语句的id,并保持参数类型和返回值类型一致
- XML
- Java
对应的Java中的方法名应为selectAll,且返回值类型应为User
1
2
<select id="selectAll" resultType="com.blog.pojo.User">
案例代码的实现
在 com.blog.mapper
包下创建 UserMapper接口,代码如下:
1 |
|
在 resources
下创建 com/blog/mapper
目录,并将原来 UserMapper.xml 映射配置文件粘贴进去,此时应该将MyBatis核心配置文件的SQL映射文件的路径更新
- UserMapper.xml
- mybatis-config.xml
1 |
|
修改我们的MybatisDemo
测试类的第3步,代码如下
1 |
|
细节:如果Mapper接口名称和SQL映射文件名称相同,并在同一目录下,则可以使用包扫描的方式简化SQL映射文件的加载
如果遵循Mapper代理的方式 —> Mapper接口名与SQL映射文件名就相同 —> 可以使用包扫描。
1 |
|
核心配置文件
核心配置文件中还可以配置很多内容。我们可以通过查询官网看可以配置的内容
MyBatis 的配置文件包含了会深深影响 MyBatis 行为的设置和属性信息。 配置文档的顶层结构如下:
- configuration(配置)
- properties(属性)
- settings(设置)
- typeAliases(类型别名)
- typeHandlers(类型处理器)
- objectFactory(对象工厂)
- plugins(插件)
- environments(环境配置)
- environment(环境变量)
- transactionManager(事务管理器)
- dataSource(数据源)
- environment(环境变量)
- databaseIdProvider(数据库厂商标识)
- mappers(映射器)
配置各个标签的时候,必须遵守前后顺序
多环境配置
在核心配置文件的 environments
标签中其实是可以配置多个 environment
,使用 id
给每段环境起名,在 environments
中使用 default='环境id'
来指定使用哪儿段配置。我们一般就配置一个 environment
即可。
1 |
|
类型别名
在映射配置文件中的 resultType
属性需要配置数据封装的类型(类的全限定名)。而每次这样写是特别麻烦的,Mybatis 提供了 类型别名
(typeAliases) 可以简化这部分的书写。
首先需要现在核心配置文件中配置类型别名,也就意味着给pojo包下所有的类起了别名(别名就是类名),不区分大小写。内容如下:
1 |
|
通过上述的配置,我们就可以简化映射配置文件中 resultType
属性值的编写
1 |
|
Mybatis练习
目标
- 能够使用映射配置文件实现CRUD操作
- 能够使用注解实现CRUD操作
一般的产品原型,里面都会包含品牌数据的 查询
、按条件查询
、添加
、删除
、批量删除
、修改
等功能,而这些功能其实就是对数据库表中的数据进行CRUD操作。接下来我们就使用Mybatis完成品牌数据的增删改查操作。以下是我们要完成功能列表:
- 查询
- 查询所有数据
- 查询详情
- 条件查询
- 添加
- 修改
- 修改全部字段
- 修改动态字段
- 删除
- 删除一个
- 批量删除
环境准备
数据库表(tb_brand)及数据准备
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
-- 删除tb_brand表
DROP TABLE IF EXISTS tb_brand;
-- 创建tb_brand表
CREATE TABLE tb_brand
(
-- id 主键
id INT PRIMARY KEY AUTO_INCREMENT,
-- 品牌名称
brand_name VARCHAR(20),
-- 企业名称
company_name VARCHAR(20),
-- 排序字段
ordered INT,
-- 描述信息
description VARCHAR(100),
-- 状态:0:禁用 1:启用
STATUS INT
);
-- 添加数据
INSERT INTO tb_brand (brand_name, company_name, ordered, description, STATUS)
VALUES ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
('华为', '华为技术有限公司', 100, '华为致力于把数字世界带入每个人、每个家庭、每个组织,构建万物互联的智能世界', 1),
('小米', '小米科技有限公司', 50, 'are you ok', 1);实体类 Brand,在
com.itheima.pojo
包下创建 Brand 实体类。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
public class Brand {
// id 主键
private Integer id;
// 品牌名称
private String brandName;
// 企业名称
private String companyName;
// 排序字段
private Integer ordered;
// 描述信息
private String description;
// 状态:0:禁用 1:启用
private Integer status;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getBrandName() {
return brandName;
}
public void setBrandName(String brandName) {
this.brandName = brandName;
}
public String getCompanyName() {
return companyName;
}
public void setCompanyName(String companyName) {
this.companyName = companyName;
}
public Integer getOrdered() {
return ordered;
}
public void setOrdered(Integer ordered) {
this.ordered = ordered;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public String toString() {
return "Brand{" +
"id=" + id +
", brandName='" + brandName + '\'' +
", companyName='" + companyName + '\'' +
", ordered=" + ordered +
", description='" + description + '\'' +
", status=" + status +
'}';
}
}编写测试用例,测试代码需要在
test/java
目录下创建包及测试用例。安装 MyBatisX 插件
MybatisX 是一款基于 IDEA 的快速开发插件,为效率而生。
主要功能
- XML映射配置文件 和 接口方法 间相互跳转
- 根据接口方法生成 statement
查询所有数据
实现该功能我们分以下步骤进行实现:
- 编写接口方法:Mapper接口
- 参数:无
查询所有数据功能是不需要根据任何条件进行查询的,所以此方法不需要参数。 - 结果:
List<Brand>
我们会将查询出来的每一条数据封装成一个Brand
对象,而多条数据封装多个Brand
对象,需要将这些对象封装到List集合中返回。 - 执行方法、测试
- 参数:无
编写接口方法
在 com.blog.mapper
包写创建名为 BrandMapper
的接口。并在该接口中定义 List<Brand> selectAll()
方法。
1 |
|
编写SQL语句
在 reources
下创建 com/itheima/mapper
目录结构,并在该目录下创建名为 BrandMapper.xml
的映射配置文件
1 |
|
编写测试方法
在 MybatisTest
类中编写测试查询所有的方法
1 |
|
执行测试方法部分结果如下Brand{id=1, brandName='null', companyName='null', ordered=5, description='好吃不上火', status=0
其中brandName和companyName的值为NULL,究其原因是我们Brand类中的属性名和MySQL中的列名不一致。
这个问题我在上篇JDBC文章中给出了一个比较初级的解决方案,那就是给列取别名,令别名与我们Java中的命名方式相同,这样我们就可以通过获取列的别名,来进行反射赋值。
另一种解决方式是使用resultMap定义字段和属性的映射关系(推荐)
起别名解决上述问题
我们可以在写sql语句时给这两个字段起别名,将别名定义成和属性名一致即可。
1 |
|
而上面的SQL语句中的字段列表书写麻烦,如果表中还有更多的字段,同时其他的功能也需要查询这些字段时就显得我们的代码不够精炼。Mybatis提供了sql
片段可以提高sql的复用性。
SQL片段:
将需要复用的SQL片段抽取到
sql
标签中1
2
3
4
<sql id="brand_column">
id, brand_name as brandName, company_name as companyName, ordered, description, status
</sql>id属性值是唯一标识,引用时也是通过该值进行引用。
在原sql语句中进行引用
使用include
标签引用上述的 SQL 片段,而refid
指定上述 SQL 片段的id值1
2
3
4
5
6
<select id="selectAll" resultType="brand">
select
<include refid="brand_column" />
from tb_brand;
</select>
使用resultMap解决上述问题
起别名 + sql片段的方式可以解决上述问题,但是它也存在问题。如果还有功能只需要查询部分字段,而不是查询所有字段,那么我们就需要再定义一个 SQL 片段,这就显得不是那么灵活。
那么我们也可以使用resultMap来定义字段和属性的映射关系的方式解决上述问题。
- 在映射配置文件中使用resultMap定义
1 | 字段 |
和
1 | 属性 |
的映射关系
1 |
|
注意:在上面只需要定义 字段名 和 属性名 不一样的映射,而一样的则不需要专门定义出来。
SQL语句正常编写
1
2
3
4
5
6
<!--使用resultMap属性替换掉原有的resultType属性-->
<select id="selectAll" resultMap="brandResultMap">
select *
from tb_brand;
</select>
查询详情
查看详情功能实现步骤:
- 编写接口方法:Mapper接口
- 参数:id
查看详情就是查询某一行数据,所以需要根据id进行查询。而id以后是由页面传递过来。 - 结果:Brand
根据id查询出来的数据只要一条,而将一条数据封装成一个Brand对象即可
- 参数:id
- 编写SQL语句:SQL映射文件
- 执行方法、进行测试
编写接口方法
在 BrandMapper
接口中定义根据id查询数据的方法
1 |
|
编写SQL语句
在 BrandMapper.xml
映射配置文件中编写 statement
,使用 resultMap
而不是使用 resultType
1 |
|
编写测试方法
在 test/java
下的 com.itheima.mapper
包下的 MybatisTest类中
定义测试方法
1 |
|
参数占位符
mybatis提供了两种参数占位符:
#{}
:执行SQL时,会将 #{} 占位符替换为?,将来自动设置参数值。#{}
底层使用的是PreparedStatement
${}
:拼接SQL。底层使用的是Statement
,会存在SQL注入问题。关于SQL注入的问题我在上篇JDBC文章中做过详细的说明。
以后开发我们使用 #{} 参数占位符。
parameterType使用
对于有参数的mapper接口方法,我们在映射配置文件中应该配置 ParameterType
来指定参数类型。只不过该属性都可以省略。
1 |
|
SQL语句中特殊字段处理
在xml中,”<”、”>”、”&”等字符是不能直接存入的,否则xml语法检查时会报错,如果想在xml中使用这些符号,必须将其转义为实体,如<
、>
、&
,这样才能保存进xml文档。或者使用<![CDATA[]]>
,被这个标记所包含的内容将表示为纯文本
但是严格来说,在XML中只有”<”和”&”是非法的,其它三个都是可以合法存在的,但是,把它们都进行转义是一个好的习惯。
不管怎么样,转义前的字符也好,转义后的字符也好,都会被xml解析器解析,为了方便起见,使用<![CDATA[]]>
来包含不被xml解析器解析的内容。但要注意的是:
- 此部分不能再包含
]]>
; - 不允许嵌套使用;
]]>
这部分不能包含空格或者换行。
最后,说说<![CDATA[]]>
和xml转移字符的关系,它们两个看起来是不是感觉功能重复了?
是的,它们的功能就是一样的,只是应用场景和需求有些不同:
<![CDATA[]]>
不能适用所有情况,转义字符可以;- 对于短字符串
<![CDATA[]]>
写起来啰嗦,对于长字符串转义字符写起来可读性差; <![CDATA[]]>
表示xml解析器忽略解析,所以更快。
转义字符
- CDATA
1 |
|
多条件查询
在实际问题中,我们经常会遇到如上图所示的多条件查询,将多条件查询的结果展示在下方的数据列表中。而我们做这个功能需要分析最终的SQL语句应该是什么样,思考两个问题
- 条件表达式
- 如何连接
当前状态使用status
字段表示,企业名称使用company_name
表示,品牌名称使用brand_name
表示
条件字段 企业名称
和 品牌名称
需要进行模糊查询,所以条件应该是:
1 |
|
简单的分析后,我们来看功能实现的步骤:
- 编写接口方法
- 参数:所有查询条件
- 结果:
List<Brand>
- 在映射配置文件中编写SQL语句
- 编写测试方法并执行
编写接口方法
在 BrandMapper
接口中定义多条件查询的方法。
而该功能有三个参数,我们就需要考虑定义接口时,参数应该如何定义。Mybatis针对多参数有多种实现
- 使用
1 |
标记每一个参数,在映射配置文件中就需要使用
1 |
进行占位
1 |
|
- 将多个参数封装成一个
1 | 实体对象 |
,将该实体对象作为接口的方法参数。该方式要求在映射配置文件的SQL中使用
1 |
时,里面的内容必须和实体类属性名保持一致。
1 |
|
- 将多个参数封装到map集合中,将map集合作为接口的方法参数。该方式要求在映射配置文件的SQL中使用
1 |
时,里面的内容必须和map集合中键的名称一致。map.put(“SQL参数占位符名称”,数值);
1 |
|
编写SQL语句
在 BrandMapper.xml
映射配置文件中编写 statement
,注意使用 resultMap
替换 resultType
1 |
|
编写测试方法
在 test/java
下的 com.blog.mapper
包下的 MybatisTest类中
定义测试方法
- Param注解
- 封装成对象
- 封装到map集合
1 |
|
现在的这种查询方式,只有当用户把三个参数都填上的时候才能查询出来,如果另外两个参数没有填,那么SQL语句就会变成
1 |
|
这样显然是不会查询成功的,下面我们来进行优化
动态SQL
上述功能实现存在很大的问题。用户在输入条件时,肯定不会所有的条件都填写,这个时候我们的SQL语句就不能那样写的
例如用户只输入 当前状态 时,SQL语句就是
1 |
|
而用户如果只输入企业名称时,SQL语句就是
1 |
|
而用户如果输入了 当前状态
和 企业名称
时,SQL语句又不一样+
1 |
|
针对上述的需要,Mybatis对动态SQL有很强大的支撑:
- if
- choose (when, otherwise)
- trim (where, set)
- foreach
我们先学习 if 标签:
if 标签:条件判断
test 属性:逻辑表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<select id="selectByCondition" resultMap="brandResultMapper">
select *
from tb_brand
where
<if test="status != null">
`status` = #{status}
</if>
<if test="companyName != null and companyName != ''">
and company_name like #{companyName}
</if>
<if test="brandName != null and brandName != ''">
and brand_name like #{brandName};
</if>
</select>
如上的这种SQL语句就会根据传递的参数值进行动态的拼接。如果此时status和companyName有值那么就会值拼接这两个条件。SQL语句将变成
1 |
|
但如果我们只给companyName这一个参数,那么SQL语句会变成下面这样
1 |
|
WHERE关键字后面直接跟了个AND,变成了一条错误的SQL语句,那么最笨的一个解决方案就是在where后面先接一个恒等式
1 |
|
但MyBatis也料想到了这种情况,所以MyBatis又提供了一个where标签
where 标签
作用:
替换where关键字
会动态的去掉第一个条件前的 and 或 or
如果所有的参数没有值则不加where关键字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<select id="selectByCondition" resultMap="brandResultMapper">
select *
from tb_brand
<where>
<if test="status != null">
`status` = #{status}
</if>
<if test="companyName != null and companyName != ''">
and company_name like #{companyName}
</if>
<if test="brandName != null and brandName != ''">
and brand_name like #{brandName};
</if>
</where>
</select>
单个条件(动态SQL)
如上图所示,在查询时只能选择 品牌名称
、当前状态
、企业名称
这三个条件中的一个,但是用户到底选择哪儿一个,我们并不能确定。这种就属于单个条件的动态SQL语句。
这种需求需要使用到 choose(when,otherwise)标签
实现,分别对应Java中的swtich
,case
,default
编写接口方法
在 BrandMapper
接口中定义单条件查询的方法。
1 |
|
编写SQL语句
在 BrandMapper.xml
映射配置文件中编写 statement
,使用 resultMap
替换 resultType
将where替换成<where>
标签,这样当我们没有选中任何查询方式时,会自动帮我们去掉where,从而查询所有数据
或者保持where不变,在choose中添加<otherwise>
标签,在其中写入一个恒等式,这样当没有选中任何查询方式时,SQL语句会变成select * from tb_brand where true
,同样实现查询所有数据的效果,但还是推荐前者的方式
1 |
|
编写测试方法
在 test/java
下的 com.blog.mapper
包下的 MybatisTest类中
定义测试方法
1 |
|
其实我在测试的时候,一直出现Preparing: select * from tb_brand WHERE status = ?
,也就是这个status有值啊,哪儿来的值呢?
想了半天发现可能是构造器的status默认值为0吧,因为我那会儿吧status设为的int类型,所以默认值为0,随后恍然大悟,把status的类型改为Integer就行了,以前还真没注意过这个
添加数据
实际开发中,添加数据时会有一个图形化界面,而我们在该页面输入想要的数据后添加 提交
按钮,就会将这些数据添加到数据库中。接下来我们就来实现添加数据的操作。
- 编写接口方法
- 参数:除了id之外的所有的数据。id对应的是表中主键值,而主键我们是 自动增长 生成的。
- 编写SQL语句
- 编写测试方法并执行
编写接口方法
在 BrandMapper
接口中定义添加方法
1 |
|
编写SQL语句
在 BrandMapper.xml
映射配置文件中编写添加数据的 statement
1 |
|
编写测试方法
在 test/java
下的 com.blog.mapper
包下的 MybatisTest类中
定义测试方法
1 |
|
在第2步获取SqlSession对象时,默认是不会自动提交事务的,我们可以在openSession方法中加上true,这样就能自动提交事务了,不用手动调用commit方法
1 |
|
添加-主键返回
在接收参数的时候,我们没有接收id的参数,而是利用数据库主键自增长来自动赋值,但有时候我们又需要获取这个自增长的id。
解决方案
在 insert 标签上添加如下属性:
useGeneratedKeys:是够获取自动增长的主键值。true表示获取
keyProperty :指定将获取到的主键值封装到哪儿个属性里
1
2
3
4
5
<insert id="add" useGeneratedKeys="true" keyProperty="id">
insert into tb_brand(brand_name, company_name, ordered, description, status)
VALUES (#{brandName},#{companyName},#{ordered},#{description},#{status})
</insert>添加主键返回之后,我们再来测试一下
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
public void testAdd() throws IOException {
//接收参数
String brandName = "波导";
String companyName = "波导手机";
Integer ordered = 100;
String description = "手机中的战斗机";
int status = 1;
//封装对象
Brand brand = new Brand();
brand.setBrandName(brandName);
brand.setCompanyName(companyName);
brand.setOrdered(ordered);
brand.setDescription(description);
brand.setStatus(status);
//1. 获取SqlSessionFactory
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取SqlSession对象
SqlSession sqlSession = sqlSessionFactory.openSession();
//3. 获取Mapper接口的代理对象
BrandMapper brandMapper = sqlSession.getMapper(BrandMapper.class);
//4. 执行方法
brandMapper.add(brand);
System.out.println(brand.getId()); //在这里输出一下id,看看有没有值输出,我这里是有的
//提交事务
sqlSession.commit();
//5. 释放资源
sqlSession.close();
}
修改
编写接口方法
在 BrandMapper
接口中定义修改方法。int获取修改的行数
1 |
|
编写SQL语句
在 BrandMapper.xml
映射配置文件中编写修改数据的 statement
。
1 |
|
编写测试方法
在 test/java
下的 com.blog.mapper
包下的 MybatisTest类中
定义测试方法
1 |
|
此种修改方式要改只能全部改,如果没有给某一个字段赋值,那么修改之后的值就是null,十分的不方便,所以我们要将其优化成动态的修改字段
修改动态字段
解决方案跟上面的类似,也是用if标签来判断用户的输入,然后用set标签来删除额外的逗号(上面是用where标签去除and或or),防止出现SQL语法错误
1 |
|
删除一行数据
我们在App网购的时候,购物车里都会有删除
按钮,,当用户点击了该按钮,就会将改行数据删除掉。那我们就需要思考,这种删除是根据什么进行删除呢?是通过主键id删除,因为id是表中数据的唯一标识。
接下来就来实现该功能。
编写接口方法
在 BrandMapper
接口中定义根据id删除方法。
1 |
|
编写SQL语句
在 BrandMapper.xml
映射配置文件中编写删除一行数据的 statement
1 |
|
编写测试方法
在 test/java
下的 com.blog.mapper
包下的 MybatisTest类中
定义测试方法
1 |
|
批量删除
我们在删除购物车订单的时候,都会有个多选按钮,可以选中多条记录进行删除,下面我们来实现这个功能
编写接口方法
在 BrandMapper
接口中定义删除多行数据的方法。
1 |
|
编写SQL语句
在 BrandMapper.xml
映射配置文件中编写删除多条数据的 statement
。
编写SQL时需要遍历数组来拼接SQL语句。Mybatis 提供了 foreach
标签供我们使用
foreach 标签
用来迭代任何可迭代的对象(如数组,集合)。
collection 属性:
- mybatis会将数组参数,封装为一个Map集合。
- 默认:array = 数组
- 使用@Param注解改变map集合的默认key的名称
- mybatis会将数组参数,封装为一个Map集合。
item 属性:本次迭代获取到的元素。
separator 属性:集合项迭代之间的分隔符。
foreach
标签不会错误地添加多余的分隔符。也就是最后一次迭代不会加分隔符。open 属性:该属性值是在拼接SQL语句之前拼接的语句,只会拼接一次
close 属性:该属性值是在拼接SQL语句拼接后拼接的语句,只会拼接一次
1
2
3
4
5
6
7
8
<delete id="deleteByIds">
delete from tb_brand
where id in
<foreach collection="ids" item="id" separator="," open="(" close=")">
#{id}
</foreach>
</delete>假如数组中的id数据是{1,2,3},那么拼接后的sql语句就是:
1
delete from tb_brand where id in (1,2,3);
编写测试方法
在 test/java
下的 com.blog.mapper
包下的 MybatisTest类中
定义测试方法
1 |
|
MyBatis参数传递
Mybatis 接口方法中可以接收各种各样的参数,如下:
- 多个参数
- 单个参数:单个参数又可以是如下类型
- POJO 类型
- Map 集合类型
- Collection 集合类型
- List 集合类型
- Array 类型
- 其他类型
多个参数
如下面的代码,就是接收两个参数,而接收多个参数需要使用 @Param
注解,那么为什么要加该注解呢?这个问题要弄明白就必须来研究Mybatis的底层对于这些参数是如何处理的。
1 |
|
1 |
|
我们在接口方法中定义多个参数,Mybatis 会将这些参数封装成 Map 集合对象,值就是参数值,而键在没有使用 @Param
注解时有以下命名规则:
- 以 arg 开头 :第一个参数就叫 arg0,第二个参数就叫 arg1,以此类推。如:
- map.put(“arg0”,参数值1);
- map.put(“arg1”,参数值2);
- 以 param 开头 : 第一个参数就叫 param1,第二个参数就叫 param2,依次类推。如:
- map.put(“param1”,参数值1);
- map.put(“param2”,参数值2);
下面我们来验证一下
- 在
1 | UserMapper |
接口中定义如下方法
1 |
|
- 在
1 | UserMapper.xml |
映射配置文件中定义SQL
1 |
|
运行代码结果如下
1 | PLAINTEXT |
在映射配合文件的SQL语句中使用用
1 | arg |
开头的和
1 | param |
书写,代码的可读性会变的特别差,此时可以使用
1 |
注解。
在接口方法参数上使用 @Param
注解,Mybatis 会将 arg
开头的键名替换为对应注解的属性值。
以后接口参数是多个时,在每个参数上都使用 @Param
注解。这样代码的可读性更高。
单个参数
POJO 类型
直接使用。要求
属性名
和参数占位符名称
一致Map 集合类型
直接使用。要求
map集合的键名
和参数占位符名称
一致Collection 集合类型
Mybatis 会将集合封装到 map 集合中,如下:
map.put(“arg0”,collection集合);
map.put(“collection”,collection集合;
==可以使用
@Param
注解替换map集合中默认的 arg 键名。==List 集合类型
Mybatis 会将集合封装到 map 集合中,如下:
map.put(“arg0”,list集合);
map.put(“collection”,list集合);
map.put(“list”,list集合);
==可以使用
@Param
注解替换map集合中默认的 arg 键名。==Array 类型
Mybatis 会将集合封装到 map 集合中,如下:
map.put(“arg0”,数组);
map.put(“array”,数组);
==可以使用
@Param
注解替换map集合中默认的 arg 键名。==其他类型
比如int类型,
参数占位符名称
叫什么都可以。尽量做到见名知意
注解实现CURD
使用注解开发会比配置文件开发更加方便。如下就是使用注解进行开发
1 |
|
注解是用来替换映射配置文件方式配置的,所以使用了注解,就不需要再映射配置文件中书写对应的 statement
Mybatis 针对 CURD 操作都提供了对应的注解,已经做到见名知意。如下:
- 查询 :@Select
- 添加 :@Insert
- 修改 :@Update
- 删除 :@Delete
接下来我们做一个案例来使用 Mybatis 的注解开发
代码实现:
将之前案例中
UserMapper.xml
中的 根据id查询数据 的statement
删掉在
1
UserMapper
接口的
1
selectById
方法上添加注解
1
2
3
User selectById(int id);
测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public void testSelect() throws IOException {
//接收参数
int id = 2;
//1. 获取SqlSessionFactory
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//2. 获取SqlSession对象
SqlSession sqlSession = sqlSessionFactory.openSession(true);
//3. 获取Mapper接口的代理对象
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
//4. 执行方法
User user = userMapper.selectById(id);
System.out.println(user);
//5. 释放资源
sqlSession.close();
}
注意在官方文档中 入门
中有这样的一段话:
使用注解来映射简单语句会使代码显得更加简洁,但对于稍微复杂一点的语句,Java 注解不仅力不从心,还会让本就复杂的 SQL 语句更加混乱不堪。 因此,如果你需要做一些很复杂的操作,最好用 XML 来映射语句。
结论:注解完成简单功能,配置文件完成复杂功能。
HTML
介绍
HTML是一门语言,所有的网页都是用HTML这门语言编写出来的,也就是HTML是用来写网页的,像京东,12306等网站有很多网页。
HTML(HyperText Markup Language):超文本标记语言:
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容
如上图看到的页面,我们除了能看到一些文字,同时也有大量的图片展示;有些网页也有视频,音频等。这种展示效果超越了文本展示的限制。
标记语言:由标签构成的语言
之前学习的XML就是标记语言,由一个一个的标签组成,HTML 也是由标签组成 。我们在浏览器页面右键可以查看页面的源代码。
HTML标签不像XML那样可以自定义,HTML中的标签都是预定义好的,运行在浏览器上并由浏览器解析,然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img
标签;想展示可以点击的链接的效果就可以使用预定义的 a
标签等。
W3C标准:
- W3C是万维网联盟,这个组成是用来定义标准的。他们规定了一个网页是由三部分组成,分别是:
- 结构:对应的是 HTML 语言
- 表现:对应的是 CSS 语言
- 行为:对应的是 JavaScript 语言
HTML定义页面的整体结构;CSS是用来美化页面,让页面看起来更加美观;JavaScript可以使网页动起来,比如轮播图也就是多张图片自动的进行切换等效果。
快速入门
在IDEA中新建一个HTML文件,会默认为我们生成几个标签
1 |
|
html标签是根标签,下面有 head
标签和 body
标签这两个子标签。而 head
标签的 title
子标签是用来定义页面标题名称的,它定义的内容会展示在浏览器的标题位置
body
标签的内容会被展示在内容区中
使用font
标签可以改变文字颜色、大小、字体
1 |
|
HTML 结构标签
HTML 标签不区分大小写
如上案例中的
font
写成Font
也是一样可以展示出对应的效果的。HTML 标签属性值 单双引皆可
如上案例中的color属性值使用双引号也是可以的。
HTML 语法松散
比如 font 标签不加结束标签也是可以展示出效果的。但不建议,最好严格按照要求去写。
标签 | 描述 |
---|---|
定义HTML文档 | |
定义关于文档的信息 | |
定义文档的标题 | |
定义文档的主体 |
基础标签
基础标签就是一些和文字相关的标签,如下:
标签 | 描述 |
---|---|
~ |
定义标题,h1最大,h6最小 |
定义文本的字体、字体尺寸、字体颜色 | |
定义粗体文本 | |
定义斜体文本 | |
定义文本下划线 | |
定义文本居中 | |
定义段落 | |
定义折行 | |
定义水平线 |
标题标签
书写标题标签
标题标签中 h1最大,h6最小。
1 |
|
hr标签
hr
标签在浏览器中呈现出 横线 的效果。
在页面文件中书写 hr 标签
1 |
|
字体标签
font:字体标签
face 属性:用来设置字体。如 “楷体”、”宋体”等
color 属性:设置文字颜色。颜色有三种表示方式
英文单词:red,pink,blue…
这种方式表示的颜色特别有限,所以一般不用。
rgb(值1,值2,值3):值的取值范围:0~255
此种方式也就是三原色(红绿蓝)设置方式。 例如: rgb(255,0,0)。
这种书写起来比较麻烦,一般不用。
#值1值2值3:值的范围:00~FF
这种方式是rgb方式的简化写法,以后基本都用此方式。
值1表示红色的范围,值2表示绿色的范围,值3表示蓝色范围。例如: #ff0000
size 属性:设置文字大小
1
2
<font color="red" size="5" face="楷体">测试文本</font>
注意:font 标签已经不建议使用了,以后如果要改变文字字体,大小,颜色可以使用 CSS 进行设置。
换行标签
如果直接在body标签中插入下段文字,是不会自动换行的,如果要实现换行效果,需要使用 换行标签(br标签)。
1 |
|
段落标签
上面文字展示的效果还是不太好,我们想让每一段上下都加空行。此时就需要使用段落标签(p标签)
在页面文件中书写如下内容:
1 |
|
这种效果就会比之前的效果好一些,呈现出段落的效果。
加粗、斜体、下划线标签
- b:加粗标签
- i:斜体标签
- u:下划线标签,在文字的下方有一条横线
1 |
|
展示的效果如下:
沙柳河水流淌
沙柳河水流淌
沙柳河水流淌
居中标签
center :文本居中
代码如下:
1 |
|
效果如下
我是文章标题
案例
实现如下图所示页面效果(不要在意这个横线效果):
公司简介
传智教育(股票代码003032)隶属江苏传智播客教育科技股份有限公司,注册资本4亿元,是第一个实现A股IPO的教育企业,公司致力于培养高精尖数字化人才,主要培养人工智能、python+大数据开发.智能制造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验,且来自互联网或研究机构的T精英组城成,负责研究开发教学模式和课程内容。公司具有完善的课程研发体系,一直走在整个行业发展的前端,在行业内竖立起了良好的品质口碑。
民族振兴靠人才,中华民族正处于伟大复兴之路上,要赢得国际竞争,需要拥有大量的科技人才,我们将肩负起民族使命,在三尺讲台诲人不倦著书立说,为科技行业培养出大量的优秀人才促进民族伟大复兴!我们的使命是:为中华民族伟大复兴而讲课,为千万学生少走弯路而著书。
探素教育之路,长途漫漫。传智教育希望可以通过自己的努力,寻找出一条更符合人类自然或长规律的教育之路,建立起一个新的教育生态环境,让中国的嫁长和胺孑们在现有的教育体系之外,再多一些选挥的机会.因此比“探索教育本源,开辟教育新生态”便成为了所有传智人为之奋斗的终极愿数,也是所有传智人共同努力的目标。为此,15年来,传智人不曾有一丝候怠,相信在传智人的不懈努力下,大道不远,终在部下。
江苏传智摇客教育科技股份有限公司
版权所有Copyright 2006-2018©,All Rights Reserved苏ICP备16007882
注意,HTML 中的预留字符必须被替换为字符实体。 HTML 实体 在HTML 中,某些字符是预留的。 在HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果需要一些特殊字符,需要借助HTML实体来实现。
链接:https://www.w3school.com.cn/charsets/ref_html_8859.asp
1 |
|
图片、音频、视频标签
标签 | 描述 |
---|---|
定义图片 | |
定义音频 | |
定义视频 |
- img:定义图片
- src:规定显示图像的 URL(统一资源定位符)
- height:定义图像的高度
- width:定义图像的宽度
- audio:定义音频。支持的音频格式:MP3、WAV、OGG
- src:规定音频的 URL
- controls:显示播放控件
- video:定义视频。支持的音频格式:MP4, WebM、OGG
- src:规定视频的 URL
- controls:显示播放控件
尺寸单位:
height属性和width属性有两种设置方式:
- 像素:单位是px
- 百分比。占父标签的百分比。例如宽度设置为 50%,意思就是占它的父标签宽度的一般(50%)
资源路径:
图片,音频,视频标签都有src属性,而src是用来指定对应的图片,音频,视频文件的路径。此处的图片,音频,视频就称为资源。资源路径有绝对路径和相对路径两种方式
超链接标签
在网页中可以看到很多超链接标签,当我们点击这些超链接时会跳转到其他的页面或者资源。
a
标签属性:
- href:指定访问资源的URL
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
1 |
|
当我们将 target
属性值设置为 _blank
时,会在新标签页打开
列表标签
HTML 中列表分为
有序列表
- 咖啡
- 牛奶
- 可乐
无序列表
- Apex
- Deadcells
- Terraria
标签说明:
标签 | 描述 |
---|---|
定义有序列表 | |
定义无序列表 | |
定义列表项 |
有序列表中的 type
属性用来指定标记的标号的类型(数字、字母、罗马数字等)
无序列表中的 type
属性用来指定标记的形状
代码演示:
1 |
|
表格标签
- table :定义表格
- border:规定表格边框的宽度
- width :规定表格的宽度
- cellspacing:规定单元格之间的空白
- tr :定义行
- align:定义表格行的内容对齐方式
- td :定义单元格
- rowspan:规定单元格可横跨的行数(横向合并单元格)
- colspan:规定单元格可横跨的列数(纵向合并单元格)
- th:定义表头单元格
1 |
|
布局标签
标签 | 描述 |
---|---|
定义HTML文档中的一个区域部分,经常与CSS一起使用,用来布局网页 | |
用于组合行内元素。 |
这两个标签,一般都是和css结合到一块使用来实现页面的布局。
div
标签 在浏览器上会有换行的效果,而 span
标签在浏览器上没有换行效果。
1 |
|
表单标签
表单标签效果大家其实都不陌生,像登陆页面、注册页面等都是表单。
表单就是用来采集用户输入的数据,然后将数据发送到服务端,服务端会对数据库进行操作,比如注册就是将数据保存到数据库中,而登陆就是根据用户名和密码进行数据库的查询操作。
表单标签概述
表单:在网页中主要负责数据采集功能,使用<form>
标签定义表单
表单项(元素):不同类型的 input 元素、下拉列表、文本域等
标签 | 描述 |
---|---|
定义表单 | |
定义表单项,通过type属性控制输入形式 | |
为表单项定义标注 | |
定义下拉列表 | |
定义下拉列表的列表项 | |
定义文本域 |
form
是表单标签,它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。
form标签属性
action:规定当提交表单时向何处发送表单数据,该属性值就是URL
以后会将数据提交到服务端,该属性需要书写服务端的URL。而今天我们可以书写
#
,表示提交到当前页面来看效果。method :规定用于发送表单数据的方式
method取值有如下两种:
- get:默认值。如果不设置method属性则默认就是该值
- 请求参数会拼接在URL后边
- url的长度有限制 4KB
- post:
- 浏览器会将数据放到http请求消息体中
- 请求参数无限制的
- get:默认值。如果不设置method属性则默认就是该值
代码演示
由于表单标签在页面上没有任何展示的效果,所以在演示的过程是会先使用 input
这个表单项标签展示输入框效果。
代码如下:
1 |
|
效果展示如下
从效果可以看到页面有一个输入框,用户可以在数据框中输入自己想输入的内容,点击提交按钮以后会将数据发送到服务端,当然现在肯定不能实现。现在我们可以将 form
标签的 action
属性值设置为 #
,将其将数据提交到当前页面。还需要注意一点,要想提交数据,input
输入框必须设置 name
属性。代码如下:
1 |
|
接下来我们来聊 method
属性,默认是 method = 'get'
,所以该取值就会将数据拼接到URL的后面。输入用户名为ASD
,密码为ASDEQW
,点击提交,浏览器的效果如下:http://localhost:63342/JavaWeb/html-demo/html/01-%E5%9F%BA%E7%A1%80%E6%A0%87%E7%AD%BE.html?username=ASD&password=ASDEQW#
表单项标签
表单项标签有很多,不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个:
<input>
:表单项,通过type属性控制输入形式input
标签有个type
属性。type
属性的取值不同,展示的效果也不一样
type取值 | 描述 |
---|---|
text | 默认值。定义单行的输入字段 |
password | 定义密码字段 |
radio | 定义单选按钮 男 女 |
checkbox | 定义复选框 Apex Deadcells Terraria |
file | 定义文件上传按钮 |
hidden | 定义隐藏的输入字段 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
button | 定义可点击按钮 |
<select>
:定义下拉列表,<option>
定义列表项
城市: 北京 上海 广州 深圳<textarea>
:文本域,它可以输入多行文本,而input
数据框只能输入一行文本。以上标签项的内容要想提交,必须得定义
name
属性。每一个标签都有id属性,id属性值是唯一的标识。
单选框、复选框、下拉列表需要使用
value
属性指定提交的值。练习:实现以下表单样式
用户名:
密码:
性别: 男 女
爱好: Apex Deadcells Terraria
头像:
城市: 北京 上海 广州 深圳
个人描述:代码
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#">
用户名:
<input type="text" name="username"><br>
密码:
<input type="password" name="password"><br>
性别:
<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女<br>
爱好:
<input type="checkbox" name="hobbby" value="1">Apex
<input type="checkbox" name="hobbby" value="2">Deadcells
<input type="checkbox" name="hobbby" value="3">Terraria<br>
头像:
<input type="file"><br>
城市:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select><br>
个人描述:
<textarea cols="20" rows="5" name="desc"></textarea><br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
</html>
CSS
概述
CSS 是一门语言,用于控制网页表现。我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成:
- 结构:HTML
- 表现:CSS
- 行为:JavaScript
CSS也有一个专业的名字:Cascading Style Sheet(层叠样式表)。
如下面的代码, style
标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为 红色。
1 |
|
CSS导入方式
CSS 导入方式其实就是 CSS 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式:
内联样式:在标签内部使用style属性,属性值是CSS属性键值对
1
2
<div style="color: red">Hello CSS~</div>给方式只能作用在这一个标签上,如果其他的标签也想使用同样的样式,那就需要在其他标签上写上相同的样式。复用性太差。
内部样式:定义
<style>
标签,在标签内部定义CSS样式1
2
3
4
5
6
<style type="text/css">
span{
color: red;
}
</style>这种方式可以做到在该页面中复用,被span标签包裹的字体会变为红色
外部样式:定义link标签,引入外部的CSS文件
编写一个CSS文件。名为:demo.css,内容如下:1
2
3
4
div{
color: red;
}在html中引入 CSS 文件。
1
2
<link rel="stylesheet" href="demo.css">这种方式可以在多个页面进行复用。其他的页面想使用同样的样式,只需要使用
link
标签引入该CSS文件。
CSS选择器
CSS 选择器就是选取需设置样式的元素(标签),比如如下CSS代码:
1 |
|
如上代码中的 div
就是 css 中的选择器。这里只讲下面三种选择器:
元素选择器
格式:
1
2
元素名称{color: red;}举例:
1
2
div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/id选择器
格式:
1
2
#id属性值{color: red;}举例:
1
2
#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/在HTML中调用
1
2
<div id="name">hello css2</div>类选择器
格式:
1
2
.class属性值{color: red;}举例:
1
2
.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/在HTML中调用
1
2
<div class="cls">hello css3</div>CSS属性
css有很多css属性,你要想把它们都学会,需要花费很长的时间。而我们作为java程序员,不需要重点掌握这部分内容。对于网页三剑客中css是对我们要求最低的。了解一些简单的CSS属性就可以,剩下的可以去W3School查。
JavaScript简介
JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。
JavaScript 是用来控制网页行为的,它能使网页可交互;
JavaScript(简称:JS) 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 ECMAScript
,所有的客户端校验语言必须遵守这个标准,当然 JavaScript 也遵守了这个标准。
JavaScript引入方式
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种:
- 内部脚本:将 JS代码定义在HTML页面中
- 外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中
内部脚本
在 HTML 中,JavaScript 代码必须位于 <script>
与 </script>
标签之间
代码如下:
alert(数据)
是 JavaScript 的一个方法,作用是将参数数据以浏览器弹框的形式输出出来。
1 |
|
- 在 HTML 文档中可以在任意地方,可以放置任意数量的
<script>
标签。 - 不过一般把脚本放置在
<body>
元素的底部,可以改善显示速度 - 因为浏览器在加载页面的时候会从上往下进行加载并解析。 我们应该先让用户看到页面内容,然后再展示动态的效果。
外部脚本
定义外部 js 文件。如定义名为 demo.js的文件
demo.js内容如下
1 |
|
在页面使用 script
标签中使用 src
属性指定 js 文件的 URL 路径。
1 |
|
- 外部脚本不能包含
<script>
标签
在js文件中直接写 js 代码即可,不要在 js文件 中写script
标签 <script>
标签不能自闭合
在页面中引入外部js文件时,不能写成<script src="../js/demo.js" />
。
JavaScript基础语法
书写语法
区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无(建议还是加上)
如果一行上写多个语句时,必须加分号用来区分多个语句。
注释
- 单行注释:// 注释内容
- 多行注释:/ 注释内容 /
注意:JavaScript 没有文档注释
大括号表示代码块
1
2
3
4
if (count == 3) {
alert(count);
}
输出语句
js 可以通过以下方式进行内容的输出,只不过不同的语句输出到的位置不同
使用 window.alert() 写入警告框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.alert("HELLO JS")
</script>
</body>
</html>使用 document.write() 写入 HTML 输出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write("HELLO JS")
</script>
</body>
</html>使用 console.log() 写入浏览器控制台
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log("HELLO JS")
</script>
</body>
</html>
变量
JavaScript中使用var关键字(variable的缩写)来声明变量,格式var 变量名 = 数据值;
。
JavaScript是一门弱类型语言,变量可以存放不同类型的值
js 中的变量名命名也有如下规则,和java语言基本都相同
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
JavaScript 中 var
关键字有点特殊,有以下地方和其他语言不一样
作用域:全局变量
1
2
3
4
5
{
var age = 18;
}
window.alert(age); //在代码块中定义age,在代码块外依然能使用变量可以重复定义
1
2
3
4
5
6
{
var age = 18;
var age = 14; //JavaScript会用14替换之前的18
}
window.alert(age); //最后输出的是14
针对如上的问题,ECMAScript 6 新增了 let
关键字来定义变量。它的用法类似于 var
,但是let
声明的变量,只在 let
关键字所在的代码块内有效,且不允许重复声明。
1 |
|
浏览器不会弹窗输出结果,F12打开控制台会出现Uncaught ReferenceError: age is not defined
错误,age未定义。
ECMAScript 6 新增了 const关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。
1 |
|
数据类型
JavaScript 中提供了两类数据类型:原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型
例如alert(typeof age);
以弹框的形式将 age 变量的数据类型输出
原始数据类型:
number:数字(整数,小数,NaN(Not a Number))
1
2
3
4
5
var age = 3.14;
var price = 521;
window.alert(typeof age); //结果为number
window.alert(typeof price); //结果为number注意: NaN是一个特殊的number类型的值,后面用到再说
string:字符、字符串,单引号和双引号都行
1
2
3
4
5
6
7
8
var ch = 'X';
var name = 'Tom';
var addr = "US";
alert(typeof ch); //结果是 string
alert(typeof name); //结果是 string
alert(typeof addr); //结果是 string注意:==在 js 中 双引号和单引号都表示字符串类型的数据
boolean:布尔。true,false
1
2
3
4
5
6
var flag1 = true;
var flag2 = false;
alert(typeof flag1); //结果是 boolean
alert(typeof flag2); //结果是 booleannull:对象为空
1
2
3
4
var obj = null;
alert(typeof obj); //结果是 object为什么结果是object,官方给出了这个解释
注释:您也许会问,为什么typeof 运算符对于null值会返回“Object”。这实际上是JavaScript最初实现中的一个错误,然后被ECMAScript沿用了。现在,null被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
undefined:当声明的变量未初始化时,该变量的默认值是 undefined
1
2
3
var a ;
alert(typeof a); //结果是 undefined
运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的,不同的是 JS 关系运算符中的 ==
和 ===
,一会我们只演示这两个的区别,其他运算符将不做演示
- 一元运算符:++,—
- 算术运算符:+,-,*,/,%
- 赋值运算符:=,+=,-=…
- 关系运算符:>,<,>=,<=,!=,==,===…
- 逻辑运算符:&&,||,!
- 三元运算符:条件表达式 ? true_value : false_value
==和===区别
==:
- 判断类型是否一样,如果不一样,则进行类型转换
- 再去比较其值
===:js 中的全等于
- 判断类型是否一样,如果不一样,直接返回false
- 再去比较其值
验证
1
2
3
4
5
var tmp1 = 18;
var tmp2 = "18";
window.alert(tmp1 == tmp2); //ture
window.alert(tmp1 === tmp2); //false
类型转换
上述讲解 ==
运算符时,发现会进行类型转换,这里就来详细说说JavaScript中的类型转换
其他类型转为number
string 转换为 number 类型:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN
将 string 转换为 number 有两种方式:
- 使用
1
+
正号运算符:
1
2
3
let tmp1 = "18";
window.alert(+tmp1 + 1); //19
- 使用
1
parseInt()
函数:
1
2
3
let tmp1 = "18";
window.alert(parseInt(tmp1) + 1); //19
建议使用 `parseInt()` 函数进行转换。
boolean 转换为 number 类型:true 转为1,false转为0
1
2
3
var flag = +false;
alert(flag); // 0
其他类型转为boolean
- number 类型转换为 boolean 类型:0和NaN转为false,其他的数字转为true
- string 类型转换为 boolean 类型:空字符串转为false,其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
使用场景:
在 Java 中使用字符串前,一般都会先判断字符串不是null,并且不是空字符才会做其他的一些操作,JavaScript也有类型的操作,代码如下:
1 |
|
但是由于 JavaScript 会自动进行类型转换,所以上述的判断可以进行简化,代码如下:
1 |
|
流程控制语句
JavaScript 中提供了和 Java 一样的流程控制语句,如下
- if
- switch
- for
- while
- dowhile
if 语句
1 |
|
switch 语句
1 |
|
for 语句
1 |
|
while 语句
1 |
|
dowhile 语句
1 |
|
函数
函数(就是Java中的方法)是被设计为执行特定任务的代码块;JavaScript 函数通过 function 关键词进行定义。
定义格式
函数定义格式有两种:
方式一:
1
2
3
4
function 函数名(参数列表){
要执行的代码
}方式二:
1
2
3
4
var 函数名 = function(参数列表){
要执行的代码
}
注意:形式参数不需要类型。因为JavaScript是弱类型语言
1 |
|
上述函数的参数 a 和 b 不需要定义数据类型,因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型,可以在函数内部直接使用return返回即可
函数调用
函数调用函数:
1 |
|
举例
1 |
|
JS中,函数调用可以传递任意个数参数
例如 let result = add(1,2,3);
它是将数据 1 传递给了变量a,将数据 2 传递给了变量 b,而数据 3 没有变量接收。
JavaScript常用对象
JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类
- 基本对象
- BOM对象
- DOM对象
这部分我们先学习基本对象,主要学习 Array
数组对象和 String
字符串对象。
Array对象
JavaScript Array对象用于定义数组
定义格式
数组的定义格式有两种:
方式一:
1
2
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据(元素)方式二:
1
2
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据(元素)注意:Java中的数组静态初始化使用的是{}定义,而 JavaScript 中使用的是 [] 定义
元素访问
访问数组中的元素和 Java 语言的一样,格式如下:
1 |
|
代码演示:
1 |
|
特点
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。
例如如下代码:
1 |
|
属性
属性 | 描述 |
---|---|
constructor | 返回创建 Array 对象原型的函数。 |
length | 设置或返回数组中元素的数量。 |
prototype | 允许您向数组添加属性和方法。 |
这里只讲解一下 length
属性,该数组可以动态的获取数组的长度。而有这个属性,我们就可以遍历数组了
1 |
|
方法
Array 对象同样也提供了很多方法
方法 | 描述 |
---|---|
concat() | 连接两个或多个数组,并返回已连接数组的副本。 |
copyWithin() | 将数组中的数组元素复制到指定位置或从指定位置复制。 |
entries() | 返回键/值对数组迭代对象。 |
every() | 检查数组中的每个元素是否通过测试。 |
fill() | 用静态值填充数组中的元素。 |
filter() | 使用数组中通过测试的每个元素创建新数组。 |
find() | 返回数组中第一个通过测试的元素的值。 |
findIndex() | 返回数组中通过测试的第一个元素的索引。 |
forEach() | 为每个数组元素调用函数。 |
from() | 从对象创建数组。 |
includes() | 检查数组是否包含指定的元素。 |
indexOf() | 在数组中搜索元素并返回其位置。 |
isArray() | 检查对象是否为数组。 |
join() | 将数组的所有元素连接成一个字符串。 |
keys() | 返回 Array Iteration 对象,包含原始数组的键. |
lastIndexOf() | 在数组中搜索元素,从末尾开始,并返回其位置。 |
map() | 使用为每个数组元素调用函数的结果创建新数组。 |
pop() | 删除数组的最后一个元素,并返回该元素。 |
push() | 将新元素添加到数组的末尾,并返回新的长度。 |
reduce() | 将数组的值减为单个值(从左到右)。 |
reduceRight() | 将数组的值减为单个值(从右到左)。 |
reverse() | 反转数组中元素的顺序。 |
shift() | 删除数组的第一个元素,并返回该元素。 |
slice() | 选择数组的一部分,并返回新数组。 |
some() | 检查数组中的任何元素是否通过测试。 |
sort() | 对数组的元素进行排序。 |
splice() | 从数组中添加/删除元素。 |
toString() | 将数组转换为字符串,并返回结果。 |
unshift() | 将新元素添加到数组的开头,并返回新的长度。 |
valueOf() | 返回数组的原始值。 |
这里只演示 push
函数和 splice
函数。
push 函数:给数组添加元素,也就是在数组的末尾添加元素
参数表示要添加的元素
1
2
3
4
var arr = [1,2,3];
arr.push(4);
document.write(arr); //1,2,3,4
splice 函数:删除元素
参数1:索引。表示从哪个索引位置删除
参数2:个数。表示删除几个元素
1
2
3
4
5
var arr = [1,2,3];
arr.push(4);
arr.splice(1,2);
document.write(arr); //1,4
String对象
String对象的创建方式有两种
方式1:
1
2
var 变量名 = new String(s);方式二
1
2
var 变量名 = "数组";String对象的与Java中String的方法大多数都一致,这里讲一个常用的方法
1
trim()
,它是用来去掉字符串两端的空格。
用户在输入用户名和密码时,可能会习惯的输入一些空格,这样在我们后端程序中判断用户名和密码是否正确,结果肯定是失败。所以我们一般都会对用户输入的字符串数据进行去除前后空格的操作。
自定义对象
在 JavaScript 中自定义对象特别简单,下面就是自定义对象的格式:
1 |
|
调用属性的格式:
1 |
|
调用函数的格式:
1 |
|
代码演示:
1 |
|
BOM
Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
获取window对象
该对象不需要创建直接使用 window
,其中 window.
可以省略。比如我们之前使用的 alert()
函数,其实就是 window
对象的函数,在调用是可以写成如下两种
- 显式使用
1 | window |
对象调用
1 |
|
隐式调用
1
2
alert("abc");
window对象属性
window
对象提供了用于获取其他 BOM 组成对象的属性
方法 | 描述 |
---|---|
history | 对 History 对象的只读引用。请参数 。History 对象 |
location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
Navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
Screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
也就是说,我们想使用 Location
对象的话,就可以使用 window
对象获取;写成 window.location
,而 window.
可以省略,简化写成 location
来获取 Location
对象。
window对象方法
window
对象提供了很多函数供我们使用,而很多都不常用;下面给列举了一些比较常用的函数
方法 | 描述 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
setTimeout(function,毫秒值)
: 在一定的时间间隔后执行一个function,只执行一次setInterval(function,毫秒值)
:在一定的时间间隔后执行一个function,循环执行
confirm代码演示:
1 |
|
confirm()
函数一般用于防止用户的误操作,当用户想删除一条数据时,需要点击确定,当我们点击 确定
按钮,flag
变量值记录的就是 true
;当我们点击 取消
按钮,flag
变量值记录的就是 false
。
定时器代码演示:
1 |
|
当我们打开浏览器,3秒后才会弹框输出 你好
,并且只会弹出一次。
1 |
|
当我们打开浏览器,每隔1秒都会弹框输出 你好
。
案例
- 需求:每隔1秒,灯泡切换一次状态
代码
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="button" onclick="on()" value="开灯">-->
<img id="myImage" src="https://s2.loli.net/2023/03/15/ZigwbChy1W9P7qH.gif" alt="">
<!--<input type="button" onclick="off()" value="关灯">-->
<script>
function on(){
document.getElementById("myImage").src="https://s2.loli.net/2023/03/15/RmyvTZrGcYEHj1i.gif";
}
function off(){
document.getElementById("myImage").src="https://s2.loli.net/2022/08/15/ZigwbChy1W9P7qH.gif";
}
let tmp = 0;
setInterval(function () {
if (tmp % 2 == 0) {
on();
}else {
off();
}
tmp++;
}, 1000);
</script>
History对象
History 对象是 JavaScript 对历史记录进行封装的对象。
History 对象的获取
使用 window.history获取,其中window. 可以省略
History 对象的函数
方法 | 描述 |
---|---|
back() | 加载history 列表中的前一个URL。 |
forward() | 加载history 列表中的下一个URL。 |
当我们点击浏览器的向左箭头,就跳转到前一个访问的页面,这就是 back()
函数的作用;当我们点击向右的箭头,就跳转到下一个访问的页面,这就是 forward()
函数的作用。
Location对象
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象,跳转到任意页面。
获取Location对象
使用 window.location获取,其中window. 可以省略
1 |
|
Location对象属性
Location对象提供了很对属性。以后常用的只有一个属性 href
属性 | 描述 |
---|---|
href | 设置或返回完整的URL。 |
代码演示
1 |
|
在浏览器首先会弹框显示 要跳转了
,当我们点击了 确定
就会跳转到 百度 的首页。
案例
需求:3秒跳转到百度首页
分析:
3秒跳转,由此可以确定需要使用到定时器,而只跳转一次,所以使用
setTimeOut()
要进行页面跳转,所以需要用到
1
location
对象的
1
href
属性实现
1
2
3
4
5
document.write("三秒后跳转至主页...");
setTimeout(function (){
location.href = "https://www.baidu.com";
},3000);
DOM
概述
DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
作用:
JavaScript 通过 DOM, 就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
DOM相关概念:
DOM 是 W3C(万维网联盟)定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分:
核心 DOM:针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
XML DOM: 针对 XML 文档的标准模型
HTML DOM: 针对 HTML 文档的标准模型
该标准是在核心 DOM 基础上,对 HTML 中的每个标签都封装成了不同的对象
- 例如:
<img>
标签在浏览器加载到内存中时会被封装成Image
对象,同时该对象也是Element
对象。 - 例如:
<input type='button'>
标签在浏览器加载到内存中时会被封装成Button
对象,同时该对象也是Element
对象。
- 例如:
获取 Element对象
HTML 中的 Element 对象可以通过 Document
对象获取,而 Document
对象是通过 window
对象获取。
Document
对象中提供了以下获取 Element
元素对象的函数
getElementById()
:根据id属性值获取,返回单个Element对象getElementsByTagName()
:根据标签名称获取,返回Element对象数组getElementsByName()
:根据name属性值获取,返回Element对象数组getElementsByClassName()
:根据class属性值获取,返回Element对象数组
HTML Element对象使用
HTML 中的 Element
元素对象有很多,不可能全部记住,以后是根据具体的需求查阅文档使用。
例如上面的开关灯泡,就是根据id属性值获取了Image对象,然后修改Image对象的src属性,从而达到切换图片,实现灯泡开关的效果
1 |
|
事件监听
要想知道什么是事件监听,首先先聊聊什么是事件?
HTML 事件是发生在 HTML 元素上的“事情”。比如:页面上的 按钮被点击
、鼠标移动到元素之上
、按下键盘按键
等都是事件。
事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。之前的开关灯操作,当我们点击 开灯
按钮,就需要通过 js 代码实现替换图片
又例如当我们在注册一些网站时,我们输入用户名之后, 光标离开
输入框,就是通过 js 代码对输入的内容进行校验,没通过校验就在输入框后提示 用户名格式有误!
事件绑定
JavaScript 提供了两种事件绑定方式:
方式一:通过 HTML标签中的事件属性进行绑定
如下面代码,有一个按钮元素,我们是在该标签上定义
1 | 事件属性 |
,在事件属性中绑定函数。
1 | onclick |
就是
1 | 单击事件 |
的事件属性。
1 | onclick='on()' |
表示该点击事件绑定了一个名为
1 | on() |
的函数
1 |
|
下面是点击事件绑定的
1 | on() |
函数
1 |
|
方式二:通过 DOM 元素属性绑定
如下面代码是按钮标签,在该标签上我们并没有使用
事件属性
,绑定事件的操作需要在 js 代码中实现1
2HTML
<input type="button" id="btn">下面 js 代码是获取了
id='btn'
的元素对象,然后将onclick
作为该对象的属性,并且绑定匿名函数。该函数是在事件触发后自动执行1
2
3
4
document.getElementById("btn").onclick = function (){
Salert("我被点了");
}
常见事件
事件属性名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
表单验证案例
需求
对表单进行校验,如果输入的用户名、密码、手机号符合规则,则允许提交;如果不符合规则,则不允许提交。
完成以下需求:
- 当输入框失去焦点时,验证输入内容是否符合要求
- 当点击注册按钮时,判断所有输入框的内容是否都符合要求,如果不合符则阻止表单提交
用户名 | |
---|---|
密码 | |
手机号 |
环境准备
先创建一个表单
1 |
|
验证输入框
校验用户名。当用户名输入框失去焦点时,判断输入的内容是否符合
长度是 6-12 位
规则,不符合使id='username_err'
的span标签显示出来,给出用户提示。校验密码。当密码输入框失去焦点时,判断输入的内容是否符合
长度是 6-12 位
规则,不符合使id='password_err'
的span标签显示出来,给出用户提示。校验手机号。当手机号输入框失去焦点时,判断输入的内容是否符合
长度是 11 位
规则,不符合使id='phone_err'
的span标签显示出来,给出用户提示。代码如下
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
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
let usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点检查用户名输入
usernameInput.onblur = checkUsername;
function checkUsername() {
//1.3 获取用户输入的用户名
let username = usernameInput.value.trim();
//1.4 判断用户名是否符合规则:长度 6~12
let flag = username.length >= 6 && username.length <= 12;
if (flag) {
//符合条件就把错误信息隐藏
document.getElementById("username_err").style.display = 'none';
} else {
//不符合条件就展示错误信息
document.getElementById("username_err").style.display = '';
}
return flag;
}
//验证密码与手机号也是异曲同工
let passwordInput = document.getElementById("password");
passwordInput.onblur = checkPassword;
function checkPassword() {
let password = passwordInput.value.trim();
let flag = password.length >= 6 && password.length <= 12;
if (flag) {
document.getElementById("password_err").style.display = 'none';
} else {
document.getElementById("password_err").style.display = '';
}
return flag;
}
let phoneInput = document.getElementById("phone");
phoneInput.onblur = checkPhone;
function checkPhone() {
let phone = phoneInput.value.trim();
let flag = phone.length === 11;
if (flag) {
document.getElementById("phone_err").style.display = 'none';
} else {
document.getElementById("phone_err").style.display = '';
}
return flag;
}
let regForm = document.getElementById("reg_form");
//onsubmit 事件绑定的函数需要对输入的 `用户名`、`密码`、`手机号` 进行校验
regForm.onsubmit = checkAll;
function checkAll() {
//只有当符合所有检查条件的时候,才返回true,正常提交
return checkUsername() && checkPassword() && checkPhone();
}
RegExp对象
RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。
我们可以通过爬虫技术去爬取该页面源代码,然后获取页面中所有的邮箱,后期我们可以给这些邮箱地址发送推广的邮件。那么问题来了,如何才能知道页面内容中哪些事邮箱地址呢?这里就可以使用正则表达式来匹配邮箱。
在 js 中对正则表达式封装的对象就是正则对象。
正则对象使用
创建对象
正则对象有两种创建方式:
直接量方式:注意不要加引号
1
2
var reg = /正则表达式/;创建 RegExp 对象
1
2
var reg = new RegExp("正则表达式");
函数
test(str)
:判断指定字符串是否符合规则,返回 true或 false
正则表达式
从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式,那么什么是正则表达式呢?
正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则,如果符合返回true,如果不符合返回false。
正则表达式是和语言无关的。很多语言都支持正则表达式,Java语言也支持,只不过正则表达式在不同的语言中的使用方式不同,js 中需要使用正则对象来使用正则表达式。
正则表达式常用的规则如下:
- ^:表示开始
- $:表示结束
- [ ]:代表某个范围内的单个字符,比如: [0-9] 单个数字字符
- .:代表任意单个字符,除了换行和行结束符
- \w:代表单词字符:字母、数字、下划线(),相当于 [A-Za-z0-9]
- \d:代表数字字符: 相当于 [0-9]
量词:
- +:至少一个
- *:零个或多个
- ?:零个或一个
- {x}:x个
- {m,}:至少m个
- {m,n}:至少m个,最多n个
改进表单校验案例
表单校验案例中的规则是我们进行一系列的判断来实现的,现在学习了正则对象后,就可以使用正则对象来改进这个案例。
1 |
|