Cookie

2020-05-12

JavaWeb

会话：一次会话中包含多次请求和响应。
- 一次会话：浏览器第一次给服务器资源发送请求，会话建立，直到有一方断开为止
功能：在一次会话范围内的多次请求间，共享数据。
方式：
1. 客户端会话技术：Cookie
2. 服务器端会话技术：Session
概念：客户端会话技术，将数据保存到客户端。
快速入门：
- 使用步骤：
  1. 创建Cookie对象，绑定数据
    - new Cookie(String name, String value)
  2. 发送Cookie对象
    - resp.addCookie(Cookie cookie)
  3. 获取Cookie，拿到数据
    - req.getCookies()
实现原理
- 基于响应体set-cookie和请求头cookie实现
cookie的细节
1. 一次可不可以发送多个cookie？
  - 可以
  - 可以创建多个cookie对象，然后用addCookie发送
2. cookie在浏览器中保存多长时间？
  - 默认情况下，浏览器关闭后，cookie数据被销毁
  - 持久化存储：setMaxAge(int seconds)
    1. 正数：将Cookie数据写到硬盘的文件中，持久化存储，数值代表cookie存活时间
    2. 负数：默认值
    3. 零：删除cookie信息
3. cookie能不能存中文？
  - 在tomcat8之前，cookie中不能直接存储中文数据，需要将中文数据转码，一般采用URL编码
  - tomcat8之后可以存储
4. cookie获取范围是多大？
  1. 假设在一个tomcat服务器中，部署了多个web项目，那么在这些web项目中，cookie能不能共享？
    - 默认情况下，cookie不能共享
    - setPath(String path)：设置cookie的获取范围，默认情况下设置当前的虚拟目录
    - 如果要共享，则可以将path设置为”/“
  2. 不同的tomcat服务器获取cookie？
    - setDomain(String path)：如果设置一级域名相同，那么多个服务器之间cookie可以共享
    - 如：setDomain(“.baidu.com”)，那么tieba.baidu.com和news.baidu.com可以共享cookie
cookie的特点和作用
1. cookie存储数据在客户端浏览器，不太安全
2. 浏览器对于单个cookie有限制(4kb左右)，以及对同一个域名下的总cookie数量也有限制 (20个左右)
- 作用：
  1. cookie一般用于存储少量的不太敏感的数据
  2. 在不登录的情况下，完成服务器对客户端的身份识别

JavaWeb中HTTP相关的粗略描述

2020-05-08

JavaWeb

Http

概念：Hyper Text Transfer Protocol 超文本传输协议
- 传输协议：定义了客户端和服务器通信时，发送数据的格式。
- 特点：
  1. 基于TCP/IP的高级协议
  2. 默认端口号：80
  3. 基于请求/响应模型的：一次请求对应一次响应
  4. 无状态的：每次请求之间相互独立，不能交互数据
历史版本：
- 1.0：每次请求响应都会建立新的连接
- 1.1：复用连接

请求消息数据格式

请求行
- 请求方式请求url 请求协议/版本
- 如：GET /login.html HTTP/1.1
- 请求方式：
  - HTTP有7种请求方式，常见的有两种：
    - GET：请求参数在请求行中，在url后。请求的url长度是有限制的。不太安全。
    - POST：请求参数在请求体中。请求的url长度是无限制的。相对安全。
请求头：客户端浏览器告诉服务器一些信息
- 请求头名：请求头值
- 常见的请求头：
  1. Host: 主机
  2. User-Agent: 浏览器告诉服务器，我访问你使用的浏览器版本信息
    - 可以在服务器端获取该头的信息，解决浏览器的兼容性问题
  3. Referer: 告诉服务器，当前请求从哪里来
    - 作用：
      1. 防盗链：
      2. 统计工作：
请求空行：空行，用于分割post请求头和请求体的
请求体（正文）
- 封装post请求消息的请求参数的

响应消息数据格式

响应行：
- 组成：协议/版本响应状态码状态码描述
- 响应状态码：服务器告诉客户端浏览器本次请求和响应的状态，状态码都是三位数字
  - 状态分类：
    1. 1xx：服务器接收客户端消息，但没有接收完成，等待一段时间后发送1xx的状态码
    2. 2xx：成功。代表：200
    3. 3xx：重定向。代表：302（重定向），304（访问缓存）
    4. 4xx：客户端错误。代表：404（请求路径没有对应的资源），405（请求方式没有对应的方法）
    5. 5xx：服务器端错误。代表：500（服务器内部出现异常）
