NFT交易市场-后端开发

  • 首先我们需要配置好我们的ipfs，参考官方文档

    • 1.https://docs.ipfs.tech/install/command-line/#system-requirements
    • https://docs.ipfs.tech/how-to/command-line-quick-start/#initialize-the-repository

  • 首先新建一个文件夹

  • 然后在终端输入npm init -y命令进行初始化
    在这里插入图片描述

  • npm install express安装 express
    在这里插入图片描述

  • npm install ejs安装ejs模板引擎

  • npm install body-parser安装body-parser模块

  • npm install express-fileupload安装express-fileupload模块

  • npm install kubo-rpc-client

  • 新建一个views文件夹，里面新建一个home.ejs文件
    文件中输入以下代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>NFT Market</title>
</head><body><h1>Upload file to IPFS</h1><form action="/upload" method="POST" enctype="multipart/form-data"><label>Title</label><input type="text" name="title"><br><br><label>Description</label><input type="text" name="description"><br><br><input type="file" name="file"><br><br><input type="submit" name="Submit"></form>
</body></html>
  • 在package.json文件中添加如下代码
  • app.js代码如下
import express from 'express';
import bodyParser from 'body-parser';
import fileUpload from 'express-fileupload';const app = express();//配置模板引擎，express框架将会自动查找以'.ejs'为扩展名的文件作为视图模板，并将数据填充到这些模板中，最终生成HTML页面返回给客户端
app.set('view engine', 'ejs');
//配置中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(fileUpload());app.get('/', (req, res) => {//res.render()方法是Express框架中应用于渲染试图模板的方法，将指定的视图模板渲染成HTML页面然后作为响应发送给客户端res.render("home");
});app.post('/upload', (req, res) => {//注意：req.body后面的属性是和home.ejs里面的name属性相对应const title = req.body.title;const description = req.body.description;console.log(req.files);//将用户上传的文件保存在我们的files文件夹内const file = req.files.file;const filename = file.name;const filePath = "files/" + filename;file.mv(filePath, (err) => {if (err) {console.log(err);res.status(500).send("error occured");}})res.json({message: "file upload successful!"})
});app.listen(3000, () => {console.log('Example app listening on port 3000!');
});

  • 新建files文件夹存放图片

  • 在终端运行node app.js命令启动我们的服务器，然后在网页上输入localhost:3000打开我们的网页，输入相应值，传一张图片，然后我们可以在我们的files文件夹目录下找到该图片
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 新建ipfs-uploader.js文件用来上传图片到 ipfs,代码如下

import { create } from 'kubo-rpc-client';
import fs from 'fs';// 使用 IPv4 地址连接到 IPFS 节点
const ipfs = create('http://127.0.0.1:5001');async function uploadFileToIPFS(filePath) {const file = fs.readFileSync(filePath);const result = await ipfs.add({ path: filePath, content: file });console.log(result);return result;
}uploadFileToIPFS("files/qkl.png");
  • 输入node ipfs-uploader.js命令运行，返回一串CID，我们可以通过该CID在网页上查看我们上传的图片127.0.0.1:8080/ipfs/CID，注意：同时要运行本地的 ipfs节点，我是在WSL终端运行ipfs节点，在vscode终端运行命令，具体看自己想怎么操作。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 修改ipfs-uploader.js文件代码如下，尝试上传一个json文件到IPFS
import { create } from 'kubo-rpc-client';
import fs from 'fs';// 使用 IPv4 地址连接到 IPFS 节点
const ipfs = create('http://127.0.0.1:5001');async function uploadFileToIPFS(filePath) {const file = fs.readFileSync(filePath);const result = await ipfs.add({ path: filePath, content: file });console.log(result);return result;
}async function uploadJSONToIPFS(json) {const result = await ipfs.add(JSON.stringify(json));console.log(result);return result;
}uploadJSONToIPFS({ name: "test" });

运行该代码返回值如下
在这里插入图片描述
在网页上 查看如下
在这里插入图片描述

  • 最后再修改我们的代码，在app.js中引入ipfs-uploader.js文件中的上传功能，用到了node.js中的export功能，我在Node.js章节中解释过，修改后的完整代码如下
  • app.js代码 如下：
