web3通过antd 在React dapp中构建订单组件基本结构

news2024/12/29 10:54:56

上文web3 dapp React项目引入 antd 对 balance 用户token信息组件进行样式改造
中我们导入 antd组件算是比较完整的编写了用户资产组件
那么今天开始我们就要说订单组件了这个就会比之前的复杂很多
我们还是先开环境
ganache 终端执行

ganache -d

在这里插入图片描述
然后将合约发布到区块链上项目终端执行

truffle migrate --reset

在这里插入图片描述然后我们执行一下我们之前写的测试文件向交易所转入一些ETH和token

truffle exec .\scripts\test.js

在这里插入图片描述
然后登录 MetaMask

最后运行我们的 react dapp项目

订单组件不是一次性能讲完的因为确实比较复杂本文我们先将整个订单组件的结构搭起来

这里我们打算分三部分展示首先是
所有被交易完成的订单这个所有人都可以看到
然后是当前用户创建的订单这里只有当前自己创建的才能看到这里就要有取消订单的操作
最后是别人正在执行的订单我们也可以操作交易
在这里插入图片描述
因为涉及到不同区块操作所以这里我们要用redux来存储
所以这篇文章我们只搭建界面结构下一文我们再来处理数据层的逻辑

这里我还是打算利用卡片式的展示方式
我们找到 src下 components 下的 Order.jsx 组件编写代码如下

import React from 'react';
import { Card, Col, Row } from 'antd';
export default function Order() {

  return (
    <div style = {{marginTop:'10px'}}>
      <Row>
         <Col span={8}>
          <Card title="已完成" bordered={false} style = {{ margin: '10px' }}>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
         </Col>
         <Col span={8}>
          <Card title="我创建的" bordered={false} style = {{ margin: '10px' }}>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
         </Col>
         <Col span={8}>
          <Card title="其他交易中订单" bordered={false} style = {{ margin: '10px' }}>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
         </Col>
      </Row>
    </div>
  );
}

这里我们还是用的 antd的 Col 卡片
然后title是我们标题里面就是内容
因为这是 24三格模式就是 span 达到 24就会盛满整个屏幕所以我们三个每个就是 8
三个正好是整个屏幕
我们运行代码
在这里插入图片描述
整个的界面效果就出来了

但是这里数据的展示 p 显然满足不了我们
我还是希望用表格组件

我们打开antd官方文档找表格组件
在这里插入图片描述
这里我们先要从antd 引入Table组件然后案例中 columns 是表格的列名称 dataSource则是每行的数据我懒得写了直接复制过来

最后将表格替换掉原来p标签的位置

运行结果如下

这个表格组件要特殊说一下他是根据dataIndex匹配的
参考代码如下

import React from 'react';
import { Card, Col, Row ,Table } from 'antd';

export default function Order() {
  const dataSource = [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];
  
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  
  return (
    <div style = {{marginTop:'10px'}}>
      <Row>
         <Col span={8}>
          <Card title="已完成" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={dataSource} columns={columns} />
          </Card>
         </Col>
         <Col span={8}>
          <Card title="我创建的" bordered={false} style = {{ margin: '10px' }}>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
         </Col>
         <Col span={8}>
          <Card title="其他交易中订单" bordered={false} style = {{ margin: '10px' }}>
            <p>Card content</p>
            <p>Card content</p>
            <p>Card content</p>
          </Card>
         </Col>
      </Row>
    </div>
  );
}

这里我们表头设置 title名字为姓名设dataIndex为 name
这样后面每一行的namp都会自动匹配到这一列上
在这里插入图片描述
就是这样一个效果

这里我们改一下表头的字段名我们这里订单只需要展示创建时间 ETH和GrToken 告诉他什么时候创建的然后徐多少对多少 token 就好了

然后我们将其他几个都换成 Table组件

这样我们项目就像个样子了
在这里插入图片描述