响应头
- 格式：头名称:值
- 常见的响应头：
  1. Content-Type：服务器告诉客户端浏览器本次响应体的数据格式及编码格式
  2. Content-disposition：服务器告诉客户端以什么格式打开响应体数据。默认值是in-line 在当前页面内打开，可以设置为attachment;filename=xxx 以附件形式打开响应体
响应空行
响应体：传输的数据

Request

2020-05-08

JavaWeb

Request

Request和Response对象的原理：

Request和Response对象是由服务器创建的。我们来使用它们。
Request对象来获取请求消息，Response对象来设置响应消息。

Request对象继承体系结构

HttpServletRequest接口继承ServletRequest接口。
org.apache.catalina.connector.RequestFacade类（tomcat实现）实现HttpServletRequest接口。

Request功能：

获取请求消息数据：
1. 获取请求行数据：
  - 方法：
    1. 获取请求方式：String getMethod()
    2. 获取虚拟目录：String getContextPath()
    3. 获取Servlet路径：String getServletPath()
    4. 获取GET方式请求参数：String getQueryString()
    5. 获取请求URI：
      - String getRequestURI()：返回虚拟目录加servlet路径
      - String getRequestURI()：返回浏览器地址栏中的地址，即http://…….形式的
    6. 获取协议及版本：String getProtocol()
    7. 获取客户机ip地址：String getRemoteAddr()
2. 获取请求头数据：
  - 方法：
    - String getHeader(String name)：通过请求头的名称获取请求头的值
    - Enmueration< string> getHeaderNames()：获取所有请求头的名称
3. 获取请求体数据：
  - 请求体只有在POST请求方式中才有，请求体中封装了POST请求的参数
  - 步骤：
    1. 获取流对象
      - BufferedReader getReader()：获取字符输入流，只能操作字符数据
      - ServletInputStream getInputStream()：获取字节输入流，可以操作所有数据类型数据
    2. 再从流对象中拿数据
其他功能：
1. 获取请求参数通用方式：
  1. String getParameter(String name)：根据参数名称获取参数值
  2. String[] getParameterValues(String name)：根据参数名称获取参数值的数组
  3. Enmueration< string> getParameterNames()：获取所有请求的参数名称
  4. Map< String, String[]> getParameterMap()：获取所有参数的Map集合
  - 中文乱码问题：
    - get方式：tomcat8已经将get方式乱码问题解决了
    - post方式：在获取参数前，设置request的编码request.setCharacterEncoding("utf-8")
2. 请求转发：一种在服务器内部的资源跳转方式
  - 步骤：
    1. 通过request对象获取请求转发对象：RequestDispatcher getRequestDispatcher(String path)
    2. 使用RequestDispatcher对象来进行转发：forward(ServletRequest request, ServletResponse response)
  - 特点：
    1. 浏览器地址栏路径不发生变化
    2. 只能转发到当前服务器内部资源中
    3. 转发是一次请求
3. 共享数据：
  - 域对象：一个有作用范围的对象，可以在范围内共享数据
  - request域：代表一次请求的范围，一般用于请求转发中的多个资源中共享数据
  - 方法：
    1. void setAttribute(String name, Object obj)：存储数据
    2. Object getAttribute(String name)：通过键获取值
    3. void removeAttribute(String name)：通过键移除键值对
4. 获取ServletContext：
  - ServletContext getServletContext()

BeanUtils工具类，简化数据封装

用于封装JavaBean的
JavaBean：标准的java类
- 要求：
  1. 类必须被public修饰
  2. 必须提供空参的构造器
  3. 成员变量必须使用private修饰
  4. 提供public修饰的getter和setter
- 功能：封装数据
概念：
- 成员变量
- 属性：setter和getter方法截取后的产物
  - 如
```
public void setHehe(String gender){
     this.gender = gender;
}
```
  - 其中成员变量是gender，属性是hehe
方法：
1. setProperty()：设置JavaBean对象属性值
2. getProperty()：获取JavaBean对象属性值
3. populate(Object obj，Map map)：将map集合的键值对信息封装到对于的JavaBean对象中

Response

2020-05-08

JavaWeb

Response

设置响应消息：
1. 设置响应行
  - 设置状态码：setStatus(int sc)
2. 设置响应头
  - setHeader(Sting name, Sring value)
3. 设置响应体：
  - 使用步骤：
    1. 获取输出流
    2. 使用输出流将数据输出到客户端浏览器

案例：

完成重定向

重定向：资源跳转的方式

代码：

//设置状态码
resp.setStatus(302);
//设置重定向资源location路径
resp.setHeader("location","/javaweb_tomcat_war_exploded/ResponseDemo02");

