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.hqwc.cn/news/562904.html

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

相关文章

H5实现Web ECharts教程：轻松创建动态数据图表

H5实现Web ECharts教程：轻松创建动态数据图表

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
智慧公厕：跨界融合，打造智慧城市新名片

智慧公厕：跨界融合，打造智慧城市新名片

随着城市化进程的不断加快&#xff0c;公共厕所建设成为一个亟待解决的问题。传统的公厕存在着管理繁琐、卫生差、服务不到位等一系列问题&#xff0c;与城市发展的节奏不协调。为此&#xff0c;推进新型智慧公厕建设成为了一个重要的解决方案。智慧公厕的建设需要推进技术融合…
阅读更多...
InstructGPT的流程介绍

InstructGPT的流程介绍

1. Step1&#xff1a;SFT&#xff0c;Supervised Fine-Tuning&#xff0c;有监督微调。顾名思义&#xff0c;它是在有监督&#xff08;有标注&#xff09;数据上微调训练得到的。这里的监督数据其实就是输入Prompt&#xff0c;输出相应的回复&#xff0c;只不过这里的回复是人工…
阅读更多...
【暴刷力扣】11. 盛最多水的容器

【暴刷力扣】11. 盛最多水的容器

11. 盛最多水的容器 题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xf…
阅读更多...
会员中心微服务

会员中心微服务

文章目录 1.环境配置1.创建会员中心模块2.检查父子模块的pom.xml1.父模块注意&#xff1a;如果父模块中的依赖显示not found&#xff0c;原因是子模块并没有引用&#xff0c;不用在意 2.子模块 3.pom.xml 引入相关依赖&#xff08;别忘记刷新maven&#xff09;4.application.ym…
阅读更多...
使用双异步后，从 191s 优化到 2s

使用双异步后，从 191s 优化到 2s

使用双异步后&#xff0c;从 191s 优化到 2s 一般我会这样做&#xff1a; 通过POI读取需要导入的Excel&#xff1b; 以文件名为表名、列头为列名、并将数据拼接成sql&#xff1b; 通过JDBC或mybatis插入数据库&#xff1b; 操作起来&#xff0c;如果文件比较多&#xff0…
阅读更多...
计算机网络：物理层下的传输媒体概览

计算机网络：物理层下的传输媒体概览

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
手机实时监控电脑屏幕（手机可以看到电脑在干什么吗）

手机实时监控电脑屏幕（手机可以看到电脑在干什么吗）

已经2024年了&#xff0c;假如你还在问我&#xff0c;手机可以看到电脑在干什么吗&#xff0c;有没有手机实时监控电脑屏幕的系统。 那么证明&#xff0c;你可能已经out 了。 现代科技告诉发展的态势下&#xff0c;这种技术已经很成熟了。 域智盾软件就可以实现这种效果↓我们…
阅读更多...
HTML元素语义化补充之css函数（三)

HTML元素语义化补充之css函数（三)

文章目录 CSS中的函数css函数–varcss函数–calccss函数–blurcss函数–gradientlinear-gradient的使用 CSS中的函数 ◼ 在前面我们有使用过很多个CSS函数: 比如rgb/rgba/translate/rotate/scale等; CSS函数通常可以帮助我们更加灵活的来编写样式的值&#xff1b; ◼ 下面有几…
阅读更多...
Spring Boot1

Spring Boot1

SpringBoot概述 Spring Boot是Spring提供的一个子项目&#xff0c;用于快速构建Spring应用程序 SpringBoot特性 起步依赖 本质上就是一个Maven坐标&#xff0c;整合了完成一个功能所需要的所有坐标 自动配置 遵循约定大于配置的原则&#xff0c;再boot程序启动后&#xff0…
阅读更多...
【数据挖掘】实验5：数据预处理（1）

【数据挖掘】实验5：数据预处理（1）

实验5&#xff1a;数据预处理&#xff08;1&#xff09; 一&#xff1a;实验目的与要求 1&#xff1a;熟悉和掌握数据预处理&#xff0c;学习数据清洗、数据集成、数据变换、数据规约、R语言中主要数据预处理函数。 二&#xff1a;实验内容 【缺失值分析】 第一步&#xff1…
阅读更多...
MongoDB知识

MongoDB知识

1、部署MongoDB &#xff08;1&#xff09;new好一个mongo文件之后执行 &#xff08;出现mongodb.key&#xff09;记得放行端口 openssl rand -base64 666 > mongodb.key &#xff08;2&#xff09;放到一个docker-compose.yml之后docker-compose up -d执行 version: 3.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023