java-web/examples/chapter03/tasks/参考实现/async-index.js

// 定义帖子列表的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);
};