简化写法：resp.sendRedirect("/javaweb_tomcat_war_exploded/ResponseDemo02");
重定向的特点：
1. 浏览器地址栏发生变化
2. 重定向可以访问其他站点（服务器）的资源
3. 重定向是两次请求，不能使用request对象共享数据
路径写法：
1. 路径分类：
  1. 相对路径：通过相对路径不可以确定唯一资源
    - 如：./index.html
    - 不以/开业，以.开头的路径
    - 规则：找到当前资源和目标资源之间的关系
      - ./：当前目录
      - ../：后退一级目录
  2. 绝对路径：通过相对路径可以确定唯一资源
    - 如：http://localhost/day15/responseDemo2
    - 以/开头的路径
    - 规则：判断定义的路径给谁用
      - 给客户端浏览器使用：需要加虚拟目录（项目的访问路径）
        
        建议虚拟目录动态获取：request.getContextPath()
      - 给服务使用：不需要加虚拟目录

服务器输出字符数据到浏览器
- 步骤：
  1. 获取字符输出流
  2. 输出数据
- 注意：乱码问题
  - 获取的流的默认编码格式是ISO-8859-1，需要设置该流的默认编码，告诉浏览器响应体使用的编码。
  - resp.setContentType("text/html;charset=utf-8");在获取流之前设置
服务器输出字节数据到浏览器
- 步骤：
  1. 获取字节输出流
  2. 输出数据

验证码

public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    int width = 100;
    int height = 50;

    //创建对象，在内存中和代表图片（验证码图片对象）
    BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    //美化图片
    //获取画笔对象
    Graphics graphics = bufferedImage.getGraphics();
    //设置填充的背景色
    graphics.setColor(Color.PINK);
    //设置填充开始的坐标以及宽度高度，填充一个矩形
    graphics.fillRect(0, 0, width, height);
    //设置边框的颜色
    graphics.setColor(Color.BLUE);
    //从坐标处画一个边框，因为边框的有1px的宽度，所有宽度和高度要减去1
    graphics.drawRect(0, 0, width - 1, height - 1);
    //设置验证码的颜色
    graphics.setColor(new Color(214, 24, 215));
    //随机生成4个验证码，放入图中
    String str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
    Random random = new Random();
    for (int i = 1; i <= 4; i++) {
        int index = random.nextInt(str.length());
        char ch = str.charAt(index);
        graphics.drawString(ch + "", width / 5 * i, height / 2);
    }
    //设置干扰线的颜色
    graphics.setColor(Color.RED);
    //随机生成10条干扰线放入图中
    for (int i = 0; i < 10; i++) {
        int x1 = random.nextInt(width);
        int y1 = random.nextInt(height);
        int x2 = random.nextInt(width);
        int y2 = random.nextInt(height);
        graphics.drawLine(x1, y1, x2, y2);
    }
    //将图片输出到页面
    ImageIO.write(bufferedImage, "jpg", resp.getOutputStream());
}

ServletContext

2020-05-08

JavaWeb

ServletContext

概念：代表整个web应用，可以和程序的容器（服务器）来通信

获取：

通过request对象来获取
- request.getServletContext()
通过HttpServlet获取
- this.getServletContext()

两种方法获取只能获取一个，获取的是同一个

功能：

获取MIME类型
- MIME类型：在互联网通信过程中定义的一种文件数据类型
  - 格式：大类型/小类型 text/html image/jpeg
- 获取：String getMimeType(String file)
域对象，共享数据
1. setAttribute(String name, Object value)
2. getAttribute(String name)
3. removeAttribute(String name)
- 这个域的范围：所有用户所有请求的数据
获取文件的真实（服务器）路径
1. 方法：String getRealPath(String Path)
  - web目录下获取，直接/a.txt
  - WEB-INF目录下获取，/WEB-INF/a.txt
  - src目录下获取，/WEB-INF/classes/a.txt

文件下载案例

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    //通过传递的参数获取要下载的文件的文件名
    String filename = req.getParameter("filename");
    ServletContext servletContext = this.getServletContext();
    //通过ServletContext获取要下载文件的真实路径
    String realPath = servletContext.getRealPath("/img/" + filename);
    //创建字节输入流，用于读取文件
    FileInputStream fis = new FileInputStream(realPath);
    //获取发送文件的MIME数据类型
    String mimeType = servletContext.getMimeType(filename);
    //设置content-type响应头
    resp.setHeader("content-type", mimeType);
    //设置content-disposition响应头，设置成附件打开
    resp.setHeader("content-disposition", "attachment;filename=" + filename);
    //获取字节输出流
    ServletOutputStream os = resp.getOutputStream();
    byte[] bytes = new byte[1024];
    int len = 0;
    //下载文件
    while ((len = fis.read(bytes)) != -1) {
        os.write(bytes, 0, len);
    }
    //释放资源
    fis.close();
}

