mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 22:50:54 +08:00
57 lines
2.4 KiB
Markdown
57 lines
2.4 KiB
Markdown
## 3. 交互式前端技术
|
||
|
||
|
||
### 第一部分：响应式设计与Bootstrap（30分钟）
|
||
|
||
1. **Bootstrap快速入门**
|
||
- **目标**：熟悉Bootstrap的基本安装和使用。
|
||
- **步骤**：
|
||
1. 创建一个新的HTML文件，引入Bootstrap的CDN链接。
|
||
2. 使用Bootstrap的栅格系统创建一个简单的响应式布局。
|
||
3. 添加一些Bootstrap组件，如按钮、导航栏等。
|
||
|
||
2. **响应式布局练习**
|
||
- **目标**：使用Bootstrap栅格系统创建一个简单的响应式布局。
|
||
- **步骤**：
|
||
1. 使用12列栅格系统创建一个包含标题、正文内容和侧边栏的布局。
|
||
2. 当屏幕宽度减小时，布局应该自动调整以适应小屏幕设备。
|
||
|
||
#### 第二部分：AJAX与异步请求处理（45分钟）
|
||
|
||
1. **Fetch API练习**
|
||
- **目标**：使用Fetch API发送GET和POST请求。
|
||
- **步骤**：
|
||
1. 创建一个HTML文件，包含一个按钮和一个输出结果的区域。
|
||
2. 使用Fetch API发送GET请求到 https://jsonplaceholder.typicode.com/posts。
|
||
3. 显示接收到的数据。
|
||
4. 在页面添加一个简单的表单，使用Fetch API发送POST请求到https://jsonplaceholder.typicode.com/posts，并显示服务器的响应。
|
||
|
||
2. **jQuery AJAX练习**
|
||
- **目标**：使用jQuery的AJAX方法发送请求。
|
||
- **步骤**：
|
||
1. 创建一个HTML文件，包含一个按钮和一个输出结果的区域。
|
||
2. 使用`$.get()`方法发送GET请求到https://jsonplaceholder.typicode.com/posts
|
||
3. 显示接收到的数据。
|
||
4. 在页面添加一个简单的表单，使用`$.ajax()`方法发送POST请求到https://jsonplaceholder.typicode.com/posts，并显示服务器的响应。
|
||
|
||
|
||
#### 第三部分：XML简介（10分钟）
|
||
|
||
1. **XML文档创建**
|
||
- **目标**：创建一个简单的XML文档。
|
||
- **步骤**：
|
||
1. 创建一个XML文件，包含一个描述书籍的信息。
|
||
2. 包括书名、作者、出版日期等信息。
|
||
3. 使用注释和处理指令。
|
||
4. 验证XML文档是否符合规范。
|
||
|
||
|
||
#### 第四部分：JSON简介（15分钟）
|
||
|
||
1. **JSON文档创建**
|
||
- **目标**：创建一个简单的JSON文档。
|
||
- **步骤**：
|
||
1. 创建一个JSON文件，包含一个描述个人的信息。
|
||
2. 包括姓名、年龄、地址等信息。
|
||
3. 使用嵌套的对象和数组。
|