6-6 Ant.design配置(react+区块链实战)

news/2024/9/11 4:04:31/ 标签: react.js, 区块链, 前端

6-6 Ant.design配置(react+区块链实战)

在这里插入图片描述

https://ant.design/index-cn

直接点击开始使用ant进行button等按钮的样式

在这里插入图片描述

https://ant.design/docs/react/use-with-create-react-app-cn
在 create-react-app 中使用
安装antd,在react项目woniu-pet-shop中

npm install antd --save

在这里插入图片描述

在这里插入图片描述

安装过程中可以看后面的部署

在CSS手动引入CSS

还有高级配置等都在下方的链接中
在这里插入图片描述

复制import { Button } from 'antd';
到我们的App.js中
在这里插入图片描述

可以在App.css中全部消去,加入ant的css

在这里插入图片描述

接着修改App.js中的button按钮,B为大写,加入type
保存在cmd中启动服务

Npm start 

在这里插入图片描述

在前面几个关闭了一次

没有合约再次部署到区块链
这里没有链接本地网络的话是无法打开的metamask的
下方链接到本地网络了
下方的按钮已经变成淡蓝色的按钮
在这里插入图片描述

这个比较繁琐

有报错,没法调取合约显示地址的,是因为新快速启动的ganache不会保留之前的区块,要想永久保留需提前设置

在这里插入图片描述

此时只需要将合约重新部署一下部署到链上(若已经编译好了)

在这里插入图片描述

部署成功后区新增区块如下
在这里插入图片描述

重新部署好之后,在此开启

Npm start

成功了,在最开始刷新的时候调用合约成功
在这里插入图片描述
在这里插入图片描述

淡蓝色的按钮

这里只用了一个button按钮,却引入了全部的CSS,不太合理,就需要使用高级配置了

在这里插入图片描述

在这里插入图片描述

使用craco 进行button按钮的(未完成建议使用第一种方式)
在这里插入图片描述

在react的项目下安装

npm install craco --save

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

到此就没有再进行更改文件执行了

使用react-app-rewired 包进行button按钮样式(失败使用第一种方式吧)
还是按照视频上的方式使用react-app-rewired 包进行button的操作吧(未进行记录)

但是感觉不如再上面修改css的整体的方便一些,这里先不进行操作了
1,安装npm install react-app-rewired --save
在这里插入图片描述

npm install react-app-rewired --save

2,在packjson中进行更改

在这里插入图片描述

3,安装babel-plugin-import,按需加载组件代码及样式

在这里插入图片描述

npm install babel-plugin-import --save

在这里插入图片描述

4,在项目根目录新增config-overrides.js

在这里插入图片描述

config-overrides.js
在这里插入图片描述

加入插件基本完成

const {injectBabelPlugin} = require{'react-app-rewired'};module.exports = function override(config,env){config = injectBabelPlugin(['import',{libraryName:'antd',libraryDirectory:'es',style:'css'}],config,);return config;
}

5,注释掉App.css中的代码
在这里插入图片描述

6,App.js也无需繁琐了直接如下
在这里插入图片描述

直接刷新浏览器可以看看
失败了,还是白色

在这里插入图片描述


http://www.ppmy.cn/news/1474721.html

相关文章

react学习——29react之useState使用

useState 是 React Hooks 中的一个重要函数,它用于在函数组件中添加状态。在类组件中,我们通常使用 this.state 和 this.setState 来管理组件的状态,而在函数组件中,我们可以使用 useState 来达到同样的目的。 1、导入 useState&…

MyBatis(35)如何在 MyBatis 中实现软删除

实现软删除在MyBatis中通常意味着更新数据库记录的某个字段,而不是真正地从数据库中删除记录。这个字段(通常是is_deleted、deleted或status等)被用来标记记录是否被删除。下面我们将详细探讨如何在MyBatis中实现软删除,包括数据库…

Hadoop-25 Sqoop迁移 增量数据导入 CDC 变化数据捕获 差量同步数据 触发器 快照 日志

章节内容 上节我们完成了如下的内容: Sqoop MySQL迁移到HiveSqoop Hive迁移数据到MySQL编写脚本进行数据导入导出测试 背景介绍 这里是三台公网云服务器,每台 2C4G,搭建一个Hadoop的学习环境,供我学习。 之前已经在 VM 虚拟机…

在分布式环境中,怎样保证 PostgreSQL 数据的一致性和完整性?

文章目录 在分布式环境中保证 PostgreSQL 数据的一致性和完整性一、数据一致性和完整性的重要性二、分布式环境对数据一致性和完整性的挑战(一)网络延迟和故障(二)并发操作(三)数据分区和复制 三、保证 Pos…

解读网络安全公司F5:助企业高效简化多云和应用部署

伴随企业加速数字化转型工作、扩展到新的基础设施环境并采用微服务架构,企业正拥抱混合和多云基础设施所带来的灵活性。Ernst & Young调查数据显示,84%的企业正处于向现有网络安全解决方案套件添加多种新技术的早期阶段。企业同样意识到,…

Perl语言之标量

