第一次使用vue搭建Dapp项目,意图是提交表单,通过智能合约中方法将数据存储到区块链中,
其中 表单数据结构为:
struct CarInfo{
string name;
string description;
uint reward;
uint waitTime;
uint longitude;
uint latitude;
}
智能合约对应方法为:
function addCarInfo(string memory _name,string memory _description,uint _reward, uint _waitTime,uint _longitude,uint _latitude) public {
//在列表中新增数据
//这个地方应该新增
CarInfo memory carInfo = CarInfo(_name,_description,_reward,_waitTime,_longitude,_latitude); // 按定义的顺序依次指定值
CarInfos[msg.sender].push(carInfo);
emit NewCarInfo();
}
vue的相关代码为:
<template>
<div style="text-align: left">
<el-button class="add-button" type="success" @click="dialogFormVisible = true">新建任务</el-button>
<el-dialog
title="新建任务"
:visible.sync="dialogFormVisible"
@close="clear">
<el-form v-model="form" style="text-align: left" ref="dataForm">
<el-form-item label="任务名" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off" placeholder=""></el-input>
</el-form-item>
<el-form-item label="任务描述" :label-width="formLabelWidth" prop="description">
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="任务奖励" :label-width="formLabelWidth" prop="reward">
<el-input-number v-model="form.reward" :min="1" :max="50" ></el-input-number> wei
</el-form-item>
<el-form-item label="可等时间" :label-width="formLabelWidth" prop="waitTime">
<el-input-number v-model="form.reward" :min="1" :max="360" ></el-input-number> 分钟
</el-form-item>
<el-form-item label="经度" :label-width="formLabelWidth" prop="longitude">
<el-input v-model="form.longitude" autocomplete="off" placeholder=""></el-input>
</el-form-item>
<el-form-item label="纬度" :label-width="formLabelWidth" prop="latitude">
<el-input v-model="form.latitude" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Web3 from "web3";
import contract from "truffle-contract";
let CarContract = require("../../build/contracts/CarContract.json");
export default {
name: 'VehicleBC',
data () {
return {
dialogFormVisible: false,
form: {
name: '',
description: '',
reward: '',
waitTime: '',
longitude: '',
latitude: '',
},
formLabelWidth: '120px',
}
},
methods: {
clear () {
this.form = {
name: '',
description: '',
reward: '',
waitTime: '',
longitude: '',
latitude: '',
}
},
onSubmit () {
this.carTask.addCarInfo(this.form.name,this.form.description,this.form.reward,this.form.waitTime,this.form.longitude,this.form.latitude).then(function (result) {
alert(result);
})
},
async initWeb3Account() {
if (window.ethereum) {
this.provider = window.ethereum;
try {
await window.ethereum.enable();
} catch (error) {
console.log("User denied account access");
}
} else if (window.web3) {
this.provider = window.web3.currentProvider;
} else {
this.provider = new Web3.providers.HttpProvider("http://127.0.0.1:7545");
}
this.web3 = new Web3(this.provider);
this.web3.eth.getAccounts().then(accs => {
this.account = accs[0]
})
},
async initContract() {
const crowdContract = contract(CarContract)
crowdContract.setProvider(this.provider)
this.carTask = await crowdContract.deployed()
},
async getCarTaskInfo() {
this.carTask.getCarInfoLen(this.account).then(function (len) {
console.log(len + " 条笔记");
})
},
},
mounted() {
},
// 当前Vue组件被创建时回调的hook 函数
async created() {
// 初始化 web3及账号
await this.initWeb3Account()
// 初始化合约实例
await this.initContract()
// 获取合约的状态信息
await this.getCarTaskInfo()
},
}
</script>
<style scoped>
.add-button {
margin: 18px 0 0 10px;
}
</style>
项目中新建任务弹出表单,填写完毕提交出现 The send transactions "from" field must be defined!错误。 整个项目是模仿着tiny熊的如何使用Vue.js 开发以太坊DApp来学习的。请问有大神可以指点一下吗?