上周完成了 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. Solution -「营业」「CF567D」One-Dimensional Battle Ships

    题目大意 - 翻译   Alice 和 Bob喜欢在 \(1\times n\) 的表格中玩战舰游戏.游戏开始时,Alice 有 \(k\) 艘战舰,每艘战舰长度为 \(a\),她需要把这些战舰不重叠 ...

  2. 五分钟给你的 gRPC服务 加上 HTTP 接口

    gRPC 服务要加 HTTP 接口? go-zero 给大家带来极简的 RESTful 和 gRPC 服务开发体验的同时,社区又给我们提出了新的期望: 我想只写一次代码 既要 gRPC 接口 也要 H ...

  3. [SWPU2019]Web1-1|SQL注入

    1.打开之后界面如下: 2.查看源代码.登录注入等未发现有用信息,结果如下: 3.进行注册试试,注册时发现admin账户已被注册,随便注册一个账户并登录,结果如下: 申请发布广告页面如下: 4.发布广 ...

  4. 日志审计与分析实验三（rsyslog服务器端和客户端配置）（Linux日志收集）

    Linux日志收集 一.实验目的: 1.掌握rsyslog配置方法 2.配置rsyslog服务收集其他Linux服务器日志: C/S架构:客户端将其日志上传到服务器端,通过对服务器端日志的查询,来实现 ...

  5. 如何在 pyqt 中实现桌面歌词

    前言 酷狗.网抑云和 QQ 音乐都有桌面歌词功能,这篇博客也将使用 pyqt 实现桌面歌词功能,效果如下图所示: 代码实现 桌面歌词部件 LyricWidget 在 paintEvent 中绘制歌词. ...

  6. 启用Hyper-v后，重启后界面提示 无法完成功能配置，正在撤销更改

    安装docker后,提示需要启用hyper-v,在控制面板中勾选Hyper-v,然后重启,更新快完成就提示无法完成功能配置,正在撤销更改 解决方法 方法1 控制面板一个一个选 方法2 百度了n多内容, ...

  7. 体验Lambda的更优写法和Lambda标准格式

    体验Lambda的更优写法 借助Java8的全新语法,上述Runnable接口的匿名内部类写法可以通过更简单的Lambda表达式达到等效: public class Lambda02 { public ...

  8. 我和Apache DolphinScheduler的这一年

    Apache DolphinScheduler,为Apache开源项目, 简称"DS", 中文名 "小海豚调度"(海豚聪明.人性化,又左右脑可互相换班,终生不用 ...

  9. Python逆向爬虫之pyquery，非常详细

    系列目录 Python逆向爬虫之pyquery pyquery是一个类似jquery的python库,它实现能够在xml文档中进行jQuery查询,pyquery使用lxml解析器进行快速在xml和h ...

  10. Filter中的FilterChain.doFilter(req,resp)的报错解决

    服务器内部错误:500 Request processing failed; nested exception is java.lang.IllegalStateException: 提交响应后无法调 ...