【以太坊DAPP开发】2 前端页面及web3的实现

作者: gavin 分类: 区块链 发布时间: 2021-04-24 20:34

1、完成html和css部分的代码编写

Index.html

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html>
<head>
<title> First DApp Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
</head>
<body>
<div class="container">
<h1>First DApp Demo</h1>
<h2 id="info"></h2>
<label>姓名:</label>
<input id="name" type="text">
<label>年龄:</label>
<input id="age" type="text">
<button id="button">更新</button>
</div>
<script>
console.log("web3:" + web3);
</script>
</body>
</html>
<html> <head> <title> First DApp Demo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="main.css"> <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> </head> <body> <div class="container"> <h1>First DApp Demo</h1> <h2 id="info"></h2> <label>姓名:</label> <input id="name" type="text"> <label>年龄:</label> <input id="age" type="text"> <button id="button">更新</button> </div> <script> console.log("web3:" + web3); </script> </body> </html>
<html>
	<head>
		<title> First DApp Demo</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="main.css">
                <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
	</head>
	<body>
               <div class="container">
		<h1>First DApp Demo</h1>
		<h2 id="info"></h2>
		<label>姓名:</label>
		<input id="name" type="text">

		<label>年龄:</label>
		<input id="age" type="text">

		<button id="button">更新</button>
               </div>
            <script>
              console.log("web3:" + web3);
            </script>
	</body>

</html>

main.css

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
body{
background-color:#f0f0f0;
padding:2em;
font-family:'Raleway','Source Sans Pro', 'Arial';
}
body{ background-color:#f0f0f0; padding:2em; font-family:'Raleway','Source Sans Pro', 'Arial'; }
body{
	background-color:#f0f0f0;
	padding:2em;
	font-family:'Raleway','Source Sans Pro', 'Arial';
}

2、完成DAPP的web3.js的对接测试

https://github.com/ChainSafe/web3.js

Gavin‘s 开发笔记