java_web_1

于 2019-03-27 09:45:14 发布
阅读量2.9k 收藏 11
点赞数 8
CC 4.0 BY-SA版权
分类专栏： java提高 文章标签： elasticsearch kafka 打新债
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wjl31802/article/details/88837052
本文详细介绍了Java核心技术，包括单元测试、反射、内省等基础知识的加强，MySQL数据库操作，前端技术如HTML、CSS、JavaScript及Bootstrap的使用，XML处理，以及JDBC数据库连接等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

主要内容：基础加强部分：单元测试、注解、反射、内省；mysql；前端三件套和bootstrap；xml

文章目录

学习目标

1. 数据库

  • 能够理解数据库的概念
  • 能够安装MySQL数据库。掌握启动,关闭及登录MySQL的方式
  • 能够使用SQL语句创建数据库
  • 能够使用SQL语句操作表结构（创建表、修改表、删除表）
  • 能够使用SQL语句进行数据的添加、修改和删除的操作
  • 能够使用SQL语句简单查询并使用模糊查询进行条件查询
  • 掌握使用SQL语句的order by关键字进行排序的方式
  • 能够使用常见的聚合函数
  • 能够使用SQL语句的group by关键字进行分组查询
  • 掌握MySQL数据库中limit关键字进行分页的用法
  • 能够描述主键、外键、唯一、非空约束的作用
  • 能够说出多表之间的关系及其建表原则

2. SQL

  • 能够描述主键、外键、唯一、非空约束的作用
  • 能够说出多表之间的关系及其建表原则
  • 能够使用内连接进行多表查询
  • 能够使用左外连接和右外连接进行多表查询
  • 能够使用子查询进行多表查询
  • 能够说出事务的概念和作用

3. jdbc

  • 能够说出JDBC的概念和作用
  • 掌握JDBC的编写流程，熟悉相关API（DriverManager、Connection、Statement、ResultSet）
  • 能够说出SQL注入原因和解决方案
  • 能够通过JDBC（使用PreparedStatement）完成增、删、改、查
  • 能够封装JDBC工具类完成代码抽取
  • 能够使用JDBC完成MySQL数据库的事务管理
  • 能够描述连接池的原理和优点
  • 能够说出C3P0连接池使用的流程
  • 明白C3P0连接池的配置文件中的参数的作用
  • 能够使用JdbcTemplate完成数据库的增删改查

4. HTML、CSS

  • 能够使用h1~h6、hr、p、br 等与文本有关的标签
  • 能够使用有序列表ul-li和无序列表ol-li显示列表内容
  • 能够使用图片img标签把图片显示在页面中
  • 能够使用超链接a标签跳转到一个新页面
  • 能够使用table、tr、td标签定义表格
  • 能说出表单的作用
  • 能够使用表单form标签创建表单容器
  • 能够使用表单中常用的input标签创建输入项
  • 能够使用表单select标签定义下拉选择输入项
  • 能够使用CSS的基本选择器选择元素
  • 能够使用CSS的扩展选择器选择元素

5. JavaScript

  • 能够完成JS的变量定义
  • 能够使用JS中常用的运算符
  • 能够使用JS中的流程控制语句
  • 能够在JS中定义命名函数和匿名函数
  • 能够使用常见JS对象的常用方法
  • 掌握window对象三种弹窗的方式
  • 能够使用location对象完成页面跳转
  • 能够使用DOM元素的innerHTML属性对其内容进行修改
  • 能够说出HTML加载进内存的DOM树的基本结构
  • 能够说出JS中的事件的基本机制
  • 能够给页面中的元素设置常用事件
  • 能够理解bootstrap的响应式布局的特点
  • 能够理解bootstrap的栅格系统

6. xml

  • 能够说出XML的作用
  • 能够说出有哪些XML约束技术
  • 能够说出解析XML文档DOM方式原理
  • 能够使用dom4j解析XML文档
  • 能够使用xpath解析XML文档

day01 基础加强

1. Junit单元测试

测试分类

  1. 黑盒测试：不需要写代码，给输入值，看程序是否能够输出期望的值
  2. 白盒测试：需要写代码，关注程序具体的执行流程

测试使用

使用步骤

定义测试类–> 定义测试方法–>给方法加@Test–> 导入junit依赖环境

判定结果：

红色–>失败; 绿色–>成功

一般用断言操作来处理结果

  • Assert.assertEquals(期望的结果，实际结果)
补充
  • @Before 修饰的方法会在测试方法之前被自动执行
  • @After 修饰的方法会在测试方法之后被自动执行

2. 反射

框架设计的灵魂

概念：

框架：半成品软件。可以在框架的基础上进行软件开发，简化代码
将不变的封装起来，变化的留给使用者，如xml、yml等配置

反射： 将类的各个组成部分封装为其他对象，这就是反射机制

好处

  1. 可以在程序运行过程中，操作这些对象
  2. 可以解耦，提高程序的可扩展性

获取class对象的方式

  1. Class.forName("全类名")： 将字节码文件加载进内存，返回class对象
    • 多用于配置文件，将类名定义在配置文件中，读取文件，加载类
  2. 类名.class 通过类名的属性class获取
    • 多用于参数的传递
  3. 对象.getClass()： getClass()方法在Object类中定义
    • 多用于对象的获取字节码的方式

结论：同一个字节码文件(*.class)在一次程序运行过程中，只会被加载一次

class对象的功能

获取功能
  1. 获取成员变量们
    • Field[] getFields() ：获取所有public修饰的成员变量
    • Field getField(String name) 获取指定名称的 public修饰的成员变量
    • Field[] getDeclaredFields() 获取所有的成员变量，不考虑修饰符
    • Field getDeclaredField(String name)
  2. 获取构造方法们
    • Constructor<?>[] getConstructors()
    • Constructor<T> getConstructor(类<?>... parameterTypes)
    • Constructor<T> getDeclaredConstructor(类<?>... parameterTypes)
    • Constructor<?>[] getDeclaredConstructors()
  3. 获取成员方法们
    • Method[] getMethods()
    • Method getMethod(String name, 类<?>... parameterTypes)
    • Method[] getDeclaredMethods()
    • Method getDeclaredMethod(String name, 类<?>... parameterTypes)
  4. 获取全类名
    • String getName()
Field：成员变量
  • 设置值 void set(Object obj, Object value)
  • 获取值 get(Object obj)
  • 忽略访问权限修饰符的安全检查 setAccessible(true)暴力反射
Constructor:构造方法
  • 创建对象： T newInstance(Object... initargs)
  • 如果使用空参数构造方法创建对象，操作可以简化：Class对象的newInstance方法
Method：方法对象
  • 执行方法 Object invoke(Object obj, Object... args)
  • 获取方法名 String getName

3. 内省

内省(IntroSpector) 是java语言对Bean类属性、事件的一种默认处理方法。JavaBean是一种特殊的类，主要用于传递数据信息，这种类中的方法主要用于访问私有的字段，且方法名符合某种命名规则。如果在两个模块之间传递信息，可以将信息封装进JavaBean中，这种对象称为"值对象"(Value Object 或VO)。内省机制通过反射来实现的，BeanInfo用来暴露一个bean的属性、方法和事件。

2. 内省操作步骤

前提：内省对javaBean类操作的一门技术，通过反射机制来完成。

实现步骤：

  1. 得到javabean的信息类对象。 BeanInfo
  2. 通过BeanInfo信息类获取JavaBean的属性名称和对应的set(写入方法)和get(读取方法)
package cn.itheima.introspetor;

import java.beans.IntrospectionException;
import java.beans.Introspector;
import java.beans.PropertyDescriptor;
import java.lang.reflect.Method;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;

public class MyBeanUtils {

    //1.提供一个方法：map ,javaBean
    // 2.原则：map的key  和 javaBean的属性名称一一比较，如果一致，调用写方法,设置值到bean
    public static void pop(Map<String,String[]> map,Object obj) throws Exception {
        //1.获取map的keys
        Set<String> keys = map.keySet();
        //2.获取bean的属性名称的结合
        PropertyDescriptor[] ds = Introspector.getBeanInfo(obj.getClass()).getPropertyDescriptors();
        //3.遍历key和属性名称一一比较
        for (String  key : keys) {

            for (PropertyDescriptor d : ds) {
                String field_name = d.getName();
                if(field_name.equals(key)){
                    //说明key和属性名称一致，设置值（写方法）
                    Method writeMethod = d.getWriteMethod();
                    //设置值
                    writeMethod.invoke(obj,map.get(key)[0]);// new User().setxxx(value)
                }
            }

        }

    }

    public static void main(String[] args) throws Exception {
        //1.map模拟表单提交的数据
        Map<String,String[]> map = new HashMap<String,String[]>();
        map.put("id",new String[]{"001"});
        map.put("username",new String[]{"jack"});
        User user = new User();
        pop(map,user);
        System.out.println(user);

    }
}

3. 内省在开发中的实际用途

前提：map的key(表单提交的输入项：name=“username”)和javabean的属性名称一致。表中的字段名称和javabean的属性名称一致。

如 BeanUtils工具类：把map中的数据封装到javabean对象

JDBCTemplate模板类：把表中的记录封装到javabean对象

mybatis:操作数据库

4. 注解

概念：

说明程序的。给计算机看的 注解不是程序的一部分，可以理解为注解就是一个标签

定义：注解（Annotation），也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性，与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面，用来对这些元素进行说明，注释。

概念描述

JDK1.5之后的新特性；

说明程序的；

使用注解：@注解名称

作用分类：

①编写文档：通过代码里标识的注解生成文档【生成文档doc文档】

​ @author itcast 作者是itcast

​ @version 1.0 版本是1.0

​ @since 1.5 从1.5之后可以使用可以使用我这个类

②代码分析：通过代码里标识的注解对代码进行分析【使用反射】
③编译检查：通过代码里标识的注解让编译器能够实现基本的编译检查【Override】

JDK中预定义的一些注解

@Override ：检测被该注解标注的方法是否是继承自父类(接口)的

@Deprecated：该注解标注的内容，表示已过时

@SuppressWarnings：压制警告

