浙江龙网

  1. 首页 > 生活百科 > >

1、显示发布者的名字；2、增加新UI、3、关注其他学员的 canister IC入门课第五课作业：完善 Microblog 前端

生活百科

上周完成了 IC 入门课程第五课的作业
现将答案贴出，欢迎同学们参考，禁止抄袭作业哦
课程作业 (完善 microblog 前端)1. 显示消息的发布者名字a. 给 Message 增加 author 字段b. 增加 set_name 和 get_name 公共方法2. 增加以下新 UIa. 显示目前 follow 的作者列表b. 在 timeline 中显示消息作者和时间3. 关注(follow)其它学员的 canistera. 关注三个以上作者b. 点击作者名字,会显示对方发布的消息列表前端页面：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width" /><title>Microblog</title><base href="https://www.huyubaike.com/" /><link rel="icon" href="https://www.huyubaike.com/biancheng/favicon.ico" /><link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"/></head><body><header><h1>Microblog</h1></header><main><div><label for="message">What do you want to post?</label><textarea id="message"></textarea><label for="pwd">password</label><input id="pwd"/><br/><button id="post">Post</button><span id="error"></span><section id="posts"></section></div><br/><div><label for="name">Get or set name:</label><input id="name"/><span id="info"></span><br/><button id="getName">Get</button><button id="setName">Set</button></div><br/><div><section id="follow"></section></div></main></body></html>JS：
import { Int } from "@dfinity/candid/lib/cjs/idl";import { goodbye_backend } from "../../declarations/goodbye_backend";async function post() {let post_button = document.getElementById("post");let err = document.getElementById("error");err.innerText = "";post_button.ariaDisabled = true;let textarea = document.getElementById("message");let text = textarea.value;let pwd = document.getElementById("pwd").value;try {await goodbye_backend.post(pwd, text);textarea.valuehttps://www.huyubaike.com/biancheng/= "";} catch (error) {console.error(error);err.innerText = "Failed";}post_button.ariaDisabled = false;}var num_posts = 0;async function load_posts() {let posts_section = document.getElementById("posts");let posts = await goodbye_backend.posts(1);if (num_posts == posts.length) return;posts_section.replaceChildren([]);num_posts = posts.length;for(var i = num_posts - 1; i >= 0; i --) {let post = document.createElement("p");post.innerText = posts[i].author + " SAY: " +posts[i].text + " - " + Date((BigInt(posts[i].time) / BigInt(1000000000))).toLocaleString();posts_section.appendChild(post);}}async function getName() {let get_button = document.getElementById("getName");get_button.disabled = true;let name = await goodbye_backend.get_name();document.getElementById("name").value = https://www.huyubaike.com/biancheng/name;get_button.disabled = false;}async function setName() {let set_button = document.getElementById("setName");let info = document.getElementById("info");info.innerText = "";set_button.disabled = true;let nameIn = document.getElementById("name");let name = nameIn.value;try {await goodbye_backend.set_name(name);nameIn.valuehttps://www.huyubaike.com/biancheng/= "";info.innerText = "Success";} catch (error) {console.error(error);info.innerText = "Failed";}set_button.disabled = false;}var num_follows = 0;async function follows() {let follows = await goodbye_backend.follows();if (num_follows == follows.length) return;num_follows = follows.length;let info = "";for(var i = 0; i < num_follows; i ++) {let id = follows[i]['uid'];info += "<button class='info_btn' id= " + id + ">" + follows[i]['uname'] + "</button>";info += "<section id=" + id + "-msg" + "></section></br>";}document.getElementById("follow").innerHTML = info;for(var i = 0; i < num_follows; i ++) {let id = follows[i]['uid'];document.getElementById(id).addEventListener('click', function handleClick(event) {load_posts2(id);})}}var num_posts2 = 0;async function load_posts2(id) {alert("Id: " + id + " , Please wait");let posts_section2 = document.getElementById(id + "-msg");try {let posts2 = await goodbye_backend.posts2(id, 1);if (num_posts2 == posts2.length) return;posts_section2.replaceChildren([]);num_posts2 = posts2.length;for(var i = num_posts2 - 1; i >= 0; i --) {let post2 = document.createElement("p");post2.innerText = posts2[i].author + " SAY: " +posts2[i].text + " - " + Date((BigInt(posts2[i].time) / BigInt(1000000000))).toLocaleString();posts_section2.appendChild(post2);}} catch (error) {console.error(error);}}async function load() {let post_button = document.getElementById("post");post_button.onclick = post;load_posts();setInterval(load_posts, 5000);let get_button = document.getElementById("getName");get_button.onclick = getName;let set_button = document.getElementById("setName");set_button.onclick = setName;follows();}window.onload = load;

推荐阅读


上一篇：mapboxgl加载tiff

下一篇：Opengl ES之FBO