使用solidity与web3创作一个在线小游戏之四：基于VUE的DAPP，与智能合约的交互

在我的上一篇文章

使用solidity与web3创作一个在线小游戏之三：（在VUE中使用WEB3，并使用Truffle包装对象与智能合约交互）_lixiaodog的博客-CSDN博客

中，我们完成了VUE框架的搭建，并成功编写了myWeb3对象，然后用这个对象成功获取到了我们当前的地址。在这章中，我们将使用VUE编写一个简单的LOGIN页面，并使用这个页面与GameManage合约完成登录这个交互动作。

首先在GameManage合约中，加入代码：

    function adminLogin() public returns (bool){
        adminInfos[msg.sender] = keccak256(abi.encodePacked(msg.sender, block.timestamp));
        emit AdminLogined(msg.sender, true);
        return true;
    }

 接下来，我们将使用这个函数与DAPP交互。

在命令行中输入：yarn add view-design

在main.js中修改代码：

import { createApp } from 'vue'
import App from './App.vue'
import myWeb3 from './utils/myWeb3'
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'



createApp(App).use(myWeb3).use(ViewUI).mount('#app')

 在src下新建view文件夹，在view下新建文件login.vue,源码如下：

<template>
  <div class="login-container">
      <div class="pageHeader">
        
        <span>区块链管理平台</span>
      </div>

      <div class="login-box">
        <div class="login-text" v-if="typeView != 2">
          <a href="javascript:;" :class="typeView == 0 ? 'active' : ''" @click="handleTab(0)">登录</a>
          
        </div>
        <!-- 登录模块 -->
        <div class="right-content" v-show="typeView == 0">

         <table id="table">

             <tbody>
                  <tr v-for="index in stu">
                      
                      <td @click="chooseAccout(index)">{
   
   {index}}</td>

                  </tr>

            </tbody>
        </table> 

   
          <Button
            class="loginBtn"
            type="primary"
            :disabled="isDisabled"
            :loading="isLoading"
            @click.stop="login">
            立即登录
          </Button>

       
        </div>
        </div>
        </div>

     

</template>

<script>

import Vue from 'vue';


export default {
  name: 'login',
  components: {

  },
  data() { 
 
    return {

      stu:[],
      checkAccoutn:'',
      formLogin: {
        userName: '',
        userPwd: '',
      },
      formRegister: {
        userName: '',
        userPwd2: '',
        userPwd: '',
      },
      typeView: 0, //显示不同的view
      checked: false, // 记住登录
      isLoading: false,
    };
  },
  computed: {
    // 登陆按钮状态
    isDisabled() {
      return !(this.checkAccoutn != '');
    },
   
  },
  mounted() {
    var self = this;
    //this.getCookie();
    Vue.prototype.$web3.eth.getAccounts()
    .then(function(accounts) {
     self.stu = accounts;
    
     }
    )
  },
  methods: {
      chooseAccout:function(e){
        this.checkAccoutn = e;
        console.log(e);
      },
     
    login() {
      if (this.isDisabled || this.isLoading) {
        return false;
      }
      let self = this;
    

      Vue.prototype.$myWeb3.adminLogin(this.checkAccoutn,function (error, result) {
            console.log("Event are as following:-------",result);
          //login(form)
          self.isLoading = false;
          let userInfo = {userInfo:{data:{token:''}}};
          
          userInfo.userInfo.data.token = result.admin;
          var res = { 
                code: 0, 
                msg: '注册成功', 
                data: { 
                  token:result.admin,
                  userData:{}
                } 
          }
          self.$store.dispatch('userInfo/saveInfo', res.data);
          self.$router.push('/home');
      });
     
    }
  }   
};
</script>
<style lang="scss" scoped>
.login-container {
  background-image: url('../assets/bg.png');
  background-position: center;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;

  .pageHeader {
    padding-top: 30px;
    padding-left: 40px;

    img {
      vertical-align: middle;
      display: inline-block;
      margin-right: 15px;
    }

    span {
      font-size: 18px;
      display: inline-block;
      vertical-align: -4px;
      color: rgba(255, 255, 255, 1);
    }
  }

  .login-box {
    position: absolute;
    left: 64vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 1px 11px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    /*margin: 100px auto 0;*/
    width: 420px;
    background: #fff;
    padding: 45px 35px;
    .option {
      text-align: left;
      margin-top: 18px;
      .checked {
        padding-left: 5px;
      }
      .forget-pwd, .goback {
        float: right;
        font-size: 14px;
        font-weight: 400;
        color: #4981f2;
        line-height: 20px;
        cursor: pointer;
      }
      .protocol {
        color: #4981f2;
        cursor: pointer;
      }
    }

    .login-text {
      width: 100%;
      text-align: center;
      padding: 0 0 30px;
      font-size: 24px;
      letter-spacing: 1px;
      a {
        padding: 10px;
        color: #969696;
        &.active {
          font-weight: 600;
          color: rgba(73, 129, 242, 1);
          border-bottom: 2px solid rgba(73, 129, 242, 1);
        }
        &:hover {
          border-bottom: 2px solid rgba(73, 129, 242, 1);
        }
      }
      b {
        padding: 10px;
      }
    }
    .title {
      font-weight: 600;
      padding: 0 0 30px;
      font-size: 24px;
      letter-spacing: 1px;
      color: rgba(73, 129, 242, 1);
    }

    .input-box {
      .input {
        &:nth-child(1) {
          /*margin-top: 10px;*/
        }
        &:nth-child(2),
        &:nth-child(3) {
          margin-top: 20px;
        }
      }
    }

    .loginBtn {
      width: 100%;
      height: 45px;
      margin-top: 40px;
      font-size: 15px;
    }

    .input {
      padding: 10px 0px;
      font-size: 15px;
      width: 350px;
      color: #2c2e33;
      outline: none; // 去除选中状态边框
      border: 1px solid #fff;
      border-bottom-color: #e7e7e7;
      background-color: rgba(0, 0, 0, 0); // 透明背景
    }

    input:focus {
      border-bottom-color: #0f52e0;
      outline: none;
    }
    .button {
      line-height: 45px;
      cursor: pointer;
      margin-top: 50px;
      border: none;
      outline: none;
      height: 45px;
      width: 350px;
      background: rgba(216, 216, 216, 1);
      border-radius: 2px;
      color: white;
      font-size: 15px;
    }
  }

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0.4);
  }

  //设置更改input 默认颜色
  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #bebebe;
    font-size: 16px;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #bebebe;
    font-size: 16px;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #bebebe;
    font-size: 16px;
  }

  input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 1) inset;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 1) inset;
    -webkit-text-fill-color: #2c2e33;
  }

  .ivu-checkbox-wrapper {
    margin-right: 0;
  }

}
</style>

 在src文件平下添加router文件夹，并添加index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
    meta: {
      title: '登录界面'
    }
  },
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
      title: '首页',
      requireAuth: true
    }
  },
  {
    path: '**',
    redirect: '/'
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

访问8082端口，显示如下图：

 至此，登录页面已经完成，下一章，我们就使用vue实现一个管理游戏的界面，敬请期待