当前位置：首页 > news >正文

JavaEE：知识总结(一)

news 2025/10/24 11:25:48

一、HTML

语法规范

HTML标签是由尖括号包围的关键词，例如<html>
HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签(极少情况)，例如<br/> ，我们称为单标签。

双标签关系可以分为两类：包含关系和并列关系

//包含关系 ，head包含的title
<head><title></title>
</head>

//并列关系，head和body是并列关系
<head></head>
<body></body>

基础结构标签

每一个网页都会有一个基本的结构标签(也称为骨架标签)，页面内容也是在这些基本标签上书写。 HTML页面也称为HTLML文档。

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们成为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放在body里面的

<head><title>第一个页面</title>
</head>
<body>键盘敲烂，工资过万
</body>
</html>

HTML标签

vscode工具生成骨架标签新增代码

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页 \ <!DOCTYPE html> 就是声明当前页面是用html5的版本来显示网页的。

注意：

<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
<!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签

<html lang="en"> 这里的lang是用来定义当前文档显示的语言 1.en定义语言为英语 2.ch-CN定义语言为中文，简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页

字符集是多个字符的集合，以便计算机能够识别和存储各种文字，在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

 <meta charset=“utf-8”/>

charset常用的值有：GB2312、BIG5、GBK和UTF-8,其中YTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题，即<h1> - <h6>。

  <h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6>

特点：1.加了标题的文字会变的加粗，字号也会依次变大

2.一个标题独占一行

段落和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落

<p>啦</p>啦啦

特点：<p>标签可以把HTML文档分割为若干段落，文本在一个段落中会根据浏览器窗口的大小自动换行，段落和段落之间包有空隙。

在HTML中，一个段落中的文字从左到右依次排列，直到浏览器的右端，然后才自动换行，如果西瓦那个某段文本强制瀚航显示，就需要使用换行标签

<br/>

语义：强制换行

特点：1.<br/>是个单标签 2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

语义	标签	说明
加粗	<strong></strong>strong>或者<b></b>b>	更推荐使用<strong>标签加粗语义更强烈
倾斜	<em></em>或者<i></i>	更推荐使用<em>标签倾斜语义更强烈
删除线	<del></del>或者<u></u>	更推荐使用<del>标签删除线，语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>标签，语义更强烈

<div>和<span>标签

<div>和<span>使没有语义的，他们就是一个盒子，用来装内容的

特点：

1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

2.<span>标签用来布局，一行上可以放多个<span>.小盒子

图像标签和路径

在HTML标签中，<img>标签用于定义HTML页面中的图像 <img src="图像URL"/>

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意点：

1.图像标签可以拥有多个属性，必须写在标签后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均与空格分开

3.属性采取键值对的格式，即key = "value"的格式，属性 = "属性值"。

路径

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级
下一级路径	/	图像文件位于HTML文件下一级
上一级路径	../	图像文件位于HTML文件上一级

相对路径是从代码所在这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径符号是：\

链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面

 <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

属性	作用
href	用以指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_ blank为在新窗口中打开方式

空链接：如果当时没有确定链接目标时，<a href="#">首页</a>

下载链接：如果href里面地址时一个文件或者压缩包，会下载这个文件。

锚点链接

点我们点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集</h3>

注释和特殊字符

注释：如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签， HTML中的注释以""结束

<!--注释语句--> 快捷键：ctrl + /

注释标签里面的内容时给程序员看到，这个代码是不执行不显示到页面中的。

表格标签

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。

表格不是用来布局页面的，而是用来展示数据的。

<table><tr><td>单元格内的文字</td></tr>
</table>

<table></table>是用来定义表格的标签
<tr>和</tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
<td>和</td>用来定义表格中的单元格，必须嵌套在<tr>和</tr>标签中
字母td指表格数据，即数据单元格的内容

表头单元格

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分

表格结构标签：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割称表格头部和表格主题两大部分，在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主题区域。

<thead></thead>：用来定义表格的头部。<thead>内部必须拥有<tr>标签，一般是位于第一行

<tbody></tbody>：用于定义表格的主体，主要用于放数据本体

以上标签都是放在<table></table>标签中

合并单元格

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

1.先确定是跨行还是跨列合并

2.找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan="2"></td>

3.删除多余的单元格

列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、偶徐、它作为布局会更加自由和方便。

根据使用场景不同，列表可以分为三大类：无序列表、有序列表和自定义列表

无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义

<ul><li>列表项</li><li>列表项</li><li>列表项</li>
</ul>>

1.无序列表的各个列表项之间没有顺序级别之分，是并列的

2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

