智能合约Lottery全栈实现

最新推荐文章于 2024-05-18 10:05:08 发布

shiyivei

最新推荐文章于 2024-05-18 10:05:08 发布

阅读量535

点赞数

分类专栏： # 智能合约文章标签：智能合约 javascript 前端 solidity react

本文链接：https://blog.csdn.net/weixin_51487151/article/details/124977161

版权

1 创建项目

创建项目文件夹，我们先要创建一个总的目录文件，存放所有项目内容

mkdir Lottery

创建Next.js app

Next.js是一个react框架，可以让我们更快的构建web应用

https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs

具体而言构建一个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 dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd lottery-dapp
  yarn 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 dev

ready - 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>&copy;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

最低0.47元/天解锁文章

shiyivei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
智能合约Lottery全栈实现

1 创建项目创建项目文件夹，我们先要创建一个总的目录文件，存放所有项目内容mkdir Lottery创建Next.js appNext.js是一个react框架，可以让我们更快的构建web应用https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs具体而言构建一个web应用需要考虑包括但是不限于以下几个方面User Interface - how users will consume and interact w
复制链接

扫一扫

专栏目录