合约Lottery全栈实现"/>
智能合约Lottery全栈实现
1 创建项目
- 创建项目文件夹，我们先要创建一个总的目录文件，存放所有项目内容
mkdir Lottery
- 创建Next.js app
Next.js是一个react框架，可以让我们更快的构建web应用
具体而言构建一个web应用需要考虑包括但是不限于以下几个方面
User Interface - how users will consume and interact with your application.
Routing - how users navigate between different parts of your application.
Data Fetching - where your data lives and how to get it.
Rendering - when and where you render static or dynamic content.
Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them.
Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc).
Performance - how to optimize your application for end-users.
Scalability - how your application adapts as your team, data, and traffic grow.
Developer Experience - your team’s experience building and maintaining your application.
npx create-next-app@latest /创建Next.js app,会出现一个bootstraps提示
✔ What is your project named? … lottery-dapp //命名项目，接下来它会自动帮我们安装依赖和架构
Creating a new Next.js app in /Users/qinjianquan/lottery-again/lottery-dapp.Using yarn.Installing dependencies:
- react
- react-dom
- next--Success! Created lottery-dapp at /Users/qinjianquan/lottery-again/lottery-dapp
Inside that directory, you can run several commands:yarn devStarts the development server.yarn buildBuilds the app for production.yarn startRuns the built app in production mode.We suggest that you begin by typing:cd lottery-dappyarn dev
lottery % cd lottery-dapp //进入文件夹为bulma安装依赖，bulma是一个手机优先的CSS框架，简单的页面就无需写任何框架
npm i bulma
2 制作网页
- 查看并启动App
打开/Users/qinjianquan/lottery/lottery-dapp/package.json
可以看到一些默认脚本以及它们的组织方式
/Users/qinjianquan/lottery/lottery-dapp/pages/index.js //默认页面路由import 'bulma/css/bulma.css' //引入bulma库，这里强调一点，在index.js文件要使用哪个库就使用npm安装就行了
lottery-dapp % npm run dev //启动一个实时网页
> lottery-dapp@0.1.0 dev
> next devready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait - compiling...
event - compiled client and server successfully in 3.7s (125 modules)
访问http://127.0.0.1:3000/
- 动态编辑前端页面
Lottery dApp //回到index.js 文件中改页面标题&继续编辑
export default function Home() {return (<div ><Head><title>Ether Lottery</title> //标题<meta name="description" content="An Ethereum Lottery dApp" /> <link rel="icon" href="/favicon.ico" /></Head><main className={styles.main}><nav className="navbar"><div className="container"><div className="navbar-brand"> //导航栏头<h1>Ether Lottery</h1></div><div className="navbar-end"> //导航栏尾<button className="button is-link">Connect Wallet</button></div></div></nav><div className="container"> //开辟空间<section className="mt-5"> //片段<div className="column is-two-thirds"> //段落<p>Lottery buttons</p></div><div className="column is-one-third"><p>Lottery info</p></div></section></div></main><footer className={styles.footer}><p>©2022 Made by SHIYIVEI</p></footer></div>)
}
/Users/qinjianquan/lottery/lottery-dapp/styles/Home.module.css //除了页脚样式，其他都删掉，因为我们需要按照合约需求去定义我们的页面实现，现在我们定义自己的页面样式.main {min-height: 100vh;
}
.main h1 {font-size:3em;font-weight: bold;color: #000;
}.footer {display: flex;flex: 1;padding: 2rem 0;border-top: 1px solid #eaeaea;justify-content: center;align-items: center;
}.footer a {display: flex;justify-content: center;align-items: center;flex-grow: 1;
}
3 连接钱包
安装web3库,它是javascript语言写的，里面有一些函数可以让我们与钱包交互
npm i web3 //前面提到过这种思路，现在我们要使用web3这个库，所以使用npm安装，后续流程就是在index.js文件中引入
在index.js页面引入web3.js库
import Web3 from 'web3'
创建handler函数处理连接钱包的请求，并且把它连接到按钮上（用一个按钮捕获用户的请求，然后将请求与handler函数绑定）
这种实现网页功能的逻辑是：创建静态变量 -> 改变静态变量状态/创建函数 -> 呈现状态/关联用户请求
onClick= {connectWalletHandler}
import {useState} from 'react'
import Head from 'next/head'
import Web3 from 'web3'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bulma/css/bulma.css' export default function Home() {/*定义两个静态变量 */const [web3,setWeb3] = useState()const [address,setAddress] = useState()/*define a function to connect wallet*/const connectWalletHandler = async () => {/*check if MetaMask is installed*/if (typeof window !== "undefined" && typeof window.ethereum != "undefined") {try{/*request to connect the wallet*/await window.ethereum.request({method:"eth_requestAccounts"})/*create web3 instance */const web3 = new Web3(window.ethereum)/*use global instance *//*set web3 instance in react state*/setWeb3(web3) /* get list of accounts,use the web3 instance */const accounts = await web3.eth.getAccounts()/*set account to react state*/setAddress(accounts[0])} catch(err){console.log(err)}}else {/*MetaMask not installed*/console更多推荐
智能合约Lottery全栈实现
发布评论