3.<li>于</li>之间相当于一个容器，可以容纳所有元素。

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数组来显示，并且使用<li>标签来定义列表项

<ol><li>列表项</li><li>列表项</li><li>列表项</li>
</ol>

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法时不被允许的。

2.<li>与</li>之间相当于一个容器，可以容纳所有元素。

自定义列表

在HTML标签中，<dl>标签用于定义描述列表，该标签会与<dt>和<dd>一起使用

<dl>
<dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd>
</dl>

表单标签

表单域是一个包含表单元素的区域

在HTML标签中，<from>标签用于定义表单域，以实现用户信息的收集和传递。

<from>会把范围内的表单元素信息提交到服务器

<form action = "url地址" method="提交方式" name="表单域名称">各种表单元素控件
</form0>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分页面中的多个表单域

<input>表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JS启动脚本)
checkbox	定义复选框
file	定于输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义没密码字段，该字段中的字符被淹码
radio	定义单选按钮
reset	定义重复按钮。重复按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

除type属性外，<input>标签还有其他很多属性

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	回顶此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1.name和value时每个表单元素都有的属性值，主要给后台人员使用

2.name表单元素的名字，要求单选按钮和复选框要有相同的name值

3.checked属性主要针对于单选按钮和复选框，主要作用就是打开页面，就要可以默认选中某个表单元素

4.mxlength时用户可以在表单元素输入的最大字符数，一般较少使用

<label>标签

<label>标签为input元素定义标注

<label>标签用以绑定一个表单元素，当带点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心：<label>标签的for'属性应当与相关元素的id属性相同

<select>下拉表单元素

<select><option>选项</option><option>选项</option><option>选项</option><option>选项</option>
</select>

1.<select>中至少包含一对<option>

2.在<option>中定义select = "selected"时，当前项即为默认选中项

<textarea>文本域表单元素

在表单元素中，<textarea>标签是用于定义多行文本输入的控件

<textarea row="3" cols ="20">
文本内容
</textarea>

1.通过<textarea>标签可以轻松地创建多行文本输入框

2.cols ="每行中的字符数"，rows ="显示的行数"

CSS

CSS 样式引入方式（3 种）

1. 行内样式（内联样式）

写法：直接在 HTML 标签内通过 style 属性定义，优先级最高。
```
<div style="color: red; font-size: 16px;">行内样式</div>
```
特点：仅作用于当前标签，耦合度高，维护困难，适合临时调试。

2. 内部样式

写法：在 HTML 头部的 <style> 标签内定义，作用于当前页面。

<head><style>div { color: blue; } /* 所有div标签生效 */</style>
</head>

特点：作用域为当前页面，避免重复书写，适合单页面样式。

3. 外部样式（推荐）

写法：将样式单独写入 .css 文件，通过 <link> 标签引入，可复用。
```
<link rel="stylesheet" href="style.css"> 
```
特点：多页面共享样式，降低耦合，便于维护，是项目开发的首选方式。

优先级规则

行内样式 > 内部样式 / 外部样式（后定义的覆盖先定义的） > 浏览器默认样式

二、CSS 选择器（核心：精准定位元素）

1. 基本选择器

选择器	语法示例	作用
元素选择器	`div { ... }`	选中所有指定标签（如所有 div）
ID 选择器	`#box { ... }`	选中 ID 为`box`的元素（ID 唯一）
类选择器	`.active { ... }`	选中所有 class 为`active`的元素
通配符选择器	`* { ... }`	选中页面所有元素（慎用，性能影响）

2. 组合选择器

选择器	语法示例	作用
包含选择器	`ul li { ... }`	选中 ul 内部所有 li（后代，包括嵌套的 li）
子选择器	`ul > li { ... }`	选中 ul 的直接子元素 li（仅一级）
兄弟选择器	`div ~ p { ... }`	选中 div 后面所有同级 p 元素
相邻选择器	`div + p { ... }`	选中 div 后面紧邻的第一个 p 元素
选择器组合	`div, p, .box { ... }`	同时选中 div、p、class 为 box 的元素

3. 伪类选择器（元素状态 / 位置）

结构伪类（按位置筛选）：

/* 选中ul中第5个li（n从1开始） */
ul li:nth-child(5) { ... }/* 选中ul中奇数位置的li（odd=2n-1，even=2n） */
ul li:nth-child(odd) { ... }/* 选中ul中类型为li的第3个（排除其他标签干扰） */
ul li:nth-of-type(3) { ... }/* 选中最后一个li */
ul li:last-child { ... }

状态伪类（按交互状态筛选）：

