{"id":1772,"date":"2023-03-25T12:09:09","date_gmt":"2023-03-25T04:09:09","guid":{"rendered":""},"modified":"2023-03-25T12:41:12","modified_gmt":"2023-03-25T04:41:12","slug":"%e4%bb%a5%e5%a4%aa%e5%9d%8aethereum-%e6%99%ba%e8%83%bd%e5%90%88%e7%ba%a6%e5%89%8d%e7%ab%af%e9%a1%b5%e9%9d%a2","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/1772.html","title":{"rendered":"\u4ee5\u592a\u574a\u2013\u667a\u80fd\u5408\u7ea6\u524d\u7aef\u9875\u9762"},"content":{"rendered":"


\n <\/head>
\n <\/p>\n

\n

\u4ee5\u592a\u574a(Ethereum) \u2013 \u667a\u80fd\u5408\u7ea6\u524d\u7aef\u9875\u9762<\/h1>\n<\/p><\/div>\n
\n \u73b0\u5728\u6211\u4eec\u6765\u5f00\u53d1\u667a\u80fd\u5408\u7ea6\u7684\u524d\u7aef\u9875\u9762\uff0c\u8ba9\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u524d\u7aef\u9875\u9762\u4e0e\u667a\u80fd\u5408\u7ea6\u4ea4\u4e92\u3002\u8fd9\u4e2a\u9875\u9762\u7684\u4e3b\u8981\u529f\u80fd\u662f\uff1a\n <\/div>\n

\u663e\u793a\u5f53\u524d\u8fde\u63a5\u7684\u5e10\u6237<\/span>
\n \u8bfb\u53d6\u667a\u80fd\u5408\u7ea6\u4e2d\u5b58\u50a8\u7684value\u503c<\/span>
\n \u66f4\u65b0\u667a\u80fd\u5408\u7ea6\u4e2d\u5b58\u50a8\u7684value\u503c<\/span> <\/p>\n

\n \u9875\u9762\u5927\u6982\u7684\u6837\u5b50\uff1a\n <\/div>\n
\n \u4ee5\u592a\u574a\u2013\u667a\u80fd\u5408\u7ea6\u524d\u7aef\u9875\u9762_https:\/\/bianchenghao6.com_\u3010Ethereum \u4ee5\u592a\u574a\u6559\u7a0b\u3011_\u7b2c1\u5f20\n <\/div>\n
\n \u4e3a\u5f00\u53d1\u524d\u7aef\u9875\u9762\uff0c\u9700\u8981\u5b8c\u6210\u4e0b\u9762\u51e0\u9879\u5de5\u4f5c:\n <\/div>\n

\u914d\u7f6eweb\u670d\u52a1\u5668\uff0c\u7528\u6765\u90e8\u7f72\u9875\u9762<\/span>
\n \u521b\u5efa\u524d\u7aef\u7684h5\u3001js\u6587\u4ef6<\/span> <\/p>\n

\u914d\u7f6eweb\u670d\u52a1\u5668<\/h2>\n
\n \u9996\u5148\uff0c\u8ba9\u6211\u4eec\u6765\u914d\u7f6eweb\u670d\u52a1\u5668\u3002\u670d\u52a1\u5668\u4f7f\u7528lite-server\uff0c\u5b89\u88c5lite-server:\n <\/div>\n
\n
$ npm install lite-server--save-dev\r\n<\/pre>\n
<\/code>\n  <\/div>\n
\n    \u9879\u76ee\u6839\u76ee\u5f55\u4e0b\uff0c\u521b\u5efalite-server\u7684\u914d\u7f6e\u6587\u4ef6
\n   bs-config.json<\/b>\uff0c\u5185\u5bb9\u5982\u4e0b\uff1a\n  <\/div>\n
\n
{\r\n  \"server\"<\/span>: {\r\n    \"baseDir\"<\/span>: [\r\n      \".\/src\"<\/span>,\r\n      \".\/build\/contracts\"<\/span>\r\n    ],\r\n    \"routes\"<\/span>: {\r\n      \"\/vendor\"<\/span>: \".\/node_modules\"<\/span>\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
<\/code>\n  <\/div>\n
  baseDir<\/b>\u914d\u7f6e\u544a\u8bc9lite-server\u5c06.\/src<\/b>\u548c.\/build\/contracts<\/b>\u76ee\u5f55\u4f5c\u4e3aweb\u670d\u52a1\u5668\u7684\u6839\u76ee\u5f55\uff0c\u6240\u6709\u6587\u4ef6\u90fd\u53ef\u4ee5\u88ab\u8bbf\u95ee<\/span>
\n  routes<\/b>\u628a.\/node_modules<\/b>\u6620\u5c04\u4e3a\/vendor<\/b>\uff0c\u5728\u5f15\u7528\u6587\u4ef6\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\/vendor<\/b><\/span> <\/p>\n
\u521b\u5efa\u524d\u7aef\u9875\u9762<\/h2>\n
\n    \u9879\u76ee\u6839\u76ee\u5f55\u4e0b\uff0c\u521b\u5efa
\n   src<\/b>\u76ee\u5f55\uff0c\u7528\u4e8e\u5b58\u653e\u524d\u7aef\u9875\u9762\u3002\n  <\/div>\n
\n    \u524d\u7aef\u9875\u9762\u5305\u542b2\u4e2a\u6587\u4ef6\uff1a\n  <\/div>\n
\n
src\/index.html\r\nsrc\/app.js\r\n<\/pre>\n
<\/code>\n  <\/div>\n
index.html<\/h3>\n
\n    \u6dfb\u52a0
\n   index.html<\/b>\u9875\u9762\uff0c\u5185\u5bb9\u5982\u4e0b\uff1a\n  <\/div>\n
\n
<!DOCTYPE html>\r\n<html lang=\"zh-CN\"<\/span>>\r\n  <head>\r\n    <meta charset=\"utf-8\"<\/span>>\r\n    <meta http-equiv=\"X-UA-Compatible\"<\/span> content=\"IE=edge\"<\/span>>\r\n    <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1\"<\/span>>\r\n    <title>\u4ee5\u592a\u574a DApp Demo<\/title>\r\n    <!--HTML5 shim and Respond.js for <\/span>IE8 support of HTML5 elements and media queries-->\r\n    <!--WARNING: Respond.js doesn't work if <\/span>you view the page via file:\/\/-->\r\n    <!--[if <\/span>lt IE 9]>\r\n      <script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"<\/span>><\/script>\r\n      <script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"<\/span>><\/script>\r\n    <![endif]-->\r\n  <\/head>\r\n  <body>\r\n      <h1>\u8d26\u53f7: <span id=\"account\"<\/span>><\/span><\/h1>\r\n      <hr>\r\n      <div id=\"content\"<\/span>>\r\n          <h2>\u667a\u80fd\u5408\u7ea6\uff1aMyContract<\/b><\/h2>\r\n          <p>\u83b7\u53d6\u667a\u80fd\u5408\u7ea6\u4e2d\u7684value\u503c: <span id=\"value\"<\/span>><\/span><\/p>\r\n            <h5>\u8bbe\u7f6evalue\u503c<\/h5>\r\n            <form onSubmit=\"App.set<\/span>(); return <\/span>false;\"<\/span> role=\"form\"<\/span>>\r\n            <div >\r\n                <input id=\"newValue\"<\/span>  type=\"text\"<\/span>><\/input>\r\n            <\/div>\r\n            <button type=\"submit\"<\/span> >\u8bbe\u7f6e<\/button>\r\n            <\/form>\r\n      <\/div>\r\n      <div id=\"loader\"<\/span>>\u6b63\u5728\u52a0\u8f7d...<\/div>\r\n    <\/div>\r\n    <!--jQuery (necessary for <\/span>Bootstrap's JavaScript plugins)-->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"<\/span>><\/script>\r\n    <!--Include all compiled plugins (below), or include individual files as needed-->\r\n    <script src=\"https:\/\/etherscan.io\/jss\/web3.min.js\"<\/span>><\/script>\r\n    <script src=\"vendor\/@truffle\/contract\/dist\/truffle-contract.js\"<\/span>><\/script>\r\n    <script src=\"app.js\"<\/span>><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
<\/code>\n  <\/div>\n
\n    \u8fd9\u4e2a\u6587\u4ef6\u7684\u91cd\u70b9\u662f\u5f15\u5165\u4e86\u51e0\u4e2ajs\u6587\u4ef6\uff1a\n  <\/div>\n
  web3.min.js<\/b> \u2013 web3.js\u5e93\u6587\u4ef6\uff0c\u76f4\u63a5\u4ecehttps:\/\/etherscan.io\/\u5f15\u5165<\/span>
\n  truffle-contract.js<\/b> \u2013 truffle\u63d0\u4f9b\u7684\u5904\u7406\u667a\u80fd\u5408\u7ea6\u7684\u5e93\u6587\u4ef6<\/span> <\/p>\n
\n    \u5b89\u88c5
\n   @truffle\/contract<\/b>\n  <\/div>\n
\n
$ npm install @truffle\/contract--save-dev\r\n<\/pre>\n
<\/code>\n  <\/div>\n
app.js<\/h3>\n
\n    \u6dfb\u52a0javascript\u811a\u672c\u6587\u4ef6\uff1a
\n   app.js<\/b>\n  <\/div>\n
\n
App = {\r\n    web3Provider: null<\/span>,\r\n    contracts: {},\r\n    account: '0x0'<\/span>,\r\n    loading: false<\/span>,\r\n    contractInstance: null<\/span>,\r\n    init: async () => {\r\n        \/\/ \u52a0\u8f7dweb3\r\n        await App.loadWeb3<\/span>()\r\n        \/\/ \u52a0\u8f7d\u667a\u80fd\u5408\u7ea6\r\n        await App.loadContract<\/span>()\r\n        \/\/ \u7f51\u9875\u5237\u65b0\r\n        await App.render<\/span>()\r\n    },\r\n    \/\/ https:\/\/medium.com\/metamask\/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8\r\n    loadWeb3: async () => {\r\n        if <\/span>(typeof web3 !== 'undefined'<\/span>) {\r\n            App.web3Provider = web3.currentProvider\r\n            web3 = new <\/span>Web3(web3.currentProvider)\r\n        } else <\/span>{\r\n            window.alert<\/span>(\"Please connect to Metamask.\"<\/span>)\r\n        }\r\n        \/\/ MetaMask\u65b0\u7248\u672c\u2026\r\n        if <\/span>(window.ethereum) {\r\n            window.web3 = new <\/span>Web3<\/span>(ethereum)\r\n            try <\/span>{\r\n                \/\/ \u5411\u7528\u6237\u8bf7\u6c42\u5e10\u6237\u8bbf\u95ee\r\n                await ethereum.enable<\/span>()\r\n                \/\/ \u7528\u6237\u5141\u8bb8\u4f7f\u7528\u8d26\u6237\r\n                web3.eth.sendTransaction<\/span>({\/* ... *\/ })\r\n            } catch <\/span>(error) {\r\n                \/\/ \u7528\u6237\u62d2\u7edd\u4f7f\u7528\u8d26\u6237\r\n            }\r\n        }\r\n        \/\/ MetaMask\u8001\u7248\u672c\u2026\r\n        else <\/span>if <\/span>(window.web3) {\r\n            App.web3Provider = web3.currentProvider\r\n            window.web3 = new <\/span>Web3<\/span>(web3.currentProvider)\r\n            \/\/ \u65e0\u9700\u5411\u7528\u6237\u8bf7\u6c42\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u8d26\u53f7\r\n            web3.eth.sendTransaction<\/span>({\/* ... *\/ })\r\n        }\r\n        \/\/ \u6ca1\u6709\u5b89\u88c5\u4ee5\u592a\u574a\u94b1\u5305\u63d2\u4ef6(MetaMask)...\r\n        else <\/span>{\r\n            console.log<\/span>('\u9700\u8981\u5b89\u88c5\u4ee5\u592a\u574a\u94b1\u5305\u63d2\u4ef6(\u4f8b\u5982MetaMask)\u624d\u80fd\u4f7f\u7528!'<\/span>)\r\n        }\r\n    },\r\n    loadContract: async () => {\r\n        const contract = await $.getJSON<\/span>('MyContract.json'<\/span>)\r\n        App.contracts.MyContract = TruffleContract<\/span>(contract)\r\n        App.contracts.MyContract.setProvider<\/span>(App.web3Provider)\r\n    },\r\n    render: async () => {\r\n        \/\/ \u5982\u679c\u6b63\u5728\u52a0\u8f7d\uff0c\u76f4\u63a5\u8fd4\u56de\uff0c\u907f\u514d\u91cd\u590d\u64cd\u4f5c\r\n        if <\/span>(App.loading) {\r\n            return\r\n        }\r\n        \/\/ \u66f4\u65b0app\u52a0\u8f7d\u72b6\u6001\r\n        App.setLoading<\/span>(true)\r\n        \/\/ \u8bbe\u7f6e\u5f53\u524d\u533a\u5757\u94fe\u5e10\u6237\r\n        const accounts = await ethereum.enable<\/span>()\r\n        App.account = accounts[0]\r\n        $('#account'<\/span>).html<\/span>(App.account)<\/span>\r\n        \/\/ \u52a0\u8f7d\u667a\u80fd\u5408\u7ea6\r\n        const contract = await App.contracts.MyContract.deployed<\/span>()\r\n        App.contractInstance = contract\r\n        const value = await App.contractInstance.get<\/span>()\r\n        $('#value'<\/span>).html<\/span>(value)<\/span>\r\n        App.setLoading<\/span>(false)\r\n    },\r\n    set: async () => {\r\n        App.setLoading<\/span>(true)\r\n        const newValue = $('#newValue'<\/span>).val<\/span>()<\/span>\r\n        await App.contractInstance.set<\/span>(newValue, {from: App.account})\r\n        window.alert<\/span>('\u66f4\u65b0\u6210\u529f\uff0c\u9875\u9762\u503c\u4e0d\u4f1a\u9a6c\u4e0a\u66f4\u65b0\uff0c\u7b49\u5f85\u51e0\u79d2\u540e\u591a\u5237\u65b0\u51e0\u6b21\u3002'<\/span>)\r\n        App.setLoading<\/span>(false)\r\n    },\r\n    setLoading: (boolean) => {\r\n        App.loading = boolean\r\n        const loader = $('#loader'<\/span>)<\/span>\r\n        const content = $('#content'<\/span>)<\/span>\r\n        if <\/span>(boolean) {\r\n            loader.show<\/span>()\r\n            content.hide<\/span>()\r\n        } else <\/span>{\r\n            loader.hide<\/span>()\r\n            content.show<\/span>()\r\n        }\r\n    }\r\n}\r\n$(document).ready<\/span>(function () {\r\n    App.init<\/span>()\r\n});\r\n<\/pre>\n
<\/code>\n  <\/div>\n
\n    \u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff1a\n  <\/div>\n
  loadWeb3()<\/b>\u51fd\u6570\u6dfb\u52a0\u4e86\u7528Metamask\u5c06web\u6d4f\u89c8\u5668\u8fde\u63a5\u5230\u533a\u5757\u94fe\u6240\u9700\u7684\u914d\u7f6e\u3002\u8fd9\u662f\u76f4\u63a5\u4eceMetamask\u7684\u914d\u7f6e\u89c4\u8303\u4e2d\u590d\u5236\u7c98\u8d34\u7684\uff0c\u5982\u51fd\u6570\u4e0a\u9762\u4ee3\u7801\u6ce8\u91ca\u4e2d\u7684url\u6240\u793a\u3002<\/span>
\n  loadContract()<\/b>\u51fd\u6570\u4f7f\u7528TruffleContract<\/b>\u5e93\u521b\u5efa\u667a\u80fd\u5408\u7ea6\u7684javascript\u5bf9\u8c61\uff0c\u53ef\u4ee5\u7528\u4e8e\u8c03\u7528\u667a\u80fd\u5408\u7ea6\u4e2d\u7684\u51fd\u6570\u3002<\/span>
\n  render()<\/b>\u51fd\u6570\u8bbe\u7f6e\u9875\u9762\u5185\u5bb9\uff0c\u5305\u62ec\u5e10\u6237\u53ca\u667a\u80fd\u5408\u7ea6\u7684value\u503c\u3002<\/span> <\/p>\n
\n    \u73b0\u5728\u542f\u52a8\u670d\u52a1\u5668\uff1a\n  <\/div>\n
\n
$ npm run dev\r\n<\/pre>\n
<\/code>\n  <\/div>\n
\n    \u7136\u540e\u4f7f\u7528\u5b89\u88c5\u4e86MetaMask\u63d2\u4ef6\u7684Chrome\u6d4f\u89c8\u5668\uff0c\u6253\u5f00\u7f51\u5740\uff1ahttp:\/\/localhost:3000\uff0c\u5c31\u53ef\u4ee5\u67e5\u770b\u524d\u7aef\u9875\u9762\uff0c\u4e0e\u533a\u5757\u94fe\u4e0a\u7684\u667a\u80fd\u5408\u7ea6\u8fdb\u884c\u4ea4\u4e92\u3002\n  <\/div>\n
 <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"\u4ee5\u592a\u574a(Ethereum) \u2013 \u667a\u80fd\u5408\u7ea6\u524d\u7aef\u9875\u9762zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[153],"tags":[],"class_list":["post-1772","post","type-post","status-publish","format-standard","hentry","category-ytfjc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1772"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=1772"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/1772\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=1772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=1772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}