泰岳区块链v4————js原生操作taiweb3js实现简单上链、查询

最新推荐文章于 2024-04-23 13:15:00 发布

Lucky小妃子

最新推荐文章于 2024-04-23 13:15:00 发布

阅读量542

点赞数

分类专栏：区块链操作手册文章标签：前端 javascript 区块链

本文链接：https://blog.csdn.net/AllisonLi/article/details/106401264

版权

区块链操作手册专栏收录该内容

6 篇文章 1 订阅

订阅专栏

泰岳联盟链，提供了一个对外开放的npm包Web3tai.js，该包保留了web3原有接口的情况下，增加了兼容TaiyueChain主网的设置和新的接口。代码陆续开源中… …

地址说明：
npm包：https://www.npmjs.com/package/taiweb3js
TaiWeb3js项目开源代码： https://github.com/taiyuechain/TaiWeb3js

本文目的旨在，让前端开发者了解如何在链上存储或者查询：

代码结构如下：

说明：
index.html 入口执行文件，可以网页直接打开
main.js js执行文件，包含如何完成上链、查询的代码逻辑
abi.js 将Solidity合约编译完成的abi赋值给abi常量，它在main.js中被使用
web3tai.js 保留web3原有接口情况下，增加对TaiyueChain的支持与新接口扩展文件。

了解：
JiaSimple.sol 为本次使用到的Solidity合约源码，在【Stellar】 https://publicstellar.taiyuechain.com/ 上进行编译、部署等，具体如何操作等待后续文章进行更新，本次不做说明。

源码解析：

1、index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Demo</title>
</head>
<body>
  <h1>Web3tai使用Demo</h1>
  <div>
    <label for="set">设置储存内容</label>
    <input id="set" type="text" placeholder="输入要上链存储的内容">
    <button id="set-button">确认</button>
    <span id="set-states"></span>
  </div>
  <div>
    <span onclick="getValue">查看储存内容</span>
    <button id="get-button">确认</button>
    <span id="get"></span>
  </div>
</body>
<script src="./web3tai.js"></script>
<script src="./abi.js"></script>
<script src="./main.js"></script>
</html>

效果截图：
在这里插入图片描述

2、abi.js

const abi = [
	{
		"constant": false,
		"inputs": [
			{
				"name": "_input",
				"type": "string"
			}
		],
		"name": "set",
		"outputs": [

		],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [

		],
		"name": "get",
		"outputs": [
			{
				"name": "",
				"type": "string"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	}
]

3、main.js

'use strict'

// 连接区块链节点，初始化web3对象
const web3 = new Web3tai('https://publicrpc.taiyuechain.com', 'tai')

// 根据合约接口ABI配置和合约地址，初始化智能合约对象
const contractAddress = '请见下面附录1'
const contractObj = new web3.eth.Contract(abi, contractAddress)

// 导入账户，用于支付交易产生的手续费
const privateKey = '请见下面附录2'
const account = web3.eth.accounts.privateKeyToAccount(privateKey)
web3.eth.accounts.wallet.add(account)

async function get () {
  // 智能合约的查询方法，不需要指定手续费
  return contractObj.methods.get().call()
}

async function set (input) {
  // 智能合约的查询方法，需要指定发起地址和手续费相关设置
  return contractObj.methods.set(input).send({
    from: account.address,
    gas: 300000,
    gasPrice: 1200000000
  })
}

document.querySelector('#set-button').onclick = function setValue () {
  const input = document.querySelector('#set').value
  const stateBox = document.querySelector('#set-states')
  stateBox.innerHTML = '发送中...'
  set(input).then(res => {
    console.log(res)
    stateBox.innerHTML = '上链完成'
  })
}

document.querySelector('#get-button').onclick = function getValue () {
  const getBox = document.querySelector('#get')
  get().then(res => {
    console.log(res)
    getBox.innerHTML = res
  })
}

附录：
1、初始化合约时，需要传递合约地址，该合约地址是通过有Tai币的账户在泰岳链的 Stellar部署（https://publicstellar.taiyuechain.com/）生成的。
2、对于账户的申请，可以去泰岳链对应的开发者平台（https://publicdev.taiyuechain.com/）操作。

Stellar截图：
在这里插入图片描述

Lucky小妃子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
泰岳区块链v4————js原生操作taiweb3js实现简单上链、查询

泰岳联盟链，提供了一个对外开放的npm包Web3tai.js，该包保留了web3原有接口的情况下，增加了兼容TaiyueChain主网的设置和新的接口。代码陆续开源中… …地址说明：npm包：https://www.npmjs.com/package/taiweb3jsTaiWeb3js项目开源代码： https://github.com/taiyuechain/TaiWeb3js本文目的旨在，让前端开发者了解如何在链上存储或者查询：代码结构如下：说明：index.html 入口执.
复制链接

扫一扫