一般传递参数all @SuppressWarnings(“all”)

自定义注解

格式：
元注解
public @interface 注解名称{
		属性列表;
}

本质：注解本质上就是一个接口，该接口默认继承Annotation接口

public interface MyAnno extends java.lang.annotation.Annotation {}

属性：

接口中的抽象方法

要求：

  1. 属性的返回值类型有下列取值
    • 基本数据类型
    • String
    • 枚举
    • 注解
    • 以上类型的数组
  2. 定义了属性，在使用时需要给属性赋值
    1. 如果定义属性时，使用default关键字给属性默认初始化值，则使用注解时，可以不进行属性的赋值。
    2. 如果只有一个属性需要赋值，并且属性的名称是value，则value可以省略，直接定义值即可
    3. 数组赋值时，值使用{}包裹。如果数组中只有一个值，则{}可以省略

元注解

用于描述注解的注解

@Target：描述注解能够作用的位置

  • ElementType取值：TYPE：可以作用于类上;METHOD：可以作用于方法上；FIELD：可以作用于成员变量

@Retention：描述注解被保留的阶段

  • @Retention(RetentionPolicy.RUNTIME)：当前被描述的注解，会保留到class字节码文件中，并被JVM读取到
  • RetentionPolicy.SOURCE：注解只保留在源文件，当Java文件编译成class文件的时候，注解被遗弃
  • RetentionPolicy.CLASS：注解被保留到class文件，但jvm加载class文件时候被遗弃
  • RetentionPolicy.RUNTIME：注解不仅被保存到class文件中，jvm加载class文件之后，仍然存在

@Documented：描述注解是否被抽取到api文档中

@Inherited：描述注解是否被子类继承[inherteide]

在程序使用(解析)注解：

获取注解中定义的属性值

  1. 获取注解定义的位置的对象 （Class，Method,Field）

  2. 获取指定的注解

    getAnnotation(Class)
//其实就是在内存中生成了一个该注解接口的子类实现对象
public class ProImpl implements Pro{
	  public String className(){
	         return "cn.itcast.annotation.Demo1";
	  }
	  public String methodName(){
	         return "show";
	  }
 }

  3. 调用注解中的抽象方法获取配置的属性值

4. 类加载器

分类
  1. 应用类加载器（可以理解为项目中类的加载器，就是自己获取的）
  2. 扩展类加载器
  3. 系统类加载器（最高级别的类加载器）
功能：
  1. 加载项目的class文件（把class文件加载到虚拟机去运行）
  2. 加载项目中的配置文件
类加载器加载java文件和配置文件：

不管是什么文件，必须放在src目录下面

因为类加载器和src的根目录是同级的，所以在根目录下的文件，直接写文件的名称就能找到

day02-04 数据库

数据库的基本概念

1. 数据库的英文单词

DataBase 简称：DB

2.什么是数据库？

用于存储和管理数据的仓库

数据库专业描述：RDBMS(关系型数据库管理系统)，通俗的来说就是一个文件系统

3. 数据库的特点：

  1. 持久化存储数据的，其实数据库就是一个文件系统
  2. 方便操作数据
  3. 使用了统一的方式操作数据库 – SQL

4. 常见的数据库

  • mysql 开源免费的小型数据库，6以后开始收费
  • Oracle: 收费的大型数据库
  • DB2: IBM 的产品，收费，常见于银行系统
  • SQL Server： 微软的收费的中型数据库
  • SQLite:嵌入式的小型数据库，用于手机端

MySQL数据库软件

  • 搭建集群

1. 安装和卸载

2. 启动和关闭

mysql的服务启动和关闭

服务： service，没有界面的应用程序

方式：

  • 我的电脑-管理-服务
  • cmd - services.msc
  • 使用管理员打开cmd – net start mysql 启动 net stop mysql 关闭

3. mysql使用常见的问题

  • 原因：没有启动mysql
    • can’t connect to mysql@localhost: 不能连接本地安装的mysql
  • 原因：密码错误
    • Access denied for user ‘root’@‘localhost’ (using password: YES)

4. mysql的登录和退出

    1. mysql -uroot -proot
    2. mysql -h127.0.0.1 -uroot -p连接目标的密码
    3. mysql --host=127.0.0.1 --user=root --password=root

5. mysql目录结构

安装目录
  • my.ini 配置文件
mysql数据目录

几个概念

数据库服务器和数据库和表、数据的依附关系
  • 首先，创建一个数据库服务器（在电脑上安装一个数据库软件）
  • 其次，在数据库服务器里面创建数据库（可以创建多个数据库）
  • 再次，在数据库里面，创建表
  • 最后，在表里面存放数据（一个表里面，可以多条数据）

SQL

1. 结构化查询语言

Structured Query Language

其实就是定义了操作所有关系型数据库的规则。每一种数据库操作的方式存在不一样的地方，称为“方言”。

2. SQL通用语法

  1. SQL语句可以单行或多行书写，以分号结尾

  2. 可使用空格和缩进增强语句的可读性

  3. mysql数据库的SQL语句不区分大小写，关键字建议大写

  4. 3种注释 * 单行注释：-- 注释内容 或 # 注释内容

    ​ * 多行注释： /* 注释 */

3. SQL分类

  • DDL(Data Definition Language) 对数据库和表的操作

    用来定义数据库对象：数据库，表列等。关键字：create，drop，alter等

  • DCL(Data Control Language) 授权

  • DML(Data Manipulation Language) 增删改表中的数据

    用来对数据库中表的数据进行增删改 关键字 insert delete update等

  • DQL(Data Query Language) 查询表中的数据

    用来查询数据库中表的记录（数据） 关键字： select where等

4. DDL 操作数据库和表

重要的SQL：查询数据库所有的字符集(分析数据库插入中文乱码)

show variables like ‘%char%’;

dos 默认 windows的为gbk

如果乱码，临时设置 set names gbk;

  • 操作数据库：CRUD

    • C(Create) 创建
      • create database if not exists 数据库名 [character set 字符集名];
    • R(Retrieve) 查询
      • show databases;
    • U(Update) 修改
      • alter database 数据库名称 character set 字符集名称
    • D(Delete) 删除
      • 删除数据库 drop database 数据库名称;
    • 使用数据库
      • 查询当前正在使用的数据库名称 select database();
      • 使用数据库 use 数据库名称

  • 操作表

    • C(Create) 创建

      • create table 表名(
	列名1 数据类型1;
	列名2 数据类型2;
	...
	列名n 数据类型n
);

注意：最后一列，不需要加逗号

      • 数据类型：

        • 整数类型 int age int
        • 小数类型 score double(5,2)
        • date 日期 只包含年月日 yyyy-MM-dd
        • datetime 日期，包含年月日时分秒 yyyy-MM-dd HH:mm:ss
        • timestamp: 时间戳类型 包含年月日时分秒 yyyy-MM-dd HH:mm:ss
          • 如果将来不给这个字段赋值，或赋值为null默认使用当前系统时间
        • varchar 字符串 name varchar(20)

      • 复制表 create table stu like student

    • R(Retrieve) 查询

      • 查询某个数据库中所有的表名称 show tables;

      • 查询表结构 desc 表名;

        表结构：字段名称(表的列名) 和 字段对象的类型

      • 查看创建表的SQL语句 show create table xxx \G 其中\G使得记录能够更好展示

    • U(Update) 修改

      • 修改表名 alter table 表名 rename to 新的表名;
      • 修改表的字符集 alter table 表名 character set 字符集名
        • 查看字符集是否修改 show create table stu2;
      • 修改表的字段名称 alter table 表名 change 字段名称 新的字段名称 字段的类型
        • 只修改类型 alter table 表名 modify 字段名称 新的字段类型
      • 添加新的字段名称 alter table 表名 add 新的字段名称 字段类型
      • 删除表中的字段 alter table 表名 drop 字段名称

change和modify都可以修改表的定义，不同是change后面写两次列名。但change可以改列名称，modify不能。

  • D(Delete) 删除

    • drop table if exists 表名;

5. DML增删改表中的数据

  • 添加数据
    • insert into 表名(列1,列2,...列名n) values(值1,值2,..值n);
    • 注意：
      • 列名和值要一一对应
      • 如果列名省略，默认给所有列添加值 insert into 表名 values();
      • 除了数字类型外，其他类型都要加引号(单双都行)
  • 删除数据
    • delete from 表名 [where 条件];
    • 注意：
      • 如果不加条件，删除表中所有数据
      • truncate table 表名; – 删除表，然后创建一个一模一样的空表
  • 修改数据
    • update 表名 set 列名1 = 值1, 列名2 = 值2,… [where 条件];
    • 注意：
      • 如果不加任何条件，会修改表中所有记录

truncate和delete的区别？

从分类上来说：

​ delete 操作的表中的数据 属于DML（更新数据）

​ truncate 操作的表，属于DDL

从性能来说：

​ delete from user; 删除所有的数据（一条一条删，耗时长）

​ truncate：先删除表（表里的数据就不存在），会再次创建一个新的空表

6. DQL 查询表中数据

select * from 表名;

基础查询
  • select 
	字段列表
from 
	表名列表
where 
	条件列表
group by
	分组字段
having
	分组之后的条件
order by
	排序
limit
	分页限定

  • 基础

    • 多个字段的查询​
    • 去除重复 select distinct deptno from emp;
    • 计算列
    • 起别名
条件查询
排序查询

语法： order by 子句

升序： ASC

降序： DESC

注意： 如果有多个排序条件，则当前边的条件值一样时，才会判断第二条件

聚合函数

将一列数据作为一个整体，进行纵向计算

注意： count()计算，排除null值，解决方案：1. 选择非空的列 2. ifnull()函数

分组查询

  1. 语法： group by 分组字段 – 分组字段（数据要有共性的特点）

    select 分组字段，聚合函数 -- 共性特点
from 表名
where 条件（分组前的条件，如果数据不符合条件，就不参与分组）
group by 分组字段
having 条件（分组后的条件，对分组后的结果进行条件判断）
order by 排序;

    ​

  2. 注意：

  3. 分组之后查询的字段：分组字段，聚合函数

  4. where和having的区别？

    1. where在聚合前对记录进行过滤，如果不满足条件则不参与聚合，having在分组之后限定，不满足结果不会被查询出来
    2. where后不可以跟聚合函数，having可以进行聚合函数的判断
    3. 尽可能where先过滤记录，结果集少了，聚合效率会提高很多。
