mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 14:40:55 +08:00
add c2-task
This commit is contained in:
parent
9061beaa60
commit
712bc2256e
BIN
docs/resources/http-api-test.png
Normal file
BIN
docs/resources/http-api-test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
@ -1 +1,47 @@
|
||||
# 第一章 练习任务
|
||||
# 第一章. Web应用开发概述 (2小时)
|
||||
|
||||
## 任务1：Git/Gitee/Github的使用 (45分钟)
|
||||
- **目标**：掌握基本的Git命令和Gitee/Github的使用。
|
||||
- **步骤**：
|
||||
|
||||
1. 在windows中安装git
|
||||
2. 注册Gitee/Github账号。(http://gitee.com)
|
||||
3. 在gitee/github创建一个新的仓库：私有、单分支、项目语言模板选择java、选择生成.ignore文件、选择生成Reame.md。
|
||||
4. 使用`git clone` 命令将远程仓库克隆到本地。
|
||||
5. 在本地目录中创建目录tasks,在tasks目录中创建空文件chapter01.md
|
||||
6. 使用`git add`, `git commit`, `git push`等命令将文件添加到仓库并推送到远程仓库。
|
||||
7. 在本地目录中，使用记事本打开README.md文件，添加一些内容。
|
||||
8. `git commit`, `git push`将修改的文件推送到远程仓库。
|
||||
9. 使用`git log`命令查看提交记录。
|
||||
- **评估**：提交创建仓库的截图和`git log`命令的输出截图。
|
||||
|
||||
## 任务2：IntelliJ IDEA的安装与基本使用 （20分钟)
|
||||
>**目标**：熟悉IntelliJ IDEA的安装过程和基本配置。
|
||||
|
||||
> **步骤**：
|
||||
|
||||
## 1. 下载IntelliJ IDEA Community Edition。
|
||||
2. 安装IDEA。
|
||||
3. 配置IDEA设置，如字体、颜色主题等。
|
||||
4. 打开任务1的项目
|
||||
5. 编辑REAME.md文件，添加一些内容。
|
||||
6. 使用idea的git菜单，将本地修改推送到远程仓库。
|
||||
7. 在idea中close 项目。
|
||||
8. 在文件浏览器中删除项目文件夹。
|
||||
9. 在IDEA中 FILE-->NEW --> PROJECT --> Project from Version Control。
|
||||
10. 将自己的远程仓库导入到Idea。
|
||||
- **评估**：
|
||||
|
||||
|
||||
|
||||
##### 任务3：Markdown的使用 (45分钟)
|
||||
- **目标**：熟悉Markdown的基本语法并使用Markdown编辑器。
|
||||
- **步骤**：
|
||||
1. 在任务2基础上继续操作，在idea中编辑chapter01.md。
|
||||
2. 将本文件的内容，全部拷贝到chapter01.md。
|
||||
3. 截图当前操作界面，将图片添加到自己chapter01.md文件的此处。
|
||||
|
||||
4. 编辑自己项目中的README.md文件，使用markdown的基本语法，添加一些内容。
|
||||
|
||||
5. 在idea中使用git提交自己的所有修改到自己的远程仓库。
|
||||
- **评估**：
|
||||
|
||||
146
docs/tasks/chapter02-teaks.md
Normal file
146
docs/tasks/chapter02-teaks.md
Normal file
@ -0,0 +1,146 @@
|
||||
# 2. Java Web基础回顾和增强
|
||||
|
||||
## 第一部分：HTTP协议（1小时）
|
||||
|
||||
### 任务1：http协议分析 (10分钟)
|
||||
- **目标**：掌握http协议，理解http请求和响应的过程，以及http请求头和响应头的作用。
|
||||
- **步骤**：
|
||||
|
||||
1. 在浏览器中打开开发者工具，选择Network选项卡。
|
||||
2. 使用浏览器访问https://www.baidu.com/，观察浏览器的请求和响应过程。
|
||||
3. 找到请求url为 https://www.baidu.com/ 的请求，查看请求头和响应头。找到这些字段值：
|
||||
Request Method:
|
||||
Status Code:
|
||||
Content-Type:
|
||||
4. 在页面的搜索框中， 输入： 临沂科技职业学院，观察浏览器的请求和响应过程。
|
||||
5. 将网站提供搜索建议的URL记录下来，观察此URL请求对应的请求头、响应头、请求数据、响应数据数据。
|
||||
-
|
||||
- **评估**：将字段值填在上面步骤中。
|
||||
|
||||
### 任务2：http method： get put post delete (10分钟)
|
||||
- **目标**：理解http method，理解get、put、post、delete的区别。
|
||||
- **步骤**：
|
||||
|
||||
1. 在浏览器中打开开发者工具，选择Network选项卡。
|
||||
2. 使用浏览器访问https://jsonplaceholder.typicode.com/
|
||||
3. 点击页面上的如下图的连接，观察浏览器的请求和响应过程。
|
||||
|
||||
|
||||
|
||||
|
||||
### 任务3： 自定义请求 (40分钟)
|
||||
- **目标**：理解http method，能使用api工具测试web api。
|
||||
- **步骤**：
|
||||
|
||||
1. idea中安装插件：Restful Api Tool
|
||||
2. 在此插件中，自己按照任务2中的几个接口， 填写url和请求参数，点击发送请求，观察回应数据。
|
||||
|
||||
|
||||
## 第二部分：HTML/CSS/JavaScript基础实践（4小时）
|
||||
|
||||
1. **HTML5标签使用**
|
||||
- 使用HTML5的新标签（如`<header>`、`<nav>`、`<section>`、`<article>`等）构建页面结构。
|
||||
- 练习使用HTML5的表单控件，如日期选择器、电子邮件验证等。
|
||||
|
||||
2. **CSS3样式和布局**
|
||||
- 应用CSS3的新选择器，尝试不同的布局方式，如Flexbox和Grid。
|
||||
|
||||
3. **JavaScript基本语法和DOM操作**
|
||||
- 实践变量声明、数据类型、条件语句、循环、函数等基本语法。
|
||||
- 编写脚本来操作DOM，如添加元素、修改元素属性、绑定事件监听器等。
|
||||
|
||||
4. **综合练习：登录/注册页面**
|
||||
- **目标**：设计并实现一个登录或注册页面，使用HTML5、CSS3和JavaScript。
|
||||
- **步骤**：
|
||||
1. **设计页面结构**：使用HTML5标签构建页面的基本结构。
|
||||
2. **添加样式**：使用CSS3为页面添加样式，包括布局、背景、边框等。
|
||||
3. **实现交互**：使用JavaScript添加交互功能，如表单验证、按钮点击事件等。
|
||||
4. **扩展功能**：如果时间允许，可以考虑使用localStorage来保存用户的登录状态或偏好设置。
|
||||
|
||||
### 示例代码：登录页面
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login Page</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #f4f4f9;
|
||||
}
|
||||
.login-form {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.login-form h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.form-group button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-group button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-form">
|
||||
<h2>Login</h2>
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" placeholder="Enter your username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" placeholder="Enter your password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button onclick="validateForm()">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function validateForm() {
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
if (username === '' || password === '') {
|
||||
alert('Please fill in all fields.');
|
||||
} else {
|
||||
alert('Login successful!');
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
83
examples/chapter02/login.html
Normal file
83
examples/chapter02/login.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login Page</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #f4f4f9;
|
||||
}
|
||||
.login-form {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.login-form h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.form-group button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-group button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-form">
|
||||
<h2>Login</h2>
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" placeholder="Enter your username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" placeholder="Enter your password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button onclick="validateForm()">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function validateForm() {
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
if (username === '' || password === '') {
|
||||
alert('Please fill in all fields.');
|
||||
} else {
|
||||
alert('Login successful!');
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user