利用IPFS构建短视频区块链应用开发经历（九）

原創

2020-05-18 02:20

本系列文章是针对 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;
        });
      },