whz/java-web
1
0
Fork 0
mirror of https://gitee.com/many2many/java-web.git synced 2025-01-11 14:40:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add task example

Browse Source
This commit is contained in:
many2many 2024-10-13 11:35:20 +08:00
parent da5efeac0e
commit 745b875b51
4 changed files with 328 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/chapter03/tasks/index.html
View File

@ -17,6 +17,7 @@
object-fit: cover; object-fit: cover;
} }
</style> </style>
<script src="index.js"></script>
</head> </head>
<body> <body>
@ -95,8 +96,8 @@
<input type="text" class="form-control" id="cover" placeholder="image"/> <input type="text" class="form-control" id="cover" placeholder="image"/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="cover" class="form-label">图片</label> <label for="thumbnail" class="form-label">图片</label>
<input type="text" class="form-control" id="thumbnail" placeholder="image"/> <input class="form-control" id="thumbnail" placeholder="image"/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="userId" class="form-label">用户ID</label> <label for="userId" class="form-label">用户ID</label>

129
examples/chapter03/tasks/参考实现/async-index.js Normal file
View File

@ -0,0 +1,129 @@
// 定义帖子列表的URL
const postUrl="http://123.249.84.124:8899/posts";
// 定义用户列表的URL
const userUrl="http://123.249.84.124:8899/users";
/**
* 生成指定帖子的HTML代码（用于展示顶部特色帖子）
* @param {Object} post - 单个帖子对象，包含帖子的详细信息
* @returns {string} 返回顶部帖子的HTML字符串
*/
function getTopPostHtml(post){
// 使用模板字符串拼接HTML结构，并插入帖子数据
return `
<div class="card mt-5 mb-5">
<a href="#!"><img class="card-img-top" src="${post.coverImage}" alt="..." /></a>
<div class="card-body">
<div class="small text-muted"><i class="fas fa-clock m-1"></i>${post.createDate}</div>
<h2 class="card-title">${post.title}</h2>
<p class="card-text">${post.body}</p>
<div class="row align-items-start">
<div class="col-5"></div>
<div class="col-3">
<i class="fas fa-comments"></i><a href="#" class="card-link p-1">评论(${post.comments})</a>
</div>
<div class="col-3">
<i class="fas fa-user"></i> <a href="#" class="card-link p-1 u_${post.userId}"></a>
</div>
</div>
</div>
</div>
`;
}
/**
* 生成指定帖子的HTML代码（用于展示普通帖子列表）
* @param {Object} post - 单个帖子对象，包含帖子的详细信息
* @returns {string} 返回普通帖子的HTML字符串
*/
function getPostHtml(post){
// 使用模板字符串拼接HTML结构，并插入帖子数据
return `
<div class="card mb-5">
<div class="row g-0">
<div class="col-md-3">
<img src="${post.thumbnail}" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${post.title}</h5>
<p class="card-text text-muted">${post.body}</p>
<p class="card-text"><small>${post.createDate}</small> <small class="p-1 u_${post.userId}"></small></p>
</div>
</div>
</div>
</div>
`;
}
// 异步函数，用于展示帖子列表
async function showPosts(){
// 从服务器获取帖子数据
let posts = await fetch(postUrl).then(response=>response.json());
let postsHtml="";
// 随机挑选一个帖子作为顶部特色帖子
const randomId = Math.floor(Math.random() * posts.length);
for(let post of posts){
if(post.id == randomId){
// 将随机挑选的帖子以顶部特色帖子的形式展示
document.getElementById("top-post").innerHTML= getTopPostHtml(post);
continue;
}
if(post.body.length>300){
// 如果帖子内容过长，只显示前300个字符加省略号
post.body=post.body.substring(0,300)+"...";
}
postsHtml+=getPostHtml(post);
}
// 将所有普通帖子添加到页面上
document.getElementById("posts").innerHTML= postsHtml;
// 从服务器获取用户数据，并更新帖子的用户信息
let users = await fetch(userUrl).then(response=>response.json());
for(let user of users){
let usernameElements = document.getElementsByClassName("u_"+user.id);
for(let element of usernameElements){
element.innerText = user.name;
}
}
}
// 异步函数，用于创建新帖子
async function createPost(){
// 收集表单数据并发送到服务器
let post = await fetch(postUrl,{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
title: document.getElementById("title").value,
body: document.getElementById("body").value,
thumbnail: document.getElementById("thumbnail").value,
coverImage: document.getElementById("cover").value,
userId: document.getElementById("userId").value,
createDate: new Date().toLocaleString()
})
}).then(response=>response.json());
// 在页面上添加新帖子
let firstPostDiv = document.getElementById("posts").firstChild;
let newPostDiv = document.createElement("div");
newPostDiv.innerHTML=getPostHtml(post);
document.getElementById("posts").insertBefore(newPostDiv,firstPostDiv);
// 更新新帖子的用户信息
let user = await fetch(userUrl+"/"+post.userId).then(response=>response.json());
document.querySelectorAll(".u_"+post.userId).forEach(e=>e.innerText=user.name);
}
// 当窗口加载完成时执行以下函数
window.onload = function(){
// 展示帖子列表
showPosts();
// 监听提交按钮点击事件，以便添加新帖子
document.getElementById("submit").addEventListener("click",createPost);
};

