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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

上周完成了 IC 入门课程第五课的作业

现将答案贴出，欢迎同学们参考，禁止抄袭作业哦

课程作业 (完善 microblog 前端)

1. 显示消息的发布者名字

　　a. 给 Message 增加 author 字段

　　b. 增加 set_name 和 get_name 公共方法

2. 增加以下新 UI

　　a. 显示目前 follow 的作者列表

　　b. 在 timeline 中显示消息作者和时间

3. 关注(follow)其它学员的 canister

　　a. 关注三个以上作者

　　b. 点击作者名字,会显示对方发布的消息列表

前端页面：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width" />

    <title>Microblog</title>

    <base href="/" />

    <link rel="icon" href="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.value = "";

  } 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 = 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.value = "";

    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;

Motoko：

import List "mo:base/List";

import Iter "mo:base/Iter";

import Principal "mo:base/Principal";

import Time "mo:base/Time";

import Nat "mo:base/Nat";

actor {

  public type Message = {

    author: ?Text;

    text: Text;

    time: Time.Time;

  };

  public type User  = {

    uid: Principal;

    uname: ?Text;

  };

  var king: Text = "Linnuo";

  public type Microblog = actor {

    follow: shared(Principal) -> async (); // add关注对象

    follows: shared query () -> async [User]; // return关注对象列表

    post: shared (Text) -> async (); // 发布新消息

    posts: shared (Time.Time) -> async [Message]; // return 发布消息列表

    posts2: shared (Text) -> async [Message]; // return 所有关注对象发布的消息

    timeline: shared (Time.Time) -> async [Message]; // return 所有关注对象发布的消息

    set_name: shared (Text) -> async ();  // set 名字

    get_name: shared query () -> async ?Text; // get 名字

    unfollow: shared () -> async ();  // 清空跟随

  };

  // stable 修饰：升级不清空内存

  stable var followed : List.List<User> = List.nil();

  public shared func follow(id: Principal) : async (){

    let canister : Microblog = actor(Principal.toText(id));

    let name: ?Text = await canister.get_name();

    let u = {

      uid = id;

      uname = name;

    };

    followed := List.push(u, followed);

  };

  public shared query func follows() : async [User] {

    List.toArray(followed);

  };

  stable var messages : List.List<Message> = List.nil();

  // （msg）：获取消息属性

  public shared (msg) func post(pwd: Text, text: Text) : async (){

    // 获取发送者: dfx identity get-principal

    // assert(Principal.toText(msg.caller) == "vw7ov-537vk-abslh-s2gx7-gw2ff-v4u6y-thlcs-hejxf-hkkc5-bjiq7-pqe"); //消息发送者

    assert(pwd == "qwe123");

    let m = {

      author = ?king;

      text = text;

      time = Time.now();

    };

    messages := List.push(m, messages);

    // 用钱包调用正常返回失败：dfx canister --wallet=$(dfx identity get-wallet) call microblog_backend post "(\"Second post\")"

  };

  public shared func posts(since: Time.Time) : async [Message] {

    var list : List.List<Message> = List.nil();

    for (m in Iter.fromList(messages)) {

      if (m.time >= since){

        list := List.push(m, list);

      }

    };

    List.toArray(list);

  };

  public shared func posts2(pid: Principal, since: Time.Time) : async [Message] {

    try {

      let canister : Microblog = actor(Principal.toText(pid));

      await canister.posts(since);

    } catch (err) {

      []

    }

  };

  public shared func timeline(since: Time.Time) : async [Message] {

    var all : List.List<Message> = List.nil();

    for (user in Iter.fromList(followed)){

      let canister : Microblog = actor(Principal.toText(user.uid));

      let msgs = await canister.posts(since);

      for(msg in Iter.fromArray(msgs)){

        all := List.push(msg, all);

      };

    };

    List.toArray(all);

  };

  public shared func set_name(name: Text) {

    king := name;

  };

  public shared query func get_name() : async ?Text {

    return ?king;

  };

  public shared func unfollow() : async (){

    followed := List.nil();

  };

  // 发送消息：id和名称可以呼唤

  //  dfx canister call rrkah-fqaaa-aaaaa-aaaaq-cai post "(\"First post\")"   // 用Id发消息

  //  dfx canister call microblog_backend post "(\"Second post\")"            // 用名称发消息

  //  dfx canister call rrkah-fqaaa-aaaaa-aaaaq-cai posts "()"                // 获取消息列表

  //  dfx canister call microblog_backend2 follow "(principal \"$(dfx canister id microblog_backend)\")"  // 添加关注对象

  //  dfx canister call microblog_backend2 follows "()"                       // 获取关注对象列表

  //  dfx canister call microblog_backend2 timeline  "()"                     // 获取所有关注对象发布的消息

};