+ 
+
+
+ `;
+}
+
+/**
+ * 生成指定帖子的HTML代码（用于展示普通帖子列表）
+ * @param {Object} post - 单个帖子对象，包含帖子的详细信息
+ * @returns {string} 返回普通帖子的HTML字符串
+ */
+function getPostHtml(post){
+ // 使用模板字符串拼接HTML结构，并插入帖子数据
+ return `
+
+
+ `;
+}
+
+// 异步函数，用于展示帖子列表
+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);
+};
diff --git a/examples/chapter03/tasks/参考实现/index.html b/examples/chapter03/tasks/参考实现/index.html
new file mode 100644
index 0000000..42f1dc0
--- /dev/null
+++ b/examples/chapter03/tasks/参考实现/index.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ ${post.title}
+${post.body}
+${post.createDate}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/chapter03/tasks/参考实现/index.js b/examples/chapter03/tasks/参考实现/index.js
new file mode 100644
index 0000000..e62b288
--- /dev/null
+++ b/examples/chapter03/tasks/参考实现/index.js
@@ -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 `
+
+
+
+
+ Copyright © 2024. All rights reserved.
+
+
+
+
+ `;
+}
+
+/**
+ * 生成指定帖子的HTML代码（用于展示普通帖子列表）
+ * @param {Object} post - 单个帖子对象，包含帖子的详细信息
+ * @returns {string} 返回普通帖子的HTML字符串
+ */
+function getPostHtml(post){
+ // 使用模板字符串拼接HTML结构，并插入帖子数据
+ return `
+
+
+ `;
+}
+
+// 当窗口加载完成时执行以下函数
+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);
+ });
+ });
+ });
+}
+
+
+
+
+
+
+
+
+ ${post.title}
+${post.body}
+${post.createDate}
+