什么是Dapp？零基础带你搭建一个Dapp

前言：Dapp就是去中心化应用，它和我们平时使用的App（微信，支付宝等）只差了一个去中心化，如何理解这一去中心化？从体验层面来说：Dapp中并没有管理者，大家都是平等的，互相监督；而从技术层面来说：传统的App和部署在服务器的后端产生交互，而Dapp则是和部署在区块链上的智能合约产生交互。

本篇文章带大家实现一个简单Dapp的搭建，通过实战让你进一步了解Dapp，跟着做就行了！

1.DApp实现之合约编写

  • 打开Remix编辑器
  • 新建InfoContract.sol文件，并将下面合约内容Copy上去

编写InfoContract合约

// SPDX-License-Identifier: GPL-3.0pragma solidity 0.8.0;contract InfoContract{string name;uint256 age;function setInfo(string memory _name,uint256 _age) public {name = _name;age = _age;}function getInfo() public view returns(string memory,uint){return (name,age);}
}

2.DApp实现之前端编写

2.1创建一个新文件夹Dapp

并用VScode或者Atom打开该文件夹（选择你自己使用的编辑器即可）

2.2Dapp中创建index.html和index.css

index.html

<html><head><title>Dapp Demo</title><link rel="stylesheet" type="text/css" href="index.css">
</head><body><div class="container"><h1>First Dapp</h1><h2 id="info"></h2><label>姓名：</label><input id="name" type="text"><label>年龄：</label><input id="age" type="text"></body></html>

index.css

body {background-color: #f0f0f0;padding: 2em;font-family: 'Raleway','Source Sans Pro','Arial';}.container{width: 40%;margin: 0 auto;
}label{display: block;margin-bottom:10px;
}input{padding: 10px;width: 50%;margin-bottom: 1em;
}button{margin: 2em 0;padding: 1em 4em;display: block;
}#info{padding: 1em;background-color: #fff;margin: 1em 0;border: 1px solid;
}

2.3效果图预览

3. DApp实现之Web3与合约交互

3.1安装web3库

推荐使用第三种方法，因为不用安装任何环境

- Node

npm install web3

- Yarn

yarn add web3

- CDN

由于以太坊舍弃了web3的脚本使用方法，所以这里我们临时使用替代脚本

<!-- The legacy-web3 script must run BEFORE your other scripts. --><script src="https://unpkg.com/@metamask/legacy-web3@latest/dist/metamask.web3.min.js"></script><!-- 或者用 --><script src="https://unpkg.com/@metamask/legacy-web3@latest/dist/metamask.web3.js"></script>

Tip: 若web3难以安装，建议参考这篇文章解决npm安装web3模块失败问题

3.2 Web3调用合约

参考文档：web3.eth.contract

3.2.1获取合约的abi

什么是abi？可以去复习之前的课程

  • 回到Remix编辑器的编译器界面
  • 点击右下角的Compilation Details按钮

  • 复制abi内容

3.2.2部署合约

需要保证你的小狐狸钱包里有bnb余额

  1. 选择Injected Web3环境，点击Deploy部署

  1. 在小狐狸钱包中点击确认，交上部署合约的gas费

  1. 部署成功！

  1. 在左侧已部署合约中Copy合约地址

我的合约地址是0x528f48F5EbCbf25061e8814328A0073294ED58Cb

3.2.3编写Script脚本

<script>console.log(web3)web3.setProvider('ws://localhost:8545');//获取介绍内容const introduction = document.getElementById('info')//通过abi初始化合约var infoContract = web3.eth.contract([{"inputs": [],"name": "getInfo","outputs": [{"internalType": "string","name": "","type": "string"},{"internalType": "uint256","name": "","type": "uint256"}],"stateMutability": "view","type": "function"},{"inputs": [{"internalType": "string","name": "_name","type": "string"},{"internalType": "uint256","name": "_age","type": "uint256"}],"name": "setInfo","outputs": [],"stateMutability": "nonpayable","type": "function"}]);//通过地址实例化合约var info = infoContract.at('0x528f48F5EbCbf25061e8814328A0073294ED58Cb')//从合约获取消息info.getInfo(function (error, result) {if (!error) {//修改介绍内容introduction.innerHTML = result[0] + '(' + result[1] + 'years old)'}})</script>

