java-web/docs/chapter03.md

## 3. 前端技术

### 3.1 前端开发技术趋势介绍 (了解)

#### 3.1.1 前端技术栈的演进
- **早期阶段：** HTML、CSS 和 JavaScript 是构建网页的基本组成部分。
- **Web 2.0时代：** 出现了更多的动态网页技术和框架，如 jQuery 和 Prototype。
- **现代前端：** 进入了高度模块化和组件化的开发模式，出现了许多前端框架和库。
    - **前端框架：** Angular、React、Vue.js 等。
    - **任务运行器与打包工具：** gulp、webpack、parcel 等。
    - **构建工具：** babel、eslint 等。

#### 3.1.2 前端框架和库的最新趋势
- **SPA (Single Page Application)：** 单页面应用程序成为主流，它通过在不重新加载整个页面的情况下更新网页来提高用户体验。
- **组件化：** 将界面分解成可复用的组件，有助于提高开发效率和代码复用。
- **状态管理：** 如 Redux、Vuex 提供全局状态管理方案，帮助管理应用状态，特别是在大型应用中。
- **服务端渲染 (SSR)：** 改善首屏加载速度，有利于SEO优化，因为搜索引擎爬虫更容易解析渲染在服务器端的页面。
- **前端自动化与持续集成：** 使用 CI/CD 工具提高开发效率，自动化测试和部署流程。

### 3.2 响应式设计与Bootstrap

#### 3.2.1 响应式设计的基本概念 (了解)
- **定义：** 响应式设计是一种使网站在所有设备和屏幕尺寸上都能良好显示的方法。
- **原理：** 使用流式布局、百分比单位、媒体查询等技术实现布局的自适应。
- **优势：** 提升用户体验、简化网站维护、提高搜索引擎排名。

#### 3.2.2 Bootstrap框架的使用 (了解)
- **安装：** 可以通过 CDN 或下载源文件安装 Bootstrap。
- **栅格系统：** 基于12列的布局系统，使用列和行来创建响应式布局。
- **组件：** 提供了一组丰富的 UI 组件，如按钮、表格、导航栏等。
- **定制：** 可以根据项目需求定制 Bootstrap 的样式和 JavaScript 插件。

### 3.3 AJAX与异步请求处理

参考[ajax(PPT)](./resources/Ajax-heima.pptx)

#### 3.3.1 XMLHttpRequest对象的使用 (了解)
- **基本用法：** 创建对象、设置请求类型、发送请求、处理响应。
- **事件监听：** 监听 `onreadystatechange` 事件来获取服务器响应的状态。
- **请求方法：** `open` 方法设置请求类型和URL，`send` 方法发送请求。
```javascript
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求类型和 URL
xhr.open('GET', 'https://api.example.com/data', true);

// 设置响应类型
xhr.responseType = 'json';

// 设置请求完成后的回调函数
xhr.onload = function () {
  if (this.status === 200) {
    // 如果 HTTP 状态码为 200，则成功获取数据
    var data = this.response; // 获取服务器响应的数据
    console.log(data); // 在控制台打印数据
  } else {
    // 如果 HTTP 状态码不是 200，则打印错误信息
    console.error('Error: ' + this.status);
  }
};

// 设置请求错误时的回调函数
xhr.onerror = function () {
  console.error('Request failed');
};

// 发送请求
xhr.send(); 
```
#### 3.3.2 Fetch API和Promise (掌握)
- **Fetch API：** 是一个现代替代 XMLHttpRequest 的 API，提供了更简洁的语法和基于 Promise 的接口。
- **基本语法：** `fetch(url)`返回一个 Promise 对象。

```javascript
// 定义请求的 URL
const url = 'https://api.example.com/data';

// 使用 fetch 发送 GET 请求
fetch(url)
  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 解析 JSON 响应
    return response.json();
  })
  .then(data => {
    // 处理解析后的 JSON 数据
    console.log(data);
  })
  .catch(error => {
    // 处理任何发生的错误
    console.error('There has been a problem with your fetch operation:', error);
  });
```
代码解释：

* 使用 fetch(url) 发送 GET 请求。
* 使用 .then() 方法处理响应。第一个 .then() 接受响应对象，并检查其状态。
* 如果响应状态码不在 200-299 范围内，则抛出一个错误。
* 使用 response.json() 解析 JSON 响应，并返回解析后的数据。
* 第二个 .then() 处理解析后的 JSON 数据。
* 使用 .catch() 方法处理任何在前面的 Promise 链中抛出的错误。

