6-7 宠物领养开发及相关代码

https://ant.design/components/layout-cn/
来到布局

选择一个简单的布局即可

会显示出所有的相关界面的代码

根据对应界面的代码在我们的react项目woniu-pet-shop中的App.js中进行更改

如下

刷新页面的效果如下
页面的基本雏形如下

要做宠物的领养，就要将宠物的数组拿出来
在前面下载的petshop改名为truffle中放在了react项目下的src下的petsjson

这是宠物的术语名字图片

在区块链中写图片非常昂贵，大部分情况下在区块链中写id或者一些出生时间关键数据

将宠物的json直接引入

然后在项目中的render中的content直接引入
Pets类似数组，在init初始化时就有加一下东西

将truffle下的src下的狗的图片复制出来

放在react项目下的public下的images中

使用ant中的栅格系统，使用页面整个横向布局

可以将前面引入的Jason数组渲染出来

所有宠物名打印出来了

接下来将其图片也打印出来

在App.css中加入图片的宽度使其看起

现在好看多了

总共16个宠物，看起来和谐多了

重点低下逻辑，显示名字后要有领养按钮，不一定存在的，如刚才第一个，第2个已经领养过了，应显示已被领养

//判断当前宠物是否被领养(是否当前的领养地址为初始地址)isActive(i){return this.state.adopters[i] == this.initAddress}

若未被领养，显示领养的按钮，若已领养就显示被领养的字样

基本功能已经完成再加入按钮的事件即可，以及加入class center使其居中，type样式为蓝色的

如下

在css中加入居中的样式

核心就是如何编写智能合约，测试合约，如何web端和智能合约交互

App.js所有代码如下

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件
import { Button } from 'antd'
import { Layout, Menu, Breadcrumb } from 'antd'
import { Row, Col } from 'antd'
import './App.css'
import pets from "./truffle/src/pets.json"const { Header, Content, Footer } = Layout;//1.链接合约
//2.执行一下合约内部函数
//3.添加ant.design ui库支持
//4.完成项目
class App extends React.Component{constructor(props){super(props)this.web3 = nullthis.Adoption = nullthis.initAddress = '0x'+'0'.repeat(40)	//判断地址是否为初始值this.init()this.state = {//所有领养者的数据adopters:[]//name:'woniu'}}async init(){//如果网页中的web3不是undefined//if(typeof window.web3 != 'undefined'){//	this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接//}else{//	alert('please install metamask')//}//this.web3 = new Web3(this.web3Provider)		//将我们的this.web3Provider装载进来//this.initAdoption()/* 新版的方式 *///var web3Provider;if (window.ethereum) {this.web3Provider = window.ethereum;try {// 请求用户授权await window.ethereum.enable();} catch (error) {// 用户不授权时console.error("User denied account access")}} else if (window.web3) {   // 老版 MetaMask Legacy dapp browsers...this.web3Provider = window.web3.currentProvider;} else {this.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');}this.web3 = new Web3(this.web3Provider);//web3js就是你需要的web3实例this.web3.eth.getAccounts(function (error, result) {if (!error)console.log(result)//授权成功后result能正常获取到账号了//this.account = result});//this.account =result//this.account =accountthis.initAdoption()}initAdoption(){this.Adoption = TruffleContract(AdoptionJson)	//使用TruffleContract传入编译后的合约，然后创建实例，可以调用合约内部函数this.Adoption.setProvider(this.web3Provider)	//设置来源，链接合约return this.markAdopted()}//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用//this.markAdopted(){//部署链接一下//	const adoptionInstance = this.Adoption.deployed().then()	//}async markAdopted(){//部署链接一下//await同步方式获取异步数据const adoptionInstance = await this.Adoption.deployed()	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用//调用合约内部函数getAdoptersconst adopters = await adoptionInstance.getAdopters.call()this.setState({adopters})			//此时得到所有领养者的信息，方便后续的渲染renderconsole.log(adopters)}async adopt(petId){//const account = window.web3.eth.defaultAccount		//获取metamask中默认的账户// 授权获取账户const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });const myAccount = accounts[0];	//获取当前metamask的地址const adoptionInstance = await this.Adoption.deployed()		//再次进行部署await adoptionInstance.adopt(petId,{from:myAccount})	//调用adopt只传递唯一一个参数，以及来源之前获取的地址，进行写入函数this.markAdopted()}//判断当前宠物是否被领养(是否当前的领养地址为初始地址)isActive(i){return this.state.adopters[i] == this.initAddress}//此处进行界面的渲染render(){return (//布局	//设置间距40//每个方块Col，以行24个，6，相当于每行4个宠物<Layout className="layout"><Header></Header><Content style={{ padding: '20px 50px' }}><Row gutter={40}>		{pets.map((v,i)=>{return (<Col span='6' key={i}><img src={v.picture} alt=""/><div className = "center"><p className="name">{v.name}</p>{this.isActive(i)?<Button type='primary' onClick={()=>this.adopt(i)}>领养</Button>:<span>被领养</span>}</div></Col>)})}</Row></Content><Footer style={{ textAlign: 'center' }}>build by woniu ©2018</Footer></Layout>)//onclick点击事件，调用领养函数//return <Button type='primary' onClick={()=>this.adopt(2)}>领养第二个</Button>//hello,{this.state.name}}
}export default AppApp.css 所有代码如下
@import '~antd/dist/antd.css';img{width:100%;
}.center{text-align:center;margin:20px;
}