JavaWeb是什么？如何学习JavaWeb的体系

想不出好的昵称-

已于 2023-05-17 12:32:58 修改

阅读量478

点赞数 1

文章标签： javascript html 前端 css

于 2023-05-17 12:29:02 首次发布

本文链接：https://blog.csdn.net/weixin_66328465/article/details/130723103

版权

javaweb

HTML

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它使用标签和属性来描述网页上的内容，包括文本、图像、视频和超链接等。通过将HTML代码嵌入到文本文档中并在Web浏览器中打开该文档，用户可以查看呈现的网页。HTML还可以与CSS（层叠样式表）和JavaScript等其他技术一起使用，以实现更复杂的网页设计和交互功能。

基础标签

标题标签 (H1 - H6)

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

段落标签 §

<p>这是一个段落。</p>

超链接标签 (A)

<a href="https://www.example.com">链接文本</a>

图像标签 (IMG)

<img src="image.jpg" alt="图片描述">

列表标签 (UL, OL, LI)

<ul>
  <li>无序列表项 1</li>
  <li>无序列表项 2</li>
</ul>

<ol>
  <li>有序列表项 1</li>
  <li>有序列表项 2</li>
</ol>

表格标签 (TABLE, TR, TH/TD)

<table>
  <tr>
    <th>表头单元格 1</th>
    <th>表头单元格 2</th>
  </tr>
  <tr>
    <td>数据单元格 1</td>
    <td>数据单元格 2</td>
  </tr>
</table>

表单标签 (form, input) 是用于创建 HTML 表单的两个基本标签之一。具体说明如下：
<form> 标签：用于创建 HTML 表单，可以包含各种表单元素，例如输入框、复选框、单选按钮和提交按钮等。可以使用 “action” 属性指定表单提交时的 URL，也可以使用 “method” 属性指定表单提交的 HTTP 方法（通常为 “GET” 或 “POST”）。

示例代码：

<form action="/submit-form" method="post">
<!-- 表单元素 -->
</form>

<input> 标签：用于创建 HTML 表单中的各种输入元素，例如文本框、密码框、单选按钮、复选框和隐藏字段等。可以使用 “type” 属性指定输入元素的类型，例如 “text”、“password”、“radio”、“checkbox” 和 “hidden” 等。

示例代码：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

其中，“for” 属性与相应的输入元素的 “id” 属性相对应，可以使用户在单击标签时聚焦到相应的输入元素。“name” 属性用于指定输入元素在表单提交时的参数名。

图片音频视频标签

HTML 图片标签代码：

<img src="image.jpg" alt="This is an image">

HTML 音频标签代码：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

HTML 视频标签代码：

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

注意，这些示例代码仅供参考，您需要将 src 和 type 属性替换为您自己的图像、音频或视频文件的路径和类型。

超链接标签

超链接标签用于创建指向其他网页、文件、位置或资源的链接。

基本的超链接标签代码：

 <a href="URL">Link text</a>

其中，href 属性表示要链接到的 URL 地址，Link text 是显示在页面上的可点击文本。

有序列表

HTML 有序列表用于显示按顺序排列的项目列表，每个列表项前面都有一个编号。

以下是基本的有序列表标签代码：

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

这个例子中，<ol> 标签表示有序列表的开始，<li> 标签表示列表中的一个项目。在默认情况下，每个列表项前面会带有一个数字编号。如果你想要修改编号样式，可以使用 CSS 样式表来进行自定义。

无序列表

HTML 无序列表用于显示项目列表，每个列表项前面没有编号或符号。通常使用实心圆点来表示每个列表项。

基本的无序列表标签代码：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

这个例子中，<ul> 标签表示无序列表的开始，<li> 标签表示列表中的一个项目。在默认情况下，每个列表项前面会带有一个实心圆点。如果你想要修改符号样式，可以使用 CSS 样式表来进行自定义。

表格标签

HTML 表格用于在网页中显示数据，可以使用以下三个标签来创建一个基本的表格：

<table> 标签表示表格的开始和结束。
<tr> 标签表示表格中的一行（行）。
<td> 标签表示表格中的一个单元格（列）。

以下是一个简单的 HTML 表格示例:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

这个例子中，我们创建了一个 2 行 2 列的表格。第一行包含两个单元格: “单元格1” 和 “单元格2”；第二行包含两个单元格: “单元格3” 和 “单元格4”。你可以通过添加更多的 <tr> 和 <td> 标签来创建更复杂的表格。

布局标签

<div>：定义文档中的一个区块，常用于组织页面结构。
<span>：定义文档中的一个内联元素，通常用于对文本进行样式上的调整。
<header>：定义文档或区块的页眉。
<nav>：定义导航链接的部分。
<main>：定义文档或区块的主要内容。
<article>：定义独立的文章或页面中的一段完整内容。
<section>：定义文档中的一个区块，通常与标题一起使用。
<aside>：定义页面中的附属信息部分。
<footer>：定义文档或区块的页脚。
<ul> 和 <li>：分别定义无序列表和列表项，常用于制作导航菜单。

表单标签

<form>: 定义一个表单
<input>: 定义一个输入字段
<textarea>: 定义多行文本输入控件。
<select>: 定义一个下拉列表。
<option>: 定义一个下拉列表中的选项。
<button>: 定义一个按钮
<label>: 定义与输入控件相关联的标签
<fieldset>: 定义一组相关的表单元素
<legend>: 定义<fieldset>元素的标题
<optgroup>: 定义下拉列表中的选项组。

CSS

CSS（Cascading Style Sheets）是一种用于描述网页文档如何呈现的样式表语言。它与HTML和JavaScript一起构成了Web前端开发的三大基本技术。

CSS可以控制网页中各个元素的显示效果，包括文字大小、颜色、字体、背景颜色、布局、边框、阴影等等。通过将样式定义在CSS文件中，可以轻松地对整个网站进行风格统一的设计。

CSS的核心思想是“层叠”（Cascading），即多个CSS规则可以同时作用于同一个HTML元素，并且按照一定的优先级顺序进行叠加。因此，使用CSS可以实现灵活、精确、可维护的页面设计。

CSS有很多选择器（Selector）可以选择不同的HTML元素，例如标签选择器、类选择器、ID选择器、属性选择器等等。同时，CSS也支持伪类和伪元素，可以实现更加复杂的效果。

总之，CSS是Web前端开发的重要组成部分，它可以让我们更好地控制网页的外观和布局，提高用户体验和页面性能。

选择器分类

