mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 14:40:55 +08:00
课程内容c3
This commit is contained in:
parent
08b0b0d28c
commit
c2488dc04b
@ -1,10 +1,10 @@
|
||||
## 1. Web应用开发概述
|
||||
|
||||
### 1.1 Web开发的基本概念 (了解)
|
||||
#### 什么是Web应用？
|
||||
#### 1.1.1 什么是Web应用？
|
||||
> Web App 是基于 Web 技术开发的应用程序，用户可以通过浏览器访问和使用，而无需下载和安装。Web App 可以在不同的设备和平台上运行，无需针对不同的操作系统进行开发和维护，具有较好的跨平台兼容性。Web App 通常使用 HTML、CSS、JavaScript 等 Web 技术进行开发，可以访问互联网上的各种资源和服务。
|
||||
|
||||
#### Web App 的优点
|
||||
#### 1.1.2 Web App 的优点
|
||||
- **跨平台兼容性好：** Web App 可以在不同的设备和平台上运行，无需针对不同的操作系统进行开发和维护，具有较好的跨平台兼容性。
|
||||
- **开发成本低：** Web App 的开发成本相对较低，因为无需针对不同的操作系统进行开发和维护，可以使用 Web 技术进行开发。
|
||||
- **维护成本低：** Web App 的维护成本相对较低，因为可以在服务器端进行维护和更新，无需对每个设备进行更新。
|
||||
@ -12,25 +12,25 @@
|
||||
- **无需下载和安装：** Web App 可以通过浏览器直接访问和使用，无需下载和安装，使用较为方便。
|
||||
- **易于扩展和集成：** Web App 可以轻松地集成和扩展各种 Web 服务和 API，例如社交网络、在线支付、地图服务等。
|
||||
|
||||
#### Web App 的缺点
|
||||
#### 1.1.3 Web App 的缺点
|
||||
- **性能和用户体验相对较差：** Web App 受限于浏览器的性能和功能，因此性能和用户体验相对较差，特别是在移动设备上。
|
||||
- **依赖网络连接：** Web App 需要依赖网络连接进行访问和使用，如果网络连接不稳定或者断开，用户无法继续使用应用程序。
|
||||
- **难以实现离线体验：** Web App 难以实现离线体验，因为需要依赖网络连接进行访问和使用。
|
||||
- **安全性和隐私保护问题：** Web App 可能存在安全性和隐私保护问题，因为需要使用网络进行数据传输和处理。
|
||||
- **受限于浏览器：** Web App 受限于浏览器的功能和规范，因此开发者需要考虑浏览器的兼容性和规范。
|
||||
|
||||
#### web应用工作流
|
||||
#### 1.1.4 web应用工作流
|
||||
|
||||
|
||||
|
||||
### 1.2 Web开发技术发展历史及趋势
|
||||
#### Web技术发展历程
|
||||
#### 1.2.1 Web技术发展历程
|
||||
|
||||
- **参考资料：**
|
||||
- [五分钟了解互联网Web技术发展史](https://cloud.tencent.com/developer/article/1808394)
|
||||
- [Web开发技术发展历史](https://www.cnblogs.com/datapool/p/6218105.html)
|
||||
|
||||
#### 当前Web开发的主要技术栈
|
||||
#### 1.2.2 当前Web开发的主要技术栈
|
||||
|
||||
- **前端技术栈：**
|
||||
- **HTML5：** 提供了更丰富和语义化的标记，增强了多媒体支持。
|
||||
@ -58,7 +58,7 @@
|
||||
- **调试工具：** 例如 Chrome DevTools、Firebug 等。
|
||||
- **版本控制工具：** 例如 Git、SVN 等。
|
||||
|
||||
#### 未来的Web开发技术趋势预测
|
||||
#### 1.2.3 未来的Web开发技术趋势预测
|
||||
- **持续集成与部署（CI/CD）：** 更加自动化的工作流程将会成为常态，以提高开发效率和软件质量。
|
||||
- **微服务架构：** 微服务将继续流行，因为它提高了系统的可扩展性和可维护性。
|
||||
- **容器化技术：** Docker 和 Kubernetes 等技术将更加普及，用于部署和管理应用。
|
||||
@ -82,7 +82,7 @@
|
||||
- **强大的生态系统：** Java拥有庞大的开发者社区和丰富的开源库，这使得开发高质量的Web应用更加容易。
|
||||
|
||||
### 1.4 开发环境搭建 (掌握)
|
||||
- **IntelliJ IDEA**
|
||||
#### 1.4.1 IntelliJ IDEA
|
||||
- **IntelliJ IDEA的安装与配置**
|
||||
- 下载IntelliJ IDEA Community Edition或Ultimate Edition。
|
||||
- 安装并设置JDK路径。
|
||||
@ -95,7 +95,7 @@
|
||||
- 使用Gradle或Maven作为构建工具。
|
||||
- 添加外部库和框架依赖。
|
||||
|
||||
- **Git/Gitee/Github的使用(重点掌握)**
|
||||
#### 1.4.2 Git/Gitee/Github的使用(重点掌握)
|
||||
|
||||
> 参考 [git(ppt)](./resources/javaweb%20-week-01-git.pptx)
|
||||
>
|
||||
@ -116,7 +116,7 @@
|
||||
- 将本地文件添加到仓库并提交。
|
||||
- 推送至远程仓库。
|
||||
|
||||
- **Markdown的使用（掌握）**
|
||||
#### 1.4.3 Markdown的使用（掌握）
|
||||
|
||||
> 参考
|
||||
>> [Markdown语法](https://www.markdownguide.org/basic-syntax/)
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
|
||||
[PPT](./resources/HTTP协议-黑马.pptx)
|
||||
|
||||
#### 浏览器与Web服务器的工作流程
|
||||
#### 2.1.1 浏览器与Web服务器的工作流程
|
||||
- **请求过程：** 用户在浏览器中输入URL地址后，浏览器向服务器发送HTTP请求。
|
||||
- **响应过程：** 服务器接收到请求后处理并返回HTTP响应给浏览器。
|
||||
- **交互细节：** 包括DNS解析、建立TCP连接、发送HTTP请求、接收HTTP响应、关闭连接等步骤。
|
||||
|
||||
#### HTTP请求与响应结构
|
||||
#### 2.1.2 HTTP请求与响应结构
|
||||
- **请求行：** 包含方法、URL、HTTP版本。
|
||||
- **请求头：** 包含客户端信息、认证信息等。
|
||||
- **请求体：** 包含POST请求的数据。
|
||||
@ -19,17 +19,17 @@
|
||||
- **响应头：** 包含服务器信息、缓存控制等。
|
||||
- **响应体：** 包含服务器返回的数据。
|
||||
|
||||
#### URL
|
||||
#### 2.1.3 URL
|
||||
- **构成：** 协议、主机名、端口号、路径、查询字符串。
|
||||
- **示例：** `https://example.com/path/to/resource?param1=value1¶m2=value2`
|
||||
|
||||
#### HTTP方法
|
||||
#### 2.1.4 HTTP方法
|
||||
- **GET：** 请求指定的页面信息并将其返回。
|
||||
- **POST：** 向指定资源提交数据进行处理请求（例如提交表单）。
|
||||
- **PUT：** 从客户端向服务器发送新的数据，并要求服务器覆盖原位置上的数据。
|
||||
- **DELETE：** 请求服务器删除指定的页面。
|
||||
|
||||
#### HTTP状态码
|
||||
#### 2.1.5 HTTP状态码
|
||||
- **2xx 成功：** 请求已成功被服务器接收、理解，并接受。
|
||||
- **200 OK：** 请求已成功，请求所希望的响应头或数据体将随此响应返回。
|
||||
- **3xx 重定向：** 需要客户端采取进一步的操作才能完成请求。
|
||||
@ -44,7 +44,7 @@
|
||||
- **500 Internal Server Error：** 服务器遇到某种不可预知的情况。
|
||||
- **503 Service Unavailable：** 由于临时的服务器维护或者过载，服务器当前无法处理请求。
|
||||
|
||||
#### Cookie和Session
|
||||
#### 2.1.6 Cookie和Session
|
||||
- **Cookie：**
|
||||
- 存储在客户端的小型文本文件，用于跟踪用户状态。
|
||||
- 可以设置有效期、路径、域名、安全标志等属性。
|
||||
@ -57,7 +57,7 @@
|
||||
|
||||
[PPT](./resources/网页开发基础-黑马.pptx)
|
||||
|
||||
#### HTML5基础知识 （掌握）
|
||||
#### 2.2.1 HTML5基础知识 （掌握）
|
||||
- **标签与属性：** HTML5引入了新的语义标签如`<header>`、`<nav>`、`<section>`、`<article>`等。
|
||||
- **表单控件：** 新增了多种类型的输入字段，如日期选择器、电子邮件验证等。
|
||||
- **媒体元素：** `<video>`和`<audio>`标签用于嵌入多媒体内容。
|
||||
@ -65,7 +65,7 @@
|
||||
- **拖放API：** 支持文件的拖放操作。
|
||||
- **Canvas绘图：** `<canvas>`标签用于绘制图形和动画。
|
||||
|
||||
#### CSS3样式和布局 (了解)
|
||||
#### 2.2.2 CSS3样式和布局 (了解)
|
||||
- **选择器：** 更强大的选择器，如属性选择器、伪类选择器等。
|
||||
- **盒模型：** 支持`box-sizing`属性来控制元素的尺寸计算方式。
|
||||
- **背景与边框：** 圆角边框、阴影、渐变背景等。
|
||||
@ -73,7 +73,7 @@
|
||||
- **布局：** 弹性盒子（Flexbox）和网格布局（Grid）。
|
||||
- **动画与过渡：** 使用`transition`和`animation`属性创建平滑的视觉效果。
|
||||
|
||||
#### JavaScript基本语法和DOM操作（掌握)
|
||||
#### 2.2.3 JavaScript基本语法和DOM操作（掌握)
|
||||
- **变量声明：** `var`、`let`、`const`。
|
||||
- **数据类型：** 原始类型（如字符串、数字、布尔值）、复合类型（如数组、对象）。
|
||||
- **条件语句：** `if`、`else if`、`switch`。
|
||||
@ -81,7 +81,7 @@
|
||||
- **函数：** 定义、调用、回调、闭包。
|
||||
- **DOM操作：** 查询节点、创建节点、修改节点、事件处理等。
|
||||
|
||||
#### 字符编码和字符集(了解)
|
||||
#### 2.2.4字符编码和字符集(了解)
|
||||
|
||||
[字符编码和字符集PPT](./resources/javaweb-week-02-chartset.pptx)
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
- **Unicode：** 一种国际字符编码标准，支持世界上几乎所有的字符。
|
||||
- **UTF-16：** Unicode的另一种编码形式，JavaScript内部使用UTF-16。
|
||||
|
||||
#### 认识TypeScript（简单了解）
|
||||
#### 2.2.5 认识TypeScript（简单了解）
|
||||
|
||||
[面向初学者的 TypeScript 完全指南](https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide)
|
||||
|
||||
|
||||
224
docs/chapter03.md
Normal file
224
docs/chapter03.md
Normal file
@ -0,0 +1,224 @@
|
||||
## 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 (路由管理)。
|
||||
@ -1,74 +1,83 @@
|
||||
## 1. [Web应用开发概述](./chapter01.md)
|
||||
|
||||
### 1.1 Web开发的基本概念(了解)
|
||||
#### 什么是Web应用？
|
||||
#### Web App 的优点
|
||||
#### Web App 的缺点
|
||||
#### 1.1.1 什么是Web应用？
|
||||
#### 1.1.2 Web App 的优点
|
||||
#### 1.1.3 Web App 的缺点
|
||||
|
||||
### 1.2 Web开发技术发展历史及趋势(了解)
|
||||
#### Web技术发展历程
|
||||
#### 1.2.1 Web技术发展历程
|
||||
|
||||
#### 当前Web开发的主要技术栈
|
||||
#### 未来的Web开发技术趋势预测
|
||||
#### 1.2.2 当前Web开发的主要技术栈
|
||||
#### 1.2.3 未来的Web开发技术趋势预测
|
||||
|
||||
### 1.3 什么是Java Web开发？(了解)
|
||||
### 1.4 开发环境搭建(掌握)
|
||||
#### IntelliJ IDEA
|
||||
#### Git/Gitee/Github的使用(重点掌握)
|
||||
#### Markdown的使用
|
||||
#### 1.4.1 IntelliJ IDEA
|
||||
#### 1.4.2 Git/Gitee/Github的使用(重点掌握)
|
||||
#### 1.4.3 Markdown的使用
|
||||
|
||||
### 1.4 项目开发流程简单介绍(了解)
|
||||
- 需求分析与设计
|
||||
- 编码与调试
|
||||
- 测试与发布
|
||||
- 维护与升级
|
||||
#### 1.4.1 需求分析与设计
|
||||
#### 1.4.2 编码与调试
|
||||
#### 1.4.3 测试与发布
|
||||
#### 1.4.4 维护与升级
|
||||
|
||||
## 2. [Java Web基础回顾和增强](./chapter02.md)
|
||||
|
||||
### 2.1 HTTP协议(重点掌握)
|
||||
|
||||
#### 浏览器与Web服务器的工作流程
|
||||
#### 2.1.1 浏览器与Web服务器的工作流程
|
||||
|
||||
#### HTTP请求与响应结构
|
||||
#### 2.1.2 HTTP请求与响应结构
|
||||
|
||||
#### URL
|
||||
#### 2.1.3 URL
|
||||
|
||||
#### HTTP方法
|
||||
#### 2.1.4 HTTP方法
|
||||
|
||||
#### HTTP状态码
|
||||
#### 2.1.5 HTTP状态码
|
||||
|
||||
#### Cookie和Session
|
||||
#### 2.1.6 Cookie和Session
|
||||
|
||||
### 2.2 HTML/CSS/JavaScript基础
|
||||
|
||||
#### HTML5基础知识 （掌握）
|
||||
#### 2.2.1 HTML5基础知识 （掌握）
|
||||
|
||||
#### CSS3样式和布局 (了解)
|
||||
#### 2.2.2 CSS3样式和布局 (了解)
|
||||
|
||||
#### JavaScript基本语法和DOM操作（掌握)
|
||||
#### 2.2.3 JavaScript基本语法和DOM操作（掌握)
|
||||
|
||||
#### 字符编码和字符集(了解)
|
||||
#### 2.2.4 字符编码和字符集(了解)
|
||||
|
||||
#### 认识TypeScript（简单了解）
|
||||
#### 2.2.5 认识TypeScript（简单了解）
|
||||
|
||||
### 3. **前端技术**
|
||||
## 3. 前端技术
|
||||
|
||||
#### 3.1 前端开发技术趋势介绍
|
||||
- 前端技术栈的演进
|
||||
- 前端框架和库的最新趋势
|
||||
### 3.1 前端开发技术趋势介绍 (了解)
|
||||
|
||||
#### 3.2 响应式设计与Bootstrap
|
||||
- 响应式设计的基本概念
|
||||
- Bootstrap框架的使用
|
||||
#### 3.1.1 前端技术栈的演进
|
||||
|
||||
#### 3.3 AJAX与异步请求处理
|
||||
- XMLHttpRequest对象的使用
|
||||
- Fetch API和Promise
|
||||
- 使用jQuery进行AJAX调用
|
||||
#### 3.1.2 前端框架和库的最新趋势
|
||||
|
||||
#### 3.4 JavaScript框架介绍
|
||||
- Vue.js介绍
|
||||
- React.js介绍
|
||||
### 3.2 响应式设计与Bootstrap
|
||||
|
||||
#### 响应式设计的基本概念 (了解)
|
||||
|
||||
#### Bootstrap框架的使用 (了解)
|
||||
|
||||
### 3.3 AJAX与异步请求处理
|
||||
|
||||
#### 3.3.1 XMLHttpRequest对象的使用 (了解)
|
||||
|
||||
#### 3.3.2 Fetch API和Promise (掌握)
|
||||
|
||||
#### 3.3.3 使用jQuery进行AJAX调用 (掌握)
|
||||
|
||||
### 3.4 JavaScript框架介绍 (了解)
|
||||
|
||||
#### 3.4.1 Vue.js介绍
|
||||
|
||||
#### 3.4.2 React.js介绍
|
||||
|
||||
### 4. **基于Java语言的Web应用的后端开发技术**
|
||||
|
||||
|
||||
BIN
docs/resources/Ajax-heima.pptx
Normal file
BIN
docs/resources/Ajax-heima.pptx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user