a:hover { ... } /* 鼠标悬停时 */
input:focus { ... } /* 获得焦点时（如输入框） */
input:checked { ... } /* 被选中时（如复选框） */
li:not(.active) { ... } /* 排除class为active的li */

4. 伪元素选择器（创建虚拟元素）

用于在元素前后插入内容或样式（虚拟元素，不在 DOM 中）：

css

/* 在p标签前插入内容 */
p::before { content: "前缀："; }/* 在p标签后插入内容 */
p::after { content: "后缀"; }/* 选中p标签的第一行文本 */
p::first-line { color: red; }

三、盒子模型（元素的布局基础）

每个 HTML 元素都可视为一个 “盒子”，由 4 部分组成（从内到外）：

内容区（content）：元素的文本或图片，通过 width/height 设置大小。
内边距（padding）：内容区与边框的距离，如 padding: 10px;（上下左右各 10px）。
边框（border）：盒子的边框，如 border: 1px solid #000;（1px 黑色实线）。
外边距（margin）：盒子与其他元素的距离，如 margin: 20px;（上下左右各 20px）。

总宽度 = width + padding-left + padding-right + border-left + border-right总高度 = height + padding-top + padding-bottom + border-top + border-bottom

四、元素类型与布局

1. 元素默认类型

类型	特点	示例标签
块级元素	独占一行，支持宽高设置	div、p、ul、li、h1-h6
内联元素（行内元素）	不独占一行，宽高由内容决定（不支持宽高设置）	span、a、strong、em
内联块元素	不独占一行，支持宽高设置	input、img、button

2. 类型转换（`display` 属性）

div { display: inline; } /* 块级→内联（不独占一行，宽高失效） */
span { display: block; } /* 内联→块级（独占一行，支持宽高） */
span { display: inline-block; } /* 内联→内联块（不独占一行，支持宽高） */

3. 内联块元素间隙问题

原因：HTML 中内联块元素之间的换行 / 空格会被解析为一个空格，导致间隙。
解决方法：
1. 元素代码首尾相连（去掉换行）；
2. 父元素设置 font-size: 0;（消除空格大小）；
3. 使用浮动（float）。

五、布局方式（浮动与弹性盒子）

1. 浮动（`float`）

作用：让元素脱离文档流，向左 / 右浮动（常用于横向排列）。

.box { float: left; } /* 向左浮动 */
.box { float: right; } /* 向右浮动 */

问题：父元素若未设置高度，浮动元素会导致父元素 “高度塌陷”（无法包裹子元素）。
解决：父元素添加 overflow: hidden;（触发 BFC，自动包裹浮动元素）。

2. 弹性盒子（`flex`，推荐）

作用：快速实现灵活的布局（如居中、均匀分布），父元素设置 display: flex; 开启。

核心属性：

.parent {display: flex; /* 父元素变为弹性容器 */flex-direction: row; /* 子元素排列方向：row（默认横向）、column（纵向） */justify-content: center; /* 主轴对齐方式：center（居中）、space-between（两端对齐） */align-items: center; /* 交叉轴对齐方式：center（居中） */
}

特点：子元素默认横向排列，无需处理浮动塌陷，是现代布局的首选方案。

三、JavaScript

一、JavaScript 引入方式

1. 内嵌式（写在 HTML 中）

位置：通常放在 <head> 或 <body> 中，若操作 DOM 建议用 window.onload 确保 DOM 加载完成。

<head><script>// 等待页面完全加载后执行（避免DOM未就绪）window.onload = function() {console.log("页面加载完成");};</script>
</head>

特点：仅作用于当前页面，适合简单逻辑。

2. 外引式（推荐，解耦代码）

写法：创建 .js 文件，通过 <script src="路径"> 引入，可添加 defer 确保 DOM 加载后执行。
```

<script src="app.js" defer></script>
```
注意：外引脚本的 <script> 标签内不能写内嵌代码（会被忽略，外引优先级更高）。

二、变量与数据类型

1. 变量声明（`var`）

var name = "张三"; // 字符串
var age = 20; // 数字
var isStudent = true; // 布尔值

特点：var 声明的变量存在变量提升，可重复声明（建议用 let/const 替代，更严谨）。

2. 数据类型

类型	说明	示例
基本类型
数字（Number）	整数、小数，统一为 Number 类型	`100`、`3.14`、`NaN`（非数字）
字符串（String）	单引号 / 双引号包裹的文本	`'hello'`、`"world"`
布尔（Boolean）	只有 `true`（真）和 `false`（假）	`var flag = true;`
undefined	变量声明未赋值时的默认值	`var a; // a的值为undefined`
null	表示 “空值”，主动赋值表示无意义	`var obj = null;`
复合类型
数组（Array）	有序集合，通过索引访问（索引从 0 开始）	`var arr = [1, 2, 3];`
对象（Object）	无序键值对集合，键为字符串	`var obj = { name: "张三" };`
函数（Function）	可执行的代码块，可作为变量赋值	`function fn() {}`

