mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-12 07:00:55 +08:00
117 lines
5.2 KiB
Markdown
117 lines
5.2 KiB
Markdown
## 1. 概述
|
||
|
||
### 1.1 Web开发的基本概念
|
||
#### 1.1.1 什么是Web应用？
|
||
> Web应用是基于 Web 技术开发的应用程序，用户可以通过浏览器访问和使用，而无需下载和安装应用。Web应用可以在不同的设备和平台上运行，无需针对不同的操作系统进行开发和维护，具有较好的跨平台兼容性。
|
||
|
||
### 1.3 什么是Java Web开发？
|
||
> Java Web开发是指使用Java语言来构建和维护可以在Web浏览器上运行的应用程序的过程。这些应用程序通常由服务器端组件和客户端组件组成，服务器端负责处理业务逻辑并提供数据给客户端，而客户端则负责显示数据并允许用户与之交互。
|
||
|
||
## 2. web页面开发基础
|
||
|
||
### 2.1 HTTP协议
|
||
|
||
|
||
#### 2.1.1 URI、URL、URN
|
||
- URL: Uniform Resource Locator 统一资源定位符
|
||
> 是URI的子集，URL包含访问资源所需的协议类型（如HTTP、HTTPS、FTP）和资源的网络位置（如域名和文件路径）
|
||
|
||
#### 2.1.3 HTTP请求包结构
|
||
|
||
|
||
#### 2.1.4 HTTP请求方法
|
||
|
||
#### 2.1.5 HTTP请求头
|
||
|
||
|
||
#### 2.1.6 HTTP响应包结构
|
||
|
||
|
||
#### 2.1.7 HTTP状态码
|
||
- **200 OK：** 请求成功。
|
||
- **404 Not Found：** 请求失败，服务器上没有请求的资源。
|
||
- **500 Internal Server Error：** 请求失败，服务器出现未知的内部错误。
|
||
|
||
#### 2.1.8 HTTP响应头
|
||
|
||
|
||
#### 2.1.9 Cookie
|
||
|
||
HTTP 是无状态协议。
|
||
|
||
Cookie是为了解决HTTP协议无状态的问题而设计的一种持久化机制，它允许服务器在用户浏览器上存储数据。Cookie 的数据保存在用户浏览器中，服务器可以通过 Cookie 识别用户，从而实现用户个性化。
|
||
|
||
Cookie 主要用于以下三个方面：
|
||
- 会话状态管理
|
||
- 个性化设置
|
||
- 浏览器行为跟踪
|
||
|
||
|
||
### 2.2 HTML/CSS/JavaScript基础
|
||
|
||
#### 2.2.1 HTML5基础知识
|
||
|
||
HTML 元素（标签）的主要部分:
|
||
|
||
|
||
```
|
||
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
|
||
内容（Content）：元素的内容，本例中就是段落的文本。
|
||
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。
|
||
```
|
||
|
||
#### 2.2.2 CSS
|
||
|
||
|
||
| 选择器类型 | 解释 | 示例 |
|
||
| ------------ |-----------------------------------| -------------------------------- |
|
||
| **元素选择器** | 也叫标签选择器，通过标签名选取元素 | `p { color: red; }` 选取所有 `<p>` 元素，将文本颜色设置为红色。 |
|
||
| **类选择器** | 通过类名选取元素 | `.my-class { font-weight: bold; }` 选取具有类名为 `my-class` 的元素，使其字体加粗。 |
|
||
| **ID选择器** | 通过ID名称选取唯一元素 | `#unique-id { background-color: yellow; }` 选取ID为 `unique-id` 的元素，背景色设为黄色。 |
|
||
| **通配符选择器** | 匹配所有元素 | `* { margin: 0; padding: 0; }` 选取所有元素，清除默认的外边距和内边距。 |
|
||
|
||
|
||
#### 2.2.3 JavaScript基本语法和DOM操作
|
||
`let`, `const`, `var`
|
||
|
||
|
||
##### 2.2.3.3 DOM操作
|
||
- **文档对象模型**：DOM树结构介绍。
|
||
- **选择元素**：getElementById(), getElementsByClassName(), querySelector()等方法。
|
||
- **修改内容**：innerHTML, textContent属性。
|
||
- **事件绑定**：addEventListener(), removeEventListener()。
|
||
- **样式操作**：className, style属性。
|
||
- **创建/删除节点**：createElement(), appendChild(), removeChild()。
|
||
|
||
|
||
## 3. 交互式web应用前端开发技术
|
||
|
||
### 3.2 响应式设计与Bootstrap
|
||
|
||
#### 3.2.1 响应式设计的基本概念 (了解)
|
||
- **定义：** 响应式设计是一种使网站在所有设备和屏幕尺寸上都能良好显示的方法。
|
||
|
||
|
||
### 3.3 异步编程与AJAX(掌握)
|
||
|
||
参考[ajax(PPT)](./resources/Ajax-heima.pptx)
|
||
|
||
|
||
#### 3.3.1 异步编程
|
||
|
||
在JavaScript中，异步编程是一个重要的概念，它允许程序在等待某些操作（如网络请求）完成的同时继续执行其他任务。回调函数是实现异步编程的一种早期方式，在现代JavaScript中仍然非常常见，尤其是在一些旧的库或API中。
|
||
|
||
|
||
##### 3.3.1.1 回调函数
|
||
|
||
回调函数是一种函数，作为参数传递给另一个函数，并且在这个函数内部被调用。这种方式常用于处理异步操作的结果。当一个异步操作完成时，通常会调用回调函数，并将结果或者错误作为参数传递给这个回调函数。
|
||
|
||
|
||
`Promise` 是 JavaScript 中一种用于处理异步操作的模式，它旨在简化异步编程并解决回调地狱的问题。
|
||
|
||
`async/await` 是 JavaScript 中用于简化异步代码编写的一种语法糖。它使得异步代码看起来更像同步代码，提高了代码的可读性和可维护性。
|
||
|
||
**async 函数**
|
||
|
||
`async` 关键字用于声明一个函数为异步函数。一旦一个函数被声明为异步函数，它将总是返回一个 `Promise`。
|