注意：在弹出的下载框中会遇到中文文件名乱码问题，需要针对不同浏览器进行解决，可以先获取浏览器的版本信息，然后设置编码，网上有很多解决这个问题的工具类，可以咨询查找。

Bootstrap

2020-05-05

Bootstrap

概念：一个前端开发的框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
- 框架：一个半成品软件。开发人员可以在框架基础上再进行开发，简化编码。
- 好处：
  1. 定义了很多的css样式和js插件。我们开发人员可以直接使用这些样式和插件得到丰富的页面效果。
  2. 响应式布局。
    - 同一套页面可以兼容不同分辨率的设备。

快速入门

下载Bootstrap
在项目中将下载解压完的文件中的三个文件夹复制
创建html页面，引入必要的资源文件

响应式布局

实现：依赖于栅格系统。
- 栅格系统：将一行平均分割成12个格子，可以指定元素占几个格子。
步骤：
1. 定义容器
  - 容器分类：
    1. container：固定宽度。每一种设备的宽度都是一个不同的固定值
    2. container-fluid：每一种设备都是100%宽度
2. 定义行样式：row
3. 定义元素。指定该元素在不同的设备上占用的格子数目样式：col-设备代号-格子数目
  - 设备代号：
    1. xs：超小屏幕手机(<768px)
    2. sm：小屏幕平板(>=768px)
    3. md：中等屏幕桌面显示器(>=992px)
    4. lg：大屏幕大桌面显示器(>=1200px)
- 注意：
  1. 一行中如果格子数目超过12，则超出部分自动换行
  2. 栅格类属性可以向上兼容
  3. 如果真实设备的宽度小于了设置的栅格类属性的设备代码的最小值，会一个元素占满一整行

CSS样式和JS插件

全局CSS样式：

按钮：例如 btn btn-default
图片：
- 响应式图片 class="img-responsive"
- 图片形状例如 class="img-rounded"
表格：查看文档
表单：查看文档

组件：

导航条：navbar
分页条：pagination

插件：

轮播图：Carousel

Bootstrap更多用法请自询查找文档，上面很详细。

XML

2020-05-05

XML

概念：Extersible Markup Language 可扩展标记语言
- 可扩展：标签都是自定义的。
功能：
- 存储数据：
  1. 配置文件
  2. 在网络中传输
与html的区别：
1. xml标签都是自定义的，html是预定义的
2. xml语法严格，html语法松散
3. xml存储数据，html展示数据

语法

基本语法：

xml第一行必须定义为文档声明
xml文档中有且仅有一个根标签
属性值必须使用引号引起来
标签必须正确关闭
xml标签名称区分大小写

组成部分：

文档声明
1. 格式<?xml 属性列表 ?>
2. 属性列表：
  - version：版本号，必须的属性
  - encoding：编码格式，告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1
  - standalone：是否独立，是否依赖其他文件
指令：结合css的，了解即可。
标签：标签名称自定义的。
- 规则：
  1. 数字或者标点符号不能开头
  2. 名称不能以字母xml或者XML开头
  3. 名称中不能包含空格
属性：id值唯一。
文本内容：
- CDATA区：在该区域的文字会被原样展示。
```
<![CDATA[
    文本内容
]]>
```

约束：规定xml文档的编写规则

分类：
1. DTD：一种简单的约束技术
2. Schemea：一种复杂的约束技术
DTD：
- 引入dtd文档到xml文档中
  1. 内部dtd：
    - <!DOCTYPE 根标签名 [dtd文件中具体内容]>
  2. 外部dtd：
    - 本地：<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
    - 外部：<!DOCTYPE 根标签名 PUBLIC "随便取个文件名" "dtd文件的位置URL">
Schema：
- 引入：
  1. 填写xml文档的根元素
  2. 引入xsi前缀 xmlns:xsi=”…”
  3. 引入xsd文件命名空间 xsi:schemaLocation=”….”
  4. 为每一个xsd约束声明一个前缀，作为标识 xmlns:…=”….”

解析：操作xml文档，将文档中数据读取到内存中

操作xml文档：
1. 解析（读取）
2. 写入：将内存中的数据保存到xml文档中，持久化的存储
解析xml的方式：
1. DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树
  - 优点：操作方便，可以对文档进行CRUD的操作
  - 缺点：占内存
2. SAX：逐行读取，基于事件驱动的
  - 优点：不占内存
  - 缺点：只能读取不能增删改
xml常见的解析器：
1. JAXP：sun公司提供的解析器，支持DOM和SAX
2. DOM4J：一款非常优秀的解析器，DOM方式
3. Jsoup：是一款HTML解析器，但是比较好用，也可以用于解析XML，DOM方式
4. PULL：Andriod操作系统内置的解析器，SAX方式