import express from 'express';
import bodyParser from 'body-parser';
import fileUpload from 'express-fileupload';
import { uploadFileToIPFS, uploadJSONToIPFS } from './ipfs-uploader.js';const app = express();//配置模板引擎，express框架将会自动查找以'.ejs'为扩展名的文件作为视图模板，并将数据填充到这些模板中，最终生成HTML页面返回给客户端
app.set('view engine', 'ejs');
//配置中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(fileUpload());app.get('/', (req, res) => {//res.render()方法是Express框架中应用于渲染试图模板的方法，将指定的视图模板渲染成HTML页面然后作为响应发送给客户端res.render("home");
});app.post('/upload', (req, res) => {//注意：req.body后面的属性是和home.ejs里面的name属性相对应const title = req.body.title;const description = req.body.description;//将用户上传的文件保存在我们的files文件夹内const file = req.files.file;const filename = file.name;const filePath = "files/" + filename;file.mv(filePath, async (err) => {if (err) {console.log(err);res.status(500).send("error occured");}//上传图片到IPFSconst fileResult = await uploadFileToIPFS(filePath);//拿到上传图片的CIDconst fileCid = fileResult.cid.toString();const metadata = {title: title,description: description,image: 'http://127.0.0.1:8080/ipfs/' + fileCid}//返回信息给用户res.json({message: "file uploaded successfully",metadata: metadata});})});app.listen(3000, () => {console.log('Example app listening on port 3000!');
});
  • ipfs-uploader.js文件代码如下：
import { create } from 'kubo-rpc-client';
import fs from 'fs';// 使用 IPv4 地址连接到 IPFS 节点
const ipfs = create('http://127.0.0.1:5001');//上传图片到ipfs
export async function uploadFileToIPFS(filePath) {const file = fs.readFileSync(filePath);const result = await ipfs.add({ path: filePath, content: file });console.log(result);return result;
}//上传json格式文件到ipfs
export async function uploadJSONToIPFS(json) {const result = await ipfs.add(JSON.stringify(json));return result;
}
  • 然后要实现mint NFT给用户，首先我们需要将我们之前的NFT合约连接到remix上面，这个之前有详细讲过如何连接哈
    在这里插入图片描述
    在这里插入图片描述
  • 然后选择ERC721合约进行相应操作，注意期间要启动hardhat节点，否则连接不上Remix - Hardhat Provider，sorry，今天测试的时候发现之前的ERC721合约 少写了uri功能，因此修改了该合约，修改ERC721合约代码如下
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";contract MyNFT is ERC721, ERC721Enumerable, ERC721URIStorage, Ownable {uint256 private _nextTokenId;constructor() ERC721("MyNFT", "NFT") Ownable(msg.sender) {}function safeMint(address to, string memory uri) public onlyOwner {uint256 tokenId = _nextTokenId++;_safeMint(to, tokenId);_setTokenURI(tokenId, uri);}// The following functions are overrides required by Solidity.function _update(address to,uint256 tokenId,address auth) internal override(ERC721, ERC721Enumerable) returns (address) {return super._update(to, tokenId, auth);}function _increaseBalance(address account,uint128 value) internal override(ERC721, ERC721Enumerable) {super._increaseBalance(account, value);}function tokenURI(uint256 tokenId) public view override(ERC721, ERC721URIStorage) returns (string memory) {return super.tokenURI(tokenId);}function supportsInterface(bytes4 interfaceId)publicviewoverride(ERC721, ERC721Enumerable, ERC721URIStorage)returns (bool){return super.supportsInterface(interfaceId);}
}

启动hardhat节点

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

  • 然后我们需要实现当用户成功上传一个图片到IPFS以后，合约自动挖一个NFT给用户，这里用到了ethers库。在终端输入npm install ethers安装ethers库。
  • 新建一个abis文件夹，文件夹里面新建一个myNFT.json的文件，正常编译部署完ERC721合约后，我们可以在remix编译界面上直接找到该合约的abi，复制即可，然后粘贴到myNFT.json文件中
    在这里插入图片描述
  • 创建一个名为nft-minter.js的文件 用来实现挖NFT给用户的功能，若是直接打印result， console.log(result);，我们可以看到完整信息，我们也可以简化信息console.log(result.hash);,完整代码如下，注意替换地址
