在我的上一篇文章
使用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实现一个管理游戏的界面,敬请期待