• 【区块链实战】——实现简易版dapp【对于用户年龄的获取和更新】

    文章目录

    什么是dapp？

    Dapp就是去中心化应用程序的简称 ，是以某种方式连接到区块链的在线应用程序。从理论上讲，dapp是运行在节点服务器上面的，而dapp的整个后端存储是在区块链而不是服务器上完成的，重点是dapp的数据是存储在区块链上的，不是中心数据库；DApp 的使用方式与其他任何app都相同

    dapp和app交互方式有什么不同？

    从用户角度看没有任务区别，发起请求，完成活动；从开发交互上讲，主要是业务功能存储在智能合约上，存储数据上链，公开透明。
    在这里插入图片描述

    DAPP

    1.界面：前端与集中式应用程序基本相同。

    2.智能合约：首先智能合约是DApp 的一部分，Dapp的前端使用 API 与智能合约进行通信，智能合约负责与区块链网络的交互。

    3.区块链网络：通过智能合约的运行，选择数据并将数据存储在去中心化区块链网络上。

    APP

    1.界面：用户通过网络、移动或桌面界面的前端与应用程序交互。什么是前端，我们手机、电脑或者其他终端安装的这个我们通常说的网络应用app

    2.服务器：来自前端的请求然后被传递到中央服务器。

    3.数据库：前端用户操作的数据（通过服务器请求获取）被收集并存储在单个公司或个人拥有的集中式数据库中

    程序编写

    目的：实现一个用户年龄的更新
    完整项目的github地址:
    firstTruffle-updateAge-dapp

    开发前准备：

    • 开发工具:vsCode
    • 开发框架:node,truffle
    • 开发语言:solidity,JavaScript
    • 钱包:metamask【开发前请确保自己已经拥有一个账户】
    • node环境: macos安装node教程
    • 安装truffle：npm install -g truffle

    初始化项目结构

    mkdir firstTruffle
npm init
truffle init

    • 1
    • 2
    • 3

    执行后项目的结构为：
    在这里插入图片描述

    网络配置

    1.本地虚拟网络-安装gancache客户端【https://github.com/trufflesuite/ganache/releases】安装完成打开自动生产虚拟网络

    2.通常通过infura【https://infura.io/】，先注册后登陆创建项目，选择网络后，会自动生成链接，详情见【infura的使用】
    配置好之后，在根目录下创建.env文件，将infura的私钥和链接配置进行【注意不提交到git上，防止私钥泄露】
    在这里插入图片描述
    然后安装dotenv【将变量从 .env 文件加载到 process.env 】支持
    :const { API_URL, PRIVATE_KEY } = process.env;

    #【全局配置文件】
npm install dotenv
#【提供web链接方法,后续链接钱包地址】
npm install truffle-hdwallet-provider

    • 1
    • 2
    • 3
    • 4

    最终truffle-config.js中配置：其中dev是Gancahe的虚拟网络，本地测试部署是非常快的；rinkeby是以太坊的测试网络地址，可以在infura上找到地址

    const webProvider=require("truffle-hdwallet-provider")
require('dotenv').config();
const { API_URL, PRIVATE_KEY } = process.env;