Jsoup

快速入门：
- 步骤：
  1. 导入jar包
  2. 获取Document对象
  3. 获取对应的标签Element对象
  4. 获取数据
对象的使用：
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 timeoustMillis)：通过网络路径获取指定的html或xml的文档对象
2. Document：文档对象，代表内存中得到DOM树
  - 获取Element对象：
    - getElementsByTag(String tagName)：根据标签名称获取元素对象集合
    - getElementsByAttribute(String key)：根据属性名称获取元素对象集合
    - getElementsByAttributeValue(String key，String value)：根据对应的属性名称和属性值获取元素对象集合
    - getElementsById(String id)：根据id属性值获取唯一Element对象
3. Elements：元素Element对象的集合。可以当做ArrayList< Element>来使用
4. Element：元素对象
  1. 获取子元素对象：
    - getElementsByTag(String tagName)：根据标签名称获取元素对象集合
    - getElementsByAttribute(String key)：根据属性名称获取元素对象集合
    - getElementsByAttributeValue(String key，String value)：根据对应的属性名称和属性值获取元素对象集合
    - getElementsById(String id)：根据id属性值获取唯一Element对象
  2. 获取属性值：
    - String attr(String key)：根据属性名称获取属性值
  3. 获取文本：
    - String text()；纯文本内容
    - String html()：包括子标签的内容
5. Node：节点对象
  - 是Document和Element的父类
快速查询方式：
1. selector：选择器
  - 使用的方法：Elements select(String cssQuery)
    - 语法：参考selector类中定义的语法
2. XPath：XML路径语言，用来确定XML文档中某部分位置的语言
  - 使用Jsoup的Xpath需要额外导入jar包
  - 查询XPath语法完成查询

Tomcat和Servlet

2020-05-05

JavaWeb

Tomcat

web服务器软件。

服务器：安装了服务器软件的计算机。
服务器软件：接收用户请求，处理请求，做出响应。
web服务器软件：接收用户请求，处理请求，做出响应。
- 在web服务器软件中可以部署web项目，让用户通过浏览器访问这些项目。
- web容器

常见的java相关的web服务器软件：

webLogic：Oracle公司，大型javaEE服务器，支持所有的javaEE规范，收费。
webSphere：IBM公司，大型javaEE服务器，支持所有的javaEE规范，收费。
JBOSS：JBOSS公司，大型javaEE服务器，支持所有的javaEE规范，收费。
Tomcat：Apache基金组织，中小型javaEE服务器，仅仅支持少量javaEE规范，开源免费。

配置

部署项目的方式：
1. 直接将项目放在webapps文件夹下。
  - 简化部署：将项目打包成一个war包，再将war包放到webapps目录下，war包会自动解压缩。
2. 配置conf/server.xml文件，在< host>标签体中配置<Context docBase="项目存放路径" path="/虚拟目录" />
3. 在conf/Catalina/localhost创建任意名称的xml文件，在文件中编写<Context docBase="项目存放路径" />，虚拟目录就是xml文件的名称。

Servlet简单学习

运行在服务器端的小程序。

Servlet就是一个接口，定义了java类被浏览器访问到(tomcat识别)的规则。
将来我们自定义一个类，实现Servlet接口，复写方法。

Servlet快速入门

创建javaEE的项目
定义一个类，必须实现Servlet接口
实现接口中的抽象方法

配置Servlet

web.xml中配置：

<servlet>
    <servlet-name>demo01</servlet-name>
    <servlet-class>web.servlet.ServletDemo01</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>demo01</servlet-name>
    <url-pattern>/demo01</url-pattern>
</servlet-mapping>

执行原理

当服务器接收到客户端浏览器的请求后，会解析请求的URL路径，获取访问的servlet的资源路径。
查找web.xml文件是否有对应的<url-pattern>标签体内容。
如果有则在找到对应的<servlet-class>全类名。
tomcat会将字节码文件加载进内存，并且创建其对象。
调用其方法。

Servlet的生命周期：

被创建：执行init方法，只执行一次。
- servlet什么时候被创建？
  - 默认情况下，第一次访问时，servlet被创建
  - 可以配置执行servlet的创建时机
    - 在<servlet>标签下配置
      1. 第一次被访问时，创建
        
        <load-on-startup>的值为负数
      2. 在服务器启动时，创建
        
        <load-on-startup>的值为0或正数
- servlet的init方法只执行一次，说明一个servlet在内存中只存在一个对象，servlet是单例的。
  - 多个用户同时访问时，可能存在线程安全问题。
    - 解决：尽量不要在servlet中定义成员变量。即使定义了成员变量，也不要对其修改值。