-----

```javascript
// 发送 POST 请求并附加请求头
fetch('https://api.example.com/data', {
  method: 'POST', // 或 'PUT'
  headers: {
    'Content-Type': 'application/json',
    // 其他头部信息...
  },
  body: JSON.stringify({ key: 'value' }) // 转换为 JSON 字符串
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });
```
代码解释：
```text
在这个示例中，发送了一个包含 JSON 数据的 POST 请求，并在请求头中指定了 Content-Type 为 application/json。body 参数包含了要发送的数据，通过 JSON.stringify 方法将其转换为 JSON 字符串。
```

- **处理响应：** 使用`.then()`处理响应，如`.json()`或`.text()`。
- **错误处理：** 使用`.catch()`处理网络错误或其他异常。

#### 3.3.3 使用jQuery进行AJAX调用 (掌握)
- **$.ajax()：** jQuery 的 AJAX 方法，提供简单的语法糖。
- **$.get() 和 $.post()：** 简化 GET 和 POST 请求的语法。
- **$.getJSON()：** 专门用于获取 JSON 数据的快捷方法。

- **例子**

```javascript
// 使用 $.get() 方法发送 GET 请求
$.get('https://api.example.com/data', function(data, textStatus, jqXHR) {
  console.log('Data received:', data);
  console.log('Text Status:', textStatus);
  console.log('jqXHR:', jqXHR);
}).fail(function(jqXHR, textStatus, errorThrown) {
  console.error('Request failed:', textStatus, errorThrown);
});

// 或者使用 $.ajax() 方法发送 GET 请求
$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(data, textStatus, jqXHR) {
    console.log('Data received:', data);
    console.log('Text Status:', textStatus);
    console.log('jqXHR:', jqXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Request failed:', textStatus, errorThrown);
  }
});
```

**示例说明：**
**使用 `$.get()` 方法**:
- `$.get()` 是一个便捷的方法，用于发送 GET 请求。
- 第一个参数是请求的 URL。
- 第二个参数是一个回调函数，当请求成功时会被调用。
- 回调函数接受三个参数：`data`（服务器返回的数据）、`textStatus`（请求的状态字符串）和 `jqXHR`（`jQuery` 的 `XMLHttpRequest` 对象）。
- 使用 `.fail()` 方法来处理任何失败的情况。

 **使用 `$.ajax()` 方法**:
- `$.ajax()` 方法是一个更通用的 AJAX 方法，可以用来发送各种类型的请求。
- 通过配置对象来指定请求的详细信息，例如 `url`（请求的 URL）、`type`（请求类型，如 `GET` 或 `POST`）等。
- `success` 和 `error` 属性分别用于处理成功和失败的情况。
- 这两个属性也是回调函数，它们接受与 `$.get()` 相同的参数。

**POST示例**

如果想发送 POST 请求或附加数据，可以使用 `$.ajax()` 方法并设置相应的参数。下面是一个发送 POST 请求并附加数据的示例：

```javascript
$.ajax({
  url: 'https://api.example.com/data',
  type: 'POST',
  data: { key: 'value' }, // 附加数据
  contentType: 'application/x-www-form-urlencoded', // 默认值，可以省略
  success: function(data, textStatus, jqXHR) {
    console.log('Data received:', data);
    console.log('Text Status:', textStatus);
    console.log('jqXHR:', jqXHR);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('Request failed:', textStatus, errorThrown);
  }
});
```

在这个示例中：
- `data` 属性用于附加要发送的数据。
- `contentType` 属性指定发送数据的内容类型，默认是 `application/x-www-form-urlencoded`，对于 JSON 数据，你应该设置为 `application/json` 并使用 `JSON.stringify()` 方法来序列化数据。


### 3.4 JavaScript框架介绍 (了解)

#### 3.4.1 Vue.js介绍
- **概述：** Vue.js 是一个用于构建用户界面的渐进式框架。
- **特点：** 易于上手、灵活、轻量级、双向数据绑定。
- **核心概念：** 组件、指令 (`v-model`, `v-if`, `v-for`)、插槽、生命周期钩子等。
- **生态系统：** Vuex (状态管理)、Vue Router (路由管理)。

#### 3.4.2 React.js介绍
- **概述：** React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库。
- **特点：** 虚拟 DOM、组件化、单向数据流。
- **核心概念：** JSX、组件 (`class` 和 `function` 组件)、状态 (`state`) 和属性 (`props`)。
- **生态系统：** Redux (状态管理)、React Router (路由管理)。