本系列文章是針對 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的調用、業務邏輯和前端美化工作的代碼上來,畢竟前端足夠人性化才能縮小人們的學習成本,去多使用內容。