元素选择器：通过HTML元素名称进行匹配，如p、div等。
类选择器：通过class属性值进行匹配，语法为“.”加类名，如“.red”、“ .btn”等。
ID选择器：通过id属性值进行匹配，语法为“#”加ID名称，如“#header”、“#footer”等。
属性选择器：通过元素的属性值进行匹配，语法为“[属性名=属性值]”，如“[title=’example’]”、“[href^=‘https://’]”等。
伪类选择器：用于匹配处于某种状态或位置的元素，语法为“:”加伪类名称，如“:hover”、“:active”、“:first-child”等。
伪元素选择器：用于向某些元素添加特殊效果，如在元素前面或后面插入内容，语法为“::”加伪元素名称，如“::before”、“::after”等。

常见CSS属性

color（颜色）：用于设置文本颜色。
font-size（字体大小）：用于设置字体尺寸。
background-color（背景颜色）：用于设置元素的背景颜色。
margin（外边距）：用于设置元素周围的空白区域。
padding（内边距）：用于设置元素内容区域和边界之间的距离。
border（边框）：用于设置元素的边框样式、宽度和颜色。
width（宽度）：用于设置元素的宽度。
height（高度）：用于设置元素的高度。
display（显示方式）：用于控制元素的显示方式，如块级元素、行内元素等。
position（定位方式）：用于控制元素的定位方式，如相对定位、绝对定位等。
float（浮动）：用于控制元素浮动的方向和位置。
text-align（文本对齐方式）：用于控制文本的对齐方式，如左对齐、右对齐、居中对齐等。
line-height（行高）：用于设置行与行之间的间距。
font-weight（字体粗细）：用于设置字体的粗细。
text-decoration（文本修饰）：用于设置文本的装饰样式

javaScript

JavaScript是一种强大的编程语言，常用于在Web浏览器中创建交互式效果和动态网页。它是一种基于对象和事件驱动的语言，可以与HTML和CSS结合使用来创建现代交互式网站。JavaScript也可以在服务器端运行，被称为Node.js，这使得开发人员可以使用同一种语言编写前后端代码。JavaScript具有易学性、广泛的应用领域和庞大的社区支持，因此成为了Web开发的重要技能之一。

javaScript引入方式

内部JavaScript：使用<script>标签在HTML文档中嵌入JavaScript代码。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <script>
      // JavaScript code goes here
    </script>
  </head>
  <body>
    <!-- HTML content goes here -->
  </body>
</html>

外部JavaScript文件：使用<script>标签的src属性将JavaScript代码从外部文件引入到HTML文档中。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <script src="path/to/my-script.js"></script>
  </head>
  <body>
    <!-- HTML content goes here -->
  </body>
</html>

内联JavaScript：可以将JavaScript代码作为HTML标签的事件处理程序或URL协议的一部分来执行，但是这种方法不建议使用。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body onload="myFunction()">
    <!-- HTML content goes here -->
    <a href="javascript:alert('Hello, world!')">Click me</a>
  </body>
</html>

javaScript基础语法

变量声明：使用关键字 var 或 let 声明变量。

var x = 1; // 使用 var 声明一个名为 x 的变量，并将其初始化为 1
let y = 2; // 使用 let 声明一个名为 y 的变量，并将其初始化为 2

注意的是，使用 var 声明的变量会被提升（hoisting）到当前作用域的顶部，而使用 let 声明的变量则不会。此外，使用 let 声明的变量是块级作用域（block-scoped），而使用 var 声明的变量是函数级作用域（function-scoped）。在 ES6 及以后的版本中，建议尽可能使用 let 来声明变量。

数据类型：JavaScript 中有多种数据类型，包括数字、字符串、布尔值、数组、对象等。
数字（Number）：表示数字，包括整数和浮点数。
字符串（String）：表示文本内容。
布尔值（Boolean）：表示真或假。
数组（Array）：表示一组有序的值的集合。
对象（Object）：表示一个集合，其中包含属性和方法。
空（null）：表示空值。
未定义（undefined）：表示没有值。
运算符：JavaScript 支持基本的算术运算符、比较运算符、逻辑运算符等。
算术运算符：加法（+）、减法（-）、乘法（*）、除法（/）、求余（%）等。
比较运算符：大于（>）、小于（<）、大于等于（>=）、小于等于（<=）、相等（==）、不相等（!=）等。
逻辑运算符：与（&&）、或（||）、非（!）等。
控制流语句：JavaScript 中有 if 语句、for 循环、while 循环等控制流语句，可以用于控制程序的执行流程。
if 语句

let age = 18;
if(age >= 18) {
  console.log("你已经成年了");
} else {
  console.log("你还未成年");
}

for 循环

for(let i = 0; i < 5; i++) {
  console.log(i);
}

while 循环

let i = 0;
while(i <= 10) {
  console.log(i);
  i++;
}

函数定义和调用：JavaScript 中可以通过 function 关键字定义函数，并通过函数名加参数列表进行调用。
定义函数

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

调用函数

let result = add(2, 3);
console.log(result); // 输出 5

对象和方法：JavaScript 中的对象可以看作是属性的集合，可以通过属性名访问对象的属性并执行对象的方法。
定义对象

let person = {
 firstName: 'John',
 lastName: 'Doe',
 age: 30,
 getFullName: function() {
   return this.firstName + ' ' + this.lastName;
 }
};

访问对象属性和方法

console.log(person.firstName); // 输出 'John'
console.log(person.age); // 输出 30
console.log(person.getFullName()); // 输出 'John Doe'

上述代码中，我们定义了一个名为 person 的对象，该对象有三个属性：firstName、lastName 和 age，以及一个名为 getFullName 的方法。我们可以使用点 . 运算符来访问对象的属性和方法，并使用 this 关键字在方法中引用当前对象。

事件处理：在 web 开发中，JavaScript 可以通过绑定事件处理程序来响应用户操作。
HTML 代码：

<button id="myButton">点击我！</button>

JavaScript 代码：

 const button = document.getElementById('myButton'); // 获取按钮元素

function handleClick() {
  console.log('按钮被点击了！');
}

button.addEventListener('click', handleClick); // 绑定点击事件处理程序

这个例子中，我们首先通过 document.getElementById() 方法获取了 ID 为 myButton 的按钮元素，并将其赋值给 button 变量。接下来，我们定义了一个名为 handleClick 的函数，当按钮被点击时，该函数会将一条消息记录到控制台中。最后，我们使用 addEventListener() 方法将 handleClick 函数与按钮的 click 事件绑定在一起，这样当用户点击按钮时，handleClick 函数就会被调用。

需要注意的是，事件处理程序通常会被封装在函数中，以便于维护和重用。此外，在实际开发中，我们可能会遇到许多不同类型的事件，如鼠标悬停、键盘按下、窗口滚动等等，针对不同的事件类型，我们需要使用不同的事件处理程序来响应它们。

javaScript常用对象

Object：JavaScript中的基本对象，所有其他对象都继承自Object。
Array：表示一组有序的元素，可以通过索引访问每个元素。
String：表示文本字符串，提供了很多处理和操作字符串的方法。
Number：表示数字类型，它也是JavaScript中的基本数据类型之一。
Boolean：表示布尔值，只有两个可能的值：true和false。
Date：表示日期和时间，提供了很多处理日期和时间的方法。
RegExp：表示正则表达式，用于匹配字符串模式。
Math：提供了一些数学函数，如sin、cos、tan、sqrt等。
Function：是一个特殊的对象，可以被调用执行，也可以作为参数传递给其他函数。
DOM（Document Object Model）：表示文档对象模型，它是JavaScript与HTML交互的主要手段，可以通过操作DOM实现动态网页效果。

常用数据类型

布尔值（Boolean）：表示真或假的值，只有两个取值：true和false。
数字（Number）：整数或浮点数。
字符串（String）：由零个或多个字符组成的文本。可以使用单引号、双引号或反引号来表示。
undefined：未定义的值，表示变量没有被赋值。
null：空值，表示一个空对象指针。
BigInt: 大整数，可以用于表示任意精度的整数。
Symbol：表示唯一标识符的数据类型，通常用于对象属性的键名。

Array基本语法

// 使用[]创建空数组
const arr1 = [];

// 使用Array构造函数创建数组
const arr2 = new Array();

// 给数组指定长度并填充默认值
const arr3 = new Array(3).fill(0);

// 直接给数组赋值
const arr4 = [1, 2, 3];

Array访问方式

通过索引访问数组元素：

const myArray = [10, 20, 30];
console.log(myArray[0]); // 输出 10
console.log(myArray[1]); // 输出 20
console.log(myArray[2]); // 输出 30

使用forEach()方法遍历数组元素：

const myArray = ["apple", "banana", "orange"];
myArray.forEach((item, index) => {
  console.log(`Element ${index}: ${item}`);
});
// 输出：
// Element 0: apple
// Element 1: banana
// Element 2: orange

使用for循环遍历数组元素：

const myArray = ["dog", "cat", "bird"];
for (let i = 0; i < myArray.length; i++) {
  console.log(`Element ${i}: ${myArray[i]}`);
}
// 输出：
// Element 0: dog
// Element 1: cat
// Element 2: bird

使用map()方法对数组进行转换：

const myArray = [1, 2, 3];
const doubledArray = myArray.map(item => item * 2);
console.log(doubledArray); // 输出 [2, 4, 6]

使用filter()方法过滤数组元素：

const myArray = [1, 2, 3, 4, 5];
const filteredArray = myArray.filter(item => item % 2 === 0);
console.log(filteredArray); // 输出 [2, 4]

javaScript数组相当于java中的集合，可变长变类型

Array常用方法

push()：在数组末尾添加一个或多个元素，并返回新的长度。
pop()：从数组末尾删除最后一个元素，并返回该元素的值。
shift()：从数组开头删除第一个元素，并返回该元素的值。
unshift()：在数组开头添加一个或多个元素，并返回新的长度。
splice()：从数组中添加或删除元素。
slice()：从数组中复制一部分，并返回一个新的数组。
concat()：连接两个或更多数组，并返回一个新的数组。
indexOf()：返回指定元素在数组中的位置，如果不存在则返回-1。
lastIndexOf()：返回指定元素在数组中最后出现的位置，如果不存在则返回-1。
forEach()：对数组中的每个元素执行一个函数。
map()：对数组中的每个元素执行一个函数，并返回一个新的数组。
filter()：返回一个由满足条件的数组元素组成的新数组。
reduce()：对数组中的所有元素执行一个函数来累加器，并返回累加器的值。
find()：返回数组中第一个满足条件的元素。
findIndex()：返回数组中第一个满足条件的元素的索引。

String基本语法

let message = "Hello, world!";

也可以使用反引号创建模板字面量，以便在字符串中嵌入表达式。例如：

let name = "Alice";
let greeting = `Hello, ${name}!`;

String常用方法

charAt(index): 返回字符串中指定位置的字符。
concat(str1, str2…): 将两个或更多字符串连接起来，返回连接后的新字符串。
indexOf(searchValue, startIndex): 返回指定字符在字符串中第一次出现的位置，如果没有找到则返回-1。
lastIndexOf(searchValue, startIndex): 返回指定字符在字符串中最后一次出现的位置，如果没有找到则返回-1。
slice(startIndex, endIndex): 从字符串中提取子串，并返回一个新的字符串。
substring(startIndex, endIndex): 与slice()方法类似，但不支持负数索引。
substr(startIndex, length): 从字符串中提取子串，并返回一个新的字符串。第二个参数表示要提取的字符个数。
replace(searchValue, replaceValue): 在字符串中查找指定字符并替换为新的字符，并返回替换后的新字符串。
toLowerCase(): 将字符串转换成小写字母形式。
toUpperCase(): 将字符串转换成大写字母形式。
trim(): 去掉字符串两端的空格，并返回新的字符串。
split(separator, limit): 将字符串按照指定分隔符分割成数组。第二个参数表示返回数组的最大长度。

自定义对象

示例自定义对象的语法代码：

// 创建一个自定义对象
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  occupation: "Developer",
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

// 访问自定义对象中的属性和方法
console.log(person.firstName); // 输出: "John"
console.log(person.age); // 输出: 30
console.log(person.getFullName()); // 输出: "John Doe"

上述示例中，我们创建了一个名为 person 的自定义对象，该对象包含姓名、年龄、职业等属性以及一个返回全名的方法。然后，我们可以通过对象属性访问符号 .（点）来访问对象属性和方法。例如，person.firstName 将返回 “John”。

此外，我们还可以使用方括号 [] 来访问对象属性，如下所示：

console.log(person["firstName"]); // 输出: "John"

这两种方法都可以用来访问自定义对象中的属性和方法。

BOM

BOM（Browser Object Model）是JavaScript对浏览器窗口的抽象，它提供了一组对象来操作浏览器窗口及其内容。BOM包括window对象、location对象、navigator对象、history对象和screen对象等。window对象是BOM中最主要的对象，它代表整个浏览器窗口，并提供了大量的方法和属性用于操作和控制浏览器窗口的行为。location对象用于获取和设置当前页面的URL地址，navigator对象提供了关于浏览器的信息，例如浏览器类型和版本号等。history对象则提供了对浏览器历史记录的访问和控制，而screen对象则提供了有关用户屏幕尺寸和分辨率的信息。

BOM常用对象

Window：表示浏览器中打开的窗口或标签页，可以访问和控制窗口的大小、位置、历史记录、定时器等。
Document：表示当前窗口或标签页载入的文档，可以访问文档的元素、样式、事件等。
Navigator：表示浏览器本身的信息，可以获取浏览器类型、版本、语言等。
History：表示浏览器的历史记录，可以在历史记录中前进或后退。
Location：表示当前窗口或标签页的URL地址，可以获取或设置URL的各个部分（协议、主机名、路径等）。
Screen：表示用户的屏幕信息，可以获取屏幕的大小、颜色深度等。

还有其他一些较少使用的BOM对象，如Cookie、Storage、XMLHttpRequest等。

Window

获取对象

使用全局变量window来获取浏览器的窗口对象。获取window对象的代码示例：

var myWindow = window;

上述代码将window对象分配给名为myWindow的变量。现在，可以使用myWindow变量来访问和操作窗口对象中的属性和方法。

属性

window.innerWidth: 浏览器窗口视口的宽度（不包括滚动条）。
window.innerHeight: 浏览器窗口视口的高度（不包括滚动条）。
window.location: 返回当前文档的URL信息，可以设置该属性来导航到新的URL。
window.document: 返回当前文档对象。
window.navigator: 包含关于浏览器的信息，比如用户代理字符串（user agent string）和浏览器版本号。
window.screen: 返回屏幕的信息，如分辨率、颜色深度等。
window.history: 包含浏览器历史记录的对象，可以使用它来向前或向后导航。

列举了一些常用的window属性，实际上还有许多其他属性和方法可以在JavaScript中使用。

方法

alert()：在窗口中显示一个警告框，带有指定的消息和一个OK按钮。
prompt()：在窗口中弹出一个提示框，要求用户输入文本。
confirm()：在窗口中弹出一个确认框，带有指定的消息、OK和Cancel按钮，并返回一个布尔值表示用户是否点击了OK按钮。
open()：打开一个新窗口或标签页并加载指定的URL。
close()：关闭当前窗口。
setTimeout()：在指定的毫秒数后执行一次指定的函数。
setInterval()：以指定的毫秒数间隔重复执行指定的函数。
resizeTo()：将窗口调整为指定的宽度和高度。
moveTo()：将窗口移动到指定的屏幕坐标。
scrollBy()：按照指定的像素数滚动文档。
scrollTo()：将文档滚动到指定的像素位置。

Navigator

Navigator是浏览器提供的一个对象，用于获取有关当前浏览器窗口的信息和控制浏览器行为。以下是Navigator的一些常见属性和方法以及对应的代码示例：

userAgent：返回一个包含浏览器厂商和版本信息的字符串。

console.log(navigator.userAgent);

language：返回浏览器的语言。

console.log(navigator.language);

cookieEnabled：返回布尔值，表示浏览器中是否启用cookie。

console.log(navigator.cookieEnabled);

geolocation：用于获取用户地理位置信息的API。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude: " + position.coords.latitude + "\nLongitude: " + position.coords.longitude);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}

sendBeacon：用于向服务器异步发送数据的API。

navigator.sendBeacon(url, data);

Screen

Screen是一个命令行终端多路复用工具，它可以让你同时在同一个终端窗口中运行多个程序会话。以下是基本的使用方法：

启动新的screen会话

screen

在当前的screen会话中创建一个新窗口

按下键盘快捷键 Ctrl+A，然后再按下 c

列出当前所有的screen窗口

按下键盘快捷键 Ctrl+A，然后再按下 "

切换到指定的screen窗口

按下键盘快捷键 Ctrl+A，然后再按下数字键，例如 1 或 2

分离当前的screen会话（即返回原来的终端窗口）

按下键盘快捷键 Ctrl+A，然后再按下 d

重新连接之前分离的screen会话

screen -r

结束当前的screen会话

按下键盘快捷键 Ctrl+A，然后再按下 k ，输入Y确定。

以上是一些基本的使用方法，更多高级选项请查看screen的帮助文档。

History

history对象提供了对浏览器历史记录的访问和控制。以下是一些基本操作的示例代码：

history.forward();

history.back();

跳转到指定页面：

history.go(1); // 前进一页
history.go(-2); // 后退两页
history.go('https://www.example.com/'); // 跳转到指定 URL

获取历史记录长度：

const length = history.length;

替换当前浏览历史记录：

history.replaceState(null, null, '/new-url');

添加新的浏览历史记录：

history.pushState({data: 'some data'}, 'Page Title', '/new-url');

注意，pushState()和replaceState()不会实际导致浏览器跳转到新的URL，它们只会修改浏览历史记录。如果需要实现页面跳转，请使用location对象。

Location

location是JavaScript中的一个对象，表示当前窗口的URL信息。它包含了一些有用的属性和方法，可以用来获取或设置当前URL的各种信息。

常用的location属性和方法及其示例代码：

location.href: 返回当前页面的完整URL地址

console.log(location.href); // https://www.example.com/index.html?query=hello#section1

location.protocol: 返回当前页面使用的协议（http或https）

console.log(location.protocol); // https:

location.host: 返回当前页面的主机名和端口号

console.log(location.host); // www.example.com

location.pathname: 返回当前页面的路径部分（不包括域名和参数）

console.log(location.pathname); // /index.html

location.search: 返回当前页面的查询字符串部分（即问号后面的部分）

console.log(location.search); // ?query=hello

location.hash: 返回当前页面的锚点部分（即井号后面的部分）

console.log(location.hash); // #section1

location.reload(): 重新加载当前页面

location.reload();

location.replace(url): 用指定的URL替换当前页面

location.replace('https://www.example.com/new.html');

DOM

DOM（Document Object Model）是一种表示 HTML 和 XML 文档的标准编程接口。它将文档解析为由节点和对象（包括元素、属性和文本）组成的树结构，从而允许开发者使用编程语言操作网页内容和结构。

通过 DOM，可以使用 JavaScript 动态地改变网页的内容和结构，例如添加、删除或修改元素和属性，以及响应用户事件等等。DOM API提供了一系列方法和属性来访问和操作这些节点和对象。

通常，JavaScript 代码中会使用 document 对象来代表整个文档，可以通过该对象访问和操作文档中的各个元素和属性。

DOM常用对象

document：代表整个文档，可以通过该对象访问和操作文档中的各个元素和属性。
element：表示 HTML 或 XML 元素，如

、
、等。可以通过 document.getElementById()、document.getElementsByTagName() 或 document.querySelector() 等方法获取元素对象。
attribute：表示 HTML 或 XML 元素的属性，如 class、id、src 等。可以通过元素对象的 getAttribute() 和 setAttribute() 方法来访问和修改属性值。
text：表示 HTML 或 XML 元素中的文本内容，如 <p>这是一个段落</p> 中的“这是一个段落”。可以通过元素对象的 innerText、textContent 或 innerHTML 属性来获取或设置文本内容。
event：表示用户与网页交互时发生的事件，如点击、鼠标移动、键盘输入等。可以通过元素对象的 addEventListener() 方法来注册事件处理函数，以响应相应的事件。
node：表示文档中的节点，包括元素节点、文本节点、注释节点等。可以通过元素对象的 childNodes、firstChild、lastChild 等属性来访问和操作节点。

通过 DOM（文档对象模型）对HTML进行操作

改变元素的文本内容

// 获取一个拥有id为"example"的元素
const exampleElement = document.getElementById("example");
// 修改其文本内容
exampleElement.textContent = "新的文本内容";

修改元素的属性

// 获取一个拥有id为"image"的图片元素
const imageElement = document.getElementById("image");
// 修改其src属性，以更换图片
imageElement.src = "new-image.jpg";

添加或删除元素

// 创建一个新的div元素
const newDivElement = document.createElement("div");
// 设置其文本内容
newDivElement.textContent = "这是新的div元素";
// 获取一个拥有id为"parent"的父级元素
const parentElement = document.getElementById("parent");
// 将新元素添加到该父级元素中
parentElement.appendChild(newDivElement);

// 从父级元素中删除子元素
parentElement.removeChild(newDivElement);

事件监听

事件监听是一种用于捕获和处理特定事件的技术。通过添加事件监听器，可以使代码在事件发生时自动执行相应的函数。常见的事件包括鼠标点击、键盘输入、页面加载等。

要添加一个事件监听器，可以使用addEventListener() 方法，该方法需要传递两个参数：事件类型和事件监听函数。例如：

document.addEventListener('click', function() {
  console.log('The document was clicked!');
});

这将在文档被点击时打印一个消息。

除了addEventListener()外，还有attachEvent()方法（仅适用于旧版 Internet Explorer 浏览器）和内联事件处理程序（在 HTML 元素上直接指定 JavaScript 代码）。但是，推荐使用addEventListener()来添加事件监听器，因为这种方式更加灵活且易于维护。

事件绑定

绑定事件的三种方式及其代码示例：

在HTML元素上直接绑定事件属性：

<button onclick="myFunction()">点击我</button>

<script>
function myFunction() {
  alert("Hello World!");
}
</script>

使用addEventListener方法绑定事件：

<button id="myBtn">点击我</button>

<script>
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  alert("Hello World!");
});
</script>