module.exports = {
  defaultNetwork:"rinkeby",
  networks: {
    dev: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*" // Match any network id
    },
    rinkeby:{
      provider:function(){
        return new webProvider(PRIVATE_KEY, API_URL) 
      },
      network_id: "*" , // Match any network id
      gas: 4500000,
    }
  }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    编写智能合约

    // SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract InfoContract {
    string name;
    uint age;

     /**定义事件*/
    event Instructor(string name, uint age);

    function setInfo(string memory _name, uint _age) public {
        name = _name;
        age = _age;
        /**触发事件 */
        emit Instructor(name, age);
    }

    function getInfo() public view returns(string memory, uint) {
        return (name, age);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    编写部署脚本：

    const Migrations = artifacts.require("Migrations");

module.exports = function (deployer) {
  deployer.deploy(Migrations);
};

    • 1
    • 2
    • 3
    • 4
    • 5

    编写完成后，可以编译下看是否有问题：truffle compile，若成功显示如下结果。内部使用solc编译器
    在这里插入图片描述

    智能合约测试

    #【先引入truffle中合约包，减少开发成本，本期主要是为了测试】
npm install truffle-contract

    • 1
    • 2

    测试用例编写：

    pragma solidity >=0.4.22 <0.9.0;
import "truffle/Assert.sol";
/**地址合约*/
import "truffle/DeployedAddresses.sol";
import "../contracts/InfoContract.sol";

contract TestInfoContract {
   InfoContract info = InfoContract(DeployedAddresses.InfoContract());
   string name;
   uint age;

   function testInfo() public {
     info.setInfo("ABC", 10);

     (name, age) = info.getInfo();

     Assert.equal(name, "ABC", "设置名字出错");
     Assert.equal(age, 10, "设置年龄出错");
   }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    编写完测试用例可以执行:truffle test,若成功则会显示
    在这里插入图片描述

    智能合约部署

    #在dev网络上部署合约:
truffle migrate --network dev

#在rinkeby网络上部署合约: 
truffle migrate --network rinkeby

    • 1
    • 2
    • 3
    • 4
    • 5

    web3j和智能合约交互

    在根目录下创建src文件，再下面创建js文件夹,在js文件夹下引入【web3.min.js，truffle.contract.min.js,jquery.js】这三个公共包，创建app.js，这个是自己新生成，里面也有自己写的注释，方便理解

    App = {
  web3Provider: null,
  contracts: {},

  init: function () {
    return App.initWeb3();
  },

  /**初始化web3,与钱包联通 */
  initWeb3: function () {
    if (window.ethereum) {
      this.provider = window.ethereum;
      try {
        window.ethereum.enable();
      } catch (error) {
        console.error("User denied account access");
      }

      App.web3Provider = web3.currentProvider
    } else if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider
      web3 = new Web3(App.web3Provider);
    } else {
      App.web3Provider = new Web3.providers.HttpProvider('HTTP://127.0.0.1:7545')
      web3 = new Web3(App.web3Provider);
    }

    return App.initContract();
  },

  /**获取账户的合约，绑定事件，并且设置监听*/
  initContract: function () {

    $.getJSON('InfoContract.json', function (data) {
      /**获取合约*/
      App.contracts.InfoContract = TruffleContract(data);
      /**连接账户*/
      App.contracts.InfoContract.setProvider(App.web3Provider);
      /**初始化数据 */
      App.getInfo();
      /**设置监听 */
      App.watchChanged();
    });

    /**绑定事件 */
    App.bindEvents();

  },

  /**合约交互，获取用户的年龄数据，显示在html上 */
  getInfo: function () {
    App.contracts.InfoContract.deployed().then(function (instance) {
      return instance.getInfo.call();
    }).then(function (result) {
      $("#loader").hide();
      $("#info").html(result[0] + ' (' + result[1] + ' years old)');
      console.log(result);
    }).catch(function (err) {
      console.error(err);
    });
  },

  /**更新按钮上绑定事件，调用合约进行更新 */
  bindEvents: function () {
    $("#button").click(function () {
      $("#loader").show();
      web3 = new Web3(App.web3Provider);

      web3.eth.defaultAccount = web3.eth.accounts[0];

      App.contracts.InfoContract.deployed().then(function (instance) {
        return instance.setInfo($("#name").val(), $("#age").val(), { gas: 500000 });
      }).then(function (result) {
        return App.getInfo();
      }).catch(function (err) {
        console.error(err);
      });
    });
  },

  /**监听合约内容发生改变，则页面显示更新 */
  watchChanged: function () {
    App.contracts.InfoContract.deployed().then(function (instance) {
      var infoEvent = instance.Instructor();
      return infoEvent.watch(function (err, result) {
        $("#loader").hide();
        $("#info").html(result.args.name + ' (' + result.args.age + ' years old)');
      });
    });
  }

}


$(function () {
  $(window).load(function () {
    App.init();
  });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99

    页面

    DOCTYPE html>
<html lang="en">
<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>First Truffle DApp Demotitle>
    <link rel="stylesheet" type="text/css" href="main.css">

head>
<body>
    <div class="container">
        <h1> First Truffle DApp Demoh1>

        <h2 id="info">h2>
        

        <label for="name" class="col-lg-2 control-label">姓名：label>
        <input id="name" type="text">

        <label for="name" class="col-lg-2 control-label">年龄：label>
        <input id="age" type="text">

        <button id="button">更新button>

    div>

    <script src="js/jquery.min.js">script>
    <script src="js/web3.min.js">script>
    <script src="js/truffle-contract.min.js">script>
    <script src="js/app.js">script>

body>
html>```



css样式

```css
body {
    background-color:#F0F0F0;
    padding: 2em;
    font-family: 'Raleway','Source Sans Pro', 'Arial';
}
.container {
    width: 50%;
    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;
}

#loader {
    width: 100px;
    display:none;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74

    此时可以执行npm run dev，但是显示文件找不到，那是因为启动的时候找index.html是从根目录开始找的，而index.html在src目录下，所以需要配置下，让从src下找index目录，所以在根目录下创建bs-config.json文件，设置
    {
    “server”:
    { “baseDir”: [“./src”, “./build/contracts”] }
    }
    执行npm run dev，出现页面【此刻会先与自己浏览器钱包metamask链接，选择上传过合约的那个账户；然后输入姓名和年龄点击更新】
    在这里插入图片描述
    最终项目的目录结构为:
    在这里插入图片描述

  • 相关阅读:
    基础课9——自然语言理解
    【uniapp】华为APP真机运行（novas系列）
    Matlab：字符向量元胞数组
    Java的指针、引用与C++的指针、引用的对比
    客户端和服务器之间的时间同步
    3-1 低阶API示范
    BUUCTF misc 专题（112）[MRCTF2020]pyFlag
    怎么申报高新？流程是什么？？
    C#/VB.NET 将XML转为PDF
    【Django】model模型—模型继承
  • 原文地址：https://blog.csdn.net/changyinling520/article/details/126050453