import { ethers, JsonRpcProvider } from "ethers";
import fs from 'fs';//挖一个NFT
async function mint(to, uri) {const provider = new JsonRpcProvider("http://127.0.0.1:8545");const signer = await provider.getSigner();//改成自己的ERC721合约地址，在remix上面复制合约地址const contractAddress = "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9";const abi = JSON.parse(fs.readFileSync("./abis/myNFT.json"));const contract = new ethers.Contract(contractAddress, abi, signer);const result = await contract.safeMint(to, uri);console.log(result.hash);
}//测试一下,这里的地址是你想给他mint NFT的地址
mint('0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266', 'https://sdcsdc.com');

这是完整信息界面
在这里插入图片描述
这是简化后的输出

然后我们查看remix上面该地址拥有的NFT可以发现，mint过去了，因为我测试了三次，所以该地址拥有的NFT现在有三个啦
在这里插入图片描述

  • 测试成功之后我们就可以删除掉最后一行测试代码啦
    在这里插入图片描述
  • 然后 再把该功能export出去，在app.js中import进来
    在这里插入图片描述
    在这里插入图片描述
  • app.js修改后的完整代码如下
import express from 'express';
import bodyParser from 'body-parser';
import fileUpload from 'express-fileupload';
import { uploadFileToIPFS, uploadJSONToIPFS } from './ipfs-uploader.js';
import { mint } from './nft-minter.js';const app = express();//配置模板引擎，express框架将会自动查找以'.ejs'为扩展名的文件作为视图模板，并将数据填充到这些模板中，最终生成HTML页面返回给客户端
app.set('view engine', 'ejs');
//配置中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(fileUpload());app.get('/', (req, res) => {//res.render()方法是Express框架中应用于渲染试图模板的方法，将指定的视图模板渲染成HTML页面然后作为响应发送给客户端res.render("home");
});app.post('/upload', (req, res) => {//注意：req.body后面的属性是和home.ejs里面的name属性相对应const title = req.body.title;const description = req.body.description;//将用户上传的文件保存在我们的files文件夹内const file = req.files.file;const filename = file.name;const filePath = "files/" + filename;file.mv(filePath, async (err) => {if (err) {console.log(err);res.status(500).send("error occured");}//上传图片到IPFSconst fileResult = await uploadFileToIPFS(filePath);//拿到上传图片的CIDconst fileCid = fileResult.cid.toString();const metadata = {title: title,description: description,image: 'http://127.0.0.1:8080/ipfs/' + fileCid}const metadataResult = await uploadFileToIPFS(metadata);const metadataCid = metadataResult.cid.toString();console.log(metadataCid);//这里的地址我暂时放的我开始mint NFT的地址await mint("0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266", 'http://127.0.0.1:8080/ipfs/' + metadataCid);//返回信息给用户res.json({message: "file uploaded successfully",metadata: metadata});})});app.listen(3000, () => {console.log('Example app listening on port 3000!');
});
  • 然后我们打开网页测试一下是否成功，注意要开启ipfs节点哈
    在这里插入图片描述
  • 我们可以发现remix上面该地址的NFT增加了一个
    在这里插入图片描述
    在这里插入图片描述
    测试成功！！！😊
  • 因为在代码中有很多写死的变量，如果我们后期去修改，找起来很麻烦，因此我们可以使用dotenv这个库，只需要在.env文件中修改变量即可，就方便亿点点，关于去查询这些库的用法可以在https://www.npmjs.com/网站上查询
    在这里插入图片描述
  • 首先在终端输入npm install dotenv --save命令安装库
  • 新建.env文件
  • 在需要用到.env的文件中导入库并读取该文件
    在这里插入图片描述
  • 使用如下的替换格式，具体要替换哪些看你们自己啦
    在这里插入图片描述
    这是.env文件的内容
    在这里插入图片描述
    在这里插入图片描述
  • 最后可以再保存然后打开网页上传一下文件，看下是否给地址mint了一个NFT，我这里是成功了哈，注意别替换错了。
  • 未完待续~😀（有什么问题欢迎提问哈）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/766358.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入理解Redis的Sentinel机制