使用jQuery库的on方法绑定事件：

<button id="myBtn">点击我</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#myBtn").on("click", function() {
  alert("Hello World!");
});
</script>

其中，第二种和第三种方式是最常用的事件绑定方式。

常见的事件

点击事件（click）：当用户单击某个元素时触发。
鼠标移动事件（mousemove）：当用户在某个元素上移动鼠标时触发。
键盘按下事件（keydown）：当用户按下键盘上的任意键时触发。
表单提交事件（submit）：当用户提交表单时触发。
页面加载完成事件（load）：当页面加载完成后触发。
页面卸载事件（unload）：当页面被卸载或关闭时触发。
元素失去焦点事件（blur）：当元素失去焦点时触发。
元素获得焦点事件（focus）：当元素获得焦点时触发。
鼠标悬停事件（mouseover）：当鼠标悬停在某个元素上时触发。
鼠标离开事件（mouseout）：当鼠标离开某个元素时触发。

什么是B/S架构和C/S架构

B/S架构是Browser/Server架构的缩写，也称为Web架构。在B/S架构中，客户端使用浏览器作为界面，向服务器发送请求，服务器处理请求并返回相应的数据给客户端浏览器，因此整个应用程序的逻辑和数据都集中在服务器端。

C/S架构是Client/Server架构的缩写。在C/S架构中，客户端和服务器之间通过网络进行通信，客户端负责用户交互和业务逻辑处理，服务器负责数据存储和业务逻辑处理。因此，整个应用程序的逻辑和数据分散在客户端和服务器两端。

总体而言，B/S架构更加灵活、便于维护和升级，并且无需安装客户端软件；而C/S架构则更加高效、适合处理复杂的业务流程，但需要在每个客户端上安装相应的客户端软件。

HTTP

HTTP（Hypertext Transfer Protocol）是一种用于在Web浏览器和Web服务器之间传输数据的协议。它是一个客户端-服务器协议，通过在客户端发出请求并在服务器上响应来实现通信。HTTP使用TCP（Transmission Control Protocol）作为底层传输协议，并且是无状态协议，这意味着每个请求都是独立的，服务器不会记住之前的请求或会话状态。HTTP通常用于在Web上传输HTML、图像、音频、视频等资源。最新版本是HTTP/2。

HTTP特点

无连接：每个请求和响应都是独立的，服务器不会记住之前的请求或会话状态。
无状态：同样地，服务器不会记住客户端的状态信息，因此每次请求都需要重新验证身份等信息。
简单快速：HTTP使用简单的请求-响应模型，使得它易于实现和快速执行。
可扩展：HTTP允许通过添加新的方法、头部等自定义扩展功能。
支持多媒体：HTTP被广泛用于传输HTML、图像、音频、视频等多媒体内容。
安全性较低：HTTP传输的数据是明文的，缺乏加密保护，容易受到黑客攻击和窃听。为了提高安全性，HTTPS协议应运而生。

HTTP优点

简单易用：HTTP协议使用简单，易于开发和实现。
可扩展性：HTTP协议支持插件和扩展，可以方便地添加新的功能。
明文传输：HTTP协议传输数据是明文的，易于调试。
跨平台性：HTTP协议可以在多种操作系统和平台中运行。
易于缓存：HTTP协议支持缓存机制，可以提高网站的访问速度，并降低服务器压力。

HTTP缺点

不安全：HTTP协议传输数据是明文的，容易被窃听、篡改和劫持。
无状态：HTTP协议是无状态的，每个请求都是独立的，服务器不能保存客户端的状态信息。这使得处理复杂的交互变得困难。
性能不足：HTTP协议对于大量数据的传输效率较低，同时每个请求都需要建立新的连接，会增加网络开销。
受限制的请求/响应模型：HTTP协议只支持请求-响应模型，客户端必须等待响应后才能发送下一个请求，限制了并发性能。
只支持单向通信：HTTP协议只支持客户端向服务器的单向通信，不能实现实时双向通信。

HTTP请求数据格式

application/x-www-form-urlencoded：这是HTTP请求默认的数据格式。它将数据编码为键值对形式，并使用&符号分隔键和值。

multipart/form-data：这种格式通常用于上传文件。它将每个部分作为独立的数据块进行发送，并在头部声明每个部分的数据类型和其他信息。

application/json：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。这种格式通常用于客户端和服务器之间传输结构化数据。

text/xml：XML（Extensible Markup Language）是一种标记语言，常用于表示结构化数据。它将数据作为元素、属性和文本节点组成的树形结构进行传输。

application/octet-stream：这种格式通常用于二进制数据的传输，如图像、音频或视频文件等。

HTTP请求由三部分组成

请求行、请求头和请求体

请求行：请求行包含了HTTP请求的方法、URL和协议版本，格式如下：

请求方法 URL 协议版本

示例代码：

GET /index.html HTTP/1.1

请求头：请求头包含了HTTP请求的各种属性和元数据，例如User-Agent、Accept、Content-Type等。每个属性都是由属性名和属性值组成，中间用冒号和空格隔开。多个属性之间用换行符分割。示例代码：

Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

请求体：请求体仅在HTTP请求方法为POST或PUT时使用，用于向服务器发送数据。请求体可以是任何类型的数据，例如纯文本、JSON、XML、二进制数据等。示例代码：

POST /api/create_user HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
    "username": "johndoe",
    "password": "secret123"
}

常见的HTTP请求头

Accept：指定客户端能够接收的内容类型
User-Agent：客户端信息，包括操作系统、浏览器和版本号等
Referer：表示请求来源，即发起请求页面的 URL 地址
Authorization：用于身份认证的凭证信息，例如 Basic 身份认证和 Bearer 令牌认证
Content-Type：指定请求体中发送的数据类型
Cookie：存储在客户端的 HTTP Cookie，可携带会话信息或用户识别信息
Host：指定请求的主机名和端口号
If-None-Match：用于缓存控制，表示资源 ETag 值，如果与服务端一致则返回 304 Not Modified 状态码
If-Modified-Since：用于缓存控制，表示资源最后修改时间，如果未发生变化则返回 304 Not Modified 状态码

HTTP请求方式

GET：从服务器获取资源，不会修改服务器上的数据。
POST：向服务器提交数据，可能会修改服务器上的数据。
PUT：向服务器上传新数据，替换服务器上对应的旧数据。
DELETE：从服务器删除指定的资源。
HEAD：与GET类似，但只返回响应头部信息，不返回实体内容。
OPTIONS：返回服务器支持的HTTP请求方法和其他选项。
TRACE：回显服务器收到的请求，用于测试或诊断。
CONNECT：将客户端与服务器建立隧道，用于代理服务器等场景。

GRT和POST请求区别

GET和POST请求的主要区别在于它们传递数据的方式和目的：

GET请求将请求参数附加在URL后面，发送给服务器。通常用于从服务器获取数据，因为GET请求不会改变服务器上的数据。
POST请求将请求参数包含在请求体中，与请求头一起发送给服务器。通常用于向服务器提交数据，因为POST请求可以修改服务器上的数据。

其他的区别包括：

GET请求有长度限制，因为URL长度有限制；而POST请求没有长度限制。
GET请求对发送的数据不进行加密，而POST请求可以使用SSL/TLS等协议进行加密传输。
GET请求可以被浏览器缓存，而POST请求不能被缓存，因为POST请求可能会对服务器产生副作用。

HTTP响应数据格式

HTTP响应数据由以下三部分组成：

状态行：包括HTTP协议版本、状态码和状态描述，例如：HTTP/1.1 200 OK。
响应头（可选）：包含与响应相关的元信息，例如响应日期、内容类型、内容长度等，以键值对的形式表现，每行以\r\n结尾。
响应体（可选）：包含服务器响应的实际数据，例如HTML文档、图片等。

以下是一个简单的HTTP响应数据格式的示例：

HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
Content-Length: 128
Date: Fri, 30 Apr 2023 00:00:00 GMT

<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>

其中，状态行为HTTP/1.1 200 OK表示响应使用HTTP/1.1协议，状态码为200，状态描述为OK。响应头包含了Content-Type、Content-Length和Date三个字段，分别表示响应数据的MIME类型、长度和响应日期。响应体中包含了一个简单的HTML文档。注意，每个部分之间都需要使用\r\n进行换行分隔。

状态码分类

1xx - 信息性状态码，表示接收到请求并正在处理。
2xx - 成功状态码，表示请求已成功被服务器接收、理解、并接受。
3xx - 重定向状态码，表示需要客户端采取进一步的操作才能完成请求。
4xx - 客户端错误状态码，表示客户端提交的请求有错误或无法被服务器处理。
5xx - 服务端错误状态码，表示服务器在处理请求时发生了错误。

常见的HTTP响应头

Content-Type：指定返回的内容类型，例如text/html、application/json等。
Content-Length：指定返回的内容长度，以字节为单位。
Cache-Control：指定缓存机制，例如no-cache、public、private等。
Expires：指定过期时间，即该响应的有效期限。
Location：在重定向响应（3xx状态码）中使用，表示新的资源位置。
Set-Cookie：设置cookie信息，通常用于记录用户登录状态等。
Access-Control-Allow-Origin：CORS跨域访问控制，表示允许访问的域名。
ETag：实体标签，用于标识资源是否发生了变化。

Tomcat

Tomcat是一个开源的Java Servlet容器，它提供了一个Java Servlet和JavaServer Pages（JSP）环境，用于执行动态Web内容。Tomcat可以作为独立的Web服务器或与其他Web服务器一起使用，例如Apache HTTP Server。它由Apache Software Foundation开发和维护，并且在Apache许可证下发布。

Tomcat安装下载使用

以MAC为例安装Tomcat：

下载Tomcat二进制文件：可以在Apache Tomcat官网（https://tomcat.apache.org/）下载最新版本的二进制文件，也可以从其他镜像站点下载。
解压缩Tomcat：将下载的二进制文件解压缩到你想要安装的目录，例如 /usr/local/tomcat。
设置环境变量：打开终端应用程序，并编辑您的 bash shell 配置文件（例如 ~/.bashrc 或 ~/.bash_profile），添加以下行：