三、函数定义与调用

1. 普通函数

// 定义
function add(a, b) {return a + b;
}
// 调用
var result = add(2, 3); // result = 5

2. 匿名函数（无名称，通常赋值给变量）

var eat = function(food) {console.log("吃" + food);
};
eat("苹果"); // 输出：吃苹果

四、事件处理（交互核心）

事件是用户与页面的交互触发的动作（如点击、鼠标移动），通过绑定事件处理函数响应。

常用事件

事件名	触发时机	示例
`onclick`	鼠标单击元素	`document.onclick = function() {}`
`ondblclick`	鼠标双击元素	`btn.ondblclick = function() {}`
`onmouseenter`	鼠标移入元素	`div.onmouseenter = function() {}`
`onload`	页面 / 资源加载完成（常用于 window）	`window.onload = function() {}`

示例：点击改变背景色

window.onload = function() {// 点击文档时，修改body背景色为红色document.onclick = function() {document.body.style.background = "red";};
};

五、定时器（控制代码执行时机）

1. 周期定时器（重复执行）

// 每隔1秒执行一次（返回定时器ID）
var timer = setInterval(function() {console.log("每1秒执行一次");
}, 1000);// 清除定时器（停止执行）
clearInterval(timer);

2. 延迟定时器（仅执行一次）

// 3秒后执行一次
var timer = setTimeout(function() {console.log("3秒后执行");
}, 3000);// 清除延迟定时器（取消执行）
clearTimeout(timer);

六、DOM 操作（文档对象模型）

DOM 将 HTML 文档视为树状结构，通过 JavaScript 可动态操作元素（增删改查）。

1. 获取元素

// 通过ID获取（返回单个元素）
var box = document.getElementById("box");// 通过class获取（返回元素集合）
var items = document.getElementsByClassName("item");

2. 操作元素内容

var div = document.getElementById("div1");// innerHTML：解析标签（会渲染HTML）
div.innerHTML = "<h1>标题</h1>"; // 页面显示一级标题// innerText：仅作为文本（不解析标签）
div.innerText = "<h1>标题</h1>"; // 页面显示原文本 "<h1>标题</h1>"

3. 操作属性

var img = document.getElementById("img1");// 获取自定义属性
var src = img.getAttribute("data-src");// 设置属性
img.setAttribute("src", "image.jpg"); // 设置src属性

4. 增删改元素

// 创建元素
var h1 = document.createElement("h1");
h1.innerText = "新标题";// 添加元素（添加到body末尾）
document.body.appendChild(h1);// 插入元素（插入到某个元素前）
var p = document.getElementById("p1");
document.body.insertBefore(h1, p); // 把h1插入到p前面// 复制元素（true：复制子元素；false：仅复制当前元素）
var h1Copy = h1.cloneNode(true);// 删除元素（必须通过父元素删除）
var parent = h1.parentElement;
parent.removeChild(h1);

七、CSS 布局相关（JS 操作样式）

1. 定位方式

固定定位（position: fixed）：元素固定在视口，不随滚动条滚动（如导航栏）。

var nav = document.getElementById("nav");
nav.style.position = "fixed";
nav.style.top = "0"; // 固定在顶部

父相子绝：父元素用 position: relative，子元素用 position: absolute，子元素相对于父元素定位。

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.style.position = "relative";
child.style.position = "absolute";
child.style.top = "20px"; // 相对于父元素顶部20px

2. 图片适配（`object-fit: cover`）

保证图片不变形，裁剪多余部分填满容器：

var img = document.getElementById("img1");
img.style.objectFit = "cover";

3. 层级控制（`z-index`）

数值越大，元素层级越高（需配合定位使用）：

var modal = document.getElementById("modal");
modal.style.zIndex = "100"; // 置于顶层

四、AJAX

概念：异步的js和XML

XML：可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构

作用：

数据交互：通过Ajax可以给服务器发送请求，并获取服务端响应的数据。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户名是否可用的校验等等。

Axios

Axios对原生的Ajax进行了封装，简化书写，快速开发。

使用步骤：

第一步：引入Axios的JS文件

在网页开发中，若要使用Axios库，首先需要将其JavaScript文件引入到项目中。引入的方式是在HTML文件的<script>标签内，通过src属性指定Axios文件的路径，如<script src="js/axios-0.18.0.js"></script>。这一步至关重要，它使得浏览器能够加载并解析Axios库的代码，从而让后续的JavaScript代码能够调用Axios提供的各种功能。就如同在建造房屋时，需要先准备好所需的建筑材料一样，引入Axios文件为使用它发送网络请求提供了基础支持。