提供服务：执行service方法，可以执行多次。
- 每次访问servlet时都会执行一次。
被销毁：执行destroy方法，只执行一次。
- servlet被销毁时执行一次，服务器正常关闭时。

Servlet3.0及以上：

好处：
- 支持注解配置。可以不需要web.xml。
步骤：
1. 创建javaEE项目，选择servlet版本3.0以上，可以不创建web.xml。
2. 定义一个类实现Servlet接口。
3. 复写方法。
  1. 在类上使用@WebServlet(“资源路径”)注解进行配置。

Servlet的体系结构：

Servlet，GenericServlet，HttpServlet
1. GenericServlet继承自Servlet，将Servlet接口中除service方法都进行了默认空实现，只将service方法作为抽象方法，定义时只需实现service方法即可。
2. HttpServlet继承自GenericServlet，是对http协议的一种封装，简化操作。定义时可以复写doGet/doPost方法。

Servlet相关配置：

urlpartten：Servlet访问路径
1. 一个Servlet可以定义多个访问路径：@WebServlet({“/路径1”，”/路径2”，”/路径3”})。
2. 路径定义规则：
  1. /xxx
  2. /xxxx/xx/xxx：多层路径，目录结构。
  3. *.后缀名

IDEA与Tomcat的相关配置

IDEA会为每一个Tomacat部署的项目单独建立一份配置文件。
- 查看控制台的log中的CATALINA_BASE。
工作空间项目和Tomacat部署的web项目是两个存在。
- Tomcat真正访问的是“Tomacat部署的web项目”，“Tomacat部署的web项目”对应着的是“工作空间项目”的web目录下的所有资源。
- WEB-INF目录下的资源不能被浏览器直接访问。
- 断点调试：使用Debug启动而不是Run。

JavaScript

2020-05-01

JavaScript

ECMAScript：客户端脚本语言的标准

1.基本语法

与html结合方式
1. 内部js：定义< script>js代码< script/>
2. 外部js：定义< script src属性引入外部js文件>js代码< script/>
- 注意：< script>可以定义在html页面的任何地方，但是定义的位置会影响执行的顺序。< script>标签可以定义多个。
注释
- 和java中注释规则一样。
数据类型
1. 原始数据类型：
  1. number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）
  2. string：字符串
  3. boolean：true/false
  4. null：空
  5. undefined：未定义。如果一个对象没有给初始化值，则会被默认赋值为undefined
2. 引用数据类型：对象
变量
- Java是强类型语言，而JavaScript是弱类型语言。
  - 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定的数据类型。
  - 弱类型：在开辟变量存储空间时，不定义空间将来存储的数据的数据类型，可以存放任意的数据类型。
- 语法：var 变量名=变量值；
运算符
- 一元运算符：只有一个运算数的运算符
  - ++，–，+（正号），-（负号），等
  - 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。
    - 其他类型转number：
      - string转number，按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字）
      - boolean转number，true转为1，false转为0
      - 其他两种类型转为NaN
- 算数运算符：数学运算
  - +，-，*，/，%等
- 赋值运算符
  - =，+=，-=等
- 比较运算符
  - <，>，>=，<=，==，===（全等于）
  - 比较方式：
    1. 类型相同：直接比较。
    2. 类型不同：先进行类型转换再进行比较。
  - ===（全等于）：在比较之前，先判断类型，如果类型不一样，则直接返回false。
- 逻辑运算符
  - &&，||，！
  - 其他类型转为boolean类型：
    - number：0或NaN为false，其他都是true
    - string：除了空字符串（“”），其他都是true
    - null与undefined：都是false
    - 对象：所有对象都为true
- 三元运算符
  - ?:表达式
流程控制语句
- if…else…
- switch
  - 在JS中，switch可以接收任意原始数据类型
- while
- do…while
- for

2.基本对象

Function：函数对象
1. 创建
  1. var fun = new Function(形参列表，方法体)
  2. function 方法名称(形参列表){方法体}
  3. var 方法名 = function(形参列表){方法体}
2. 方法
3. 属性
  - length：代表形参的个数
4. 特点
  1. 方法定义时，形参的类型可以不用写，返回值类型也bu’xie
  2. 方法是一个对象，如果定义一个名称相同的方法，会覆盖之前的方法
  3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
  4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
5. 调用：
  - 方法名称(参数列表)；
Array：数组对象
1. 创建
  1. var arr = new Array(元素列表)；
  2. var arr = new Array(数组长度)；
  3. var arr = [元素列表]；
2. 方法
  - join(参数)：将数组的元素按照指定的分隔符拼接为字符串
  - push()：向数组中的末尾添加一个元素，并返回新的长度