深入理解Redis的Sentinel机制

Sentinel简述 Sentinel为了解决什么问题&#xff1f; Sentinel&#xff08;哨岗、哨兵&#xff09;是Redis的高可用性&#xff08;high availability&#xff09;解决方案。 我们知道Redis 的主从复制模式可以将主节点的数据改变同步给从节点&#xff0c;这样从节点就可以起…
阅读更多...
docker 和K8S知识分享

docker 和K8S知识分享

docker知识&#xff1a; 比如写了个项目&#xff0c;并且在本地调试没有任务问题&#xff0c;这时候你想在另外一台电脑或者服务器运行&#xff0c;那么你需要在另外一台电脑或者服务器配置相同的软件&#xff0c;比如数据库&#xff0c;web服务器&#xff0c;必要的插件和库等…
阅读更多...
吴恩达机器学习笔记 二十七 决策树中连续值特征的选择 回归树

吴恩达机器学习笔记 二十七 决策树中连续值特征的选择 回归树

还是猫狗分类的案例&#xff0c;假如再增加一个特征weight&#xff0c;该值是一个连续的值&#xff0c;如何在决策树中使用该特征&#xff1f; 如下图所示&#xff0c;尝试不同的阈值&#xff0c;如 weight<9 , 此时左边有四个样本&#xff0c;都为猫&#xff0c;右边有六个…
阅读更多...
分布式搜索引擎ES-RestClient查询文档快速入门

分布式搜索引擎ES-RestClient查询文档快速入门

RestClient查询文档快速入门 文章目录 RestClient查询文档快速入门1.1、match_all1.2、全文检索查询1.3、精确查询1.4、复合查询-boolean query1.5、排序和分页1.6、高亮&#xff08;解析查询高亮结果&#xff09; 1.1、match_all package cn.mannor.hotel;import org.apache.…
阅读更多...
C#，图论与图算法，计算图（Graph）的岛（Island）数量的算法与源程序

C#，图论与图算法，计算图（Graph）的岛（Island）数量的算法与源程序

1 孤岛数 给定一个布尔矩阵，求孤岛数。一组相连的1形成一个岛。例如，下面的矩阵包含5个岛: 在讨论问题之前，让我们先了解什么是连接组件。无向图的连通分量是一个子图，其中每两个顶点通过一条路径相互连接，并且不与子图外的其他顶点连接。 所有顶点相互连接的图只有一个…
阅读更多...
Tomcat 下载以及安装

Tomcat 下载以及安装