第二步：使用Axios发送请求，并获取响应结果

当Axios库成功引入后，就可以在JavaScript代码中使用它来发送网络请求了。Axios支持多种类型的请求，如GET、POST、PUT、DELETE等，能够满足不同的数据交互需求。发送请求时，需要指定请求的目标URL以及相关的配置参数（如请求方法、请求头、请求体等）。一旦请求发送出去，Axios会在后台与服务器进行通信，当服务器返回响应时，Axios会将响应结果进行处理，并通过Promise等方式将结果返回给调用者。开发者可以在返回的结果中获取到服务器返回的数据、状态码等信息，进而根据这些信息进行相应的业务逻辑处理，比如更新页面内容、显示提示信息等。

Axios为常见HTTP请求提供别名方法，方便调用：

axios.get(url [, config])：发起GET请求，从服务器获取数据。
axios.delete(url [, config])：发起DELETE请求，删除服务器资源。
axios.post(url [, data[, config]])：发起POST请求，向服务器提交数据。
axios.put(url [, data[, config]])：发起PUT请求，更新服务器资源。

请求回来的结果用emps填装，如下图

可以通过async、await可以让异步变为同步造作。async就是生命一个异步方法，await是用来等待异步任务执行

注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到成功的结果值。

五、服务器技术

1.JavaWeb

1.1. C/S 结构

C/S 结构即客户端/服务器（Client/Server）结构，以 QQ 为例，它采用的就是 C/S 结构。我们每个人电脑上都需要安装 QQ 的客户端，客户端软件负责向服务器端软件发送请求，而服务器端则给客户端返回响应。

然而，由于客户端需要不断更新，这给用户使用带来了一定麻烦。如今的 C/S 结构客户端有了很大改进，能够提示用户进行更新，用户只需点击更新即可完成操作。在早期，用户需要自行前往官网上下载最新客户端，然后卸载老版本，再安装新版本。

1.2.B/S结构

B/S 结构即浏览器/服务器（Browser/Server）结构。例如，各类网站均采用 B/S 结构，网站不过是 B/S 结构体系软件中的一种类型，网上银行同样属于 B/S 结构。

B/S 结构的优势在于无需用户更新客户端，客户端仅需具备一个浏览器即可。当软件需要更新时，开发人员只需关注服务器端。就好比在浏览器中访问百度时，即便发现百度的主页发生了变化，用户也无需进行任何更新操作。

1.3静态网页和动态网页

早期，Internet 上的网页均为静态网页，也就是 html 页面。静态网页的数据无法自动变化，例如网页上显示“欢迎 XXX 登录本系统”，这表明当前用户名为 XXX。倘若有其他用户登录系统，就应当显示其他用户的名字，并且无需对页面进行修改。换句话说，用户名应该是变量，而非常量，这是静态网页无法实现的功能。

动态网页可以包含变量，数据变化就不再是难题。然而，动态网页只能在服务器端使用，客户端浏览器只能识别静态网页。所以，如果用户请求的是动态网页，那么就需要服务器先将动态网页转换成静态网页，再发送给客户端浏览器。简而言之，动态网页必须由服务器来处理。

1.4常见的网页

动态网页：php、asp、aspx、jsp、.do、.action

1.5Web服务器

Web 服务器的主要作用是接收客户端发出的请求，并向客户端作出响应。

以下是一些知名的 Java Web 服务器：

Tomcat（Apache）：适用于开发学习使用，具有免费且开源的特点。
JBoss（Redhat 红帽）：
Weblogic（Orcale）：属于商业软件，需要付费使用。通常使用 Tomcat 进行开发，待项目完成后，将其部署到 Weblogic 上运行。
Websphere（IBM）：同样是商业软件，需要付费，其特性与 Weblogic 较为相似。

2.Tomcat安装(熟练)

2.1.Tomcat概述

Tomcat 服务器由 Apache 提供，具有开源且免费的特点，是开发学习时的优质选择。在安装 Tomcat 之前，需要先安装 JDK，实际上，无论使用哪一种 JavaWeb 服务器，都需要先完成 JDK 的安装。目前我们可使用的 Tomcat 版本有 Tomcat8.5 或 Tomcat9。

具体而言，Tomcat6 支持 Servlet2.5 规范；Tomcat7、8、9 则支持 Servlet3.0 规范。

2.2.Tomcat的作用

