truffle框架带有前端的使用

truffle框架官网提供了很多前端框架，这里我以react为例。

1、新建项目

新建一个项目，叫做demo3，在demo3根目录下，打开cmd，输入以下命令（初次下载时间较长，因为包含很多nodejs的包）：

truffle unbox react

经过较长时间的下载后，会返回如下信息：

√ Preparing to download
√ Downloading
√ Cleaning up temporary files
√ Setting up box
Unbox successful. Sweet!
Commands:
Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Test dapp: cd client && npm test
Run dev server: cd client && npm run start
Build for production: cd client && npm run build

我们demo3的项目结构会变成这样：

接下来将通过这个初始项目，了解如何运行这个项目。

2、编译智能合约

具体步骤与我上一篇博客的内容大致相同，在命令行中输入如下命令：

truffle(develop)>compile

如果智能合约没有问题（因为我们使用了框架中的自带合约，所以不会有报错），我们的项目中，在demo3\client\src\contracts\下会出现与智能合约相对应的json文件：

然后部署智能合约：

truffle(develop)> migrate

正常情况返回如下命令:

⚠️ Important ⚠️
If you’re using an HDWalletProvider, it must be Web3 1.0 enabled or your migration will hang.
Starting migrations…
======================
Network name: ‘develop’
Network id: 4447
Block gas limit: 6721975
1_initial_migration.js
======================
Deploying ‘Migrations’
----------------------
transaction hash: 0xb001f7cbdc3768e8e92641a50ad8e434ffd454af92495758260eaea95988a4bc
Blocks: 0 Seconds: 0
contract address: 0x2DE87dF377fE0B3841D3f4E07A254ACe93d2a89e
account: 0x9A37E2b824bB3FBd4429D0CEb2c7ef3471cb0fE3
balance: 99.99430184
gas used: 284908
gas price: 20 gwei
value sent: 0 ETH
total cost: 0.00569816 ETH
Saving migration to chain.
Saving artifacts
-------------------------------------
Total cost: 0.00569816 ETH
2_deploy_contracts.js
=====================
Deploying ‘SimpleStorage’
\ -------------------------
transaction hash: 0x0659be00ecd2003a0b78414c714c3b6899098a6b94d27101d092f7403ff0dc7e
Blocks: 0 Seconds: 0
contract address: 0x487B6C076809d7Db11C9B5fF75A4289f1A739914
account: 0x9A37E2b824bB3FBd4429D0CEb2c7ef3471cb0fE3
balance: 99.99114582
gas used: 115767
gas price: 20 gwei
value sent: 0 ETH
total cost: 0.00231534 ETH
Saving migration to chain.
Saving artifacts
-------------------------------------
Total cost: 0.00231534 ETH
Summary
=======
Total deployments: 2
Final cost: 0.0080135 ETH

3、打开前端界面

在 demo3\client\node_modules 目录下打开cmd，输入如下命令：

npm start

命令行会返回如下内容：

[email protected] start D:\Desktop\Code\Truffle\demo3\client
react-scripts start
Starting the development server…
Compiled successfully!
You can now view client in the browser.
http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.

接下来，我们的Metamask钱包会提示我们接入React App并产生一笔交易（为何会有一笔交易，之后我会说到），如果你的钱包没有足够代币，可以查看我的上一篇博客：truffle框架初使用，

确认支付后你的浏览器会打开下面这个界面。

我们可以看到上面显示：the stored value is :5，可是我们的智能合约里没有指定值啊（没有指定的话，默认是0）：

这是打开我们demo2\client\src\App.js文件,其中的第42行代码：

// Stores a given value, 5 by default.
await contract.methods.set(5).send({ from: accounts[0] });

这样就明白了，他默认从我们前端给我们set了一个为5的值，这就是为什么每次打开这个界面，都会产生一笔交易，我们可以尝试下把5修改为727，

// Stores a given value, 5 by default.
await contract.methods.set(727).send({ from: accounts[0] });

再打开我们的前端界面，确认支付后，界面就会显示为727了：

小结

我们初步了解了如何建立一个带有前端界面的truffle框架项目，其实很久没写这样的demo了，重写整理时，又发现了之前从没有遇过的问题，以后还是要多动手，多练习，改掉眼高手低的毛病。接下来我就要写前端如何跟合约文件进行交互。

借鉴鸣谢：
以太坊：MetaMask连接私有网络调用合约方法时报错： [ethjs-rpc] rpc error with payload Error: invalid sender
区块链项目开发常见错误-2-rpc error with payload