以太坊Dapp开发与metamask交互

首先在浏览器当中点击附加组件，在搜索栏当中搜索MetaMask，并进行安装插件

接下来启动我们的ganache-cli自动生成十个账户

[root@ dapp]# ganache-cli
Ganache CLI v6.12.2 (ganache-core: 2.13.2)

Available Accounts
==================
(0) 0x6FdCbD7ebFB4e4DcF2E03F4e3f54D964e4Ff75c3 (100 ETH)
(1) 0x668218904021E7280adbab6B8B2d6D5113650bc0 (100 ETH)
(2) 0x9fe8388DDDC42401cd5aCd867d378E1620dF85F1 (100 ETH)
(3) 0x4B2742Ca83e1C57b6c2E9B3b9B7dAcD81154Af39 (100 ETH)
(4) 0x5d50A6CFe5FF355E6E1C140361765fC257AD1D5E (100 ETH)
(5) 0xA16a54014509119a8fB2F91ae8dd33396D374514 (100 ETH)
(6) 0xB0Dd860F056964A52fC107436C1856A58aB62b49 (100 ETH)
(7) 0xe4A34844719dbA05bdFd1C418085D4c8C5055957 (100 ETH)
(8) 0x128C7Bb0B3539516b492F44cfC6e6B436C5219DB (100 ETH)
(9) 0xaC20901746083874f2679d57fdd87DeE1748F886 (100 ETH)

Private Keys
==================
(0) 0x29c9555adefcb031617d25df798656c226d2164057a35c3622e5883505e1442d
(1) 0x542506f9127a553dcb47a93fec4ba8e066b0cbc6969bb2c258c78eec96badf5a
(2) 0x80e5e638e36d7009a9b8eb72c9cf7b7a6a312da09936b135c0a9cc5e50a3746c
(3) 0x88ea36df07fe5a27d03efcbe655a938ef8bdbbe1098528b6c0868202ab26bdd4
(4) 0x9670e115795a3b0da454245d58cd4d64a9ccb2b35396d940f141410f9eff96e1
(5) 0x796c6c4c86e3781fd7d20cc7f0e1c3a668493a0f7ab91f3df185da3b2f477414
(6) 0x54a9fb28dff077de7dec91f4405acebe04533b66c3b3d0af08fb2c68b1aec4ae
(7) 0x4798e9ab9b3cefd5858d85fb1f9eb89ad7a6657970c6bfff5565fe01293f49e3
(8) 0x38ed55b0c54727db495f8afc701b199210dd5f4ab4a127afa8478773038f03a0
(9) 0x8c0c211f4dd3cf49f44d80518afd0d8c979780c1042f024175a0e332e5d9fc97

HD Wallet
==================
Mnemonic:      palace equip fever avoid unfold delay dirt visa wise matter alley sleep
Base HD Path:  m/44'/60'/0'/0/{account_index}

Gas Price
==================
20000000000

Gas Limit
==================

从上面的十个私钥当中随便选一个导入账户，这里我选的是0x29c9555adefcb031617d25df798656c226d2164057a35c3622e5883505e1442d，大家要根据自己ganache-cli生成的十个私钥当中选一个

这里大家需要记住选择测试网络8545

下一步我们把我们上一节的投票Dapp启动

[root@ backupvote]# truffle compile

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

[root@ backupvote]# truffle migrate

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.



Starting migrations...
======================
> Network name:    'development'
> Network id:      1638411947173
> Block gas limit: 6721975 (0x6691b7)


1_initial_migration.js
======================

   Deploying 'Migrations'
   ----------------------
   > transaction hash:    0x2608eeef721640acda9b7c06e430ac178cd9af555661e0a6edf88e2e2ca3e426
   > Blocks: 0            Seconds: 0
   > contract address:    0x91D034D2Ad29d01a8aA6f886A48E55B028Cd3231
   > block number:        1
   > block timestamp:     1638413460
   > account:             0x6FdCbD7ebFB4e4DcF2E03F4e3f54D964e4Ff75c3
   > balance:             99.9967165
   > 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 'Voting'
   ------------------
   > transaction hash:    0xabcd2f7b468188858e8ab3bad2eddf944b5270aaf767d76477e4edfe929b4c6c
   > Blocks: 0            Seconds: 0
   > contract address:    0x24A57B28F8e6AD9639AaB511Dc73DD548737907a
   > block number:        3
   > block timestamp:     1638413462
   > account:             0x6FdCbD7ebFB4e4DcF2E03F4e3f54D964e4Ff75c3
   > balance:             99.99048182
   > gas used:            269393 (0x41c51)
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00538786 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00538786 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0.00867136 ETH


[root@ backupvote]# cd app
[root@ app]# npm run dev

> [email protected] dev
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /root/dapp/backupvote/app/dist
ℹ ｢wdm｣: Hash: a42d43d12499d305acec
Version: webpack 4.41.2
Time: 11873ms
Built at: 2021/12/02 上午10:51:38
     Asset       Size  Chunks             Chunk Names
index.html  439 bytes          [emitted]  
  index.js   2.42 MiB    main  [emitted]  main
Entrypoint main = index.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {main} [built]
[../build/contracts/Voting.json] 91.3 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/web3/src/index.js] 2.01 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 2.63 KiB {main} [built]
    + 350 hidden modules
ℹ ｢wdm｣: Compiled successfully.

现在我们的dapp就成功启动了，在浏览器当中输入127.0.0.1:8080,并让MetaMask插件连接到当前URL


现在来测试我们的投票Dapp，当我们给Bob进行投票时，MetaMask会自动跳出，需要我们确认之后才能给Bob进行投票