当用户发送一个请求时，Tomcat 会承担接收该请求的任务，并向用户返回响应。通常情况下，用户通过常规浏览器发送请求，此时浏览器接收到的响应一般为 html 代码。然而，也存在其他情况，用户可能会借助其他方式向服务器发送请求，而 Tomcat 返回的响应内容并非仅限于 html，也可能是文件、图片等。其具体流程为：浏览器向服务器发送搜索请求，服务器接收到请求后进行处理，生成结果（如 html、图片、文件等），最后将结果返回至浏览器，由浏览器展示服务器返回的数据。

2.3.Tomcat安装

解压版 Tomcat 具备便捷性，只需解压即可使用，无需进行安装操作，这使得一台电脑上能够安装多个 Tomcat。

启动解压版的 Tomcat 与常规方式有所差异，需要先配置环境变量。其中，JAVA_HOME 的配置较为关键，若对此不熟悉，可参考前期课程内容。

在启动和停止操作方面，启动时需在 Tomcat 安装目录的 bin 目录中找到 startup.bat 文件，然后双击该文件；停止时则需在 Tomcat 安装目录的 bin 目录中找到 shutdown.bat 文件，并双击它。总体而言，建议使用解压版 Tomcat。

3.Tomcat分析(熟练)

3.1. Tomcat目录结构

bin 目录：该目录存放的是可执行文件，包含 startup.bat 和 shutdown.bat 文件。其中，startup.bat 用于启动 Tomcat，但在使用前需要先配置 JAVA_HOME；而 shutdown.bat 则用于停止 Tomcat 的运行，文件中.bat后缀名是在windows操作系统下，而.sh后缀名则是在Linux操作系统下。
conf 目录

：这是一个极为重要的目录，其下有三个关键文件：
- server.xml：用于配置整个服务器的信息，例如可以修改端口号等，后续会详细介绍该文件的配置方法。
- web.xml：属于部署描述符文件，在该文件中注册了众多 MIME 类型，即文档类型。这些 MIME 类型用于在客户端与服务器之间说明文档的类型。比如，当用户请求一个 html 网页时，服务器会告知客户端浏览器响应的文档是 text/html 类型，客户端浏览器依据这个 MIME 类型就知道如何处理该文档，在浏览器中显示这个 html 文件。但如果服务器响应的是一个 exe 文件，浏览器无法直接显示，而是应该弹出下载窗口。简而言之，MIME 就是用于说明文档的内容类型。
lib 目录：此目录是 Tomcat 的类库，其中包含了大量的 jar 文件。若需要添加 Tomcat 依赖的 jar 文件，可将其放置于该目录中；同样，也可以将项目所依赖的 jar 文件放在此目录，并且该目录下的 jar 文件可供所有项目共享使用。
logs 目录：该目录内存放的都是日志文件，记录了 Tomcat 启动和关闭的相关信息。倘若启动 Tomcat 时出现错误，异常信息也会被记录在这些日志文件中。
temp 目录：用于存放 Tomcat 的临时文件，在停止 Tomcat 运行后，该目录下的内容可以删除。
webapps 目录：这是存放 web 项目的目录，其中每个文件夹都代表一个项目。如果该目录下已经存在一些目录，那么这些都是 Tomcat 自带的项目。其中，ROOT 是一个特殊的项目，当地址栏中没有给出项目目录时，对应访问的就是 ROOT 项目。
work目录 work目录是运行时生成的文件存放处，最终运行的文件都位于此目录中。这些文件是通过webapps中的项目生成的。可以删除该目录下的内容，再次运行时Tomcat会重新生成work目录。当客户端用户访问一个JSP文件时，Tomcat会通过JSP生成Java文件，接着编译Java文件生成class文件，生成的Java和class文件都会存放到这个work目录下。
LICENSE文件 LICENSE文件为许可证文件，它包含了与Tomcat或相关项目使用权限等相关的许可信息。
NOTICE文件 NOTICE文件是说明文件，通常用于提供一些重要的通知、提示或项目相关的说明内容。
ROOT项目访问 细心的你应该已经发现，访问ROOT项目时无需给出项目名称。实际上，localhost是一个主机名，每个主机都会对应一个项目空间，localhost对应的就是Tomcat目录下的webapps。每个项目空间都可以有一个名为ROOT的项目，这个ROOT项目在被访问时无需给出项目名称。

4.WEB项目(精通)

4.1.WEB项目部署后目录结构

在Tomcat服务器里，webapps目录承担着存放Java项目的重要职责，每一个文件夹都代表一个独立的项目。默认情况下，该目录下已经存在四个项目，它们都是Tomcat自带的。其中，ROOT项目在我们测试Tomcat时会作为被访问的主项目。