3.2.4 更改合约信息

注意仍要在injected web3环境下更改，并且这将会收取一定的gas费用，小狐狸钱包上点击确认即可！

更改成功！

3.2.5前端显示

恭喜你！至此你已经实现了人生中第一次与智能合约的交互！

什么是Dapp？带你从零开始搭建一个Dapp相关推荐

  1. 【微前端】手把手带你从零开始搭建一个qiankun+vue微前端应用

    前言 小伙伴们大家好.上一篇文章中我们分享了qiankun的一些概念和特性,以及基于qiankun实现有一个微前端应用的大概步骤,最后以qiankun加vue2.0为例给出了快速搭建qiankun微前 ...

  2. 从零开始搭建一个GIS开发小框架（一）——基本框架

    目录 1.概述 1.1 项目背景 1.2 传送门 2.技术选型:GMap.NET 3.底图功能实现 2.1 方式一:在线地图(以高德为例) 2.2 greatmaps生成底图(瓦片地图) 3.搭建主程 ...

  3. spring boot：从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器

    spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器 一.Mybatis plus代码自动生成器 1.引入配置 2.创建Controller 3.执行m ...

  4. spring boot：从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2

    spring boot:从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2 一.logback.xml配置日志美化 二.集成swagger2 1.引入依赖 2.编写配置文件 ...

  5. 从零开始搭建一个语音对话机器人

    点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] ♪ 点击上方绿标 收听从零开始搭建一个语音对话机器人 从零开始搭建一个语音对话机器人 目录 01-初心缘由 01-准备工作 02-语音机器 ...

  6. espeak 中文语音包_从零开始搭建一个语音对话机器人

    点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] ♪ 点击上方绿标 收听从零开始搭建一个语音对话机器人 从零开始搭建一个语音对话机器人 目录 01-初心缘由 01-准备工作 02-语音机器 ...

  7. 从零开始搭建一个管理系统-vue3.0项目创建-----1

    从零开始搭建一个管理系统-vue3.0项目创建-----1 讲在前面 webpack构建项目 代码编辑器 依赖修改 码云代码地址 讲在前面 假设你已了解关于 HTML.CSS. JavaScript ...

  8. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  9. 从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）

    从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...

最新文章

  1. 预告：Javascript全栈开发的系列文章
  2. 一步步学习 Spring Data 系列之JPA（一）
  3. 缺乏运动 七种病早早光临
  4. python怎么绘制渐变图_用Python画colorbar渐变图+修改刻度大小+修改渐变颜色
  5. Ubuntu16.04 Caffe 编译安装步骤记录
  6. 【selenium 小练手 抓取某大厂TP】
  7. 此项目需要迁移_AndroidX 迁移，看完它应该就够了
  8. java构造器构造方法_Java构造器（构造方法/constructor）
  9. http awstats安装
  10. cc2530设计性实验代码七
  11. pyecharts世界地图map，geo可视化优化调整
  12. python就业班完整视频_('传智 Python基础班+就业班 最新完整视频教程',)
  13. python两个表格相同数据筛选的方法_浅谈pandas筛选出表中满足另一个表所有条件的数据方法...
  14. 带有Lowe’s算法的SURF特征提取和匹配
  15. [转]飞鸟集 Stray Bird
  16. 股票学习-量柱和k线-第二天
  17. 分布式系列_MQ_01_MQ简介
  18. 《Python Excel 教程》
  19. fr4速度 微带线_微带线和带状线(microstrip and stripline)
  20. win7美化_极致美化 | 我们如何把 Windows「改造」成 mac OS

热门文章

  1. java swing是什么意思英语_swing是什么意思_swing的翻译_音标_读音_用法_例句_爱词霸在线词典...
  2. java中pack()
  3. linux中find命令列举,Linux find命令常见用法汇总
  4. [蓝桥杯][2013年第四届真题]核桃的数量（最小公倍数巧妙暴力）
  5. 数字图像处理——直方图累计
  6. tty初探 — uart驱动框架分析
  7. SQL通配符——LIKE
  8. kail linux中的渗透测试工具
  9. 前向型神经网络之BPNN(附源码)
  10. python的thinker界面文本框实时删除刷新解决方案