上周完成了 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  "()"                     // 获取所有关注对象发布的消息

};

代码的实现并不复杂，欢迎童鞋们指导哈

为了避免直接下载项目，这里就不贴 Github 入口了，好好学习，加油

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

  1. Elasticsearch7.X 入门学习第五课笔记---- - Mapping设定介绍

    原文:Elasticsearch7.X 入门学习第五课笔记---- - Mapping设定介绍 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本 ...

  2. 普林斯顿算法课第五周作业_KdTree

    作业地址:http://coursera.cs.princeton.edu/algs4/assignments/kdtree.html 作业难点: 1.如何构建KdTree,使用什么样的数据结构? 根 ...

  3. Spring入门第二十五课

    使用具名参数 直接看代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql.jdbc.Dr ...

  4. NeHe OpenGL教程 第四十五课：顶点缓存

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. 【Linux探索之旅】第一部分第五课：Unity桌面，人生若只如初见

    内容简介 1.第一部分第五课:Unity桌面,人生若只如初见 2.第一部分第六课预告:Linux如何安装在虚拟机中 Unity桌面,人生若只如初见 不容易啊,经过了前几课的学习,我们认识了Linux是 ...

  6. 【C语言探索之旅】 第二部分第五课：预处理

    内容简介 1.课程大纲 2.第二部分第五课: 预处理 3.第二部分第六课预告:   创建你自己的变量类型 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语 ...

  7. 【C语言探索之旅】 第一部分第五课：运算那点事

    内容简介 1.课程大纲 2.第一部分第五课:运算那点事 3.第一部分第六课预告:条件表达式 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏 ...

  8. Linux云自动化运维第五课

    Linux云自动化运维第五课 一.进程定义 进程就是cpu未完成的工作 二.ps命令 ps a ###关于当前环境的所有进程 x ###与当前环境无关的所有进程 f ###显示进程从属关系 e ### ...

  9. [译]Quartz.NET 框架 教程（中文版）2.2.x 之第五课 SimpleTrigger

    第五课 SimpleTrigger 如果你需要在一个指定时间段内执行一次作业任务或是在指定的时间间隔内多次执行作业任务,SimpleTrigger应该能满足你的调度需求.例如,你希望触发器在2015年 ...

随机推荐

  1. CSS面试总结

    文章首次发表:_时雨_CSDN 1. BFC:块级格式化上下文(重点关注) BFC基本概念:BFC是 CSS布局的一个概念,是一块独立的渲染区域(环境),里面的元素不会影响到外部的元素. BFC原理( ...

  2. mybatis-plus时间字段自动填充

    时间代码自动填充的2种方式 数据库方式 将数据库字段create_time和update_time设置CURRENT_TIMESTAMP,create_time字段后面不需要勾选更新,update_t ...

  3. 2022-7-18 第五组 pan 面向对象

    面向过程 向过程就是:面向过程,其实就是面向着具体的每一个步骤和过程,把每一个步骤和过程完成,然后由这些功能方法相互调用,完成需求. 面向对象 什么是面向对象: 面向对象思想就是不断的创建对象,使用对 ...

  4. 性能浪费的日志案例和使用Lambda优化日志案例

    有些场景的代码执行后,结果不一定会被使用,从而造成性能浪费.而Lambda表达式是延迟执行的,这正好可以作为解决方案,提升性能 性能浪费的日志案例 日志可以帮助我们快速的定位问题,记录程序运行过程中的 ...

  5. Thread类的常用方法_获取线程名称的方法和Thread类的常用方法_设置线程名称的方法

    构造方法: public Thread();分配一个新的线程对象 public Thread(String name);分配一个指定名字的新的线程对象 public Thread(Runnable t ...

  6. Kafka部署安装

    一.环境准备 1.jdk 8+ 2.zookeeper 3.kafka 说明:在kafka较新版本中已经集成了zookeeper,所以不用单独安装zookeeper,只需要在kafka文件目录中启动z ...

  7. 浅淡 Apache Kylin 与 ClickHouse 的对比

    作者简介 周耀,Kyligence 解决方案架构师,Apache Kylin.Apache Superset Contributor. Apache Kylin 和 ClickHouse 都是目前市场 ...

  8. 从 Delta 2.0 开始聊聊我们需要怎样的数据湖

    盘点行业内近期发生的大事,Delta 2.0 的开源是最让人津津乐道的,尤其在 Databricks 官宣 delta2.0 时抛出了下面这张性能对比,颇有些引战的味道. 虽然 Databricks ...

  9. kubernetes网络模型

    Overview 本文将探讨Kubernetes中的网络模型,以及对各种网络模型进行分析. Underlay Network Model 什么是Underlay Network 底层网络 Underl ...

  10. 图解 Kafka 超高并发网络架构演进过程

    阅读本文大约需要 30 分钟. 大家好,我是 华仔, 又跟大家见面了. 上一篇作为专题系列的第一篇,我们深度剖析了关于 Kafka 存储架构设计的实现细节,今天开启第二篇,我们来深度剖析下「Kafka ...