分页查询
  1. 语法： limit 开始的索引，每页查询的条数; 默认开始索引为0，只写查询条数即可。如果从第二条开始的3条记录，limit 1,3
  2. 公式： 开始的索引 = (当前的页码-1) * 每页显示的条数;
  3. limit 是mysql的方言，扩展SQL92后的语法，并不通用。

7. 约束

  1. 概念： 对表中的数据进行限定，保证数据的正确性、有效性和完整性
  2. 分类：
    1. 主键约束：primary key 数据即是唯一的又是非空的
    2. 非空约束 not null
    3. 唯一约束 unique
    4. 外键约束 foreign key
非空约束

not null 某一列的值不能为null

创建表时添加约束

create table stu(
	id int,
	name varchar(20) not null
	);

创建表之后添加约束

alter table stu modify name varchar(20) not null;
唯一约束

unique，同非空约束

创建表后删除

alter table stu drop index phone_number;
主键约束

primary key

  1. 注意：

    1. 含义：非空且唯一
    2. 一张表只能有一个主键
    3. 主键就是表中记录的唯一标识

  2. 在创建表时，添加主键约束

    create table stu(
	id int primary key, -- 给id添加主键约束
	name varchar(20)
);

  3. 自动增长

    1. 概念：如果某一列是数值类型，使用auto_increment 可以来完成自动增长

    2. 在创建表时，添加主键约束，并且完成自增长

      create table stu(
	id int primary key auto_increment, 
	name varchar(20)
);

      ​

注意：在一个表中，只允许主键自增长

外键约束

不是自己随意定义的，而是与之关联表的主键

外键约束：让表与表产生关系，保证数据的正确性。

  1. 在创建表时，可以添加外键

    create table 表名(
	...
	外键列,
	constraint 外键名 foreign key (外键列) references 主表名(关联列名)
);

  2. 删除外键

    alter table employee drop foreign key emp_dep_fk;

  3. 添加外键

    alter table employee add constraint 外键名 foreign key (外键列) references 主表名(关联列名);

  4. 级联操作 谨慎使用

    alter table employee add constraint 外键名 foreign key (外键列) references 主表名(关联列名) on update cascade on delete cascade;

    ​

实际，用powerDesigner设计表，不用这些SQL语法

8. 数据库的设计

多表之间的关系
  1. 一对一(了解)
    • 如 人和身份证，很少见，一般合并一张表
    • 实现方式：可以再任意一方添加唯一外键指向另一方主键。
  2. 一对多(多对一)
    • 如 部门和员工
    • 实现方式：在多的一方建立外键，指向一的一方的主键
  3. 多对多
    • 如 学生和课程
    • 实现方式：需要借助第三张中间表，中间表至少包含两个字段，这两个字段是联合主键，作为第三张表的外键，分别指向两张表的主键。
外键的特点

  1. 可以为null(这条数据没有意义)

  2. 外键的值可以重复

  3. 外键的值不是随意定义的，必须引用另一张表的主键值

    结论： 设计外键时，外键是普通的字段，另一张表的字段必须是主键

数据库的设计范式

E-R模型

  • 当前物理的数据库都是按照E-R模型进行设计的
  • E表示entry，实体
  • R表示relationship，关系
  • 一个实体转换为数据库中的一个表
  • 关系描述两个实体之间的对应规则，包括
    • 一对一
    • 一对多
    • 多对多
  • 关系转换为数据库表中的一个列 *在关系型数据库中一行就是一个对象

经过研究和对使用中问题的总结，对于设计数据库提出了一些规范，这些规范被称为范式

  • 第一范式（1NF)：列不可拆分
  • 第二范式（2NF)：唯一标识
  • 第三范式（3NF)：引用主键

说明：后一个范式，都是在前一个范式的基础上建立的

