mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 14:40:55 +08:00
add c3-task
This commit is contained in:
parent
9cd7ec5729
commit
f71f5197c5
56
docs/tasks/chapter03-tasks.md
Normal file
56
docs/tasks/chapter03-tasks.md
Normal file
@ -0,0 +1,56 @@
|
||||
## 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. 使用嵌套的对象和数组。
|
||||
72
examples/chapter03/app.js
Normal file
72
examples/chapter03/app.js
Normal file
@ -0,0 +1,72 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// GET 请求按钮
|
||||
const getButton = document.getElementById('getButton');
|
||||
// 显示 GET 请求结果的区域
|
||||
const getResults = document.getElementById('getResults');
|
||||
|
||||
// POST 请求表单
|
||||
const postForm = document.getElementById('postForm');
|
||||
// 显示 POST 请求结果的区域
|
||||
const postResults = document.getElementById('postResults');
|
||||
|
||||
// GET 请求函数
|
||||
getButton.addEventListener('click', function() {
|
||||
fetch('https://jsonplaceholder.typicode.com/posts')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
displayResults(getResults, data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
displayResults(getResults, { error: 'An error occurred while fetching data.' });
|
||||
});
|
||||
});
|
||||
|
||||
// POST 请求函数
|
||||
postForm.addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
const title = document.getElementById('title').value;
|
||||
const body = document.getElementById('body').value;
|
||||
const userId = document.getElementById('userId').value;
|
||||
|
||||
const postData = {
|
||||
title: title,
|
||||
body: body,
|
||||
userId: userId
|
||||
};
|
||||
|
||||
fetch('https://jsonplaceholder.typicode.com/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
displayResults(postResults, data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error posting data:', error);
|
||||
displayResults(postResults, { error: 'An error occurred while posting data.' });
|
||||
});
|
||||
});
|
||||
|
||||
// 显示结果的函数
|
||||
function displayResults(element, data) {
|
||||
element.querySelector('.card-text').textContent = '';
|
||||
if (Array.isArray(data)) {
|
||||
data.forEach(item => {
|
||||
element.querySelector('.card-text').appendChild(document.createTextNode(`ID: ${item.id}<br>`));
|
||||
element.querySelector('.card-text').appendChild(document.createTextNode(`Title: ${item.title}<br>`));
|
||||
element.querySelector('.card-text').appendChild(document.createTextNode(`Body: ${item.body}<br>`));
|
||||
element.querySelector('.card-text').appendChild(document.createTextNode(`User ID: ${item.userId}<br>`));
|
||||
element.querySelector('.card-text').appendChild(document.createElement('hr'));
|
||||
});
|
||||
} else {
|
||||
for (let key in data) {
|
||||
element.querySelector('.card-text').appendChild(document.createTextNode(`${key}: ${data[key]}<br>`));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
52
examples/chapter03/index.html
Normal file
52
examples/chapter03/index.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fetch API Example</title>
|
||||
<!-- 引入 Bootstrap -->
|
||||
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- 引入自定义 JavaScript 文件 -->
|
||||
<script src="app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Fetch API Practice</h1>
|
||||
|
||||
<!-- GET 请求按钮 -->
|
||||
<button id="getButton" class="btn btn-primary mb-3">GET Request</button>
|
||||
<!-- 显示 GET 请求结果的区域 -->
|
||||
<div id="getResults" class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Click the button to make a GET request and see the results here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- POST 请求表单 -->
|
||||
<form id="postForm" class="mt-5">
|
||||
<h2>POST Request Form</h2>
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">Title</label>
|
||||
<input type="text" class="form-control" id="title" placeholder="Enter Title">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="body" class="form-label">Body</label>
|
||||
<textarea class="form-control" id="body" rows="3" placeholder="Enter Body"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="userId" class="form-label">User ID</label>
|
||||
<input type="text" class="form-control" id="userId" placeholder="Enter User ID">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Send POST Request</button>
|
||||
</form>
|
||||
<!-- 显示 POST 请求结果的区域 -->
|
||||
<div id="postResults" class="card mt-3">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Submit the form to make a POST request and see the results here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
59
examples/chapter03/jquery-app.js
vendored
Normal file
59
examples/chapter03/jquery-app.js
vendored
Normal file
@ -0,0 +1,59 @@
|
||||
$(document).ready(function() {
|
||||
// GET 请求按钮
|
||||
$('#getButton').on('click', function() {
|
||||
$.getJSON('https://jsonplaceholder.typicode.com/posts')
|
||||
.done(function(data) {
|
||||
displayResults('#getResults', data);
|
||||
})
|
||||
.fail(function(error) {
|
||||
console.error('Error fetching data:', error);
|
||||
displayResults('#getResults', { error: 'An error occurred while fetching data.' });
|
||||
});
|
||||
});
|
||||
|
||||
// POST 请求表单
|
||||
$('#postForm').on('submit', function(event) {
|
||||
event.preventDefault();
|
||||
const title = $('#title').val();
|
||||
const body = $('#body').val();
|
||||
const userId = $('#userId').val();
|
||||
|
||||
const postData = {
|
||||
title: title,
|
||||
body: body,
|
||||
userId: userId
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: 'https://jsonplaceholder.typicode.com/posts',
|
||||
type: 'POST',
|
||||
data: JSON.stringify(postData),
|
||||
contentType: 'application/json; charset=UTF-8',
|
||||
success: function(data) {
|
||||
displayResults('#postResults', data);
|
||||
},
|
||||
error: function(error) {
|
||||
console.error('Error posting data:', error);
|
||||
displayResults('#postResults', { error: 'An error occurred while posting data.' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 显示结果的函数
|
||||
function displayResults(selector, data) {
|
||||
$(selector + ' .card-text').empty();
|
||||
if (Array.isArray(data)) {
|
||||
data.forEach(item => {
|
||||
$(selector + ' .card-text').append(`ID: ${item.id}<br>`);
|
||||
$(selector + ' .card-text').append(`Title: ${item.title}<br>`);
|
||||
$(selector + ' .card-text').append(`Body: ${item.body}<br>`);
|
||||
$(selector + ' .card-text').append(`User ID: ${item.userId}<br>`);
|
||||
$(selector + ' .card-text').append('<hr>');
|
||||
});
|
||||
} else {
|
||||
for (let key in data) {
|
||||
$(selector + ' .card-text').append(`${key}: ${data[key]}<br>`);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
53
examples/chapter03/jquery-index.html
Normal file
53
examples/chapter03/jquery-index.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fetch API Example with jQuery</title>
|
||||
<!-- 引入 Bootstrap -->
|
||||
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<!-- 引入 jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- 引入自定义 JavaScript 文件 -->
|
||||
<script src="jquery-app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Fetch API Practice with jQuery</h1>
|
||||
|
||||
<!-- GET 请求按钮 -->
|
||||
<button id="getButton" class="btn btn-primary mb-3">GET Request</button>
|
||||
<!-- 显示 GET 请求结果的区域 -->
|
||||
<div id="getResults" class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Click the button to make a GET request and see the results here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- POST 请求表单 -->
|
||||
<form id="postForm" class="mt-5">
|
||||
<h2>POST Request Form</h2>
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">Title</label>
|
||||
<input type="text" class="form-control" id="title" placeholder="Enter Title">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="body" class="form-label">Body</label>
|
||||
<textarea class="form-control" id="body" rows="3" placeholder="Enter Body"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="userId" class="form-label">User ID</label>
|
||||
<input type="text" class="form-control" id="userId" placeholder="Enter User ID">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Send POST Request</button>
|
||||
</form>
|
||||
<!-- 显示 POST 请求结果的区域 -->
|
||||
<div id="postResults" class="card mt-3">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Submit the form to make a POST request and see the results here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user