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

};

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

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

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

Elasticsearch7.X 入门学习第五课笔记---- - Mapping设定介绍
原文:Elasticsearch7.X 入门学习第五课笔记---- - Mapping设定介绍版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本 ...
普林斯顿算法课第五周作业_KdTree
作业地址:http://coursera.cs.princeton.edu/algs4/assignments/kdtree.html 作业难点: 1.如何构建KdTree,使用什么样的数据结构? 根 ...
Spring入门第二十五课
使用具名参数直接看代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql.jdbc.Dr ...
NeHe OpenGL教程第四十五课：顶点缓存
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
【Linux探索之旅】第一部分第五课：Unity桌面，人生若只如初见
内容简介 1.第一部分第五课:Unity桌面,人生若只如初见 2.第一部分第六课预告:Linux如何安装在虚拟机中 Unity桌面,人生若只如初见不容易啊,经过了前几课的学习,我们认识了Linux是 ...
【C语言探索之旅】第二部分第五课：预处理
内容简介 1.课程大纲 2.第二部分第五课: 预处理 3.第二部分第六课预告: 创建你自己的变量类型课程大纲我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语 ...
【C语言探索之旅】第一部分第五课：运算那点事
内容简介 1.课程大纲 2.第一部分第五课:运算那点事 3.第一部分第六课预告:条件表达式课程大纲我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏 ...
Linux云自动化运维第五课
Linux云自动化运维第五课一.进程定义进程就是cpu未完成的工作二.ps命令 ps a ###关于当前环境的所有进程 x ###与当前环境无关的所有进程 f ###显示进程从属关系 e ### ...
[译]Quartz.NET 框架教程（中文版）2.2.x 之第五课 SimpleTrigger
第五课 SimpleTrigger 如果你需要在一个指定时间段内执行一次作业任务或是在指定的时间间隔内多次执行作业任务,SimpleTrigger应该能满足你的调度需求.例如,你希望触发器在2015年 ...

随机推荐

C# 基础知识-特性
C基础 - 特性一.特性 1>特性本质就是一个类,直接或者间接的继承了Attribute 2>特性就是在不破话类封装的前提下,加点额外的信息或者行为特性添加后,编译会在元素内部产生IL ...
YII容器类依赖注入
程序 = 算法 + 数据结构数据结构制约了算法的===>>>>依赖注入依赖注入也就是解数据结构和算法耦合的思想 <?php /** * Created by Ph ...
栈Stack
while，do while，for循环语句
循环语句循环包含三大语句-----while语句 do while语句 for语句循环三要素初始值(初始的变量值) 迭代量(基于初始值的改变) 条件(基于初始值的判断) while语句 var ...
MySQL金融应用场景下跨数据中心的MGR架构方案（1）
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 0. 内容提纲运行环境部署MGR A&B 部署MGR A.B之间的复制通道几个注意事项如何在多个数据中心部 ...
Sampler类定义
此是所有采样的基类,这样定义的好处是,我们可以分别测试每一个采样算法. 类定义: #pragma once #ifndef __SAMPLER_HEADER__ #define __SAMPLER_H ...
文件上传接入阿里云OSS
目的:将文件交给阿里云进行管理,可避免文件对本地服务器资源的占用,阿里云OSS还可根据读写偏好选择合适的文件存储类型服务器,文件异地备份等一.阿里云OSS基础了解(前提) 1.存储空间(Bucket ...
React报错之You provided a `checked` prop to a form field
正文从这开始~ 总览当我们在多选框上设置了checked 属性,却没有onChange 处理函数时,会产生"You provided a checked prop to a form fi ...
弹簧高跷题解---双向DP---DD(XYX)的博客
三 . 弹簧高跷时间限制: 1 Sec 内存限制: 128 MB 题目描述.输入.输出 ----------- 方法这道题用DP是可以解决的.因为每一次跳跃都与前一次跳跃有关, ...
Django-Import-Export插件控制数据导入流程
前言之前写过两篇跟这个插件有关的文章,可以回顾一下: Django数据导入导出神器django-import-export使用 Django-Import-Export插件关于外键的处理最近有个朋 ...

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

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

随机推荐

热门专题