3. 属性
  - length：数组的长度
4. 特点
  1. JS中，数组元素的类型是可变的
  2. JS中，数组的长度是可变的
Boolean
Date
1. 创建
  1. var date = new Date()；
2. 方法
  - toLocalString()：返回本地时间字符串格式
  - getTime()：获取毫秒值，返回当前日期对象描述的时间到970年1月1日0点的差
3. 属性
4. 特点
Math
1. 创建
  - 不用创建，直接使用
2. 方法
  - random()：返回0到1之间的随机数，包含0不包含1
  - cell(x)：向上取整
  - floor(x)：向下取整
  - round(x)：四舍五入
3. 属性
  - PI：圆周率
4. 特点
Number
String
RegExp：正则表达式对象
- 正则表达式：定义字符串的组成规则
  1. 单个字符：[]
  - 如：[a] [ab] [a-zA-Z0-9_]
  - 特殊符号代表特殊含义的单个字符：
    - \d：单个数字字符 [0-9]
    - \w：单个单词字符 [a-zA-Z0-9_]
  1. 量词符号：
    - ?：表示出现0次或1次
    - *：表示出现0次或多次
    - +：表示出现1次或多次
    - {m,n}：表示出现次数在m与n之中，包括m和n
      - {m,}：至少出现m次
      - {,n}：至多出现n次
  2. 开始结束符号：
    - ^：开始
    - $：结束
- 正则对象
  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
  - eval()：将JavaScript字符串，转成脚本来执行

3.BOM对象

概念：Browser object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象。
组成：
1. Window：窗口对象
  - 创建
  - 方法：
    1. 与弹出框有关的方法
      - alert()：显示带有一段消息和一个确认按钮的警告框。
      - confirm()：显示带有一段信息以及确认按钮和取消按钮的对话框。
        
        用户点击确认按钮，则返回true
        
        用户点击取消按钮，则返回false
      - prompt()：显示可提示用户输入的对话框。
        
        返回值。获取用户输入的值。
    2. 与打开关闭有关的方法：
      - open()：打开一个新的浏览器窗口
      - close()：关闭浏览器窗口
    3. 与定时器有关的方法
      - setTimeout()：在指定的毫秒数后调用函数或计算表达式。
        
        参数：
        
        参数1：js代码或者方法对象
        
        参数2：毫秒值
        
        返回值：唯一标识
      - clearTimeout()：取消由setTimeout()方法设置的timeout。
      - setInterval()：按照指定的周期（以毫秒计）来调用函数或表达式。
        
        参数：
        
        参数1：js代码或者方法对象
        
        参数2：毫秒值
        
        返回值：唯一标识
      - clearInterval()：取消seItnterval()设置的timeout。
  - 属性
    - 获取其他BOM对象：
      - history
      - location
      - Navigator
      - Screen
    - 获取DOM对象
      - document
  - 特点：
    1. 不需要创建，可以直接使用window使用。window.方法名()；
    2. window引用可以省略。方法名()；
2. Navigator：浏览器对象
3. Screen：显示器屏幕对象
4. History：历史记录对象
  - 创建(获取)
    1. window.history
    2. history
  - 方法
    - back() 加载history列表中的前一个URL
    - forward() 加载history列表中的下一个URL
    - go() 加载history列表中的某个具体页面
      - 参数：
        
        正数：前进几个历史记录
        
        负数：后退几个历史记录
  - 属性
    - length：返回当前窗口历史记录列表中的URL数量
5. Location：地址栏对象
  1. 创建(获取)
    - window.location
    - location
  2. 方法
    - reload() 重新加载当前文档。刷新
  3. 属性
    - href 设置或返回完整的URL

4.DOM对象

概念：Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分封装为对象。可以使用这些个对象，对标记语言文档进行CRUD的动态操作。
功能：控制html文档的内容
W3C DOM标准被分为3个不同的部分
- 核心DOM：针对任何结构化文档的标准模型
  - Document对象：文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
  - Node：节点对象，其他五个的父对象
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型
核心DOM模型：
- Document对象：文档对象
  1. 创建(获取)：在htnl模型中可以使用window对象来获取
    1. window.document
    2. document
  2. 方法：
    - 获取Element对象：
      - getElementById() 根据id属性值获取元素对象。
      - getElementsByTagName() 根据元素名称获取元素对象们，返回值是一个数组
      - getElementsByClassName() 根据class的属性值来获取元素对象们
      - getElementsByName() 根据Name属性值获取元素对象们
    - 创建其他DOM对象：
      - createAttribute(Name)
      - createComment()
      - createElement()
      - createTextNode()
  3. 属性：
    - parentNode：获取父节点