Perl对于变量的定义,分为三种类型:标量、数组和哈希。   标量是 Perl 语言中最简单的一种数据类型。标量中可以存储整数、字符串、浮点数、字符等,数据格式不做严格区分。在使用标量时需要再变量前面加$,如: #! /us…

Chain-of-Verification Reduces Hallucination in Lagrge Language Models阅读笔记

来来来,继续读文章了,今天这个是meta的研究员们做的一个关于如何减少LLM得出幻觉信息的工作,23年底发表。文章链接:https://arxiv.org/abs/2309.11495 首先,这个工作所面向的LLM的问答任务,是list-based q…

使用Nginx实现高效负载均衡

概述 Nginx是一款高性能的HTTP和反向代理服务器,广泛用于Web服务的负载均衡。它能有效分发流量至多个后端服务器,提高网站的可用性和响应速度,同时增强系统的可扩展性和安全性。本文将介绍如何配置Nginx进行负载均衡,并提供具体的…

服务发现与注册:Eureka与Consul

在微服务架构中,服务发现与注册是一个非常重要的部分。通过服务发现机制,微服务能够相互找到并进行通信,而不需要了解彼此的具体地址。本文将详细介绍两种主流的服务发现与注册框架:Eureka和Consul,并提供相应的代码示…

Web开发 —— 放大镜效果(HTML、CSS、JavaScript)

目录 一、需求描述 二、实现效果 三、完整代码 四、实现过程 1、HTML 页面结构 2、CSS 元素样式 3、JavaScript动态控制 (1)获取元素 (2)控制大图和遮罩层的显隐性 (3)遮罩层跟随鼠标移动 &…

C# Winform 系统方案目录的管理开发

在做一个中等复杂程度项目时,我们通常有系统全局配置,还要有对应的方案目录的管理和更新。 比如我们有如下需求:开发一个方案管理,可以新建、打开和保存方案,同时还需要保存方案中的各种文件。我设计的采用目录管理和…

【YashanDB知识库】表收集统计信息默认阈值引起SQL执行效率差

【问题分类】性能优化 【关键字】统计信息,阈值,执行计划 【问题描述】表新增87w数据自动收集统计信息任务没有启动导致SQL执行计划变差 【问题原因分析】 CUS_REGISTER_READ 数据总量是18374074,插入81万,统计信息失效的阈值是…

流程图怎么做?有三种制作方法

流程图怎么做?在日常生活和工作中,流程图作为一种直观展示步骤、流程或决策路径的工具,扮演着不可或缺的角色。它不仅能够帮助我们理清思路、规划任务,还能促进团队协作与沟通。那么,如何高效地绘制流程图呢&#xff1…

Objective-C 自定义渐变色Slider

文章目录 一、前情概要二、具体实现 一、前情概要 系统提供UISlider,但在开发过程中经常需要自定义,本次需求内容是实现一个拥有渐变色的滑动条,且渐变色随着手指touch的位置不同改变区域,类似如下 可以使用CAGradientLayer实现渐…

Web开发:一个可拖拽的模态框(HTML、CSS、JavaScript)

目录 一、需求描述 二、实现效果 三、完整代码 四、实现过程 1、HTML 页面结构 2、CSS 元素样式 3、JavaScript动态控制 (1)获取元素 (2)显示\隐藏遮罩层与模态框 (3)实现模态框拖动效果 一、需求…

VMware安装Ubuntu以及利用vscode远程Ubuntu

一、VMware安装Ubuntu (1)VMware安装Ubuntu主要参考此文VMware虚拟机安装Ubuntu22.04图文教程(超详细!!!)。 (2)VMware密钥参考此文24年VMware 17密钥(附下载链接&#…

《C++并发编程实战》笔记(一、二)

一、简介 抽象损失&#xff1a;对于实现某个功能时&#xff0c;可以使用高级工具&#xff0c;也可以直接使用底层工具。这两种方式运行的开销差异称为抽象损失。 二、线程管控 2.1 线程的基本控制 1. 创建线程 线程相关的管理函数和类在头文件&#xff1a; #include <…

Memcached高并发挑战:性能优化与实战策略

标题&#xff1a;Memcached高并发挑战&#xff1a;性能优化与实战策略 在高并发的网络应用场景中&#xff0c;Memcached作为一项高效的分布式内存缓存系统&#xff0c;其性能表现尤为关键。然而&#xff0c;面对海量的请求和数据&#xff0c;Memcached的性能如何&#xff0c;以…

Spring Boot 框架知识汇总

1、什么是SpringBoot&#xff1f; 通过Spring Boot&#xff0c;可以轻松地创建独立的&#xff0c;基于生产级别的Spring的应用程序&#xff0c;您可以“运行"它们。大多数Spring Boot应用程序需要最少的Spring配置&#xff0c;集成了大量常用的第三方库配置&#xff0c;使…

【力扣C语言】每日一题—第50题,Pow(x,n)

题目 实现x的n次幂。 问题分析&#xff1a; 当n大于零&#xff0c;等于零&#xff0c;小于零时都需要分析 思路&#xff1a;反复迭代&#xff0c;利用通过二进制位进行缩短计算时间。 力扣通过代码&#xff1a; ​ double myPow(double x, int n) {long nnn;double ret1;…