71
examples/chapter03/tasks/参考实现/index.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter03 Example</title>
<!-- 引入 Bootstrap -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
</style>
<script src="index.js"></script>
<!-- async-index.js 是使用异步函数的实现-->
<!-- <script src="async-index.js"></script>-->
</head>
<body>
<div class="container mt-8" id="top-post">
</div>
<div class="container mt-8 bg-light" id="posts">
</div>
<div class="container mb-5 bg-body-tertiary">
<!-- POST 请求表单 -->
<form class="mt-5" action="#">
<h2>发布新帖子</h2>
<div class="mb-3">
<label for="title" class="form-label">标题</label>
<input type="text" class="form-control" id="title" placeholder="输入帖子标题">
</div>
<div class="mb-3">
<label for="body" class="form-label">内容</label>
<textarea class="form-control" id="body" rows="3" placeholder="输入帖子内容"></textarea>
</div>
<div class="mb-3">
<label for="cover" class="form-label">封面图片</label>
<input type="text" class="form-control" id="cover" placeholder="image"/>
</div>
<div class="mb-3">
<label for="thumbnail" class="form-label">图片</label>
<input type="text" class="form-control" id="thumbnail" placeholder="image"/>
</div>
<div class="mb-3">
<label for="userId" class="form-label">用户ID</label>
<input type="text" class="form-control" id="userId" placeholder="输入用户id">
</div>
<button class="btn btn-primary" id="submit">发布</button>
</form>
</div>
<div class="container bg-body-secondary">
<div class="row">
<div class="col-12">
<p class="text-center">Copyright © 2024. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>

125
examples/chapter03/tasks/参考实现/index.js Normal file
View File

@ -0,0 +1,125 @@
// 定义帖子列表的URL
const postUrl="http://123.249.84.124:8899/posts";
// 定义用户列表的URL
const userUrl="http://123.249.84.124:8899/users";
/**
* 生成指定帖子的HTML代码（用于展示顶部特色帖子）
* @param {Object} post - 单个帖子对象，包含帖子的详细信息
* @returns {string} 返回顶部帖子的HTML字符串
*/
function getTopPostHtml(post){
// 使用模板字符串拼接HTML结构，并插入帖子数据
return `
<div class="card mt-5 mb-5">
<a href="#!"><img class="card-img-top" src="${post.coverImage}" alt="..." /></a>
<div class="card-body">
<div class="small text-muted"><i class="fas fa-clock m-1"></i>${post.createDate}</div>
<h2 class="card-title">${post.title}</h2>
<p class="card-text">${post.body}</p>
<div class="row align-items-start">
<div class="col-5"></div>
<div class="col-3">
<i class="fas fa-comments"></i><a href="#" class="card-link p-1">评论(${post.comments})</a>
</div>
<div class="col-3">
<i class="fas fa-user"></i> <a href="#" class="card-link p-1 u_${post.userId}"></a>
</div>
</div>
</div>
</div>
`;
}
/**
* 生成指定帖子的HTML代码（用于展示普通帖子列表）
* @param {Object} post - 单个帖子对象，包含帖子的详细信息
* @returns {string} 返回普通帖子的HTML字符串
*/
function getPostHtml(post){
// 使用模板字符串拼接HTML结构，并插入帖子数据
return `
<div class="card mb-5">
<div class="row g-0">
<div class="col-md-3">
<img src="${post.thumbnail}" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${post.title}</h5>
<p class="card-text text-muted">${post.body}</p>
<p class="card-text"><small>${post.createDate}</small> <small class="p-1 u_${post.userId}"></small></p>
</div>
</div>
</div>
</div>
`;
}
// 当窗口加载完成时执行以下函数
window.onload = function(){
// 获取帖子数据，并在页面上展示
fetch(postUrl).then(response=>response.json()).then(posts=>{
let postsHtml="";
// 随机挑选一个帖子作为顶部特色帖子
const randomId = Math.floor(Math.random() * posts.length);
for(let post of posts){
if(post.id == randomId){
// 将随机挑选的帖子以顶部特色帖子的形式展示
document.getElementById("top-post").innerHTML= getTopPostHtml(post);
continue;
}
if(post.body.length>300){
// 如果帖子内容过长，只显示前300个字符加省略号
post.body=post.body.substring(0,300)+"...";
}
postsHtml+=getPostHtml(post);
}
// 将所有普通帖子添加到页面上
document.getElementById("posts").innerHTML= postsHtml;
}).then((res)=>{
// 获取用户数据，并在页面上补充用户信息
fetch(userUrl).then(response=>response.json()).then(users=>{
for(let user of users){
let usernameElements = document.getElementsByClassName("u_"+user.id);
for(let element of usernameElements){
element.innerText = user.name;
}
}
});
}
);
// 监听提交按钮点击事件，以便添加新帖子
document.getElementById("submit").addEventListener("click",function(){
// 收集表单数据并发送到服务器
fetch(postUrl,{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
title: document.getElementById("title").value,
body: document.getElementById("body").value,
thumbnail: document.getElementById("thumbnail").value,
coverImage: document.getElementById("cover").value,
userId: document.getElementById("userId").value,
createDate: new Date().toLocaleString()
})
}).then(response=>response.json()).then(post=>{
// 将新帖子添加到页面顶部
let firstPostDiv = document.getElementById("posts").firstChild;
let newPostDiv = document.createElement("div");
newPostDiv.innerHTML=getPostHtml(post);
document.getElementById("posts").insertBefore(newPostDiv,firstPostDiv);
return post.userId;
}).then((userId)=>{
// 更新发帖用户的姓名显示
fetch(userUrl+"/"+userId).then(response=>response.json()).then(user=>{
document.querySelectorAll(".u_"+userId).forEach(e=>e.innerText=user.name);
});
});
});
}