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

最新推荐文章于 2025-09-29 21:03:11 发布

原创

最新推荐文章于 2025-09-29 21:03:11 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #智能合约 #区块链

本文是使用Solidity和Web3开发在线小游戏系列的第四部分，主要介绍了如何在Vue框架下创建一个登录页面，并实现与GameManage智能合约的交互。首先在合约中添加登录相关函数，然后通过`yarn add view-design`引入UI库，接着在Vue的main.js中配置，并创建login.vue组件。最后设置路由，完成登录页面的展示。

在我的上一篇文章

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

中，我们完成了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>
        &