java-web/examples/chapter03/tasks/参考实现/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>
    `;
}

// 当窗口加载完成时执行以下函数
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);
            });
        });
    });
}