Tomcat安装及配置教程主要分为四步&#xff1a; 步骤一&#xff1a;首先确认自己是否已经安装JDK 1. cmd&#xff1a;查看java的版本 步骤二&#xff1a;下载安装Tomcat 1. 下载tomcat :Apache Tomcat - Welcome! 2. 选择对应的tomcat版本&#xff1a; 3. 进行安装&#…
阅读更多...
Uibot6.0 (RPA财务机器人师资培训第3天 ）财务招聘信息抓取机器人案例实战

Uibot6.0 (RPA财务机器人师资培训第3天 ）财务招聘信息抓取机器人案例实战

训练网站&#xff1a;泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981(本博…
阅读更多...
鸿蒙一次开发，多端部署（十四）一多开发实例（短信）

鸿蒙一次开发，多端部署（十四）一多开发实例（短信）

本章从系统预置的应用中&#xff0c;选择短信应用作为典型的案例&#xff0c;从页面开发和工程结构的角度&#xff0c;介绍"一多"的具体实践。系统的产品形态在不断丰富中&#xff0c;当前主要有默认设备和平板两种产品形态&#xff0c;本章的具体实践也将围绕这两种…
阅读更多...
ALPHA开发板中CAN硬件图

ALPHA开发板中CAN硬件图

一. 简介 前面文章学习了 IMX6ULL芯片的 CAN总线协议&#xff0c;CAN传输速率。 本文来搜索 ALPHA开发板中CAN硬件原理图&#xff0c;以及CAN设备节点信息。这里主要是CAN控制器的驱动&#xff0c;属于IMX6ULL芯片内部的驱动&#xff0c;NXP官方已经写好。 CAN控制器的驱动…
阅读更多...
使用Python抓取抖音直播间数据的简易指南【第152篇—抓取数据】

使用Python抓取抖音直播间数据的简易指南【第152篇—抓取数据】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 使用Python抓取抖音直播间数据的简易指南 说明&#xff1a;本文已脱敏&#xff0c;隐去地址…
阅读更多...
Keepalive与idle监测及性能优化

Keepalive与idle监测及性能优化

Keepalive 与 idle监测 Keepalive&#xff08;保活&#xff09;: Keepalive 是一种机制&#xff0c;通常用于TCP/IP网络。它的目的是确保连接双方都知道对方仍然存在并且连接是活动的。这是通过定期发送控制消息&#xff08;称为keepalive消息&#xff09;实现的。如果在预定时…
阅读更多...
鸿蒙Harmony应用开发—ArkTS-if/else：条件渲染

鸿蒙Harmony应用开发—ArkTS-if/else：条件渲染

ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态&#xff0c;使用if、else和else if渲染对应状态下的UI内容。 说明&#xff1a; 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使用。 使用规则 支持if、else和else if语句。 if、else if后跟随的条件语句…
阅读更多...
算法-双指针

算法-双指针

目录 1、双指针遍历分割:避免开空间&#xff0c;原地处理 2、快慢指针&#xff1a;循环条件下的判断 3、左右指针&#xff08;对撞指针&#xff09;&#xff1a;分析具有单调性&#xff0c;避免重复计算 双指针又分为双指针遍历分割&#xff0c;快慢指针和左右指针 1、双指…
阅读更多...
【leetcode热题】 位1的个数

【leetcode热题】 位1的个数

编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为汉明重量&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中…
阅读更多...
Linux安装Nginx及配置TCP负载均衡

Linux安装Nginx及配置TCP负载均衡

目录 1、安装编译工具及库文件2、下载解压Nginx压缩包3、Ngnix配置Tcp负载均衡4、配置Ngnix的文件5、Nginx启动 1、安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c libtool openssl openssl-devel pcre-devel2、下载解压Nginx压缩包 wget https://nginx.o…
阅读更多...
rider下ef core迁移

rider下ef core迁移

新建数据库 create database mockstu新建web项目 安装Microsoft.EntityFrameworkCore.SqlServer包 设置连接字符串 新建model using MockStuWeb.Models.EnumTypes; using System.ComponentModel.DataAnnotations;namespace MockStuWeb.Models {/// <summary>/// 学生…
阅读更多...
C程序编译、链接与项目构建

C程序编译、链接与项目构建

C程序编译、链接与项目构建 摘要C编译环境静、动态库介绍gcc与g和程序编译、链接Visual Studio创建和链接库动态库的显示调用 Make介绍安装使用 CMake介绍安装使用构建方式内部构建外部构建构建使用静/动态库常用[系统]变量常用指令CMake模块 Make与CMake的联系与区别 摘要 本…
阅读更多...
国内AI领域的新星：Kimi与GPT的较量，谁主沉浮？

国内AI领域的新星：Kimi与GPT的较量，谁主沉浮？

近期&#xff0c;国产大型人工智能模型Kimi频繁成为众多行业领袖讨论的焦点。这些来自不同领域的专家和领袖们&#xff0c;似乎都在对Kimi的性能和能力给予高度评价。在这两年国产AI模型的快速发展中&#xff0c;尽管市场上涌现出了许多新面孔&#xff0c;但真正能够在技术和应…
阅读更多...
LeetCode-热题100：79. 单词搜索

LeetCode-热题100：79. 单词搜索

题目描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水平相…
阅读更多...
Day45：WEB攻防-PHP应用SQL二次注入堆叠执行DNS带外功能点黑白盒条件

Day45：WEB攻防-PHP应用SQL二次注入堆叠执行DNS带外功能点黑白盒条件

目录 PHP-MYSQL-二次注入-DEMO&74CMS DEMO-用户注册登录修改密码 CMS-74CMS个人中心简历功能 PHP-MYSQL-堆叠注入-DEMO&CTF强网 Demo 2019强网杯-随便注&#xff08;CTF题型&#xff09; PHP-MYSQL-带外注入-DEMO&DNSLOG(让服务器主动把数据交出去) 知识点&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023