利用IPFS構建短視頻區塊鏈應用開發經歷(九)

本系列文章是針對 https://blog.csdn.net/weixin_43668031/article/details/83962959 內容的實現所編寫的。開發經歷包括思考過程、重構和推翻重來。

寫到這裏我們有了全局變量this.$store.state.videoShare是我們的合約實例,如果連接到了eth網絡中,並解鎖了賬號全局變量this.$store.state.userAccount是我們的賬號,https://blog.csdn.net/weixin_43668031/article/details/85256071 文中提到的用戶相關的操作就可以做了

操作分類 方法 作用 備註 參數 返回
用戶操作 setMyInfo 設置我的信息 setMyInfo(暱稱,簡介,頭像) 無返回
用戶操作 setMyNickname 設置我的暱稱 setMyNickname(暱稱) 無返回
用戶操作 setMyProfile 設置我的簡介 setMyProfile(簡介) 無返回
用戶操作 setMyAvatar 設置我的頭像 setMyAvatar(頭像) 無返回
用戶操作 getUserInfo 獲取用戶信息 無需消耗 getUserInfo(用戶地址) nickname=暱稱,
profile=簡介,
avatar=頭像,
videoNums=用戶發佈的數量

本文僅用到setMyNickname,setMyProfile,getUserInfo

僅保存暱稱:

      saveNickname(){
        //獲取合約實例
        const videoShare = this.$store.state.videoShare;
        //setMyNickname的調用方式需要傳入設置的值,還有send中傳入用戶自己的地址,價格是程序自己計算完成的,不需要輸入。
        videoShare.methods.setMyNickname(this.userAccount.nickname)
                .send({ from: this.userAccount.address })
                .on("receipt", function(receipt) {
                  //返回成功上鍊的信息
                  alert("上鍊成功,區塊高度:"+receipt.blockNumber);
                  console.log(receipt);
                }).on("error", function(error) {
                  console.log(error);
                })
      },

代碼暫時沒有做一個漂亮的提示信息告訴用戶區塊鏈寫入成功,等等過程中暫時沒有做出現loading的樣式,之後會對界面進行優化。

僅保存簡介:

      saveProfile(){
        //獲取合約實例
        const videoShare = this.$store.state.videoShare;
        //setMyProfile的調用方式需要傳入設置的值,還有send中傳入用戶自己的地址,價格是程序自己計算完成的,不需要輸入。
        videoShare.methods.setMyProfile(this.userAccount.profile)
                .send({ from: this.userAccount.address })
                .on("receipt", function(receipt) {
                  //返回成功上鍊的信息
                  alert("上鍊成功,區塊高度:"+receipt.blockNumber);
                  console.log(receipt);
                }).on("error", function(error) {
                  console.log(error);
                })
      }

頁面載入時的初始化操作:

      init() {
        //獲取登陸的賬號地址和合約實例
        this.userAccount.address = this.$store.state.userAccount;
        const videoShare = this.$store.state.videoShare;
        //查詢用戶是否設置過自己的屬性,如果設置過就顯示出來
        videoShare.methods.getUserInfo(this.$store.state.userAccount).call().then((res)=>{
          if(res.avatar!=="")this.userAccount.avatar = res.avatar;
          if(res.nickname!=="")this.userAccount.nickname = res.nickname;
          if(res.profile!=="")this.userAccount.profile = res.profile;
        });
      },

在這裏插入圖片描述

在這裏插入圖片描述

在這裏插入圖片描述
在這裏插入圖片描述

再次刷新,獲取最新數據正確。

在這裏插入圖片描述

這裏已經做到了對eth區塊鏈的改寫,對區塊鏈就行改寫就要付出相應的手續費給礦工,他們纔有動力給你挖礦。區塊鏈改寫?不存在的,這裏指的是添加日誌,改寫舊值的意思,這對於區塊鏈的宣傳有一定的偷換概念。

已經完成了對eth數據庫的調用,之後會把經歷着重放在ipfs的調用、業務邏輯和前端美化工作的代碼上來,畢竟前端足夠人性化才能縮小人們的學習成本,去多使用內容。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章