2. 数据库设计的范式
	* 概念：设计数据库时，需要遵循的一些规范。要遵循后边的范式要求，必须先遵循前边的所有范式要求

		设计关系数据库时，遵从不同的规范要求，设计出合理的关系型数据库，这些不同的规范要求被称为不同的范式，各种范式呈递次规范，越高的范式数据库冗余越小。
		目前关系数据库有六种范式：第一范式（1NF）、第二范式（2NF）、第三范式（3NF）、巴斯-科德范式（BCNF）、第四范式(4NF）和第五范式（5NF，又称完美范式）。

	* 分类：
		1. 第一范式（1NF）：每一列都是不可分割的原子数据项
		2. 第二范式（2NF）：在1NF的基础上，非码属性必须完全依赖于码（在1NF基础上消除非主属性对主码的部分函数依赖）
			* 几个概念：
				1. 函数依赖：A-->B,如果通过A属性(属性组)的值，可以确定唯一B属性的值。则称B依赖于A（sfz）
					例如：学号-->姓名。  （学号，课程名称） --> 分数
				2. 完全函数依赖：A-->B， 如果A是一个属性组，则B属性值得确定需要依赖于A属性组中所有的属性值。（zb）
					例如：（学号，课程名称） --> 分数
				3. 部分函数依赖：A-->B， 如果A是一个属性组，则B属性值得确定只需要依赖于A属性组中某一些值即可。
					例如：（学号，课程名称） -- > 姓名
				4. 传递函数依赖：A-->B, B -- >C . 如果通过A属性(属性组)的值，可以确定唯一B属性的值，在通过B属性（属性组）的值可以确定唯一C属性的值，则称 C 传递函数依赖于A
					例如：学号-->系名，系名-->系主任
				5. 码：如果在一张表中，一个属性或属性组，被其他所有属性所完全依赖，则称这个属性(属性组)为该表的码
					例如：该表中码为：（学号，课程名称）
					* 主属性：码属性组中的所有属性
					* 非主属性：除过码属性组的属性
					
		3. 第三范式（3NF）：在2NF基础上，任何非主属性不依赖于其它非主属性（在2NF基础上消除传递依赖）

9. DCL语句

主要是DBA管理系统中的对象权限

-- 创建用户nacos，有对nacos_config数据库下的表的select/insert权限
grant select,insert on nacos_config.* to 'nacos'@'localhost' identified by '123'; 

-- 收回nacos用户的insert权限
revoke insert on nacos_config.* from 'nacos'@'localhost';

10. 数据库的备份和还原

  1. 命令行

    1. 备份：

      mysqldump -u用户名 -p明码 > 保存的路径

    2. 还原

      mysql进入之后，在创建好的数据库中 source 保存的路径

  2. 图形化界面操作 SQLYog

多表查询

笛卡尔积：有两个集合A,B，取这两个集合的所有组成情况

要完成多表查询，需要消除无用的数据

  • 查询语法

    select 
	列名列表
from 
	表名列表
where ...

  1. 内连接查询 只包括交集

    1. 隐式内连接

      SELECT
	t1.`name`, -- 员工表的姓名
	t1.`gender`, -- 员工表的性别
	t2.`name` -- 部门表的名称
FROM
	emp t1,dept t2
WHERE
	t1.`dept_id`=t2.`id`;

      ​

    2. 显式内连接

      select 字段列表 from 表名1 inner join 表名2 on 条件

    3. 内连接查询：

      1. 从哪些表中查询数据
      2. 条件是什么
      3. 查询哪些字段

  2. 外链接查询

    1. 左外连接 一般用左外，包括左外和交集

      select 字段列表 from 表1 left join 表2 on 条件

      左外连接查询的是左表所有数据以及其交集部分

    2. 右外连接

      select 字段列表 from 表1 right join 表2 on 条件

      ​

  3. 子查询

    • 概念：查询中嵌套查询，称嵌套查询为子查询，在4.1zhi

      -- 查询工资最高的员工信息
SELECT MAX(salary) FROM emp;
-- 查询员工信息，工资等于9000
SELECT * FROM emp WHERE emp.`salary`=9000;
-- 合并为一条
SELECT * FROM emp WHERE emp.`salary`=(SELECT MAX(salary) FROM emp);

    • 子查询的不同情况

      1. 子查询的结果是单行单列的值

        • 子查询可以作为条件，放在where后边，使用运算符去判断

          -- 查询员工工资小于平均工资的人
SELECT * FROM emp WHERE emp.`salary`< (SELECT AVG(salary) FROM emp);

          ​

      2. 子查询的结果是多行单列的数组

        • 子查询可以作为条件，放在where后边，使用运算符in来判断
        -- 查询所有财务部和市场部员工的信息
SELECT id FROM dept WHERE NAME = '财务部' OR NAME='市场部';
SELECT * FROM emp WHERE dept_id = 3 OR dept_id=2;
-- 子查询
SELECT * FROM emp WHERE dept_id IN (SELECT id FROM dept WHERE NAME = '财务部' OR NAME='市场部');

        ​

      3. 子查询的结果是多行多列的子表

        • 子查询可以作为一张虚拟表参与查询，放在from后边

          -- 查询员工的入职日期是2011-11-11日之后的员工信息和部门信息
-- 子查询
SELECT * FROM dept t1,(SELECT * FROM emp WHERE emp.`join_date` >'2011-11-11') t2
WHERE t1.id = t2.dept_id;
-- 普通内连接
SELECT * FROM emp t1,dept t2 WHERE t1.`dept_id`=t2.`id` AND t1.`join_date`>'2011-11-11';

          ​

事务

  1. 事务的基本介绍
    1. 概念：
      • 如果一个包含多个步骤的业务操作，被事务管理，那么这些操作要么同时成功，要么同时失败
    2. 操作：
      1. 开启事务 start transaction
      2. 回滚 rollback
      3. 提交 commit
    3. MySQL数据库中事务默认自动提交
      • 事务提交的两种方式
        • 自动提交
          • mysql就是自动提交的
          • 一条DML(增删改)语句会自动提交一次事务
        • 手动提交
          • Oracle数据库默认手动提交事务
          • 需要先开启事务，再提交
      • 修改事务的默认提交方式
        • 查看事务的默认提交方式：select @@autocommit; --1代表自动提交 0代表手动提交
        • 修改 set @@autocommit=0
  2. 事务的四大特征
    1. 原子性：是不可分割的最小操作单位，要么同时成功，要么同时失败
    2. 持久性：当事务提交或回滚后，数据库会持久化的保存数据
    3. 隔离性：多个事务之间，相互独立
    4. 一致性：事务操作前后，总量不变
  3. 事务的隔离级别（了解）
    • 概念：多个事务之间隔离的，相互独立，但是如果多个事务操作同一批数据，会引发一些问题，设置不同的隔离级别就可以解决这些问题
    • 存在问题：
      1. 脏读： 一个事务，读取到另一个事务中没有提交的数据。
      2. 不可重复读： 在同一事务中，两次读取到的数据不一样
      3. 幻读：一个事务操作DML数据表中所有记录，另一个事务添加了一条记录，则第一个事务查询不到自己的修改
    • 隔离级别
      1. read uncommitted: 读未提交
        • 产生的问题：脏读不可重复读、幻读
      2. read committed 读已提交
        • 产生的问题：不可重复读、幻读
      3. repeatable read 可重复读
        • 产生的问题：幻读
      4. serializable: 串行化

在企业开发中，框架里面配置事务来解决相关的数据库问题，spring框架在项目中配置事务。

脏读：小牛的支付宝 24小时还是2个小时，会产生脏读

技术难点

day05 JDBC

JDBC

1. 概念

java database connectivity，java数据库连接，java语言操作数据库

JDBC本质：其实是官方（sun公司）定义的一套操作所有关系型数据库的规则，即接口。各个数据库厂商去实现这套接口，提供数据库驱动jar包，我们可以使用这套接口编程，真正执行的代码是驱动jar包中的实现类

由sun公司工程师指定的一套操作数据库的规范（接口），让不同的数据库厂商来实现这一组规范（接口），从而开发人员只需要熟悉jdbc规范即可，也就是数开发人员只需要知道jdbc就可以操作不同的数据库（不用管不同数据库的底层实现）。

2. 快速入门

步骤：

  1. 导入驱动jar包

    1. 赋值mysql的jar包到项目的libs目录下
2. 右键--> add as library  加载到项目中
2. 注册驱动
3. 获取数据库连接对象 connection
4. 定义SQL
5. 获取执行SQL语句的对象 statement
6. 执行SQL，接收返回结果
7. 处理结果
8. 释放资源

  • 代码实现

           // 1. 导入驱动jar包
        // 2. 注册驱动
        Class.forName("com.mysql.jdbc.Driver");
        // 3. 获取数据库连接对象
        Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db3", "root", "root");
        // 4. 定义SQL语句
        String sql = "update account set balance = 500 where id=1";
        // 5. 获取执行SQL的对象 statement
        Statement stmt = conn.createStatement();
        // 6. 执行SQL
        int count = stmt.executeUpdate(sql);
        // 7. 处理结果
        System.out.println(count);
        // 8. 释放资源
        stmt.close();
        conn.close();

3. 详解各个对象

DriverManager: 驱动管理对象

功能：

  1. 注册驱动： 告诉程序该使用哪一个数据库驱动jar

    static void registerDriver(Driver driver): 注册与给定的驱动程序DriverManager

    写代码使用：Class.forName("com.mysql.jdbc.Driver")

    通过查看源码发现，在com.mysql.jdbc.Driver类中存在静态代码块

    static {
  try {
    java.sql.DriverManager.registerDriver(new Driver());
  }catch (SQLException var1){
    throw new RuntimeException("Can't register driver!");
  }
}

    注意：mysql5之后的驱动jar包可以省略注册驱动的步骤

  2. 获取数据库连接

    • 方法：static Connection getConnection(String url,String user,String password)
    • 参数：
      • url：指定连接的路径
        • 语法：jdbc:mysql://ip地址(域名):端口号/数据库名称
        • 例子：jdbc:mysql://localhost:3306/db3
        • 细节：如果连接的是本机的mysql服务器，默认端口也是3306，url可以简写为jdbc:mysql:///db3
      • user：用户名
      • password：密码
Connection: 数据库连接对象

功能：

  1. 获取执行SQL的对象

    • Statement createStatement()
    • PreparedStatement prepareStatement(String sql)

  2. 管理事务

    • 开启事务

      setAutoCommit(boolean autoCommit): 调用该方法设置参数为false，即开启事务

    • 提交事务

      commit()

    • 回滚事务

      rollback()

Statement: 执行sql的对象

  1. 执行sql

    1. boolean execute(String sql): 可以执行任意的sql（了解）

    2. int executeUpdate(String sql): 执行DML(insert\update\delete) 语句、DDL语句

      返回值：影响的行数，可以通过它判断DML是否执行成功，返回值>0则执行成功，反之，失败

    3. ResultSet executeQuery(String sql): 执行DQL(select)语句

  2. 练习：

    1. account表 添加一条记录
    2. account表 修改记录
    3. account表 删除一条记录
ResultSet: 结果集对象

  • next():游标向下移动.一行

  • getXxx(参数)：获取数据

    • Xxx: 代表数据类型 如int getInt(), String getString()
    • 参数：
      1. int： 代表列的编号，从1开始 如：getString(1)
      2. String: 代表列名称 如： getDouble("balance")，推荐使用

  • 注意：

    • 使用步骤：

      1. 游标向下移动一行

      2. 判断是否有数据

      3. 获取数据

        // 循环判断游标是否是最后一行末尾
            while(rs.next()){
                // 6.2 获取数据
                int id = rs.getInt(1);
                String name = rs.getString("name");
                double balance = rs.getDouble("balance");
                System.out.println(id+"--"+name+"--"+balance);
            }

  • 练习：定义一个方法，查询emp表的数据将其封装为对象，然后装进集合，返回

PreparedStatement: 执行sql的对象

  1. SQL注入问题：在拼接sql时，有一些sql的特殊关键字参与字符串的拼接，会造成安全性问题

    1. 输入用户随便，输入密码： a' or 'a' = 'a

  2. 解决sql注入问题： 使用PreparedStatement对象来解决

  3. 预编译的SQL：参数使用？作为占位符

  4. 步骤：

    1. 导入jar包
    2. 注册驱动
    3. 获取数据库连接对象
    4. 定义sql
      • 注意：sql的参数使用？作为占位符(列字段对应的数据)，如select * from user where username = ? and password = ?;
    5. 获取执行sql语句的对象PreparedStatement Connection.prepareStatement(String sql)
    6. 给？赋值
      • 方法： setXxx(参数1，参数2)
        • 参数1：？的位置编号，从1开始
        • 参数2：？的值
    7. 执行sql，接受返回结果，不需要传递sql语句
    8. 处理结果
    9. 释放资源

    注意：

    后期都会使用PreparedStatement来完成增删改查的所有操作

    1. 可以防止SQL注入
    2. 效率更高

  5. 预编译：preparedStatement对象，会提前（预编译）校验SQL语句是否正确，接下来执行SQL语句时，传递的参数就是？对应的数据，而不会把传递的参数作为SQL语句的一部分

  6. 预编译对象，会对特殊的关键词进行转义，比如or，把它作为password的参数；而statement对象，没有预编译功能，也不会对参数的关键词进行转义，传递的数据是什么，就是什么，如果参数有关键词，会作为SQL语句的一部分

4. 代码实现

JDBCUtils工具类：

public class JDBCUtils {
    private static String url;
    private static String user;
    private static String password;
    private static String driver;
    /**
     *  文件的读取，只需要读取一次即可拿到这些值，使用静态代码块
     */
    static{
        // 读取资源文件，获取值

        // 1. Properties 结合类
        Properties pro = new Properties();
        // 2.加载文件  类名.class获取字节码文件对象，再获取对应的classLoader
       // getResource是传文件名获取对应的Resource资源，以src为相对的路径，获取URL，绝对路径
      // 想要获取对应的字符串路径getPath()
        ClassLoader classLoader = JDBCUtils.class.getClassLoader();
        InputStream in = classLoader.getResourceAsStream("jdbc.properties");
        try {
            pro.load(in);
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 根据配置名称获取对应的数据
        url = pro.getProperty("url");
        user = pro.getProperty("user");
        password = pro.getProperty("password");
        driver = pro.getProperty("driver");
        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    /**
     *  获取连接
     * @return 连接对象
     */
    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(url,user,password);
    }

    /**
     *  释放资源
     * @param conn
     * @param stmt
     */
    public static void close(Statement stmt,Connection conn){
        if (stmt!=null){
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     *  释放资源
     * @param rs
     * @param conn
     * @param stmt
     */
    public static void close(ResultSet rs,Connection conn, Statement stmt){
        if (rs!=null){
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (stmt!=null){
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (conn!=null){
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

public class JDBCUtils3 {
    private static String driver = null;
    private static String url = null;
    private static String username = null;
    private static String password = null;
    // 加载资源
    static {
        ResourceBundle bundle = ResourceBundle.getBundle("jdbc");
        driver = bundle.getString("driver");
        url = bundle.getString("url");
        username = bundle.getString("user");
        password = bundle.getString("password");
    }
    // 1. 连接
    public static Connection getConnection(){
        Connection conn = null;
        try {
            Class.forName(driver);
            conn = DriverManager.getConnection(url, username, password);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return conn;
    }
    // 2. close释放资源
    public static void close(Connection conn,Statement stmt){
        if(stmt!=null){
            try {
                stmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(conn!=null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

5. JDBC控制事务

  1. 事务：一个包含多个步骤的业务操作，如果这个业务操作被事务管理，则这多个步骤要么同时成功，要么同时失败
  2. 操作：
    1. 开启事务
    2. 提交事务
    3. 回滚事务
  3. 使用Connection 对象来管理事务
    • 开启事务 setAutoCommit(boolean autoCommit): 调用该方法设置参数为false，即开启事务 在执行SQL之前开启事务
    • 提交事务：commit() 当所有的SQL都执行完提交事务
    • 回滚事务： rollback() 在catch中回滚事务

eclipse

sts spring tu suits

day06 JDBC连接池

1. 数据库连接池

概念：

其实就是一个容器（集合），存放数据库连接的容器。当系统初始化好后，容器被创建，容器会申请有一些连接对象，当用户来访问数据库时，从容器中获取连接对象，用户访问完，会将连接对象归还给容器。

好处：
  1. 节约资源
  2. 用户访问高效
实现
  1. 标准接口： DataSource javax.sql包下的
    1. 方法：
      • 获取连接：getConnection()
      • 归还连接：Connection.close() 如果连接对象connection是从连接池中获得的，那么调用Connection.close()方法，则不再关闭连接池，而是归还连接
    2. 技术实现
      1. C3P0: 数据库连接池技术
      2. Druid: 数据库连接池实现技术，由阿里巴巴提供
C3P0数据库连接技术

步骤：

   	1. 导入jar包（三个）c3p0-....jar  和mchange-java...jar 还有mysql的驱动jar包
         2. 定义配置文件：
         3. 名称：c3p0.properties 或者 c3p0-config.xml
         4. 路径： 直接将文件放在src目录下即可。
         5. 创建核心对象 数据库连接池对象 ComboPooledDataSource
         6. 获取连接： getConnection
Druid数据库连接池实现技术
  1. 步骤：
    1. 导入jar包
    2. 定义配置文件
      • 是properties形式的
      • 可以叫任意名称，可以放在任意牡丹路下
    3. 加载配置文件Properties
    4. 获取数据库连接池对象：通过工厂来获取 DruidDataSourceFactory
    5. 获取连接： getConnection
  2. 定义工具类
    1. 定义一个类 JDBCUtils
    2. 提供方法

Spring JDBC

Spring框架对JDBC的简单封装，提供了一个JDBCTemplate对象简化JDBC的开发

步骤：

   	1. 导入jar包
         2. 创建JDBCTemplate对象，依赖于数据源DataSource
 - `JDBCTemplate template = new JDBCTemplate(ds)`
3. 调用JDBCTemplate 的方法来完成CRUD的操作
- update() 执行DML语句，增删改
- queryForMap() 查询结果，将结果集封装为map集合，将列名作为key，将值作为value，将这条记录封装为一个map集合
  - 注意：这个方法的查询结果集长度为1
- queryForList() 查询结果，将结果集封装为list集合 再将map集合转载到list集合中
- query() 查询结果，将结果封装为JavaBean对象
  - query的参数：RowMapper
  - 一般使用BeanPropertyRowMapper实现类，可以完成数据到Javabean的自动封装
  - new BeanPropertyRowMapper<类型>(类型.class)
- queryForObject 查询结果，将结果封装为对象
  - 一般用于聚合函数的查询

day07-08 HTML&CSS

1. Web概念概述

javaweb

使用java语言开发基于互联网的项目

软件架构

1. C/S: Client/Server 客户端/服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序

优点：

缺点：

​ 1. 开发、安装、部署、维护麻烦

2. B/S: Browser/Server 浏览器/服务器端

只需要一个浏览器，用户通过不同的网址URL，客户访问不同的服务端程序

静态资源：

用户看到的内容（数据）一样，不会发生变化，静态资源会直接被解析

三剑客

  • HTML：用于搭建基础网页，展示网页的内容
  • css： 用于美化页面，布局页面
  • JavaScript： 控制页面的元素，展示动态的效果
动态资源：

每个用户访问相同资源后，获得的结果可能各不相同

使用动态网页技术发布的资源
如jsp/servlet,php,asp…
如果用户请求的是动态，服务器会执行动态资源，转化为静态资源，再发送给浏览器

2. HTML

1. 概念

是最基础的网页开发语言

  • Hyper Text Markup Language超文本标记语言
    • 超文本 超文本是用超链接的方法，将各种不同空间的信息组织在一起的网状文本
    • 标记语言：
      • 由标签构成的语言 <标签名称> 如html, xml
      • 编写网页，通过标记（标签）编写网页，通过修改标签的属性来改变内容的显示样式
      • 标记语言不是编程语言

2. 快速入门

语法：

  1. html文档后缀名.html 或者 .htm

  2. 标签分为

    1. 围堵标签：有开始标签和结束标签，如<html> </html>
    2. 自闭合标签：开始标签和结束标签在一起。如<br/>

  3. 标签可以嵌套

    需要正确嵌套，不能你中有我，我中有你

  4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双引都可)引起来

  5. html的标签不区分大小写，建议用小写。

3. 标签学习

1. 结构标签

构成html最基本的标签

  • html : html文档的根标签
  • head：头标签。用于指定html文档的一些属性，引入外部的资源
  • title: 标题标签
  • body： 体标签
  • <!DOCTYPE html>: html5中定义该文档是html文档
2. 文本标签

和文本有关的标签

  • 注释：<!-- 注释内容-->
  • <h1> to <h6>: 标题标签
  • <p>: 段落标签
  • <br> break : 换行标签，插入一个回车
  • <hr> horizontal: 展示一条水平线
    • 属性：color width size（高度） align（对齐方式 center left right）
  • <b> bold: 字体加粗
  • <i> italic: 斜体
  • <u> 下划线
  • <font>: 字体标签
    • 属性：color size（大小） face
  • <center> : 文本居中

属性定义：

  • color :
    1. 英文单词：red green …
    2. rgb(值1， 值2， 值3)： 值的范围0-255 如rgb(0,0,255)
    3. #值1值2值3： 值的范围：00-FF之间 如#FF00FF
  • width
    1. 数值： width='20' ，数值的单位，默认是px(像素pixel)
    2. 数值%： 占比相对于父元素的比例
3. 图片标签

相对路径

同一级目录：以.开头的路径 ./；

上一级目录：../

src alt alternative: 替代文本

4. 列表标签
  • 有序列表 ol ordered list li: list item列表项目 type="A" start="5"
  • 无序列表ul unordered list type="disc/ square/ circle"
5. 链接标签

定义一个超链接 <a> anchor锚

属性

  • href :指定访问资源的url（统一资源定位符）
  • target：指定打开资源的方式
    • _self 默认值，在当前页面打开
    • _blank 在空白页面打开
6.div 和 span
  • div division分隔，每个div占满一整行。块级标签
  • span 范围，文本信息在一行展示，行内标签，内联标签
7. 语义化标签

h5中为了提高程序的可读性，提供了一些标签

  • <header> 页眉
  • <footer> 页脚
8. 表格标签
  1. table: 定义表格
  • width： 宽度
  • border： 边框
  • cellpadding： 定义内容和单元格的距离
  • cellspacing: 定义单元格之间的距离，如果0，单元格的线会合为一条
  • bgcolor:
  • align: 对齐方式
  1. tr: table row 定义行 bgcolor align
  2. td: table data cell 定义表格单元，定义单元格
  3. th: table header cell定义表头单元格
  4. <caption> 表格标题
  5. <thead> 表示表格的头部分
  6. <tbody> 表示表格的体部分
  7. <tfoot> 表示表格的脚部分
9.特殊字符
显示结果描述实体名称全称
空格空格&nbsp;space
<&lt;less than
>&gt;greater than
&&amp;
"&quot;
'&apos;
¥元&yen;
®注册商标&reg;register
©版权&copy;
™商标&trade;
x乘号&times;
÷除号&divide;

3. 案例：旅游网首页

  1. 确定使用table来完成布局

  2. 如果某一行只有一个单元格，使用<tr><td></td></tr>

  3. 如果某一行有多个单元格，使用嵌套 目的：避免合并单元格

    <tr>
  <td>
    <table></table>
  </td>
</tr>

    ​

4. 表单

概念：

用于采集用户输入的数据，用于和服务器进行交互。封装数据，提交到后台。

使用的标签：

form ：定义表单，可以定义一个范围，范围代表采集用户数据的范围

input: 可以通过type属性，改变元素展示的样式

select: 下拉列表 子元素：option ，指定列表项

textarea: 文本域

form属性：

  • action: 指定提交数据的URL

  • method： 指定提交方式

    分类：一共7种，2种比较常用

    • get
    • post

表单项的数据要想被提交，必须指定其name属性，name属性作为后台代码获取用户输入数据的标识。

input属性：

  • type属性

    • text: 文本输入框，默认值

      • placeholder : 指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

    • password: 密码输入框

    • radio: 单选框

      注意：

      1. 要想实现多个单选框实现单选的效果，多个单选框的name属性值必须一致
      2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      3. checked 属性，可以指定属性默认值

    • checkbox: 复选框 后台处理用数组作为value

    • lable 指定输入项的文字描述信息

      注意：lable的for 属性一般会和input的id属性值对应，如果对应，点击lable区域，会让input输入框获取焦点

    • file: 文件选择框 文件或者图片的上传

    • hidden : 隐藏域，用于提交一些信息

    • 按钮：

      • submit: 提交按钮，可以提交表单
      • button: 普通按钮
      • image: 图片提交按钮
        • `src属性指定图片的路径
<form action="#" method="get">
    用户名：<input type="text" name="username" placeholder="请输入用户名"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" checked> 男
           <input type="radio" name="gender" value="female"> 女 <br>
    爱好：<input type="checkbox" name="hobby" value="shopping" > 逛街
            <input type="checkbox" name="hobby" value="skiing"> 滑雪
            <input type="checkbox" name="hobby" value="tennis" checked> 网球 <br>
    图片：<input type="file" name="file">
    隐藏域：<input type="hidden" name="id" value="aaa"> <br>

    取色器： <input type="color" name="color"> <br>
    生日： <input type="date" name="birthday"> <br>
    生日： <input type="datetime-local" name="birthday"> <br>
    邮箱：<input type="email" name="email"> <br>
    年龄：<input type="number" name="age"> <br>

    省份：<select name="province" >
    <option value="">-- 请选择省份--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">四川</option>
            </select> <br>
    自我描述：<textarea name="desc" cols="30" rows="10"></textarea> <br>
    <input type="submit" value="登录">
    <input type="button" value="一个按钮"> <br>
    <input type="image" src="img/regbtn.jpg"> <br>
</form>

总结：用到url的地方：

  • <a href=url >任意内容</a>
  • <img src=url>
  • <form action=url method="post">

get和post的区别：

get:

  1. get请求参数会在地址栏显示
  2. 请求参数大小有限制
  3. 不太安全

post:

  1. post请求参数不会在地址栏显示，会封装在请求体中
  2. 请求参数的大小没有限制
  3. 较为安全

3. css: 页面美化和布局控制

1. 概念

Cascading Style Sheets 层叠样式表

层叠： 多个样式可以作用在同一个html的元素上，同时生效

2. 好处

  1. 功能强大
  2. 将内容的展示和样式的控制分离，解耦，让分工协作更容易，提高开发效率

3. css的使用

  1. 内联样式 在标签内使用style属性指定css代码 不常用
  2. 内部样式 在head标签内，定义style标签，style标签的标签体内容就是css代码
  3. 外部样式 在head标签内，定义link标签，引入外部的资源文件
	<style>
        div{
            color: red;
        }
    </style>
    
    <div>hello css</div>


a.css文件：
div{
    color: blue;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>

4. css的语法

格式：
选择器{
  属性名1：属性值1；
  属性名2：属性值2；
  ...
}
注意：

每一对属性需要使用;隔开，最后一对属性可以不加。

5. 选择器

选择器：筛选具有相似特征的元素，筛选对应的标签。

分类：

基础选择器

  1. id选择器 选择具体的id属性值的元素 语法： #id属性值{} id一般唯一

  2. 元素选择器 选择具有相同标签名称的元素

    语法： 标签名称{}

    注意： id选择器优先级高于元素选择器

  3. 类选择器 选择具有相同的class属性值的元素 class一般可以多个标签共用

    语法： .class属性值{}

    注意：类选择器选择器优先级高于元素选择器

扩展选择器

  1. 选择所有元素： 语法：*{}

  2. 并集选择器： 选择器1，选择器2{}

  3. 子选择器： 选择器1 选择器2{}

  4. 父选择器: 选择器1 > 选择器2{}

  5. 属性选择器： 选择元素名称， 属性名=属性值的元素 元素名称[属性名=“属性值”]{}

  6. 伪类选择器：选择一些元素具有的状态

    语法：元素: 状态{}

    状态：

    • link: 初始化的状态
    • visited: 被访问过的状态
    • active： 正在访问状态 点击状态
    • hover： 鼠标悬浮状态 悬浮状态

    ​

6 . 属性

1. 文本、字体
  • font-size: 字体大小
  • color： 文本颜色
  • text-align： 对齐方式
  • line-height：行高

常用的应用文本的css样式：

  • color 设置文字的颜色，如： color:red;

  • font-size 设置文字的大小，如：font-size:12px;

  • font-family 设置文字的字体，如：font-family:‘微软雅黑’;

  • font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜

  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;

  • font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;

  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px!

  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

2. 背景

background 复合属性

3. 边框

border: 复合属性，设置边框

border-top-style: 线的类型，实线solid，虚线dashed，点线dotted

4. 尺寸
  • width： 宽度
  • height： 高度
5. 盒子模型

  • margin: 外边距 外边距的合并，两个垂直外边距相遇，将形成一个外边距，高度等于外边距较大者。

  • padding：内边距

  • padding：内边距

    一般： padding: 20px 100px 100px 20px;
三个值： padding: 20px(顶部) 100px(左右) 20px(底部)
两个值：padding: 20px(上下) 100px(左右)
body自身也是盒子模型。1274*760，margin为8，所以盒子不可能挨着浏览器顶部
水平居中 margin: 20px auto;

    ​

外边距合并的解决方案：

  1. 每个盒子只设置margin-top
  2. 将元素浮动或者定位
  3. 使用这种特性

默认情况下内边距会影响整个盒子的大小 box-sizing: border-box;

盒子的真实尺寸：

盒子的宽度： width+左右的padding值+左右的border值

盒子的高度：height+上下的padding值+上下的border值

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

**overflow的设置项： **
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

box-sizing: border-box; 设置盒子的属性，让width和height就是盒子的最终大小

  • float：浮动
    • left
    • right

day09-10 JavaScript

1. 基础

1. 概念

基于对象的一门客户端脚本语言（基于对象，对象已经存在，可以直接使用）

运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎

脚本语言：

不需要编译，直接就可以被浏览器解析执行了

2. 功能

可以来增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有一些动态的效果，增强用户的体验。

3. JavaScript的发展史

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为C–
  2. 1995年，Netscape(网景)公司，开发出一门客户端脚本语言，LiveScript。后来，请来sun公司的专家，修改LiveScript，命名为JavaScript
  3. 1996年，微软抄袭JavaScript开发出了JScript语言
  4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式
  • JavaScript = ECMAScript + JavaScript自己特有的东西(DOM+BOM)

4. ECMAScript

客户端脚本语言的标准

2. 语法

1. 基本语法

1. 与html结合方式
  1. 内部JS
    • 定义<script>，标签体内容就是js代码
  2. 外部JS
    • 定义<script>，通过src属性引入外部的js文件

注意:

  1. <script>可以定义在html页面的任何地方，但是定义的位置会影响执行的顺序
  2. <script>可以定义多个

建议：<script>的位置放在</body>前面，因为html是从上往下加载

2.注释
  • 单行注释： // 注释内容
  • 多行注释：/* 注释内容 */
3. 定义变量

const定义的变量不可以修改，而且必须初始化，该变量受全局作用域、函数作用域及块级作用域的限制。

let定义的变量可以修改，该变量受全局作用域、函数作用域及块级作用域的限制。

var定义的变量可以修改，该变量只受全局作用域和函数作用域的限制，并不受块级作用域的限制

4.数据类型

  1. 原始数据类型（基本数据类型）

    1. number 数字 整数/小数/NaN(Not a number)
    2. string 字符串
    3. boolean
    4. null 一个对象为空的占位符
    5. undefined 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

  2. 引用数据类型：对象

  3. 变量

    • 变量： 一小块存储数据的内存空间
    • java是强类型的语言，JavaScript是弱类型的语言
      • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据 boolean flag = b instanceof String
      • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据 b +'---'+ typeof(b)

  4. 运算符

    1. 一元运算符：只有一个运算数的运算符 ++， --， +(正号)

      • ++，-- 自增自减 加加在前，先加后用

      • 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行
                类型转换

            其他类型转number：
                string转number：按照字面值转换，如果字面值不是数字，则转为NaN(不是数字的数字)
                boolean转number：true转为1，false转为0

        ​

    2. 算数运算符： + - * / % …

    3. 赋值运算符： = += -=

    4. 比较运算符： > < >= <= == ===(全等于)

      比较方式
                    1. 类型相同，直接比较
                     字符串：按照字典顺序比较，按位逐一比较，直到得出大小为止
                    2. 类型不同：先进行类型转换，再比较
                    "==="全等于。在比较之前，先判断类型，如果类型不一样，直接返回false

      ​

    5. 逻辑运算符： && || ！

      逻辑运算符 && || ！
            其他类型转boolean
                1. number:0或NaN为假，其他为真
                2. string 除了空字符串“”，其他都是true
                3. null&undefined  都是false
                4. 对象  都是true

      ​

    6. 三元运算符： ？：

    7. 特殊语法

      1. 语句以分号结尾，如果一行只有一条语句，可以省略不写（不建议）
      2. 变量的定义使用var关键字，也可以不使用 用： 定义的变量时局部变量；不用：定义的是全局变量(不建议)
5. 流程控制语句
  1. if … else…
  2. switch
  3. while
  4. do…while
  5. for

2. 基本对象

Function

函数（方法）对象

创建方式1  动态函数  不用
var fun = new Function(形参列表，方法体); 调用：get();
创建方式2  匿名函数
var get = function(){...};  调用 get();
创建方式3 普通函数
function get(){}   调用 get();

特点：

  1. 方法定义时，形参的类型不用写。

  2. 方法是一个对象，如果定义名称相同的方法，会覆盖

  3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关，返回值类型也不用写

  4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装了所有的实际参数

    arguments是js的数组对象（已经创建好了，可以直接使用：内置对象）

Array

  1. 创建：

    • var arr=new Array(元素列表)
    • var arr = new Array(默认长度)
    • var arr = [元素列表];

  2. 方法

    join(参数)：将数组中的元素按照指定的分隔符拼接为字符串

    push() 向数组的末尾添加一个或多个元素，并返回新的长度

  3. 属性 length：数组的长度

  4. 特点：

    1. JS中，数组元素的类型可变的。
    2. JS中，数组长度可变的。
Boolean
Date

  1. 创建： var date = new Date();

  2. 方法：

    toLocalString(): 返回当前date对象对应的时间本地字符串格式

    getTime(): 获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值之差

Math

  1. 创建：

    • 特点：math对象不用创建，直接使用 Math.方法名();

  2. 方法

    • random(): 返回0-1之间的随机数。 左闭右开
    • ceil(x): 对数进行上舍入
    • floor(x): 对数进行下舍入
    • round(x): 四舍五入

  3. 属性

    PI

Number
String
RegExp

正则表达式对象

正则表达式：定义字符串的组成规则，校验数据是否符合制定的规范

  1. 单个字符：[ ]
    • 如：[a] [ab] [a-zA-Z0-9_]
    • 特殊符号代表特殊含义的单个字符：
      • \d 单个数字字符[0-9]
      • \w 单个单词字符[a-zA-Z0-9_]
  2. 量词符号：
    • ? 表示出现0次或1次 有无
    • * 通配符，有多少都可
    • +表示出现1次或多次 正数
    • {m,n}出现m到n次，m<= 数量 <=n
      • m如果缺省：{,n}最多n次
      • n如果缺省：{m,}最少m次
  3. 开始符号和结束符号 ^ $

正则对象

  1. 创建
    • var reg = new RegExp(正则表达式);
    • var reg = /正则表达式/;
  2. 方法
    • test(参数)： 验证指定的字符串是否符合正则定义的规范
Global
  1. 特点： 全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
  2. 方法：
    • encodeURI(): url编码
    • decodeURI(): url解码
    • encodeURIComponent(): url编码
    • decodeURIComponent(): url解码
    • parseInt():将字符串转为数字，逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为number
    • isNaN() 判断一个值是否是NaN
      • NaN 六亲不认，连自己都不认。NaN 参与的==比较全部都为false
    • eval(): 将JavaScript字符串，转成脚本代码来执行

3. 事件简单学习

功能

某些组件被执行了某些操作之后，触发了某些代码的执行

如何绑定事件
  1. 直接在html标签上指定事件的属性（操作），属性值就是js代码
    1. 事件：onclick----单击事件
  2. ​

4. 案例

1. 双色球
<body>
<center>
    <h1 color="red">中奖号码：</h1>
    <!--输入随机数字的框-->
    <!--  <div id="div1" style="font-size: 20px;text-align: center;border: 2px solid green;width:200px;height: 50px;line-height: 50px;"></div>-->
    <table style="font-size: 20px;text-align: center;border: 2px solid green;width:200px;height: 50px;line-height: 50px;">
        <tr>
            <td id="td1"></td>
            <td id="td2"></td>
            <td id="td3"></td>
            <td id="td4"></td>
            <td id="td5"></td>
        </tr>
    </table>
    <hr>
    <input type="button" value="开始抽奖" onclick="start();" id="st">
    <input type="button" value="选中一个" onclick="choose();" id="ed" disabled="true">
    <input type="button" value="直接选完" onclick="st();" id="end" disabled="true">

</center>

<script>
    // 构造抽取一个号码的方法
    function chooseQiu() {
        // 两个数组构造
        var arr1 = [0,1,2,3,4,5,6,7,8,9];
        var arr2 = [9,8,7,6,5,4,3,2,1,0];
        // 根据数组的随机索引拼接
        var index1 = Math.floor(Math.random()*arr1.length);
        var index2 = Math.floor(Math.random()*arr2.length);
        var randNum = arr1[index1]+""+arr2[index2];
        return randNum;
    }
    // 获取对象
    var ed = document.getElementById("ed");
    var end = document.getElementById("end");
    // 开启筛选
    var control;
    function start() {
        control = 5;
        setInterval(startChoose,10);
        ed.disabled = false;
        end.disabled = false;
    }
    // 具体的筛选
    var index;
    function startChoose() {
        index=1;
        while(index<=control){
            var num = chooseQiu();
            document.getElementById("td"+(6-index)).innerHTML = num;
            index++;
        }
    }
    // 一次一次的筛选
    function choose() {
        control--;
        while(control==0){
            ed.disabled = true;
            end.disabled = true;
        }
    }
    // 一次性选完
    function st() {
        control=0;
        ed.disabled = true;
        end.disabled = true;
    }
</script>
2. 数组去重
<script>
    var arr = ["a","a","b","b","b","c"];
    function quChong() {
        var uniArr = [];
        for (var i = 0; i < arr.length; i++) {
            if(uniArr.indexOf(arr[i])==-1){
                uniArr.push(arr[i]);
            }
        }
    }
</script>

5. BOM

概念：

Browser Object Model浏览器对象模型 由一系列的对象组成，操作就是浏览器

将浏览器的各个组成部分封装为对象

组成
  • window: 窗口对象
  • navigator: 浏览器对象
  • screen: 显示器屏幕对象
  • history 历史记录对象
  • location: 地址栏对象
window

窗口对象

  1. 创建

  2. 方法

    1. 与弹出框有关的方法
      • alert() 显示带有一段消息和一个确认按钮的警告框
      • confirm() 显示带有一段信息以及确认按钮和取消按钮的对话框
        • 如果用户点击确定，返回true，点击取消，返回false
      • prompt() 显示可提示用户输入的对话框
        • 返回值： 获取用户输入的值
    2. 与打开关闭有关的方法
      • close() 关闭浏览器窗口 谁调用我我关闭谁
      • open() 打开一个新的浏览器窗口 返回新的window对象
    3. 与定时器有关的方式
      • setTimeout(): 在指定的毫秒数后调用函数或计算表达式
        • 参数： 1. js代码或者方法对象 2. 毫秒数值
        • 返回值 唯一标识，用于取消定时器
      • clearTimeout(): 取消由setTimeout()方法设置的timeout
      • setInterval():
      • clearInterval()

  3. 属性

    1. 获取其他BOM对象

      history

      location

      navigator

      screen

    2. 获取DOM对象

      document

  4. 特点

    • window对象不需要创建就可以直接使用 window.方法名();
    • window 引用不可省略 方法名();
location: 地址栏对象
  1. 创建（获取）：
    1. window.location
    2. location
  2. 方法
    • reload() 重新加载
  3. 属性
    1. 获取当前页面的url
    2. 给当前窗口设置一个新的url（跳转到新的url）
history：历史记录对象
  1. 创建（获取）：
    1. window.history
    2. history
  2. 方法
    • back() 加载history列表中的前一个url
    • forward() 加载history列表中的下一个url
    • go() 加载history列表的某个具体页面
      • 参数
        • 正数：前进几个历史记录
        • 负数：后退几个历史记录
  3. 属性
    • length 返回当前窗口历史列表中的url数量

6. DOM

概念

Document Object Model 文档对象模型 由一系列对象组成，操作就是HTML文档

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

DOM的划分

W3C DOM标准分为3个不同的部分：

  • 核心DOM - 针对任何结构化文档的标准模型
    • Document 文档对象
    • Element: 元素对象
    • Attribute: 属性对象
    • Text 文本对象
    • Comment: 注释对象
    • Node 节点对象，其他5个的父对象
  • XML DOM - 针对XML文档的标准模型
  • HTML DOM - 针对HTML文档的标准模型
Document 文档对象
  1. 创建（获取）：在html dom模型中可以用window对象来获取
    1. window.document
    2. document
  2. 方法
    1. 获取Element对象 指的是标签对象
      1. getElementById() 查找具有指定的唯一ID的元素
      2. getElementsByTagName(): 根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClass(): 根据class属性值获取元素对象们。返回数组
      4. getElementsByName(): 根据name属性获取元素对象们 返回数组
    2. 创建其他DOM对象
      1. createAttribute(name)
      2. createComment()
      3. createElement()
      4. createTextNode()
  3. 属性
标签体

指的是标签之间的内容，比如<div>有标签体，而<input>就没有标签体，不能用innerHTML,

总结：围堵标签才有标签体，而自闭合标签没有标签体。

Element对象
  1. 修改属性值
    1. 明确获取的对象是哪一个
    2. 查看API文档，找其中有哪些属性可以设置
  2. 修改标签体内容
    1. 获取元素对象
    2. 使用innerHTML属性修改标签体内容
  3. 其他方法
    1. removeAttribute(): 删除属性
    2. setAttribute() 设置属性
Node:

节点对象，其他5个的父对象

  • 特点：所有dom对象都可以被认为是一个节点
  • 方法
    • CRUD DOM树
      • appendChild()向节点的子节点列表的结尾添加新的子节点
      • removeChild()删除（并返回）当前节点的指定子节点
      • replaceChild() 用新的节点替换一个子节点
  • 属性：
    • parentNode: 返回节点的父节点

超链接功能：

  1. 可以被点击，样式
  2. 点击后跳转到href指定的url

需求： 保留1功能，去掉2功能

实现：href = “javascript:void(0);”

7. HTML DOM

  1. 标签体的设置和获取： innerHTML

    • innerHTML 和 innerText的区别：
      • innerHTML 会解析HTML的格式，把标签体显示出来，如字体颜色等
      • innerText就比较笨，只会把标签体代码原样展示。空格等会忽略。

  2. 使用html元素对象的属性

  3. 控制元素样式

    1. 使用元素的style属性来设置

             div1.style.border = "1px solid red";
        div1.style.width = "200px";
        div1.style.fontSize = "20px";

    2. 提前定义好类选择器的样式，通过元素的className属性设置其class属性

      div2.className = "d1";

8. 事件

概念：

某些组件被执行了某些操作之后，触发某些代码的执行

  • 事件（驱动）：某些操作，如：单击、双击、键盘按下了，鼠标移动了 比如 踢汽车，触发报警器
  • 事件源：组件，如：按钮 文本输入框… 比如汽车
  • 监听器： 代码 比如报警器
  • 事件源和监听器绑定： 比如 把报警器安装在汽车上
  • 注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码
点击事件：
  1. onclick ： 单击事件
  2. ondblclick： 双击事件
焦点事件
  1. onblur： 失去焦点 一般用于表单校验
  2. onfocus: 元素获得焦点
加载事件
  1. onload: 一张页面或一幅图像完成加载
鼠标事件
  1. onmousedown 鼠标按钮被按下
    • 定义方法时，定义一个形参，接受event对象
    • event对象的button水性可以获取到鼠标哪个键被点击了
  2. onmouseup 鼠标按钮被松开
  3. onmousemove 鼠标被移动
  4. onmouseover 鼠标移到某元素之上
  5. onmouseout 鼠标从某元素上移开
键盘事件
  1. onkeydown 某个键盘按钮被按下
  2. onkeyup 某个键盘按钮被松开
  3. onkeypress 某个键盘按钮被按下并松开
选择和改变
  1. onchange 域的内容被改变 用于 省市区三级联动
  2. onselect 文本被选中
表单事件
  1. onsubmit 确认按钮被点击 必须在form表单，form的属性写onsubmit
    • 可以阻止表单的提交 方法返回false则表单被阻止提交
    • 第二种方法：普通按钮button 调用form对象的submit()方法
  2. onreset 重置按钮被点击

day11 BootStrap

1. 概念

一个前端开发的框架，对html,css,javascript进行了高度的封装。依赖于jquery

2. 好处

  1. 定义好了很多css样式和js插件，开发人员直接可以使用这些样式和插件获得丰富的页面效果
  2. 响应式布局 同一套页面可以兼容不同分辨率的设备

3. 快速入门

  1. 下载BootStrap
  2. 在项目中将这三个文件夹复制
  3. 创建HTML页面，引入必要的资源文件
  4. 基本模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

4. 响应式布局

同一套页面可以兼容不同分辨率的设备

1. 实现：

依赖于栅格系统，默认把每一个页面的一行分成12个格子，（只不过不同的分辨率格子大小显示不一样）可以指定元素占几个格子

2. 步骤：

  1. 定义容器。相当于之前的table

    容器分类：

       	1. container  固定宽度，两边有留白
    2. container-fluid  流式布局，每一种设备都是100%宽度

  2. 定义行 相当于之前的tr 样式：row

  3. 定义元素 指定该元素在不同的设备上，所占的格子数目。 样式：col-设备代号-格子数目

    • 设备代号
      1. xs 超小屏幕 手机（<768px）: col-xs-12
      2. sm 小屏幕small 平板(>=768px)
      3. md 中等屏幕middle 桌面显示器(>=992px)
      4. lg 大屏幕large 大桌面显示器(>=1200px)
3. 注意：
  1. 一行如果格子数目超过12，则超出部分自动换行
  2. 栅格类属性可以向上兼容
  3. 如果设备宽度小于设置的栅格类属性的设备代码的最小宽度，默认会一个元素占满一整行。

5. css样式和js插件

全局css样式

  • 按钮 class=“btn btn-default”

  • 图片

    • class=“img-responsive” 图片在任意尺寸都占100%

    • 图片形状

      <img src="..." alt="..." class="img-rounded">  方形
<img src="..." alt="..." class="img-circle">  圆形
<img src="..." alt="..." class="img-thumbnail">  相框  缩略图

  • 表格

    • table table-bordered table-hover

  • 表单

    • 给表单项添加 class=“form-control”

  • 组件

    • 导航条
    • 分页条

day12 XML

1. 概念

Extensible Markup Language 可扩展标记语言

可扩展：标签都是自定义的。<user> <student>

2. 功能

存储数据

  1. 配置文件
  2. 在网络中传输

3. xml与html的区别

  1. xml的标签都是自定义的，HTML标签是预定义的
  2. xml的语法严格，HTML的语法松散
  3. xml是存储数据的，HTML是展示数据的

W3C：万维网联盟

4. 语法

1. 基本语法
  1. xml文档的后缀名 .xml
  2. xml第一行必须定义为文档声明
  3. xml文档有且仅有一个根标签
  4. 属性值必须使用引号（单双都可）引起来
  5. 标签必须正确关闭
  6. xml标签名称区分大小写
2. 组成部分
  1. 文档声明
    1. 格式：<?xml 属性列表 ?>
    2. 属性列表
      • version版本号，必须的属性
      • encoding 编码方式 告知解析引擎当前文档使用的字符集，默认ISO8859-1 encoding=‘utf-8’
      • standalone 是否独立
  2. 指令(了解) 结合css的
  3. 标签 标签名称自定义的
    • 规则：
      • 名称可以包含字母数字以及其他的字符
      • 名称不能以数字或者标点符号开始
      • 名称不能以字母 xml等开始
      • 名称不能包含空格
  4. 属性 id值唯一
  5. 文本
    • CDATA区 在该区域中的数据会被原样展示 <![CDATA[ 数据 ]]>
3. 约束

规定xml文档的书写规则，有哪些标签和属性

  • 作为框架的使用者（程序员）：

    1. 能够在xml中引入约束文档
    2. 能够简单的读懂约束文档

  • 分类：

    1. DTD:一种简单的约束技术
    2. Schema: 一种复杂的约束技术，对内容也有限制
      1. xmlns: 约束的定义以及别名
      2. schemaLocation: 引入约束文件以及路径
      3. .xsd schema约束文件
4. DTD&schema

引入DTD文档到xml文档中

  • 内部DTD：将约束规则定义在xml文档中
  • 外部DTD：将约束规则定义在外部的DTD文件中
    • 本地：<！DOCTYPE 根标签名 SYSTEM "DTD文件的位置"> 例如<!DOCTYPE students SYSTEM "student.dtd">
    • 网络： <!DOCTYPE 跟标签名 PUBLIC "DTD文件名称" "DTD文件的位置url">
<?xml version="1.0" encoding="UTF-8" ?>
<!-- 
	1.填写xml文档的根元素
	2.引入xsi前缀.固定格式  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	3.引入xsd文件命名空间.  xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd"
	4.为每一个xsd约束声明一个前缀,作为标识  xmlns="http://www.itcast.cn/xml" 
	
	
 -->
 <students   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 		   xsi:schemaLocation="http://www.itcast.cn/xmml  student.xsd
								http://www.itcast.cn/xmml2  student2.xsd"
 			 xmlns:a="http://www.itcast.cn/xml"
 			 xmlns:b="http://www.itcast.cn/xml2"
 		    >
 	<student number="heima_0001">
		<a:name>zhangsan</a:name>
		<age>11</age>
		<sex>male</sex>
	</student>
 </students>

5. 解析

操作xml文档，将文档中的数据读取到内存中

操作xml文档
  1. 解析（读取）：将文档中的数据读取到内存中
  2. 写入：将内存中的数据保存到xml文档中，持久化的存储
解析xml的方式
  1. DOM：将xml一次性加载进内存，在内存中形成一个DOM树
    • 优点：操作方便，可以对文档进行crud的所有操作
    • 缺点：占内存
  2. SAX: 逐行读取，基于事件驱动
    • 优点：不占内存
    • 缺点：只能读取，不能增删改
xml的常见解析器
  1. JAXP: sun 公司提供的解析器，支持DOM和sax两种思想
  2. DOM4J：一款非常优秀的解析器
  3. Jsoup: Jsoup 是一款java的HTML的解析器，可直接解析某个url地址，HTML文本内容
  4. PULL: Android操作系统内置的解析器，sax方式的

6. Jsoup

快速入门

步骤：

  1. 导入jar包
  2. 获取Document对象
  3. 获取对应的标签Element对象
  4. 获取数据
        // 获取document对象
        // 1.1 获取student.xml的path
        String path = JsoupDemo01.class.getClassLoader().getResource("student.xml").getPath();
        // 1.2 解析xml文档，加载进内存
        Document document = Jsoup.parse(new File(path), "utf-8");
        Elements elements = document.getElementsByTag("name");
        System.out.println(elements.size());
        // 2 获取第一个name的element对象
        Element element = elements.get(0);
        // 3. 获取数据
        String text = element.text();
        System.out.println(text);
对象的使用
  1. Jsoup: 工具类，可以解析HTML或xml文档，返回document
    • parse：解析HTML或xml文档，返回document
      • parse(File in, String charsetName): 解析xml或HTML文件的
      • parse(String html) 解析xml或html字符串
      • parse(URL url, int timeoutMills)： 通过网络路径获取指定的HTML或xml文档
  2. document： 文档对象，代表内存中的dom树
    • 获取element对象
  3. elements： 元素element对象的集合
  4. element：元素对象
    • 获取子元素对象
    • 获取属性值
      • String attr(String key) 根据属性名获取属性值
    • 获取文本内容
      • String text() 获取文本内容
      • String html() 获取标签体的所有内容（包括子标签的字符串内容）
  5. node：节点对象

7. selector

Selector选择器概述
  • tagname: 通过标签查找元素，比如：a
  • ns|tag: 通过标签在命名空间查找元素，比如：可以用 fb|name 语法来查找 <fb:name> 元素
  • #id: 通过ID查找元素，比如：#logo
  • .class: 通过class名称查找元素，比如：.masthead
  • [attribute]: 利用属性查找元素，比如：[href]
  • [^attr]: 利用属性名前缀来查找元素，比如：可以用[^data-] 来查找带有HTML5 Dataset属性的元素
  • [attr=value]: 利用属性值来查找元素，比如：[width=500]
  • [attr^=value], [attr$=value], [attr*=value]: 利用匹配属性值开头、结尾或包含属性值来查找元素，比如：[href*=/path/]
  • [attr~=regex]: 利用属性值匹配正则表达式来查找元素，比如： img[src~=(?i)\.(png|jpe?g)]
  • *: 这个符号将匹配所有元素
Selector选择器组合使用
  • el#id: 元素+ID，比如： div#logo
  • el.class: 元素+class，比如： div.masthead
  • el[attr]: 元素+class，比如： a[href]
  • 任意组合，比如：a[href].highlight
  • ancestor child: 查找某个元素下子元素，比如：可以用.body p 查找在"body"元素下的所有 p元素
  • parent > child: 查找某个父元素下的直接子元素，比如：可以用div.content > p 查找 p 元素，也可以用body > * 查找body标签下所有直接子元素
  • siblingA + siblingB: 查找在A元素之前第一个同级元素B，比如：div.head + div
  • siblingA ~ siblingX: 查找A元素之前的同级X元素，比如：h1 ~ p
  • el, el, el:多个选择器组合，查找匹配任一选择器的唯一元素，例如：div.masthead, div.logo
伪选择器selectors
  • :lt(n): 查找哪些元素的同级索引值（它的位置在DOM树中是相对于它的父节点）小于n，比如：td:lt(3) 表示小于三列的元素
  • :gt(n):查找哪些元素的同级索引值大于n``，比如： div p:gt(2)表示哪些div中有包含2个以上的p元素
  • :eq(n): 查找哪些元素的同级索引值与n相等，比如：form input:eq(1)表示包含一个input标签的Form元素
  • :has(seletor): 查找匹配选择器包含元素的元素，比如：div:has(p)表示哪些div包含了p元素
  • :not(selector): 查找与选择器不匹配的元素，比如： div:not(.logo) 表示不包含 class=logo 元素的所有 div 列表
  • :contains(text): 查找包含给定文本的元素，搜索不区分大不写，比如： p:contains(jsoup)
  • :containsOwn(text): 查找直接包含给定文本的元素
  • :matches(regex): 查找哪些元素的文本匹配指定的正则表达式，比如：div:matches((?i)login)
  • :matchesOwn(regex): 查找自身包含文本匹配指定正则表达式的元素
  • 注意：上述伪选择器索引是从0开始的，也就是说第一个元素索引值为0，第二个元素index为1等

8. xpath

xpath为xml的路径语言，是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言

需要导包，查询w3c参考手册

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值