java-web/chapter03.md at c3c872763b36219a405f5e17cae5d5e3bfdbcdd3

whz/java-web

Fork 0

mirror of https://gitee.com/many2many/java-web.git synced 2025-01-11 22:50:54 +08:00

many2many 2acc6e62b2 fix chapter title

2024-08-08 17:18:32 +08:00

14 KiB

Raw Blame History

3. 交互式web应用前端开发技术

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)

3.3.1 XMLHttpRequest对象的使用 (了解)

基本用法： 创建对象、设置请求类型、发送请求、处理响应。
事件监听： 监听 onreadystatechange 事件来获取服务器响应的状态。
请求方法： open 方法设置请求类型和URL，send 方法发送请求。

// 创建 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 对象。

// 定义请求的 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 链中抛出的错误。

// 发送 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);
  });

代码解释：

在这个示例中，发送了一个包含 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 数据的快捷方法。
例子

// 使用 $.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 请求并附加数据的示例：

$.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 XML简介(掌握)

3.4.1 XML的基本概念

定义: XML (eXtensible Markup Language) 是一种标记语言，用于描述数据的结构和意义。
用途: XML被广泛用于Web服务、配置文件、数据交换等多种场景。
特点:
- 自描述性: XML文档自身描述了其结构。
- 平台无关性: XML文档可以在任何平台上创建和解析。
- 可扩展性: 可以定义新的标记和属性来描述数据。

3.4.2 XML的数据结构

文档类型: XML文档可以是无类型的或有类型的。
- 无类型文档: 没有明确指定文档结构。
- 有类型文档: 通过DTD或XML Schema定义文档结构。
元素: XML文档的基本构建块，由开始标签、结束标签和内容组成。
属性: 元素可以带有属性，用于提供额外的信息。
文本: 元素的内容可以是纯文本或其他元素。
注释: XML文档可以包含注释，注释不会被解析器处理。
处理指令: 用于向解析器提供额外的指令。

3.4.3 XML的语法

文档声明: XML文档必须以文档声明开始。
```
<?xml version="1.0" encoding="UTF-8"?>
```

元素: 元素由开始标签和结束标签组成。

<book>
    <title>Example Book</title>
    <author>John Doe</author>
</book>

自闭合元素: 如果元素没有内容，则可以自闭合。
```
<image src="example.jpg" />
```

属性: 属性位于开始标签内。

<image src="example.jpg" alt="Example Image" />

文本: 元素的内容可以是文本。

<description>This is an example book.</description>

注释: XML文档可以包含注释。
```

```

3.4.4 XML与Java对象的转换

序列化: 将Java对象转换为XML文档的过程。
反序列化: 将XML文档转换为Java对象的过程。
工具类:
- JAXB (Java Architecture for XML Binding): 用于将Java对象绑定到XML文档的标准API。
- DOM (Document Object Model): 提供了表示XML文档的接口和方法。
- SAX (Simple API for XML): 一种基于事件的解析器，用于处理大型XML文档。
- StAX (Streaming API for XML): 类似于SAX，但提供了更好的性能和内存使用。

3.4.5 XML的最佳实践

命名约定: 使用有意义的元素和属性名称。
数据类型: 正确使用XML的数据类型。
缩进和换行: 使用适当的缩进和换行来提高可读性。
DTD和Schema: 使用DTD或XML Schema来定义文档结构。
验证: 在生产环境中使用验证器确保文档符合DTD或Schema。
安全性: 对敏感数据进行加密或使用HTTPS传输。
版本控制: 使用版本控制来跟踪XML文档的变化。

3.5 JSON简介

3.5.1 JSON的基本概念

定义: JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。
格式: JSON 是基于JavaScript的一个子集，使用键值对的形式来组织数据。
用途: 广泛用于Web应用的数据交换格式，特别是在Ajax应用中。

3.5.2 JSON的数据结构

对象: JSON中的对象是一个无序的“名值对”集合，使用大括号 {} 表示。
数组: JSON中的数组是值的有序集合，使用方括号 [] 表示。
字符串: JSON中的字符串使用双引号 " 包围。
数值: JSON中的数值可以是整数或浮点数。
布尔值: JSON中的布尔值可以是 true 或 false。
null: JSON中的 null 表示没有值。

3.5.3 JSON的语法

键值对: 键和值之间使用冒号 : 分隔。
成员分隔: 成员之间使用逗号 , 分隔。

示例:

{
    "name": "John Doe",
    "age": 30,
    "isEmployed": true,
    "address": {
        "street": "123 Main St",
        "city": "Anytown"
    },
    "phoneNumbers": [
        {"type": "home", "number": "123-456-7890"},
        {"type": "mobile", "number": "098-765-4321"}
    ]
}

3.5.4 JSON与Java对象的转换

序列化: 将Java对象转换为JSON字符串的过程。
反序列化: 将JSON字符串转换为Java对象的过程。
工具类:
- Jackson: 是一个流行的Java库，用于JSON的序列化和反序列化。
- Gson: Google提供的用于JSON处理的Java库。

3.5.5 JSON的最佳实践

命名约定: 使用有意义的键名。
数据类型: 正确使用JSON的数据类型。
缩进和换行: 使用适当的缩进和换行来提高可读性。
注释: JSON本身不支持注释，但在开发阶段可以考虑使用工具添加注释。
安全: 对敏感数据进行加密或使用HTTPS传输。
版本控制: 使用版本控制来跟踪JSON数据的变化。

3.6 JavaScript框架介绍 (了解)

3.6.1 Vue.js介绍

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

3.6.2 React.js介绍

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

14 KiB Raw Blame History Unescape Escape