当我们需要创建自己的项目时，必须遵循JavaEE目录结构规范。下面以hello项目为例，详细介绍其目录结构：

1. 项目根目录

hello作为项目目录，是整个项目的顶层文件夹。

2. 必需的WEB - INF目录

项目目录下必须存在一个名为WEB-INF的目录，且名称必须大写。这个目录具有特殊意义，它受到保护，用户不能直接访问该目录下的内容，但动态页面可以通过合法方式访问其中部分资源。

3. WEB - INF目录下的web.xml文件

在WEB-INF目录下，必须有一个web.xml文件。它是Web应用的部署描述符，用于配置Servlet、过滤器、监听器等组件，对Web应用的行为和结构进行定义和设置，web.xml文件中只需要给出XML文档声明，以及根元素。当然，根元素中包含很多与名称空间相关属性，背下来是有难度的，不过我我们可以去webapps下的其他项目中去“借” 。

4. 编译路径和第三方库目录

classes目录：这是Java类的编译路径，用于存放Servlet以及自定义类等编译后的Java类文件。
lib目录：用于存放项目需要引入的第三方的jar包，这些jar包为项目提供额外的功能支持。

5. web资源存放

项目根目录下还需存放Web资源，例如jsp、xml、HTML、CSS、JS、图片等文件。这些资源构成了Web应用的前端展示和交互部分。

遵循这样的目录结构规范，能够确保项目在Tomcat环境下正确部署和运行，同时也方便项目的开发、维护和管理。

4.0Tomcat发布项目

在Tomcat的使用过程中，项目存放位置具有较高的灵活性，我们可以将项目放置到任意目录，并通过添加<Context>元素来精确指定项目的真实位置。

配置方式

在server.xml文件中的<Host>元素里添加<Context>元素。<Context>元素有两个关键属性：path和docBase。

path属性用于指定项目的虚拟路径，这个路径可以根据实际需求随意设定，例如可以设置为abc。
docBase属性则用于指定项目在磁盘上的真实存放路径。

例如，假设项目的真实目录位于D:\demo\webapp\hello，在server.xml中找到<Host>元素，并添加如下子元素<Context>：

 <Host name="localhost" appBase="webapps"unpackWARs="true" autoDeploy="true"><Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"prefix="localhost_access_log" suffix=".txt"pattern="%h %l %u %t &quot;%r&quot; %s %b" /><Context path="/h1" docBase="D:/demo/webapp/hello"/></Host>

访问规则

一旦为<Context>元素指定了docBase属性的值，当访问localhost上对应的虚拟路径项目时，Tomcat将不再去默认的webapps目录下查找项目。而是依据docBase的值来锁定项目的实际位置。例如，按照上述配置，访问http://localhost/h1/index.jsp时，Tomcat会从D:/demo/webapp/hello目录中获取相关资源。

需要注意的是访问项目的URL格式，如上述例子中访问的是http://localhost/h1/index.jsp，而不是http://localhost/hello1/index.jsp。虽然项目目录实际名称是hello，但由于在<Context>元素中指定了path属性为/h1，所以访问时应使用虚拟路径h1，而非项目目录的实际名称。这种配置方式为项目的部署和管理提供了更大的便利性和灵活性。

5.HTTP协议(熟练)

5.1 HTTP 协议概念

HTTP，即超文本传输协议，是一种所有浏览器都能够发出的协议。从本质上来讲，HTTP 协议是对文本格式的一种规定。这就如同写书需要遵循一定的格式规范，写总结也有其特定的格式要求一样。在网络通信中，客户端发送请求同样需要遵循既定的格式，这个格式是事先约定好的。服务器端会按照请求的格式来获取请求信息，然后依照响应格式进行回应，而客户端也需要按照响应的格式来解析服务器返回的内容。

5.2 无状态协议

HTTP 是一种无状态协议，理解这一点至关重要。所谓“无状态”，指的是客户端发送一个请求，服务器返回一个响应后，就会立即断开连接。

无状态协议具有显著的优点，其中最突出的就是效率高。用户与服务器建立连接后，服务器处理完请求并返回响应便断开连接。当用户再次发送请求时，需要重新建立连接，服务器在发送响应后再度断开。举例来说，如果用户在服务器上查找自己想看的小说，服务器仅需把小说的内容（html）发送给用户的浏览器，随后用户的浏览器显示已接收到本地的 html 时，实际上此时已经与服务器断开了连接。用户可能会花费较长时间阅读小说，但这并不会占用服务器的任何资源，极大地提高了服务器的资源利用效率和响应速度。