- Element：元素对象
  1. 获取：通过Document对象来获取和创建
  2. 方法：
    - removeAttribute()：删除属性
    - setAttribute()：设置属性
- Node：节点对象，其他五个的父对象
  - 特点：所有DOM对象都可以被认为是一个节点
  - 方法：
    - COUR DOM树：
      - appendChild()：向节点的子节点列表的结尾添加新的子节点。
      - removeChild()：删除(并返回)当前节点的指定子节点。
      - replaceChild()：用新的节点替换一个子节点
  - 属性：

HTML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性：查询API文档
控制元素样式：
1. 使用元素的style属性来设置
2. 提前定义好类选择器的样式，通过元素的className属性来设置类属性值。

操作Element对象
1. 修改属性值
  1. 明确获取的对象是哪一个？
  2. 查看API文档，看其中有哪些属性值可以设置
2. 修改标签体内容
  - 属性：innerHTML
事件简单学习
- 功能：某些组件被执行了某些操作后触发某些代码的执行
- 如何绑定事件：
  1. 直接在html标签上，指定事件的属性，属性值就是js代码
  2. 通过js获取元素对象，指定事件属性
事件
- 常见的事件：
  1. 点击事件：
    1. onclick：当用户点击某个对象时调用的事件句柄。
    2. ondblclick：双击事件
  2. 焦点事件：
    1. onblur：失去焦点
      - 可以用于表单验证
    2. onfocus：元素获得焦点
  3. 加载事件：
    1. onload：一张页面或一张图片完成加载
  4. 鼠标事件：
    1. onmousedown：鼠标按钮被按下
      - 定义方法时，定义一个形参，接受event对象
      - event对象的button属性可以获取哪个鼠标按钮键被点击了
    2. onmouseup：鼠标按键被松开
    3. onmousemove：鼠标被移动
    4. onmouseover：鼠标移到某元素之上
    5. onmouseout：鼠标从某元素移开
  5. 键盘事件：
    1. onkeydown：键盘某个按键被按下
    2. onkeyup：键盘某个按键被松开
    3. onkeypress：键盘按下并松开
  6. 选中和改变：
    1. onchange：域的内容被改变
    2. onselect：文本被选中
  7. 表单事件：
    1. onsubmit：确认按钮被点击
      - 可以阻止表单的提交，方法返回true则提交，返回false则不提交
    2. onreset：重置按钮被点击

CSS

2020-05-01

CSS

页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
好处
1. 功能强大
2. 将内容的展示和样式控制分离
  - 降低耦合度
  - 让分工协作更容易
  - 提高开发效率

CSS的使用：CSS与html结合方式

内联样式：在标签内使用style属性指定css代码
- 如：< div style=”color:red;”>hello< /div>

内部样式：在head标签内，定义style标签，style标签的内容就是css代码

如

<head>
    <style>
        div{
            color:blue;
        }
    </style>
</head>

<div>hello</div>

外部样式:定义css资源文件，在head标签内，定义link标签，引入外部资源文件。

如

<head>
    <link rel="stylesheet" href="css/a.css">
</head>

<div>hello</div>

CSS基本语法

格式：

选择器{
    属性名1：属性值1；
    属性名2：属性值2；
    .....
}

选择器：筛选具有相似特征的元素

选择器

分类：
1. 基础选择器
  1. id选择器：选择具体的id属性值的元素。
    - 语法：#id属性值{}
    - 优先级最高
  2. 元素选择器：选择具有相同标签名称的元素。
    - 语法：标签名称{}
    - 优先级低于id选择器和类选择器
  3. 类选择器：选择具有相同的class属性值的元素。
    - 语法：.class属性值{}
    - 优先级低于id选择器
2. 扩展选择器
  1. *：表示选择所有元素
    - 语法：*{}
  2. 并集选择器：筛选选择器1下和选择器2共有的元素
    - 语法：选择器1，选择器2{}
  3. 子选择器：筛选选择器1下的选择器2的元素
    - 语法：选择器1 选择器2{}
  4. 父选择器：：筛选选择器2的父元素选择器1
    - 语法：选择器1>选择器2{}
  5. 属性选择器：选择元素名称，属性名=属性值的元素
    - 语法：元素名称[ 属性名=”属性值” ]{}
  6. 伪类选择器：选择一些元素所具有的状态
    - 语法：元素:状态{}

属性

字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：文本对齐方式
- line-height：行高
背景
- background：复合属性。
边框
- border：设置边框，复合属性。
尺寸
- width：宽度
- height：高度
盒子模型：控制布局
- margin：外边距
- padding：内边距
  - 默认情况下内边距会影响整个盒子的大小，可以使用box-sizing：boder-box，让width和height就是盒子最终大小。
- float：浮动