工具：Truffle；Ganache；MetaMask
环境：Windows10
新建一个文件夹，命名为存储，在文件夹下执行如下命令：（相当于是下载一个webpack模板）
truffle unbox webpack接着你会看到以下内容已经下载好了：
与单纯的执行Truffle初始化 *** 作不同，在这里多了个APP文件夹，里面主要是前端代码（src中）：
可以先看一下什么都不改的情况下这个模板是什么样子的：
然后发现报错了哈哈哈哈哈啊哈哈：（稍微改一下truffle-config中的内容）
连接Ganache与Meta Mask，在migrate之后在进入App文件夹，执行：
npm run dev接着打开浏览器，进入 http://localhost:8080/然后就会看到：
自带的合约就是铸币合约，就不演示了。
接下来尝试进行实现链上存储功能。
首先在contracts文件夹下新建合约文件storage_.sol
内容如下：
pragma solidity >=0.4.21 <=0.9.0;
contract storage_ {
//数据结构
struct Item {
string what;//数据
address who;//存数据的人（账户地址）
uint when ;//时间
}
//记录所有的数据
Item[] private allWords;
//将数据存储在区块链上
function save(string memory s, uint t) public {
//每增加一条，就push到结构体中
allWords.push(Item({
what: s,
who: msg.sender,
when: t
}));
}
//查询当前数据的总条数
function getSize() public view returns (uint){
return allWords.length;
}
//根据编号查询数据的具体内容
//random为编号
function getRandom(uint random) public view returns (string memory, address, uint) {
if(allWords.length==0){
return ("", msg.sender, 0);
}else{
Item storage result = allWords[random];
return (result.what, result.who, result.when);
}
}
function () payable external {
}
}主要包括存储函数和查询函数，所有人都可见。
magrations文件夹下的2_deploy_contracts.js文件修改为：
const storage_ = artifacts.require("storage_");
module.exports = function(deployer) {
deployer.deploy(storage_);
};
这样智能合约部分就完成了，接下来看JavaScript部分。
index.js内容更改为如下：
import Web3 from "web3";
import metaCoinArtifact from "../../build/contracts/storage_.json";
const App = {
web3: null,
account: null,
coin: null,
//连接以太坊
start: async function() {
const { web3 } = this;
try {
const networkId = await web3.eth.net.getId();
const deployedNetwork = metaCoinArtifact.networks[networkId];
this.meta = new web3.eth.Contract(
metaCoinArtifact.abi,
deployedNetwork.address,
);
const accounts = await web3.eth.getAccounts();
this.account = accounts[0];
//this.loadRandomWords();
} catch (error) {
console.error("Could not connect to contract or chain.");
}
},
loadRandomWords: async function(number) {
const { getRandom, getSize } = this.meta.methods;//.sol文件中的两个方法
const count = await getSize().call()//数据总条数count
const msgEl = document.getElementById("msg")//
if (count == 0){
msgEl.innerHTML = "暂时没有内容"
}else{
// let random_num = Math.random() * count
// const word = await getRandom(parseInt(random_num)).call();
// const msg = "内容:
"+word[0]
// +"
"
// +"
来源:
"+word[1]
// +"
"
// +"
时间:
"+ formatTime(word[2])
var words ="共"+count+"条数据"+"
---------------------------------------------------------------------------------------------------------------------------------------------------
";
for (var i=0;i
来源: "+word[1]
+"
时间: "+ formatTime(word[2])
+"
---------------------------------------------------------------------------------------------------------------------------------------------------
"
}
msgEl.innerHTML =words
}
},
saveWord: async function() {
const msg = document.getElementById("wordArea").value;
if (msg.length == 0){
alert("数据不能为空")
return
}
let timestamp = new Date().getTime()
const { save } = this.meta.methods;//.sol文件中的save方法
await save(msg, parseInt(timestamp / 1000)).send({ from: this.account });
//this.loadRandomWords();
},
};
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
function formatTime(timestamp) {
let date = new Date(Number(timestamp * 1000))
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
let fDate = [year, month, day, ].map(formatNumber)
return fDate[0] + '年' + fDate[1] + '月' + fDate[2] + '日' + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
window.App = App;
window.addEventListener("load", function() {
if (window.ethereum) {
// use MetaMask's provider
App.web3 = new Web3(window.ethereum);
window.ethereum.enable(); // get permission to access accounts
} else {
console.warn(
"No web3 detected. Falling back to http://127.0.0.1:9545. You should remove this fallback when you deploy live",
);
// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
App.web3 = new Web3(
new Web3.providers.HttpProvider("http://127.0.0.1:9545"),
);
}
App.start();
});
再来看HTML：
index.html文件更改如下：
数据上链
数 据
上链
---------------------------------------------------------------------------------------------------------------------------------------------------
显示所有链上数据
接着就可以运行了，如图所示：
E:\DAPP\存储>truffle migrate --reset
Compiling your contracts...
===========================
> Compiling .\contracts\Migrations.sol
> Compiling .\contracts\storage＿.sol
> Artifacts written to E:\DAPP\存储\build\contracts
> Compiled successfully using:
- solc: 0.5.16+commit.9c3226ce.Emscripten.clang
Starting migrations...
======================
> Network name: 'development'
> Network id: 5777
> Block gas limit: 6721975 (0x6691b7)
1_initial_migration.js
======================
Replacing 'Migrations'
----------------------
> transaction hash: 0x6d8f1fcf259da54a4de08f446ccf3d9388113532b075eedfa60a87d0bb8bd213
> Blocks: 0 Seconds: 0
> contract address: 0xF8f84d69b825720cd7450f38655B4025F9a713f3
> block number: 120
> block timestamp: 1653055560
> account: 0x840E940c19E56d8D93e0Ca650D7AE7a252172939
> balance: 115.74797984
> gas used: 164175 (0x2814f)
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.0032835 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.0032835 ETH
2_deploy_contracts.js
=====================
Deploying 'storage_'
--------------------
> transaction hash: 0xc8c551c8480c8347b5807ad0742a3e898d1d1c519629709496311582a808f615
> Blocks: 0 Seconds: 0
> contract address: 0xebfb7eE1f79468cec97B07498e0239c9f9Ba560c
> block number: 122
> block timestamp: 1653055561
> account: 0x840E940c19E56d8D93e0Ca650D7AE7a252172939
> balance: 115.7405039
> gas used: 331456 (0x50ec0)
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.00662912 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.00662912 ETH
Summary
=======
> Total deployments: 2
> Final cost: 0.00991262 ETH
接着打开浏览器，进入 http://localhost:8080/：
（有点丑，不要介意，能说明功能就行了）
在连接MetaMask的情况下，可以输入内容，然后点击上链，结果如下所示：
参考书籍：《精通以太坊智能合约开发》熊丽兵编著.北京电子工业出版社，2018
END
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）