5.3.HTTP1.0和HTTP1.1

HTTP现在有两个版本：HTTP1.0和HTTP1.1

HTTP1.0：响应结束后会马上断开‘

HTTP1.1：必须再请求中包含Host(主机)头信息，相应结束后不会马上断开，会有一个超时时间，可能会在超时之前完成多个请求/响应，当超时的时候就断开。

GET/web_demo/index.jsp HTTP/1.0

Host：localhost:8080

5.4请求协议

5.4.1.常见的请求协议

5.4.1. GET 请求

下面是通过 FireFox 获取到的请求信息，这就是浏览器发送给服务器的全部请求信息内容。请求的地址是：http://localhost/hello/index.jsp

 //请求首行GET /hello/index.jsp HTTP/1.1//下面全部是请求头信息，因为 GET 请求没有正文Host: localhostUser-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: zh-cn,zh;q=0.5Accept-Encoding: gzip, deflateAccept-Charset: GB2312,utf-8;q=0.7,*;q=0.7Connection: keep-aliveCookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98//空行，因为 GET 没有正文，所以下面没有东西了

GET /hello/index.jsp HTTP/1.1：GET 请求，请求服务器路径为 /hello/index.jsp，协议为 1.1；
Host:localhost：请求的主机名为 localhost；
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0：与浏览器和 OS 相关的信息。有些网站会显示用户的系统版本和浏览器版本信息，这都是通过获取 User-Agent 头信息而来的；
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8：告诉服务器，浏览器可以接受哪些类型的返回内容。这里表示可以接受 text/html、application/xhtml+xml、application/xml 等类型，q 值表示优先级；
Accept-Language: zh-cn,zh;q=0.5：表示浏览器支持的语言，这里是中文（简体）和中文，q 值表示优先级；
Accept-Encoding: gzip, deflate：表示浏览器支持的编码格式，这里是 gzip 和 deflate；
Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7：表示浏览器支持的字符集，这里是 GB2312、utf-8 等；
Connection: keep-alive：表示保持连接；
Cookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98：用于在客户端存储会话信息，这里是 JSESSIONID 的值。

5.4.1. GET 请求

POST 请求是一种向服务器提交数据的 HTTP 请求方法。与 GET 请求不同，POST 请求通常用于向服务器发送数据，例如表单提交、文件上传等操作。POST 请求的数据包含在请求体中，而不是像 GET 请求那样附加在 URL 后面。

示例

以下是一个通过 Firefox 浏览器发送的 POST 请求示例，假设请求地址为 http://localhost/hello/login.jsp：

//请求首行POST /hello/login.jsp HTTP/1.1//请求头信息Host: localhostUser-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: zh-cn,zh;q=0.5Accept-Encoding: gzip, deflateAccept-Charset: GB2312,utf-8;q=0.7,*;q=0.7Connection: keep-aliveContent-Type: application/x-www-form-urlencodedContent-Length: 27//空行//请求体username=admin&password=123456

POST 请求各部分详解

请求首行
- POST /hello/login.jsp HTTP/1.1：表示使用 POST 方法，请求服务器路径为 /hello/login.jsp，协议版本为 HTTP/1.1。
请求头信息
- Host: localhost：指定请求的主机名，这里是 localhost。
- User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0：与浏览器和操作系统相关的信息，服务器可以通过此信息了解客户端的环境。
- Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8：告知服务器浏览器可以接受的返回内容类型及优先级。
- Accept-Language: zh-cn,zh;q=0.5：表示浏览器支持的语言及优先级。
- Accept-Encoding: gzip, deflate：说明浏览器支持的编码格式。
- Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7：指出浏览器支持的字符集。
- Connection: keep-alive：表示保持连接。
- Content-Type: application/x-www-form-urlencoded：指定请求体的数据格式，这里是常见的表单数据编码格式。
- Content-Length: 27：表示请求体的长度，这里是 27 字节。
空行
- 用于分隔请求头和请求体。
请求体
- username=admin&password=123456：这是实际发送给服务器的数据，通常用于提交表单数据，这里包含了用户名和密码信息。

POST 请求与 GET 请求的区别

数据传输方式
- GET 请求将数据附加在 URL 后面，以查询字符串的形式传输，数据长度有限制且安全性较低。
- POST 请求将数据放在请求体中，可以传输大量数据，并且相对更安全。
缓存
- GET 请求可以被缓存，而 POST 请求一般不会被缓存。
幂等性
- GET 请求是幂等的，即多次执行相同的 GET 请求不会对服务器状态产生额外影响。
- POST 请求不是幂等的，多次执行可能会产生不同的结果，例如多次提交表单可能会创建多个记录。