大家好,今天小编来为大家解答以下的问题，关于宠物论坛网站源码分享，宠物论坛最新留言这个很多人还不知道，现在让我们一起来看看吧！
1.文章摘要
【本文目标】
通过逐步的指导和截图举证，一步步带领一个技术小白完成一个宠物商店DAPP应用的开发和部署。
【环境前置条件】
参考《第一课如何在WINDOWS环境下搭建以太坊开发环境》，已完成Ubuntu的安装，已完成TRUFFLE，Ganache-cli，lite-server的安装；
本案例是通过WINDOWS的XSHELL客户端同本机的Ubuntu命令操作进行的。
已在本地WIDOWS环境完成MetaMask轻钱包客户端的安装。
最好遵循从头开始的课程学习顺序。不过如果你想半途插入实操学习，问题也不大，遇到障碍时反向找对应文章的指导内容即可完成。
【技术收获】
从本实践中，你可以学习到：
搭建智能合约开发环境
创建Truffle项目
编写智能合约
编译和部署智能合约到区块链
如何通过Web3和智能合约交互
MetaMask的使用
【实操课程列表】
第一课如何在WINDOWS环境下搭建以太坊开发环境
第二课如何实现以太坊最简智能合约“HelloWorld”的运行
第四课以太坊开发框架Truffle从入门到实战
第六课技术小白如何开发一个DAPP区块链应用(以宠物商店为例)
第七课技术小白如何在45分钟内发行通证(TOKEN)并上线交易
第八课如何调试以太坊官网的智能合约众筹案例
【说明】未列出的课程为知识普及的非实操类课程，所有区块链文章参考“区块链入口”专栏。
2.下载/编写TRUFFLE框架的智能合约
项目背景
Pete有一个宠物店，有16只宠物狗，他想开发一个去中心化应用，让大家来领养宠物。
在trufflebox中，已经提供了pet-shop的网站部分的代码，我们只需要编写合约及交互部分。
【官网原始参考】
代码框架下载：http://truffleframework.com/boxes/pet-shop
开发指导：http://truffleframework.com/tutorials/pet-shop
环境搭建
环境需要NodeJS,Truffle，Ganache-Cli,Lite-Server,Meta-Mask等程序，按照步骤可以参考《第一课如何在WINDOWS环境下搭建以太坊开发环境》搜索对应关键字在已安装的UBUNTU操作系统完成安装。
安装Node:
sudoapt-getinstallcurl
curl-sLhttps://deb.nodesource.com/setup_6.x|sudo-Ebash
sudoapt-getinstall-ynodejs
安装Truffle：
npminstall-gtruffle
安装Ganache
sudonpminstall-gganache-cli
【说明】Ganache（或GanacheCLI）已经取代了testrpc。
4.Lite-Server,Meta-Mask安装
本文后面章节描述。
创建项目
建立项目目录并进入
mkdirdapp-guide-pet-shop
cddapp-guide-pet-shop
使用truffleunbox创建项目下载官方程序代码
truffleunboxpet-shop
输出成功结果：
Downloading…\nUnpacking…\nSettingup…\nUnboxsuccessful.Sweet!\nCommands:\nCompile:trufflecompile\nMigrate:trufflemigrate\nTestcontracts:truffletest\nRundevserver:npmrundev\n
项目目录结构
contracts/智能合约的文件夹，所有的智能合约文件都放置在这里，里面包含一个重要的合约Migrations.sol（稍后再讲）
migrations/用来处理部署（迁移）智能合约，迁移是一个额外特别的合约用来保存合约的变化。
test/智能合约测试用例文件夹
truffle.js/配置文件
其他代码可以暂时不用管
【说明】如果想了解TRUFFLE框架更详细的内容，可参考文章《第四课以太坊开发框架Truffle从入门到实战》
编写智能合约
智能合约承担着分布式应用的后台逻辑和存储。智能合约使用solidity编写。
在contracts目录下，添加合约文件Adoption.sol
pragmasolidity^0.4.17;\ncontractAdoption{\naddress[16]publicadopters;//保存领养者的地址\n//领养宠物\nfunctionadopt(uintpetId)publicreturns(uint){\nrequire(petId>=0&&petId<=15);//确保id在数组长度内\nadopters[petId]=msg.sender;//保存调用这地址\nreturnpetId;\n}\n//返回领养者\nfunctiongetAdopters()publicviewreturns(address[16]){\nreturnadopters;\n}\n}\n
编译部署智能合约
Truffle集成了一个开发者控制台，可用来生成一个开发链用来测试和部署智能合约。
编译
Solidity是编译型语言，需要把可读的Solidity代码编译为EVM字节码才能运行。
进入dapp的根目录dapp-guide-pet-shop执行命令，
>trufflecompile\n
输出
Compiling./contracts/Adoption.sol…
Writingartifactsto./build/contracts
编写部署代码
编译之后，就可以部署到区块链上。
在migrations文件夹下已经有一个1_initial_migration.js部署脚本，用来部署Migrations.sol合约。
Migrations.sol用来确保不会部署相同的合约。
现在我们来创建一个自己的部署脚本2_deploy_contracts.js
varAdoption=artifacts.require(“Adoption”);\nmodule.exports=function(deployer){\ndeployer.deploy(Adoption);\n};\n
安装启动Ganache测试环境
在执行部署之前，需要确保有一个区块链运行,可以使用
Ganache来开启一个私链来进行开发测试。
参考文章《第一课如何在WINDOWS环境下搭建以太坊开发环境》对应的章节，完成ganache-cli的安装。
sudonpminstall-gganache-cli
在新的命令行窗口运行ganache-cli程序：
cd/usr/work/Ganache
ganache-cli>>trace.log
这个>>目的是把ganache-cli的结果输出到文件，便于后面复制钱包地址用于查看ETH余额。作者实践时把这2行命令合并成一行执行。
ganache-cli>>/usr/work/Ganache/trace.log
这个命令窗口用于运行Ganache程序输出，不可关闭。需要新开一个命令窗口用于执行TRUFFLE的命令。
输出截图
打开trace.log文件，可查看默认启动的10个钱包账户和对应的私钥地址：
AvailableAccounts\n==================\n(0)0x7554cc8c721712adde43e67a5669225bbe8f21f6\n(1)0x3e6ce6a43c1fa565b5b90963bef090625d3edc6c\n(2)0xeb2eb6ed4b325e77f5a597497ec5ffaa2f5c2650\n(3)0x1de061d5f225533f7e3c38a5905a6ca2ecb3e55a\n(4)0x3ec2e1ed3f47fc7ab9cca1fe09afe9fd1feb789b\n(5)0xf27a303880b73a0a287a2e5dc1286098fb49ed63\n(6)0xf3c007932e1de894503166aee3cbf85b4aff0188\n(7)0xe7655733659c14c7c83fb71bd40dc51796592d96\n(8)0x507722000223ca96ac646198709b9ae3f7f49a5a\n(9)0x82b087a83f72cc7dd5ca6ac7787a366b2c3ff143\nPrivateKeys\n==================\n(0)629551aa45c594ce822c5b4a378d01cf46fb57c15b69a61eb400a4867ffab002\n(1)a90103a95ed805acc52782eaa29eb061f6c2a9431fed3ac18a683ea3143a29b6\n(2)c2b13ce370fb235997dc4783ce591a22e5b3909e934dc7c0f61797ce57d5059d\n(3)841d0e1d3dc658ad2f308c7292b4d5c40da158d170cf3ed9001c64b8352cd0c2\n(4)255225aedba340b6ec62e6c86a6202535d7382704b129d022461c69b8341d2dd\n(5)c3fd784fc7a46edb5e7cba9e90120e51152a3fbe2d8b97a0c3106791d3bbe87e\n(6)f8f90b056c419464d48dcd12ac8e326a31ebe300ea5e245876fe0308c511fbac\n(7)09e20553971b044c1fda8ac88f2ed1dcdff6af0889fc05c2ad4374c52d4f52d7\n(8)142643d0fb6f4a78e0fd291a568b784869927d8f8eee87bf3fbdbf493ec3f425\n(9)8f89d4a05582193cc32f800ecf9419f35b5384abc5db42afd4ec016a54d27716\n
配置以太坊客户端本地环境
ruffle.js是truffle的配置文件,位于dapp-guide-pet-shop目录下，启动好以太坊本地结点以后，我们需要让truffle去识别它并使用它，这就需要在truffle.js中配置相关属性：
module.exports={\n//See<http://truffleframework.com/docs/advanced/configuration>\n//formoreaboutcustomizingyourTruffleconfiguration!\nnetworks:{\ndevelopment:{\nhost:”127.0.0.1″,\nport:8545,\nnetwork_id:”*”//Matchanynetworkid\n}\n}\n};\n
执行部署命令
接下来在新的命令窗口执行部署命令
cd/usr/work/dapp-guide-pet-shop
trufflemigrate
执行后，有一下类似的输出，
Usingnetwork’development’.
Runningmigration:1_initial_migration.js
DeployingMigrations…
…0x29612ceea67bc946cc6ae82afbedc546f9a53ba8cab5d804f9025fb8f15e48f8
Migrations:0x8af912046664ba26738b811c34068d42216528c0
Savingsuccessfulmigrationtonetwork…
…0x6c968a3c492439ab22028e1956360a6b73a02716c436b15234cd29804dac7298
Savingartifacts…
Runningmigration:2_deploy_contracts.js
DeployingAdoption…
…0x27448e4f75b608015f3670e3650cf607c882fe7f1a32f98e8a94bf7a406c871c
Adoption:0xe42f434105a7e0eacf4f4229c76e1e135d536db6
Savingsuccessfulmigrationtonetwork…
…0x9375cd6fa143d01a520c5ed0d46cfe859f482b01e37cf678d751c5db6a278e5f
Savingartifacts…
查看Ganache-cli的输出文件：trace.log,可以看到区块链状态的变化，现在产生了4个区块。
net_version\neth_accounts\neth_accounts\nnet_version\nnet_version\neth_sendTransaction\nTransaction:0x29612ceea67bc946cc6ae82afbedc546f9a53ba8cab5d804f9025fb8f15e48f8\nContractcreated:0x8af912046664ba26738b811c34068d42216528c0\nGasusage:268407\nBlockNumber:1\nBlockTime:TueApr10201809:10:18GMT+0800(CST)\neth_newBlockFilter\neth_getFilterChanges\neth_getTransactionReceipt\neth_getCode\neth_uninstallFilter\neth_sendTransaction\nTransaction:0x6c968a3c492439ab22028e1956360a6b73a02716c436b15234cd29804dac7298\nGasusage:41981\nBlockNumber:2\nBlockTime:TueApr10201809:10:19GMT+0800(CST)\neth_getTransactionReceipt\neth_accounts\nnet_version\nnet_version\neth_sendTransaction\nTransaction:0x27448e4f75b608015f3670e3650cf607c882fe7f1a32f98e8a94bf7a406c871c\nContractcreated:0xe42f434105a7e0eacf4f4229c76e1e135d536db6\nGasusage:247573\nBlockNumber:3\nBlockTime:TueApr10201809:10:19GMT+0800(CST)\neth_newBlockFilter\neth_getFilterChanges\neth_getTransactionReceipt\neth_getCode\neth_uninstallFilter\neth_sendTransaction\nTransaction:0x9375cd6fa143d01a520c5ed0d46cfe859f482b01e37cf678d751c5db6a278e5f\nGasusage:26981\nBlockNumber:4\nBlockTime:TueApr10201809:10:20GMT+0800(CST)\neth_getTransactionReceipt\n
这时说明已经智能合约已经部署好了。
测试
现在我们来测试一下智能合约，测试用例可以用JavaScriptorSolidity来编写，这里使用Solidity。
在test目录下新建一个TestAdoption.sol，编写测试合约
pragmasolidity^0.4.17;\nimport”truffle/Assert.sol”;//引入的断言\nimport”truffle/DeployedAddresses.sol”;//用来获取被测试合约的地址\nimport”../contracts/Adoption.sol”;//被测试合约\ncontractTestAdoption{\nAdoptionadoption=Adoption(DeployedAddresses.Adoption());\n//领养测试用例\nfunctiontestUserCanAdoptPet()public{\nuintreturnedId=adoption.adopt(8);\nuintexpected=8;\nAssert.equal(returnedId,expected,”AdoptionofpetID8shouldberecorded.”);\n}\n//宠物所有者测试用例\nfunctiontestGetAdopterAddressByPetId()public{\n//期望领养者的地址就是本合约地址，因为交易是由测试合约发起交易，\naddressexpected=this;\naddressadopter=adoption.adopters(8);\nAssert.equal(adopter,expected,”OwnerofpetID8shouldberecorded.”);\n}\n//测试所有领养者\nfunctiontestGetAdopterAddressByPetIdInArray()public{\n//领养者的地址就是本合约地址\naddressexpected=this;\naddress[16]memoryadopters=adoption.getAdopters();\nAssert.equal(adopters[8],expected,”OwnerofpetID8shouldberecorded.”);\n}\n}\n
Assert.sol及DeployedAddresses.sol是Truffle框架提供，在test目录下并不提供truffle目录。
TestAdoption合约中添加adopt的测试用例
运行测试用例
在终端中，执行
truffletest
如果测试通过，则终端输出：
Usingnetwork’development’.\nCompiling./contracts/Adoption.sol…\nCompiling./test/TestAdoption.sol…\nCompilingtruffle/Assert.sol…\nCompilingtruffle/DeployedAddresses.sol…\nCompilationwarningsencountered:\ntruffle/Assert.sol:1563:9:Warning:Useofthe”var”keywordisdeprecated.\nvarnstr=_itoa(value,10);\n^——^\n,truffle/Assert.sol:1580:9:Warning:Useofthe”var”keywordisdeprecated.\nvarnstr=_utoa(value,10);\n^——^\n,truffle/Assert.sol:1597:9:Warning:Useofthe”var”keywordisdeprecated.\nvarnstr=_ltoa(value);\n^——^\n,truffle/Assert.sol:1347:13:Warning:Invokingeventswithout”emit”prefixisdeprecated.\nTestEvent(true,””);\n^—————–^\n,truffle/Assert.sol:1349:13:Warning:Invokingeventswithout”emit”prefixisdeprecated.\nTestEvent(false,message);\n^———————–^\nTestAdoption\n?testUserCanAdoptPet(246ms)\n?testGetAdopterAddressByPetId(231ms)\n?testGetAdopterAddressByPetIdInArray(287ms)\n3passing(2s)\n
3.创建用户接口和智能合约交互
我们已经编写和部署及测试好了我们的合约，接下我们为合约编写UI，让合约真正可以用起来。
在TruffleBoxpet-shop里，已经包含了应用的前端代码，代码在src/文件夹下。
在编辑器中打开src/js/app.js
可以看到用来管理整个应用的App对象，init函数加载宠物信息，就初始化web3.
web3是一个实现了与以太坊节点通信的库，我们利用web3来和合约进行交互。
初始化web3
接下来，我们来编辑app.js修改initWeb3():
删除注释，修改为：
initWeb3:function(){\n//Isthereaninjectedweb3instance?\nif(typeofweb3!==’undefined’){\nApp.web3Provider=web3.currentProvider;\n}else{\n//Ifnoinjectedweb3instanceisdetected,fallbacktoGanache\nApp.web3Provider=newWeb3.providers.HttpProvider(‘http://localhost:8545’);\n}\nweb3=newWeb3(App.web3Provider);\nreturnApp.initContract();\n}\n
代码中优先使用MetaMask提供的web3实例，如果没有则从本地环境创建一个。
实例化合约
使用truffle-contract会帮我们保存合约部署的信息，就不需要我们手动修改合约地址，修改initContract()代码如下：
initContract:function(){\n//加载Adoption.json，保存了Adoption的ABI（接口说明）信息及部署后的网络(地址)信息，它在编译合约的时候生成ABI，在部署的时候追加网络信息\n$.getJSON(‘Adoption.json’,function(data){\n//Getthenecessarycontractartifactfileandinstantiateitwithtruffle-contract\n//用Adoption.json数据创建一个可交互的TruffleContract合约实例。\nvarAdoptionArtifact=data;\nApp.contracts.Adoption=TruffleContract(AdoptionArtifact);\n\n//Settheproviderforourcontract\nApp.contracts.Adoption.setProvider(App.web3Provider);\n\n//Useourcontracttoretrieveandmarktheadoptedpets\nreturnApp.markAdopted();\n});\nreturnApp.bindEvents();\n},\n
处理领养
修改markAdopted()代码：
markAdopted:function(adopters,account){
varadoptionInstance;
App.contracts.Adoption.deployed().then(function(instance){
adoptionInstance=instance;
//调用合约的getAdopters(),用call读取信息不用消耗gas
returnadoptionInstance.getAdopters.call();
}).then(function(adopters){
for(i=0;i<adopters.length;i++){
if(adopters[i]!==’0x0000000000000000000000000000000000000000′){
$(‘.panel-pet’).eq(i).find(‘button’).text(‘Success’).attr(‘disabled’,true);
}
}
}).catch(function(err){
console.log(err.message);
});
}
修改handleAdopt()代码：
handleAdopt:function(event){\nevent.preventDefault();\nvarpetId=parseInt($(event.target).data(‘id’));\nvaradoptionInstance;\n//获取用户账号\nweb3.eth.getAccounts(function(error,accounts){\nif(error){\nconsole.log(error);\n}\nvaraccount=accounts[0];\nApp.contracts.Adoption.deployed().then(function(instance){\nadoptionInstance=instance;\n//发送交易领养宠物\nreturnadoptionInstance.adopt(petId,{from:account});\n}).then(function(result){\nreturnApp.markAdopted();\n}).catch(function(err){\nconsole.log(err.message);\n});\n});\n}\n
4.安装和配置lite-server
【定义】lite-server是一个全功能的网站架设工具软件包轻量级的，仅适用于开发的node服务器，它仅支持webapp。它能够为你打开浏览器,当你的html或是JavaScript文件变化时，它会识别到并自动帮你刷新浏览器,还能使用套接字自动注入变化的CSS,当路由没有被找到时，它将自动后退页面。
参考文章《第一课如何在WINDOWS环境下搭建以太坊开发环境》的”（8）安装lite-server【可选】”章节完成lite-server的安装。
bs-config.json文件指示了lite-server的工作目录。
{\n”server”:{\n”baseDir”:[“./src”,”./build/contracts”]\n}\n}\n
./src是网站文件目录
./build/contracts是合约输出目录
以此同时，在package.json文件的scripts中添加了dev命令：
{\n”name”:”pet-shop”,\n”version”:”1.0.0″,\n”description”:””,\n”main”:”truffle.js”,\n”directories”:{\n”test”:”test”\n},\n”scripts”:{\n”dev”:”lite-server”,\n”test”:”echo\\”Error:notestspecified\\”&&exit1″\n},\n”author”:””,\n”license”:”ISC”,\n”devDependencies”:{\n”lite-server”:”^2.3.0″\n}\n}\n
当在新的命令窗口运行npmrundev的时候，就会启动lite-server
cd/usr/work/dapp-guide-pet-shop
npmrundev
正常的运行结果有如下类似输出内容：
>pet-shop@1.0.0dev/usr/work/dapp-guide-pet-shop\n>lite-server\n**browser-syncconfig**\n{injectChanges:false,\nfiles:[‘./**/*.{html,htm,css,js}’],\nwatchOptions:{ignored:’node_modules’},\nserver:\n{baseDir:[‘./src’,’./build/contracts’],\nmiddleware:[[Function],[Function]]}}\n[Browsersync]AccessURLs:\n—————————————\nLocal:http://localhost:3000\nExternal:http://192.168.80.144:3000\n—————————————\nUI:http://localhost:3001\nUIExternal:http://192.168.80.144:3001\n—————————————\n[Browsersync]Servingfilesfrom:./src\n[Browsersync]Servingfilesfrom:./build/contracts\n[Browsersync]Watchingfiles…\n
5.安装MetaMask和配置区块链网络
安装MetaMask
【定义】MetaMask是一款插件形式的以太坊轻客户端，开发过程中使用MetaMask和我们的dapp进行交互是个很好的选择。
作者是在本地WINDOWS的CHROME浏览器上安装MetaMask钱包工具，具体的安装方法参考文章《第一课如何在WINDOWS环境下搭建以太坊开发环境》的“（7）安装MetaMask【可选】”章节。
说明下，最详细的MetaMask安装/配置文章可参考欧阳哥哥的《以太坊钱包MetaMask使用教程》
配置钱包
1.接受隐私条款
点击浏览器地址栏右侧，MetaMask的狐狸头图标，第一次使用时，会出一个隐私提示，如下图：
隐私提示
2.接受服务条款
点击Accept按钮，显示的是MetaMask的服务条款，如下图2-2：
image.png
Accept按钮默认是灰色的，将滚动条拉到底部，就可以点击Accept按钮了
3、创建新账号
创建新账号：输入一串8位以上的密码，再次重复输入，点击CREATE按钮，即可完成。下面以创建新账号为例：作者启动大写键使用自己的通用密码设置
在点击CREATE按钮后，MetaMask会为用户创建12个英文助记词，一定要保存好这些助记词，点击SAVESEEDWORDSASFILE可以将助词词以文件的形式保存到本地，建议使用纸笔手工记录并收藏于安全的地方。
SEED
连接开发区块链网络
默认连接的是以太坊主网（左上角显示），选择CustomRPC，添加Ubuntu的IP地址作为客户自定义RPC网络
http://192.168.80.144:8545
链接测试机以太坊客户端成功，菜单有链接成功的橙色√提示。
连接成功
这是左上角显示为PrivateNetwork，此时显示的是默认的Account1空账号，ETH数量为0。导入Ganache-cli的第一个钱包账号
查看“trace.log”文件，可以Ganache-cli的第一个默认钱包地址为
(0)629551aa45c594ce822c5b4a378d01cf46fb57c15b69a61eb400a4867ffab002\n(1)a90103a95ed805acc52782eaa29eb061f6c2a9431fed3ac18a683ea3143a29b6\n
选择MetaMask的“ImportAccount”输入私钥，获取账号，可以查看对应ETH余额。
输入私钥
第一个钱包账户的余额：
99.211ETH,智能合约运行已消耗
第二个钱包账户的余额：
100ETH，未消耗过
至此MetaMask的安装，配置已经完成。
6.领养宠物
修改.\\dapp-guide-pet-shop\\src\\index.html文件引用jquery的地址
<!–jQuery(necessaryforBootstrap’sJavaScriptplugins)–>\n<!–\n<scriptsrc=”https://gapis.geekzu.org/ajax/ajax/libs/jquery/1.12.4/jquery.min.js”></script>\n–>\n<scriptsrc=”http://libs.baidu.com/jquery/2.1.1/jquery.min.js”></script>\n<!–Includeallcompiledplugins(below),orincludeindividualfilesasneeded–>\n
在WINDOWS浏览器输入测试网站地址
http://192.168.80.144:3000/
可以看到宠物商店的入口界面：
可爱的狗狗
点击“Adopt”按钮，领养这个最漂亮的狗狗宝贝。MetaMask会提示我们交易的确认，如图：
要从当前账号6扣除交易费用
点击“SUBMIT”按钮成功后，这个狗狗的按钮变为”SUCCESS”，该狗狗已被包养了。
领养成功
查看当前打开的账号ACCOUNT6，发现金额不再是100ETH，而是99.999ETH了。
账户余额消耗
恭喜你，开发并成功部署了一个DAPP区块链应用程序，并且领养了几只小狗狗。
6.知识对接服务
我们在知识星球开通了区块链入门专栏，用于存放本项目的工程源码等内容，并建立专项微信群用于技术交流，欢迎加入。
https://t.zsxq.com/ZFaaYVF
文章分享结束，宠物论坛网站源码分享和宠物论坛最新留言的答案你都知道了吗？欢迎再次光临本站哦！