export CATALINA_HOME=/usr/local/tomcat
export PATH=$CATALINA_HOME/bin:$PATH

启动Tomcat：切换到Tomcat的 bin 目录，并运行 startup.sh 脚本。例如：

cd /usr/local/tomcat/bin
./startup.sh

访问Tomcat首页：打开Web浏览器，访问 http://localhost:8080/ 就可以看到Tomcat的欢迎页面。
部署Web应用程序：将Web应用程序的WAR文件（例如myapp.war）复制到Tomcat的 webapps 目录下。例如：

cp myapp.war /usr/local/tomcat/webapps/

重新启动Tomcat：如果已经启动了Tomcat，则需要重新启动才能加载新的Web应用程序。在Tomcat bin目录下运行 shutdown.sh 脚本，然后再次运行 startup.sh 脚本。例如：

cd /usr/local/tomcat/bin
./shutdown.sh
./startup.sh

在浏览器中输入 http://localhost:8080/应用程序名称即可访问 Web 应用程序。

IDEA创建web项目

打开IntelliJ IDEA并选择“Create New Project”（创建新项目）。
在左侧菜单中选择“Java Enterprise”（Java企业版）。
在右侧面板中，选择您想要使用的Web框架，如Spring或JavaServer Faces。
配置项目名称和存储路径等设置。
选择项目的服务器运行时环境，如Tomcat或GlassFish。
完成项目创建后，在Project Structure（项目结构）对话框中配置您的Web应用程序，例如设置Web应用程序根目录。

这些步骤可能会因选择的框架和服务器而有所不同。可查看官方文档以了解更详细的说明。

IDEA使用tomcat

在IntelliJ IDEA的顶部菜单中选择“Run”（运行） > “Edit Configurations”（编辑配置）。
点击“+”按钮，选择“Tomcat Server” > “Local”。
配置服务器：设置服务器的名称、Tomcat安装目录及应用程序服务器设置等。
在“Deployment”选项卡中，选择您要部署的Web应用程序根目录。
点击“OK”保存您的服务器配置。
在IDEA的菜单中选择“Run” > “Run ‘your_tomcat_server_name’”以启动Tomcat服务器。

现在，Tomcat服务器应该已经启动了，并且可以在浏览器中访问您的Web应用程序。

查看端口占用情况

以MAVC为例：

打开终端应用程序
输入命令 sudo lsof -i :端口号，将 “端口号” 替换成您要检查的实际端口号。
按下回车键运行命令。如果该端口正在被使用，则会显示哪个进程正在使用该端口。

例如，要查看端口号为8080的端口是否已被占用，您可以输入以下命令：

sudo lsof -i :8080

如果该端口正在被使用，将会输出类似于以下结果：

COMMAND   PID          USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
java    12345 yourusername   42u  IPv6 0xabcdef123456789      0t0  TCP *:http-alt (LISTEN)

其中，PID表示占用该端口的进程ID，COMMAND表示占用该端口的进程名称。

输入以下命令并按回车键：

kill PID （将“PID”替换为要关闭的进程的PID）

Servlet

Servlet是一种Java编写的服务器端程序，用于接收和响应来自客户端（通常是Web浏览器）的请求。Servlet通常运行在Web服务器（例如Tomcat、Jetty）中，可以接收HTTP请求并生成HTML页面或其他格式的响应。

Servlet可以用于处理各种类型的请求，包括登录验证、表单提交、数据检索等。它们可以与数据库交互、使用会话管理技术（如Cookie）来跟踪用户之间的状态，并使用Java Server Pages（JSP）等其他技术来生成动态内容。

Servlet遵循Java EE规范，具有可扩展性和可重用性。由于Servlet是Java编写的，因此它们适用于任何平台上的Web服务器（只要支持Java）。这使得Servlet成为一种广泛使用的Web开发工具。

Servlet开发步骤

创建一个 Java Web 项目。
导入Servlet的maven坐标
在项目中创建一个 Java 类，实现 HttpServlet 接口。

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class MyServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<html>");
        out.println("<head><title>My Servlet</title></head>");
        out.println("<body>");
        out.println("<h1>Hello World!</h1>");
        out.println("</body></html>");
    }
}

在 web.xml 文件中配置 Servlet 映射。

<servlet>
    <servlet-name>MyServlet</servlet-name>
    <servlet-class>MyServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>MyServlet</servlet-name>
    <url-pattern>/hello</url-pattern>
</servlet-mapping>

部署并启动应用程序服务器。
访问 http://localhost:8080/yourAppContext/hello 即可看到 Hello World! 的输出。

Servlet执行流程

客户端发送请求到服务器。
服务器接收并解析请求，确定要调用哪个Servlet来处理请求。
如果Servlet实例不存在，则创建一个新的实例；否则，使用现有的实例。
服务器将请求和响应对象传递给Servlet的service()方法。
Servlet的service()方法根据请求类型（GET、POST等）调用相应的doGet()、doPost()等方法。
在doGet()、doPost()等方法中处理请求，并生成响应。
响应被发送回客户端。

在整个过程中，Servlet容器负责管理Servlet的生命周期、提供线程池、处理请求和响应等任务。

Servlet生命周期

加载和实例化：Servlet容器加载并实例化Servlet。可以在web.xml文件中配置Servlet的初始化参数。
初始化：Servlet容器调用init()方法来初始化Servlet。在此阶段，Servlet可以执行一些初始化任务，如打开数据库连接。
处理请求：Servlet容器调用service()方法处理客户端请求。在此阶段，Servlet会生成响应并将其发送回客户端。
销毁：Servlet容器在关闭Web应用程序或卸载Servlet时调用destroy()方法。在此阶段，Servlet可以执行一些资源清理任务，如关闭数据库连接等。

注意的是，在Servlet的整个生命周期中，每个Servlet实例都是单线程的。这意味着多个请求可能会被同时处理，但每个请求只能由一个线程处理。因此，Servlet代码必须是线程安全的。

Servlet方法

Servlet是Java Web应用程序中的一种组件，主要用于处理HTTP请求和生成响应。Servlet类中定义了许多方法来处理不同类型的HTTP请求，包括：

doGet() - 处理HTTP GET请求
doPost() - 处理HTTP POST请求
doPut() - 处理HTTP PUT请求
doDelete() - 处理HTTP DELETE请求

除此之外，还有一些不常用的方法，如doHead()、doOptions()和doTrace()等。开发人员可以覆盖这些方法来实现他们的Web应用程序的自定义功能。

Servlet体系结构

                     Servlet
                        |
                    GenericServlet
                        |
                   HttpServlet

其中，Servlet是所有servlet的根接口，定义了servlet需要实现的方法。GenericServlet是一个抽象类，实现了Servlet接口，并提供了一些通用的方法，如init()、destroy()和getServletConfig()等。而HttpServlet则进一步扩展了GenericServlet类，添加了处理HTTP协议的方法，如doGet()、doPost()、doHead()等。

HttpServlet原理

HttpServlet是Java Servlet API中的一个抽象类，用于处理HTTP请求和响应。

生命周期：在Web容器启动时，会创建HttpServlet对象，并调用其init()方法进行初始化。每当有HTTP请求到达时，Web容器将创建一个新的线程来处理请求并调用HttpServlet的service()方法。请求处理完成后，Web容器会调用HttpServlet的destroy()方法来销毁对象。
请求处理：HttpServlet的service()方法根据HTTP请求方式（GET、POST等）调用对应的doXXX()方法（例如doGet()、doPost()），并传入HttpServletRequest和HttpServletResponse对象。开发人员可以重写这些方法来实现自己的逻辑，比如读取请求参数、生成响应内容等。
配置管理：HttpServlet可以通过web.xml文件或注解来配置相关信息，比如Servlet名称、Servlet映射地址等。

总之，HttpServlet作为Servlet API的核心组件之一，在Web开发中起着至关重要的作用。

Servlet urlPattrn

Servlet urlpattern指定了一个Servlet应该响应的URL模式。

假设你有一个名为"myServlet"的Servlet类，并且想要处理以"/products"开头的所有URL请求。则可以在Servlet类上使用如下的注解来指定url pattern:

@WebServlet("/products/*")
public class MyServlet extends HttpServlet {
  // Servlet code here
}

这样，当用户请求任何形如http://example.com/products/{some-path}的URL时，容器将调用MyServlet的相应方法来处理该请求。其中"{some-path}"可以是任何非空字符串。

一个Servlet可以配置多个urlPattern

urlPattern配置规则

以"/"开头：表示精确匹配该URL路径。
以"*"结尾：表示模糊匹配该URL路径中的任何子路径。
以"*.后缀名"结尾：表示匹配该后缀名的所有请求。
以"{变量名}"的形式：表示将该部分作为变量传递给Servlet，可在Servlet中通过request.getParameter(“变量名”)获取。

例如:

“/myServlet”：精确匹配路径"/myServlet"
“/products/*”：匹配所有以"/products/“开头的URL，包括”/products/item1"、"/products/item2/subitem1"等。
“*.jsp”：匹配所有以".jsp"结尾的URL。
“/user/{userId}”：将正式请求的URL中"/user/“和下一个”/“之间的部分作为"userId"传递给Servlet进行处理。比如，”/user/123" 将被传递为 “userId=123” 的参数。

注意：当存在多个url pattern与同一个URL匹配时，Servlet容器将选择最具体（最长）的那个url pattern来处理请求。

HttpServletRequest（请求）

httpservletrequest继承体系

                +--------------+
                |  ServletRequest  |
                +--------------+
                         |
                         |
              +----------+-----------+
              |                      |
     +-----------------+   +-------------------------+
     |  HttpServletRequest  |       |      AsyncContext         |
     +-----------------+   +-------------------------+
                                   |
                                   |
                           +---------------+
                           |  ServletResponse  |
                           +---------------+

可以看到，HttpServletRequest接口继承自ServletRequest接口，并且扩展了AsyncContext接口。同时，HttpServletRequest也是ServletResponse的父接口之一。

介绍：

HttpServletRequest是Java Servlet规范中定义的接口之一，它继承自ServletRequest接口。它提供了对HTTP请求的访问和处理，包括请求头、请求参数、Cookie、Session等信息。

在Servlet容器收到客户端的HTTP请求后，它会创建一个HttpServletRequest对象来代表该请求，并将该对象传递给对应的Servlet进行处理。Servlet可以通过HttpServletRequest对象获取请求的相关信息，如请求方法、URL、请求头、请求正文等，并根据这些信息进行相应的处理，最终生成响应并返回给客户端。

HttpServletRequest还提供了一些方便的方法，如getParameter()、getAttribute()、getSession()等，用于获取请求参数、请求属性、Session等信息。此外，HttpServletRequest还支持异步处理请求，例如使用AsyncContext接口实现长轮询等功能。

总之，HttpServletRequest是Servlet编程中十分重要的一个接口，它为开发者提供了丰富的API，使得处理HTTP请求变得更加简单、高效。

HttpServletRequest获取请求数据

使用HttpServletRequest对象获取请求数据的示例代码：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取请求参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    
    // 在控制台输出请求参数
    System.out.println("用户名：" + username);
    System.out.println("密码：" + password);
    
    // 其他操作...
}

上述代码中，我们使用HttpServletRequest的getParameter()方法来获取HTTP POST请求的参数，然后将其打印到控制台或进行其他操作。如果您需要获取GET请求的参数，则可以使用request.getParameterMap()方法。

HttpServletRequest获取数据的常用方法

获取请求参数：

String username = request.getParameter("username");
String password = request.getParameter("password");

获取所有请求参数：

Map<String, String[]> paramMap = request.getParameterMap();
for (String key : paramMap.keySet()) {
    String[] values = paramMap.get(key);
    for (String value : values) {
        System.out.println(key + "：" + value);
    }
}

获取请求头信息：

String userAgent = request.getHeader("User-Agent");

获取请求客户端IP地址：

String clientIp = request.getRemoteAddr();

获取请求方式（GET/POST)

String method = request.getMethod();

获取请求URL：

String requestUrl = request.getRequestURL().toString();

获取请求URI：

String requestUri = request.getRequestURI();

获取请求协议（HTTP/HTTPS）：

String protocol = request.getProtocol();

获取请求的Servlet路径：

String servletPath = request.getServletPath();

这些方法覆盖了一些常见的数据获取需求，但HttpServletRequest还有其他可用方法，根据具体需求进行查看。

HttpServletRequest通用方式获取请求参数

通过getParameter()方法获取单个请求参数值，例如：

String username = request.getParameter("username");

通过getParameterValues()方法获取多个请求参数值，例如：

String[] interests = request.getParameterValues("interest");

通过getParameterMap()方法获取所有请求参数，例如：

Map<String, String[]> paramMap = request.getParameterMap();

通过getInputStream()方法获取请求体的二进制数据流，并进行解析，例如：

BufferedReader reader = new BufferedReader(new InputStreamReader(request.getInputStream()));
StringBuilder sb = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) {
    sb.append(line);
}
String jsonData = sb.toString();

注意，以上方法在Servlet的doGet()和doPost()方法内均可使用，但是在doGet()方法中只能获取URL中的查询参数，而无法获取POST请求体中的参数。

请求参数中文乱码处理

在服务器配置文件中设置编码格式为UTF-8，例如在Tomcat中，在server.xml文件中添加：

<Connector URIEncoding="UTF-8" .../>

在Servlet的doGet或doPost方法中使用如下代码解决乱码问题：

request.setCharacterEncoding("UTF-8");

如果以上两个方法都无法解决乱码问题，可以尝试在JSP页面中添加如下代码：

<%@ page contentType="text/html; charset=UTF-8" language="java" %>

HttpServletRequest请求请求转发

请求转发是一种在服务器端内部进行页面跳转的方式。

请求转发只能在同一个应用程序内部进行，无法跳转到外部网站。
请求转发是通过服务器内部实现的，客户端浏览器无法察觉页面跳转的过程。
请求转发可以将当前请求对象 HttpServletRequest 和响应对象 HttpServletResponse 传递给下一个页面，并且可以共享这些对象中的数据。
请求转发不会改变客户端浏览器的地址栏 URL，因此对于用户来说是透明的。
请求转发可以提高 Web 应用程序的性能，因为它避免了客户端与服务器之间多次的 HTTP 请求和响应。

请求转发特点

透明性：请求转发对客户端和服务器是透明的，它们不知道请求被转发到了另一个服务器。
负载均衡：请求转发可以将负载分配到多个服务器上，以平衡服务器的负荷。
高可用性：通过将请求转发到备用服务器，请求转发可以提高应用程序的可用性和容错能力。
安全性：请求转发可以实现安全控制，例如SSL/TLS终止，防火墙检查和身份验证。
灵活性：请求转发可以根据需要进行配置和管理，以满足不同的应用程序需求。

请求转发的使用

示例：

// 获取当前请求的请求调度器对象
RequestDispatcher dispatcher = request.getRequestDispatcher("/target.jsp");

// 转发请求到目标jsp页面
dispatcher.forward(request, response);

上面的示例中，我们先从当前请求对象中获取一个请求调度器对象，并将要转发到的JSP页面路径作为参数传递给它。然后，我们使用forward()方法将当前请求转发到指定的目标JSP页面上。最后一个参数response表示响应对象，在转发后会自动被更新。

需要注意的是，请求转发只能在同一个Web应用程序内进行。如果需要跨越Web应用程序进行请求转发，则需要使用重定向（redirect）来实现。

HttpServletResponse（响应）

HttpServletResponse 是Java Servlet API中的一个接口，用于封装HTTP响应信息。它提供了一系列方法来设置HTTP响应头，向客户端发送响应正文以及控制响应行为等功能。

HttpServletResponse常用方法

setStatus(int sc)：设置响应的状态码。
setContentType(String type)：设置响应的内容类型。
getWriter()：获取用于发送响应数据的PrintWriter对象。
sendRedirect(String location)：重定向到另一个URL。
addHeader(String name, String value)：添加指定名称和值的响应头。
setHeader(String name, String value)：设置指定名称和值的响应头。
setContentLength(int len)：设置响应正文的长度。
setBufferSize(int size)：设置响应缓冲区大小。
setCharacterEncoding(String charset)：设置响应的字符编码方式。
flushBuffer()：刷新响应缓冲区，并将任何未提交的数据写入响应输出流。

HttpServletResponse继承体系

HttpServletResponse 接口的继承体系如下所示：

java.lang.Object
   ↳  javax.servlet.ServletResponse
       ↳  javax.servlet.http.HttpServletResponse

其中，HttpServletResponse 接口继承自 ServletResponse 接口，而 ServletResponse 又继承自 java.lang.Object 类。

HttpServletResponse设置响应数据功能

设置响应行

示例，演示如何使用 HttpServletResponse 对象设置响应行：

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        // 设置响应状态码为 200 OK
        response.setStatus(HttpServletResponse.SC_OK);
        
        // 设置响应类型为 text/plain
        response.setContentType("text/plain");
        
        // 设置响应字符编码为 UTF-8
        response.setCharacterEncoding("UTF-8");
        
        // 向客户端发送响应内容
        response.getWriter().println("Hello, world!");
    }
}

这个例子中，我们使用 HttpServletResponse 对象设置了响应状态码、响应类型和字符编码，并向客户端发送了一条简单的文本响应。

设置响应头

示例代码：

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class MyServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html"); // 设置响应内容类型
        response.setCharacterEncoding("UTF-8"); // 设置字符编码
        response.setHeader("Cache-Control", "no-cache"); // 设置缓存控制头
        response.setHeader("Pragma", "no-cache"); // 设置缓存控制头
        response.setDateHeader("Expires", 0); // 设置缓存控制头，确保页面不会被浏览器缓存

        // 其他响应头设置...
        
        // 发送响应
        PrintWriter out = response.getWriter();
        out.println("<html><head><title>Hello World</title></head>");
        out.println("<body><h1>Hello World!</h1></body></html>");
    }
}

这个示例中，我们设置了一些常见的响应头，例如Content-Type、Cache-Control和Pragma。然后，我们通过PrintWriter对象将HTML响应输出到客户端。

设置响应体

示例：

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应内容类型和编码
        response.setContentType("text/html;charset=UTF-8");

        // 获取输出流并写入响应体
        response.getWriter().write("<html><body><h1>Hello World!</h1></body></html>");
    }
}

这个示例中，doGet 方法处理 HTTP GET 请求，并使用 setContentType 方法设置响应内容类型为 HTML，字符编码为 UTF-8。然后，它使用 getWriter 方法获取 PrintWriter 对象，该对象允许我们将文本写入响应体。最后，它写入一个简单的 HTML 页面，其中包含一个标题标签和一些文本。

重定向

重定向特点

重定向是通过发送特殊的响应消息来实现的，浏览器会重新发起一个新的请求。
重定向可以跳转到同一个应用程序中的不同页面，也可以指向外部网站。
重定向可以带上参数，这些参数会被编码在 URL 中或者以隐藏表单域的形式发送给下一个页面。
重定向可以保持客户端与服务器之间的状态独立性，避免了浏览器“后退”按钮造成的问题。

重定向使用

示例：

response.sendRedirect("/target.jsp");

上面的示例中，我们直接使用响应对象的sendRedirect()方法将当前请求重定向到指定的目标JSP页面上。需要注意的是，重定向会生成一个新的请求和响应对象，因此原始请求和响应对象上的任何信息都将丢失。

另外，sendRedirect()方法的参数为重定向的目标URL或页面路径。如果需要跳转到其他Web应用程序，则需要提供完整的URL（包括协议、主机名、端口号和路径）。

Application保存作用域

application作用域是指将对象保存在整个Web应用程序上下文中，该对象可以被所有用户共享。具体来说，使用ServletContext对象的setAttribute()方法可以将对象保存在application作用域中，如下所示：

// 在Servlet中将字符串保存到application作用域中
String message = "Hello, world!";
getServletContext().setAttribute("message", message);

上述代码将一个字符串对象保存到application作用域中，并将其命名为message。这意味着在整个Web应用程序的生命周期内，该对象都可被访问，并且所有用户都可以访问它。

需要注意的是，由于application作用域中的对象是共享的，因此在开发过程中要注意并发问题和线程安全性。

作用域

作用域指的是变量或对象在Web应用程序中的可见性范围。Web中有四种主要的作用域：

Page作用域：页面级别作用域，一个页面内有效，包括JSP和Servlet。
Request作用域：请求级别作用域，一次请求内有效，包括转发和重定向。
Session作用域：会话级别作用域，一个用户会话内有效，通过session对象实现。
Application作用域：应用程序级别作用域，整个应用程序内有效，通过ServletContext对象实现。

Thymeleaf

Thymeleaf是一种用于Web和独立环境的现代服务器端Java模板引擎，可以用于HTML、XML、JavaScript、CSS甚至纯文本。它与Spring框架无缝集成，但也可以作为独立的模板引擎使用。

Thymeleaf的主要特点包括：

基于自然模板语言：Thymeleaf的语法类似于HTML，并且易于学习和使用。
支持标准表达式：可以在模板中使用表达式来处理逻辑、变量和属性。
高度可配置：可以通过配置文件对解析器进行自定义配置。
支持国际化：可以轻松地实现多语言支持。
可与Spring无缝集成：可以直接使用Spring的标签库和EL表达式。
可以在浏览器中直接预览：可以在浏览器中查看模板的渲染效果。

总之，Thymeleaf是一种功能强大、易于使用和高度灵活的模板引擎，适用于开发Web应用程序和其他类型的应用程序。

基本使用

示例：

假设有一个名为 “person” 的对象，包含两个属性：firstName 和 lastName。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Thymeleaf 示例</title>
</head>
<body>
	<h1 th:text="'欢迎您，' + ${person.firstName} + ' ' + ${person.lastName} + '！'">欢迎您，John Doe！</h1>
</body>
</html>

这个示例中，我们使用了 Thymeleaf 的表达式语言（Expression Language，简称 EL）来访问和显示 person 对象的属性。${person.firstName} 表示访问 person 对象的 firstName 属性，并将其值插入到页面中。

th:text 属性用于替换标签内容。 ${…} 中间可以放置任意的表达式，包括字符串拼接、算术运算、逻辑运算等。

通过在标签上添加 xmlns:th=“http://www.thymeleaf.org” 命名空间声明，告诉 Thymeleaf 解析引擎需要对该页面进行处理。

定义工厂类

示例用于创建MyBatis的SqlSessionFactory：

import java.io.InputStream;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

public class MyBatisUtil {
    
    private static SqlSessionFactory sqlSessionFactory;
    
    static {
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = MyBatisUtil.class.getClassLoader().getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

    public static SqlSessionFactory getSqlSessionFactory() {
        return sqlSessionFactory;
    }
}

该类使用静态初始化块来创建一个SqlSessionFactory实例。在这个示例中，mybatis-config.xml文件位于Java classpath下的根目录中。

要使用此工具类，只需调用MyBatisUtil.getSqlSessionFactory()即可获取SqlSessionFactory实例。

JSP

JSP（JavaServer Pages）是一种基于Java技术的服务器端动态网页开发技术。它允许在HTML页面中嵌入Java代码，以便生成动态页面内容。

JSP使用标签库（tag library）和JavaBeans组件来扩展其功能，并且可以与Java Servlets结合使用。在客户端请求JSP页面时，Web服务器会将JSP代码编译成Java Servlet，在服务器上运行并生成HTML页面作为响应发送给客户端。

JSP具有易于开发、易于维护和高可重复使用性等优点，因此被广泛用于Web应用程序开发中。

基本使用（过时现不推荐简单了解）

导入JSP的maven坐标

示例：如何在HTML页面中嵌入Java代码

<!DOCTYPE html>
<html>
<head>
    <title>My JSP Page</title>
</head>
<body>
    <h1>Hello, <%= request.getParameter("name") %>!</h1>
    
    <% int num1 = 10; %>
    <% int num2 = 20; %>
    <p>The sum of <%= num1 %> and <%= num2 %> is <%= num1 + num2 %>.</p>
</body>
</html>

这个例子中，使用<%= … %>标记来嵌入Java代码。例如，在<h1>标签中，使用request.getParameter(“name”)获取HTTP请求参数，然后在HTML文本中显示它。

JSP原理

在JSP文件中编写HTML代码和Java代码，在客户端请求时，服务器将JSP文件转化为Servlet，并执行其中的Java代码，最终生成HTML响应返回给客户端。具体来说，JSP文件会被翻译成Java源代码，然后编译成class文件，最终由容器加载并执行。在执行过程中，JSP引擎会将HTML内容直接输出到响应流中，而将Java代码嵌入到Servlet中，以便处理请求和生成动态内容。

JSP脚本

在JSP文件中，可以使用脚本（Script）来嵌入Java代码或者其他脚本语言的代码，以便在请求过程中生成动态内容。常见的脚本语言包括Java、JavaScript、VBScript等。JSP脚本通常有以下三种形式：

<% %>：这是最常见的脚本标记，用于嵌入Java代码，例如变量声明、条件判断、循环等。
<%= %>：该标记用于输出Java表达式的值到响应流中，类似于System.out.println()。例如：<%= user.getName() %>
<%! %>：该标记用于声明Java方法或成员变量，可以在整个JSP页面中访问。例如：<%! private int count = 0; %>

JSP缺点

可读性较差：在JSP页面中嵌入大量Java代码会使页面变得混乱难以阅读和维护。
难以调试：由于JSP页面是动态生成的，导致在调试时难以定位和排查问题。
与HTML混合使用存在问题：由于JSP脚本需要嵌入到HTML页面中，因此可能出现标记嵌套、语法错误等问题，增加了开发难度和维护成本。
存在安全风险：如果没有正确处理输入数据，就可能产生跨站脚本攻击（XSS）等安全漏洞，从而危及网站的安全性。

EL表达式

EL表达式（Expression Language）是一种用于动态访问和操作JavaBean属性、数组、集合等数据的语言，通常用于JavaWeb开发中的JSP页面。EL表达式通过简化JSP页面中的脚本代码，使其更易读、更易维护。EL表达式以"${}"作为标识符，其中{}内部可以是任意指定的表达式，它支持基本运算符、函数调用、三目运算符等。

EL语法

访问JavaBean属性

${person.name}      // 访问person对象的name属性
${student.score[0]} // 访问student对象的score数组的第一个元素

访问集合、Map等数据类型

${list.size()}           // 访问list集合的大小
${map['key']}            // 访问map中key为'key'的值
${sessionScope.user}     // 访问session作用域中名为'user'的属性值

进行运算操作

${10 + 20}       // 加法运算，结果为30
${num * 2}       // 乘法运算，其中num为变量或对象属性
${score >= 60}   // 比较运算，结果为true或false

调用方法

${date.getTime()}    // 调用Date对象的getTime()方法
${util:escapeXml(str)} // 调用自定义函数escapeXml，并传入参数str

获取作用域对象的值：

${applicationScope.attributeName}

获取会话作用域对象的值：

${sessionScope.attributeName}

获取请求作用域对象的值：

${requestScope.attributeName}

获取页面作用域对象的值：

${pageScope.attributeName}

其中，第四个示例中的"util"是指在JSP页面中导入自定义标签库（taglib）时所指定的前缀。

JSTL标签

JSTL（JavaServer Pages Standard Tag Library）是一个标准的JSP标签库，提供了一组标签（也称为标记），用于简化JSP页面中的常见任务。

常用标签

<c:if>：条件语句标签，用于根据指定条件来判断是否执行某段代码。

<c:if test="${condition}">
    <!-- 在这里编写条件满足时要执行的代码 -->
</c:if>

<c:forEach>：循环语句标签，用于迭代集合或数组中的元素，并在每次迭代时处理它们。

<c:forEach var="item" items="${collection}">
    <!-- 在这里编写对于集合中每个元素要执行的代码，可以使用 ${item} 引用当前元素 -->
</c:forEach>

<c:set>：变量赋值标签，用于将一个值赋给一个变量。

<c:set var="variableName" value="${expression}" />

<c:choose>、<c:when>和<c:otherwise>：多路分支标签，用于根据多个条件选择不同的操作。

<c:choose>
    <c:when test="${condition1}">
        <!-- 在这里编写当条件1满足时要执行的代码 -->
    </c:when>
    <c:when test="${condition2}">
        <!-- 在这里编写当条件2满足时要执行的代码 -->
    </c:when>
    <c:otherwise>
        <!-- 在这里编写当以上条件都不满足时要执行的代码 -->
    </c:otherwise>
</c:choose>

fmt:formatDate和fmt:formatNumber：格式化标签，用于格式化日期和数字数据。

这些标签可以大大简化JSP页面中的逻辑和代码量，使其更易于维护和开发。

JSTL开发步骤

导入jstl坐标
导入JSTL标签库：在JSP页面中导入所需的JSTL标签库

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

编写JSTL表达式：使用JSTL标签库提供的表达式语言EL（Expression Language）编写表达式，例如${expression}
使用JSTL标签：使用JSTL标签库提供的标签来控制页面的流程和显示方式，例如<c:if>、<c:forEach>等。需要注意的是，在使用标签之前需要先导入标签库。
部署应用程序：将包含JSTL代码的JSP页面打包成WAR文件，并部署到Web服务器上。
运行应用程序：通过浏览器访问应用程序，即可看到JSTL标签的效果。

MVC模式和三层架构

MVC模式和三层架构都是常用于软件开发的架构模式，其主要目的是将代码按照不同的职责划分并组织起来，以提高代码的可读性、可维护性和可扩展性。

MVC模式（Model-View-Controller）是一种将应用程序分为三个核心部分的架构模式。其中，Model负责表示应用程序中的数据和业务逻辑，View负责呈现数据给用户，并接受用户的输入，Controller作为桥梁，负责处理用户的请求，更新Model并将变化传递给View进行展示。

三层架构（Three-Tier Architecture）是一种将应用程序分为三个独立模块的架构模式。其中，第一层为表现层或视图层，负责接收用户的请求并展示数据；第二层为业务层或逻辑层，负责处理各种业务逻辑；第三层为数据访问层或持久化层，负责与数据存储介质（如数据库）进行交互，对数据进行增删改查等操作。这三层之间通过明确定义的接口进行通信，在保证相互独立的同时也方便了后期的维护和升级。

MVC好处

分离关注点：将应用程序分解为三个组件，使它们在单独的领域内工作，有助于降低耦合性和提高可维护性。
易于测试和维护：MVC模式支持单元测试、集成测试和自动化测试，便于识别和修复问题，减少修改代码时产生的副作用。
更好的协同开发：MVC模式允许开发人员同时对项目的不同部分进行开发，从而增加了敏捷性和生产力。
可扩展性：由于每个组件都是相对独立的，因此很容易添加新的功能或更改现有的功能。
用户体验：通过将用户交互分为视图组件，可以更好地控制用户界面和用户体验。

MVC三层架构

模型层（Model）：用于处理应用程序的数据和业务逻辑，与数据库进行交互。
视图层（View）：用于呈现数据给用户，并接收用户的输入。通常采用HTML、CSS、JavaScript等Web技术实现。
控制器层（Controller）：处理用户输入和View的请求，并将请求发送到相应的Model进行处理，然后将处理结果返回给View层渲染。

会话跟踪技术（Cookie Session）

会话

会话（Session）是指在客户端和服务器之间建立的一种持久化连接，用于存储和管理用户信息。当用户使用Web应用程序时，服务器会为该用户创建一个会话并分配一个唯一的会话ID，通过这个会话ID来识别该用户的请求。

在会话中，可以存储各种类型的数据，例如用户登录状态、购物车信息等等。这些数据会被存储在服务器端，直到会话结束或超时。通过会话机制，Web应用程序可以跟踪用户的活动状态，实现更加复杂的交互功能。

会话跟踪

会话跟踪（Session Tracking）是指通过一定的手段来跟踪用户在Web应用程序中的活动状态，以实现持久化的用户数据存储和维护。常见的会话跟踪方式包括Cookie、URL重写和隐藏表单域等。

其中，使用Cookie进行会话跟踪是比较常见和简单的方式，服务器可以将一个唯一的会话ID存储在客户端浏览器上的Cookie中，并在随后的请求中通过该会话ID来识别用户，从而获取用户之前存储的数据。除此之外，还有一些其他的技术可以用于会话跟踪，如使用SSL会话ID、HTTP认证等。

需要注意的是，会话跟踪虽然方便了Web应用程序的开发和维护，但也带来了一些安全风险，例如会话劫持、会话固化攻击等。因此，在实现会话跟踪时，需要遵循相应的安全规范和最佳实践，保障用户数据的安全性和隐私性。

为什么需要会话跟踪技术

会话跟踪技术是用于跟踪与用户相关的信息的一种机制。一个例子是当用户在网站上进行在线购物时，需要将用户的购物车信息保存在服务器端，并且需要保持用户与其购物车信息之间的关联。如果没有会话跟踪技术，每当用户浏览网站的不同页面时，购物车信息都会被重置，而用户可能会失去已经添加到购物车中的商品信息。因此，通过使用会话跟踪技术，可以在用户和服务器之间建立一个持续的连接，从而使得购物车信息可以跨越多个页面进行保存和访问，最终实现在线购物功能的完整性和可靠性。常见的会话跟踪技术包括 Cookie、Session 和 URL 重写等。

Cookie实现方式

创建一个Cookie对象：

Cookie cookie = new Cookie("cookieName", "cookieValue");

其中，"cookieName"是所创建Cookie的名称，"cookieValue"是所创建Cookie的值。

设置Cookie的其他属性：

cookie.setMaxAge(60 * 60 * 24); // 设置Cookie的过期时间，单位为秒
cookie.setHttpOnly(true); // 设置Cookie只能通过HTTP或HTTPS协议传输，不能被JavaScript访问
cookie.setPath("/"); // 设置Cookie的可见路径，默认为当前页面所在路径

将Cookie添加到响应中：

response.addCookie(cookie);

其中，"response"是HttpServletResponse对象，用于向客户端发送响应。

获取Cookie方式

从请求中获取所有Cookie对象：

Cookie[] cookies = request.getCookies();

其中，"request"是HttpServletRequest对象，用于接收客户端的请求。

获取指定名称的Cookie值：

String cookieValue = null;
Cookie[] cookies = request.getCookies();
if (cookies != null) {
    for (Cookie cookie : cookies) {
        if ("cookieName".equals(cookie.getName())) {
            cookieValue = cookie.getValue();
            break;
        }
    }
}

其中，"cookieName"是所要获取的Cookie的名称。如果找到了指定名称的Cookie，则返回其对应的值；否则返回null。

注意：当Cookie的属性HttpOnly设置为true时，Cookie只能通过HTTP或HTTPS协议传输，不能被JavaScript访问。因此，在某些情况下可能无法直接获取Cookie的值。

Cookie原理

Cookie是一种在Web浏览器和Web服务器之间传递信息的机制，其基本原理：

当客户端（通常是Web浏览器）向服务器发送请求时，如果服务器需要记录该用户的状态，就可以在响应头中添加一个Set-Cookie头部字段，用来告诉浏览器在本地存储一个名为“cookie”的数据，并将其值设置为一组键值对形式的数据。
浏览器收到响应后，会按照Set-Cookie字段的要求，在本地存储一个Cookie。以后该网站的每次请求都会自动将该Cookie发送给服务器，即在请求头中添加一个Cookie字段，用来告诉服务器当前请求的用户身份。
服务器接收到请求后，会读取请求头中的Cookie字段，并根据其中携带的数据来进行相应的处理，例如判断用户是否已登录等。

Cookie的主要作用是用于记录用户的状态，例如登录状态、购物车信息等。它可以让Web应用程序实现个性化服务，为用户提供更好的体验。同时，Cookie的使用也存在一定的安全风险，因此在实际开发中应该注意保护用户的隐私和安全。

Cookie使用细节

Cookie存活时间：

Cookie存活时间指的是在Web浏览器中存储在客户端计算机上的Cookie文件的有效期限。它可以通过在设置Cookie时设置过期时间来控制，如果没有设置，则默认为会话结束时失效。Cookie的存活时间可以是分钟、小时、天、周、月甚至年。

设置Cookie存活时间：

Cookie cookie = new Cookie("cookieName", "cookieValue");
cookie.setMaxAge(60 * 60 * 24); // 设置为1天，单位为秒
response.addCookie(cookie);

其中，setMaxAge() 方法用于设置 cookie 的存活时间，以秒为单位。在上面的例子中，将 cookie 的存活时间设置为一天，即 60 秒 × 60 分钟 × 24 小时。最后，通过 addCookie() 方法将 cookie 添加到响应中，发送给客户端。

Cookie存储中文：

在存储中文代码时，需要注意字符集编码问题。

示例如何在 cookie 中存储和读取中文字符串：

// 存储中文字符串到 Cookie 中
String chineseStr = "你好，世界！";
Cookie cookie = new Cookie("chineseCookie", URLEncoder.encode(chineseStr, "UTF-8"));
response.addCookie(cookie);

// 从 Cookie 中读取中文字符串
Cookie[] cookies = request.getCookies();
if (cookies != null) {
    for (Cookie c : cookies) {
        if (c.getName().equals("chineseCookie")) {
            String value = URLDecoder.decode(c.getValue(), "UTF-8");
            System.out.println(value); // 输出：你好，世界！
        }
    }
}

在这个例子中，我们使用 URLEncoder.encode() 方法将中文字符串编码为 UTF-8 格式，并将其存储到名为 “chineseCookie” 的 cookie 中。在读取 cookie 时，我们使用 URLDecoder.decode() 方法对 cookie 值进行解码，并指定字符集编码为 UTF-8。最终，我们可以得到正确的中文字符串值 “你好，世界！”。

Session实现方式

JavaWeb 中，可以使用 HttpSession 接口来实现会话管理。

简单的代码示例：

// 获取 Session 对象
HttpSession session = request.getSession();

// 在 Session 中存储数据
session.setAttribute("username", "John");

// 从 Session 中获取数据
String username = (String) session.getAttribute("username");

// 设置 Session 过期时间为 30 分钟（单位：秒）
session.setMaxInactiveInterval(1800);

// 销毁 Session
session.invalidate();

上面的示例中，我们首先通过 request.getSession() 方法获取了一个 HttpSession 对象，然后使用 setAttribute() 方法将一个名为 “username” 的属性设置为 “John”，并使用 getAttribute() 方法从 Session 中获取该属性的值。我们还使用 setMaxInactiveInterval() 方法设置了 Session 的过期时间为 30 分钟，并使用 invalidate() 方法销毁了 Session。

Session对象常用方法

setAttribute(String name, Object value) - 向Session中设置一个属性（键值对）
getAttribute(String name) - 从Session中获取指定名称的属性值
removeAttribute(String name) - 从Session中移除指定名称的属性
invalidate() - 使Session失效，通常在用户退出或超时后被调用
getId() - 获取Session的唯一标识符
setMaxInactiveInterval(int interval) - 设置Session的最大不活动时间（以秒为单位）
getLastAccessedTime() - 获取上次访问Session的时间
isNew() - 判断Session是否是新创建的
getServletContext() - 获取Servlet上下文对象，可以通过该对象获得全局Session。

Session原理

JavaWeb 中的 Session 是基于 Cookie 和服务器端存储实现的。

当客户端请求服务器时，服务器会创建一个唯一标识符（Session ID），并将该 ID 存储到 Cookie 中发送给客户端。客户端在后续的请求中都会携带该 Cookie，服务器通过解析 Cookie 中的 Session ID 来找到对应的 Session 对象。

服务器端会将 Session 对象存储在内存中或者持久化到磁盘等外部存储设备中，并在需要时根据 Session ID 查找到相应的 Session 对象。在 Session 过期或者被手动删除时，服务器会自动清除相应的 Session 数据。

Session使用细节

Session钝化：

Session钝化是指在JavaWeb中将Session对象中的数据序列化并保存到磁盘上，以便在服务器需要释放内存时能够恢复这些数据。这通常发生在长时间不活动的Session上，以防止过多占用服务器内存。当用户再次访问该Session时，可以从磁盘中读取序列化的数据并重新创建Session对象。

Session活化：

Session活化是指在JavaWeb中将之前钝化的Session对象从磁盘上读取并反序列化，重新恢复为可用状态。通常发生在用户再次访问该Session时，服务器需要根据需要将其从磁盘上加载到内存中进行处理。这允许Session数据保持不变，并确保应用程序的连续性。

数据丢失：

当服务器重启时，客户端会与之前的服务器连接断开，新的服务器实例被启动。在这种情况下，旧的Session对象将不再可用，因为它们保存在先前的服务器实例中，并且无法在新的服务器实例中访问和使用。

因此，当一个客户端关闭并重新连接到一个新的服务器实例时，它将创建一个新的Session对象而不是之前保存在旧服务器实例中的Session对象。这就是为什么获取的Session对象不再是相同的原因。

session销毁：

Session对象有一个默认的生命周期，当客户端第一次访问服务器时，服务器会创建一个Session对象，同时为该Session分配一个唯一的ID。Session对象会在以下情况下被销毁：

ession过期：Session对象有一个默认的超时时间，在规定的时间内如果没有活动，则Session会自动失效并被销毁。
会话被手动失效：当用户注销或主动关闭浏览器时，可以通过调用Session.invalidate()方法来手动使Session失效。
容器关闭：当应用程序的容器关闭时，所有的Session都将被销毁。

需要注意的是，当Session被销毁时，并不会立即释放占用的资源和内存，而是等待垃圾回收器进行回收。因此，对于长时间闲置且占用大量内存的Session，最好手动使其失效以及适时地使用Session.setMaxInactiveInterval()设置合适的超时时间，以避免资源的浪费。

设置session销毁时间：

通过session的setMaxInactiveInterval方法来设置session的销毁时间。该方法接受一个以秒为单位的整数参数，表示session在多少秒内没有活动后将被销毁。以下是设置session销毁时间为30分钟的语法示例：

// 获取当前session对象
HttpSession session = request.getSession();
// 设置session最大不活动时间为1800秒（即30分钟）
session.setMaxInactiveInterval(1800);

Cookie和Session的比较

Cookie和Session都是用于在客户端和服务器之间传递数据的机制

区别：

存储位置不同：Cookie是存储在客户端浏览器上的文本文件，而Session是存储在服务器端内存或磁盘上的对象（Cookie不占用服务器资源）。
安全性不同：由于Cookie存储在客户端浏览器上，因此其安全性较差，容易被窃取和篡改；而Session存储在服务器端，安全性相对较高。
存储数据类型不同：Cookie只能存储字符串类型的数据，而Session可以存储任意类型的数据。
生命周期不同：Cookie可以设置过期时间，即在指定时间后失效，也可以在浏览器关闭后失效；而Session默认在客户端离开服务器或关闭浏览器时失效，也可以通过设置最大不活动时间来控制其生命周期。
使用场景不同：Cookie主要用于存储少量的用户信息，如登录状态、购物车信息等；而Session则适用于存储更多或更敏感的用户信息，如用户身份验证信息、权限信息等。

过滤器

Filter（过滤器）是一种用于拦截HTTP请求和响应的组件。它可以在请求到达目标资源之前对其进行预处理或在响应返回客户端之前对其进行后处理。Filter可以用于实现许多常见的功能，如身份验证、日志记录、字符编码转换等。它们可以通过在web.xml文件中配置来使用，并可以按照一定的顺序链式调用。

过滤器的使用 (配置文件的方式)

创建一个实现了javax.servlet.Filter接口的Java类，并实现doFilter方法。
在web.xml文件中配置该过滤器，指定过滤器名称、URL模式（可以是一个或多个）、初始化参数等信息。

例如，在web.xml文件中定义一个名为MyFilter的过滤器，并将其应用于所有以"/user"开头的URL：

<filter>
    <filter-name>MyFilter</filter-name>
    <filter-class>com.example.MyFilter</filter-class>
    <init-param>
        <param-name>param1</param-name>
        <param-value>value1</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>MyFilter</filter-name>
    <url-pattern>/user/*</url-pattern>
</filter-mapping>

实现doFilter方法来处理请求和响应。可以在此方法中进行一些预处理操作，然后调用chain.doFilter()方法将请求传递给下一个过滤器或目标资源。

例如，在MyFilter类中实现doFilter方法：

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
        throws IOException, ServletException {
    // 对请求进行预处理
    HttpServletRequest httpRequest = (HttpServletRequest) request;
    String param1 = filterConfig.getInitParameter("param1");
    System.out.println("param1 = " + param1);
    
    // 将请求传递给下一个过滤器或目标资源
    chain.doFilter(request, response);
    
    // 对响应进行后处理
    HttpServletResponse httpResponse = (HttpServletResponse) response;
    httpResponse.addHeader("X-MyFilter", "processed");
}

过滤器的使用 (注解的方式)

在过滤器类上添加@WebFilter注解，指定过滤器的过滤路径和执行顺序。

@WebFilter(filterName = "myFilter", urlPatterns = {"/*"})
public class MyFilter implements Filter {
   // 过滤器的代码逻辑
}

实现Filter接口中定义的三个方法：init、doFilter和destroy。

public class MyFilter implements Filter {
    public void init(FilterConfig arg0) throws ServletException {
        System.out.println("过滤器初始化");
    }
 
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
            throws IOException, ServletException {
        System.out.println("执行过滤操作");
        chain.doFilter(req, resp);
    }
 
    public void destroy() {
        System.out.println("过滤器销毁");
    }
}

其中，init方法在过滤器初始化时被调用，doFilter方法是核心的过滤方法，在每次请求到达时被调用，destroy方法在过滤器销毁时被调用。

Filter过滤器执行流程

当浏览器向服务器发送请求时，该请求将先被Filter链中的第一个Filter拦截。
如果当前的Filter通过了拦截，并且请求还没有到达目标Servlet/JSP，那么该请求将继续被传递给Filter链中下一个Filter。
如果某个Filter拒绝了请求，那么整个请求处理过程将结束，该请求不会被传递给目标Servlet/JSP。
当请求到达目标Servlet/JSP并被处理完成后，响应将返回Filter链中最后一个Filter。
Filter将可以修改请求头和响应头、请求体和响应体等内容，或者仅仅是打印日志等操作。
最后，响应将被传递回给客户端。

Filter过滤器允许开发人员在请求到达目标Servlet/JSP之前或响应离开之前对请求或响应进行拦截和处理。

Filter过滤器使用细节

filter拦截路径配置：

精确匹配：/path/subpath/file.jsp
目录匹配：/path/*，表示匹配以/path/开头的所有请求。
扩展名匹配： *.do，表示匹配以.do结尾的所有请求。
默认匹配：/*，表示匹配所有请求。

需要注意的是，如果配置了多个Filter，并且它们的拦截路径有重叠的部分，那么它们的执行顺序将按照在web.xml文件中的先后顺序进行执行。

过滤器链执行顺序：

Filter的初始化方法init()按照在web.xml文件中的先后顺序进行执行。
当有请求到达时，容器会按照在web.xml文件中的配置顺序依次执行每个Filter的doFilter()方法。
如果当前Filter的doFilter()方法未将请求传递给下一个Filter或Servlet，则请求处理结束，直接返回响应结果。
如果当前Filter的doFilter()方法将请求传递给下一个Filter或Servlet，则容器继续按照配置顺序执行下一个Filter的doFilter()方法，直到最后一个Filter或Servlet被执行完成。
最后，Filter的销毁方法destroy()按照与init()相反的顺序执行。

注意：如果在Filter的doFilter()方法中使用了chain.doFilter(request, response)来调用下一个Filter或Servlet，那么必须要在该语句之前对request和response对象进行任何操作，例如添加请求头或修改响应内容等。这是因为一旦调用了chain.doFilter(request, response)，请求和响应就会被传递给下一个Filter或Servlet，在之后的代码中对它们进行操作可能会产生意外的结果。

监听器

Listener（监听器）是一种特殊的Java类，用于监视应用程序中发生的事件并采取相应的操作。它可以用于捕获和处理请求、会话和上下文等重要的事件，并在事件发生时自动执行预定义的代码。

常见的Listener包括ServletRequestListener、ServletContextListener和HttpSessionListener，它们分别用于监听Servlet请求、应用程序环境和Session会话的各种事件。

使用Listener可以实现很多功能，如统计访问量、初始化应用程序环境、管理Session会话等。在开发JavaWeb应用程序时，了解Listener的作用和使用方法是非常重要的。

ServletContextListener使用

ServletContextListener是JavaWeb中的一个监听器，用于监听ServletContext上下文的创建和销毁事件。使用ServletContextListener可以在Web应用程序启动或关闭时执行一些初始化或清理操作。

ServletContextListener的语法：

创建一个类并实现ServletContextListener接口。

public class MyServletContextListener implements ServletContextListener {
    public void contextInitialized(ServletContextEvent event) {
        //ServletContext创建时执行的代码
    }
 
    public void contextDestroyed(ServletContextEvent event) {
        //ServletContext销毁时执行的代码
    }
}

在web.xml文件中注册这个Listener。

<listener>
    <listener-class>com.example.MyServletContextListener</listener-class>
</listener>

其中，contextInitialized方法会在ServletContext创建时被调用，而contextDestroyed方法会在ServletContext销毁时被调用。通过在contextInitialized中执行一些初始化操作，可以保证Web应用程序启动时所有必要的资源都已准备好；而在contextDestroyed中执行一些清理操作，则可以确保在Web应用程序关闭时能够正确地释放资源。

注意：当Servlet容器启动或关闭时，ServletContextListener将自动被调用，无需手动触发。

AJAX

Ajax（Asynchronous Javascript and XML）是一种使用客户端脚本、XMLHttpRequest对象和服务器端处理技术的Web开发技术，它可以实现页面异步更新，提高用户体验。通过使用Ajax，Web应用程序可以在不刷新整个页面的情况下向服务器发送请求并获取响应数据，并将这些数据用于更新页面上的部分内容。这使得Web应用程序更加快速响应和交互性强。Ajax主要涉及三个技术：HTML（或XHTML）和CSS用于表示和样式化信息；DOM操作和事件处理机制用于动态地显示和修改信息；XMLHttpRequest对象和服务器端通信技术用于异步更新页面。

AJAX作用

Ajax的主要作用是实现页面异步更新，提高用户体验。通过使用Ajax，Web应用程序可以在不刷新整个页面的情况下向服务器发送请求并获取响应数据，并将这些数据用于更新页面上的部分内容。这使得Web应用程序更加快速响应和交互性强。具体来说，Ajax可以用于以下方面：

动态更新页面内容：通过Ajax，可以动态地向服务器发送请求并获取响应数据，然后更新页面上的部分内容，而不需要刷新整个页面。

实现无刷新表单提交：通过使用Ajax技术，可以在不重新加载整个页面的情况下提交表单数据到服务器端进行处理。

构建交互式Web应用程序：使用Ajax可以实现与用户的实时交互，例如自动完成、即时搜索等功能。

加载媒体文件：通过Ajax异步加载图片、视频等媒体文件，以及其他资源文件，从而提高页面加载速度。

总之，Ajax可以使Web应用程序更加快速、灵活、交互性强，并且提高了用户体验。

什么是异步交互

异步交互通常指使用Ajax（Asynchronous JavaScript and XML）技术实现的异步请求和响应。当用户发起一个Ajax请求时，浏览器不会刷新整个页面，而是向服务器发送一个异步请求，服务器返回JSON或XML数据格式的响应，浏览器通过JavaScript解析响应并动态更新页面，从而实现局部刷新的效果。

与传统同步交互相比，异步交互可以提高网页的响应速度和用户体验，因为它不需要刷新整个页面或等待服务器响应就能更新部分内容。此外，异步交互还可以减轻服务器负担，因为它只返回所需的数据而不是整个页面。

异步和同步的区别

异步和同步交互的区别在于请求和响应的处理方式。

同步交互是指客户端发送请求后，必须等待服务器响应并完成处理后才能继续执行后续的操作。这意味着客户端需要等待一段时间才能获得响应结果，期间无法进行其他操作。在JavaWeb中，同步交互通常使用表单提交或超链接等方式触发请求，并通过页面跳转或刷新实现数据的展示和更新。

异步交互是指客户端发送请求后，不需要等待服务器响应就能继续执行后续的操作。当服务器响应后，客户端会通过JavaScript等技术动态更新页面，而不需要刷新整个页面。在JavaWeb中，异步交互通常使用Ajax（Asynchronous JavaScript and XML）技术实现，可以快速更新部分内容，提高用户体验。

AJAX使用

创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest) { // code for modern browsers
  xmlhttp = new XMLHttpRequest();
} else { // code for old IE browsers
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

定义回调函数

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //处理返回结果
  }
};

发送请求

xmlhttp.open("GET", "url", true);
xmlhttp.send();

在回调函数中处理返回结果

if (this.readyState == 4 && this.status == 200) {
  var response = this.responseText; //获取响应内容
  //处理响应内容
}

其中，xmlhttp表示XMLHttpRequest对象，onreadystatechange是一个事件处理函数，readyState表示请求状态，status表示响应状态。在发送请求时，第一个参数是请求的方式（一般为GET或POST），第二个参数是请求的URL，第三个参数表示是否为异步请求。在处理返回结果时，可以使用responseText属性获取响应内容。

Axios异步框架

Axios 是前端使用的异步框架，用于向服务器发送 HTTP 请求和接收响应。而在 Java Web 后端中，可以使用类似于 Axios 的异步框架，如 Apache HttpClient、OkHttp 等。

这些框架可帮助开发人员发送 HTTP 请求并处理相应的响应。与 Axios 相似，这些 Java Web 异步框架也支持请求和响应拦截、取消请求、自动转换 JSON 数据、设置请求头和响应头等功能。它们可以用于不同的 Java Web 框架，如 Spring、Spring Boot 等，以满足不同的业务需求。

总结：对原生的AJAX进行了封装，简化书写

Axios使用

在HTML中使用Axios需要先在页面中引入Axios库，通常可以通过以下方式实现：

<!-- 引入 Axios 库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

然后在JavaScript代码中使用Axios的API来发送请求和处理响应，例如：

// 使用 Axios 发送 GET 请求
axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

这段代码会向指定的URL发送GET请求，并在成功响应时输出响应数据到控制台。可以根据自己的需求来选择不同的请求方法和配置参数。

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写。它基于JavaScript语法的一个子集，但可以由许多不同的编程语言来解析和生成。JSON使用键值对的方式表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组或对象。JSON常用于Web应用程序之间的数据传输，也可用于本地存储和配置文件等场景。

JSON格式

键值对：表示一组数据，使用花括号 {} 包裹，在其中键和值之间使用冒号 : 分隔，每个键值对之间使用逗号 , 分隔。示例：

{
  "name": "Alice",
  "age": 25,
  "isMarried": false
}

数组：表示多个数据项，使用方括号 [] 包裹，每个数据项之间使用逗号 , 分隔。数组中的数据项可以是任意类型的值，例如字符串、数字、布尔值、对象或其他数组。示例：

[
  "apple",
  "banana",
  "orange"
]

JSON语法

在HTML中可以通过使用 JavaScript 的 XMLHttpRequest（XHR）对象或 Fetch API 来发送 JSON 格式的数据。

使用 XMLHttpRequest 对象发送 JSON 数据的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Send JSON data using XMLHttpRequest</title>
</head>
<body>

  <script>
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://example.com/api/data");
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onreadystatechange = function() {
      if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        console.log(this.responseText);
      }
    };
    xhr.send(JSON.stringify({ name: "Alice", age: 25 }));
  </script>

</body>
</html>

使用 Fetch API 发送 JSON 数据的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Send JSON data using Fetch API</title>
</head>
<body>

  <script>
    fetch("http://example.com/api/data", {
      method: "POST",
      headers: { "Content-Type": "application/json;charset=UTF-8" },
      body: JSON.stringify({ name: "Alice", age: 25 })
    })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error(error));
  </script>

</body>
</html>

还可以在JS定义json格式 (常用)

var obj = {
  "key1": "value1",
  "key2": "value2",
  "key3": {
    "subKey1": "subValue1",
    "subKey2": "subValue2"
  }
};

其中，对象以花括号{}包裹，每个键名和对应的值之间用冒号:分隔，多个键值对之间用逗号,分隔。键名需要用双引号""包裹，键值可以是字符串、数字、布尔值、数组、嵌套的JSON对象等任意类型的值。

JSON数据和java对象的转换

使用一些第三方库（如Jackson、Gson、Fastjson等）来将JSON字符串转换为Java对象。

Fastjson

Fastjson是一个Java编写的高性能JSON处理库，它可以将Java对象转换为JSON格式的字符串，也可以将JSON格式的字符串转换为Java对象。Fastjson具有以下特点：

高性能：相比其他Java JSON库，Fastjson在速度和内存占用上都表现出色。
支持多种数据类型：Fastjson支持自动将Java对象转换为JSON格式的字符串，并且支持将JSON格式的字符串转换为Java对象或者List、Map等复杂数据结构。
支持注解：Fastjson支持使用注解来控制JSON序列化和反序列化的细节。
简单易用：Fastjson的API简单易用，学习成本较低。
广泛应用：Fastjson已经被广泛应用于各个领域，包括开源项目和企业级应用。

由于Fastjson的优越性能和易用性，它已经成为了Java开发中最受欢迎的JSON处理库之一。

Fastjson使用

添加fastjson依赖。
创建Java对象或从数据库中查询数据等获取需要序列化为JSON格式的数据。
调用fastjson提供的API将Java对象转换为JSON字符串。
如果需要反序列化JSON字符串为Java对象，则调用fastjson提供的API将JSON字符串转换为Java对象。

例代码：

// 1. 添加fastjson依赖
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>x.x.x</version>
</dependency>

// 2. 创建Java对象或从数据库中查询数据等获取需要序列化为JSON格式的数据
User user = new User("Tom", 18);

// 3. 将Java对象转换为JSON字符串
String json = JSON.toJSONString(user);

// 4. 将JSON字符串转换为Java对象
User userFromJson = JSON.parseObject(json, User.class);

其中，User表示自定义的Java类，包含name和age两个字段。JSON.toJSONString()方法将Java对象转换为JSON字符串，JSON.parseObject()方法将JSON字符串转换为Java对象，并指定要转换的目标类型。

getParameter方法不能直接获取JSON数据解决方式

获取HTTP请求的输入流

BufferedReader reader = request.getReader();

读取输入流中的数据，并将其转换为字符串

String jsonString = "";
StringBuilder sb = new StringBuilder();
while ((jsonString = reader.readLine()) != null) {
    sb.append(jsonString);
}

将JSON字符串转换为Java对象，使用第三方库

Gson gson = new Gson(); // Gson库
User user = JSON.parseObject(sb.toString(), User.class);

Vue

Vue是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）模式，通过双向数据绑定实现视图和数据的自动同步更新。Vue具有简单易学、高效灵活以及社区活跃等特点，被广泛应用于Web开发中。

MVVM

MVVM是一种软件架构模式，它将应用程序分为三个部分：Model、View和ViewModel。其中，Model表示应用程序的数据及其相关操作；View表示用户界面，即呈现给用户看到的视图；而ViewModel则充当了一个中介，它负责处理用户与视图之间的交互，并将View中的输入同步到Model中。

MVVM通过数据绑定实现了View与ViewModel的自动同步，使开发者能够更加专注于业务逻辑的实现，提高了开发效率。同时，MVVM也支持单元测试，可以方便地对ViewModel层进行测试，降低了代码出错的概率。因此，MVVM是一种流行的前端架构设计模式，在Vue、Angular等前端框架中得到了广泛应用。

Vue使用

Vue.js文件导入到工程中
HTML中使用Vue的语法，引入Vue的JavaScript文件，并在HTML文件中创建一个Vue实例。然后可以使用Vue指令和插值表达式来绑定数据和控制DOM元素的行为，简单的示例：

在HTML头部引入Vue的JS文件：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在HTML body 中创建Vue实例并绑定数据：

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

这里，我们使用了Vue的插值表达式{{ message }}将data属性中的message值渲染到HTML页面上。

Vue常用指令

v-if：根据表达式的值条件性地渲染元素。
v-for：循环遍历数组或对象，渲染每个元素或属性。
v-bind：绑定一个或多个HTML属性到Vue实例的数据或方法。
v-on：监听DOM事件，并在触发时执行指定的Vue方法。
v-model：双向数据绑定，将表单控件的值与Vue实例的属性绑定。
v-show：根据表达式的值条件性地显示或隐藏元素。
v-text：设置元素的textContent。

Vue生命周期

beforeCreate：在Vue实例被创建之前调用。
created：在Vue实例被创建之后调用，实例已经完成数据观测、属性和方法的运算，但是没有DOM操作。
beforeMount：在Vue实例挂载到DOM之前调用。
mounted：在Vue实例挂载到DOM之后调用，可以通过$refs访问组件DOM元素。
beforeUpdate：响应式数据更新时调用，但是尚未渲染新数据，此时旧的DOM仍然可见。
updated：在数据更新后调用，DOM已经更新。
beforeDestroy：在Vue实例销毁之前调用。
destroyed：在Vue实例销毁之后调用，清理事件监听器和定时器等资源。

这些生命周期函数可以帮助开发者在不同阶段控制Vue实例的行为，例如在created中发送异步请求获取数据，在mounted中初始化插件等。

ElementUI

elementui是一个基于Vue.js的UI组件库，提供了众多常用的界面元素和交互组件，如按钮、表单、对话框、轮播图等。它具有易用、美观、灵活等特点，广泛应用于Web前端开发中。

组件

基础组件：Button、Input、Radio、Checkbox、Select、Switch等
布局组件：Layout、Grid、Container等
数据展示组件：Table、Tag、Badge、Progress等
导航组件：Menu、Tabs、Breadcrumb、Pagination等
信息反馈组件：MessageBox、Notification、Loading、Tooltip等
其他组件：Dialog、Carousel、Form、Tree等

这些组件涵盖了日常开发中常见的界面元素和交互组件，能够快速搭建出美观、易用的Web应用

ElementUI官网

Element国内官网

在官网上，可以找到elemenui的文档、组件展示、在线演示、下载等信息。同时，官网还提供了社区和支持页面，方便用户交流和寻求帮助。

element使用

引入Element的CSS、JS、Vue的js文件
创建Vue对象，例如：

<div id="app">
  {{ message }}
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  })
</script>

官网复制Element组件代码

Element布局

栅格系统

栅格系统可以将页面水平划分为12列，并通过“col-*”类来指定元素所占的列数，从而实现灵活的页面布局。例如，以下代码将一个元素设置为占据6列的宽度：

<el-row>
  <el-col :span="6">内容</el-col>
</el-row>

弹性盒子布局

弹性盒子布局（Flexbox）是一种灵活的布局方式，可以用来实现自适应、响应式的布局效果。在Element UI中，可以使用“flex-box”类来开启弹性盒子布局模式。例如，以下代码将一个元素设置为水平居中对齐：

<div class="flex-box justify-center">
  内容
</div>

行内块元素布局

行内块元素布局（Inline-block）可以让多个元素在同一行中并排显示，并且可以设置宽高等样式属性。在Element UI中，可以使用“inline-block”类来将元素转换为行内块元素。例如，以下代码将两个元素设置为水平并排显示：

<div class="inline-block" style="width: 50px; height: 50px; background-color: red;"></div>
<div class="inline-block" style="width: 50px; height: 50px; background-color: blue;"></div>

以上是Element UI中的一些常见布局方式

想不出好的昵称-

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JavaWeb是什么？如何学习JavaWeb的体系

Java Web，是用Java技术来解决相关web互联网领域的技术栈。web包括：web服务端和web客户端两部分。Java在客户端的应用有Java Applet，不过使用得很少，Java在服务器端的应用非常的丰富，比如Servlet，JSP、第三方框架等等。Java技术对Web领域的发展注入了强大的动力。
复制链接

扫一扫