NFT交易市场-后端开发

news2024/11/19 3:32:49

  • 首先我们需要配置好我们的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");
    }

    //上传图片到IPFS
    const fileResult = await uploadFileToIPFS(filePath);
    //拿到上传图片的CID
    const 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
    )
        public
        view
        override(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");
    }

    //上传图片到IPFS
    const fileResult = await uploadFileToIPFS(filePath);
    //拿到上传图片的CID
    const 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.coloradmin.cn/o/1540242.html

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

相关文章

【数据结构】顺序表习题之移除元素和合并两个有效数组

【数据结构】顺序表习题之移除元素和合并两个有效数组

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《数据结构》 &#x1f389;道阻且长&#xff0c;行则将至 前言 嗨呀&#xff0c;今天的博客是关于顺序表的两道题目&#xff0c;是力扣的移除元素和合并有序数组的题目。 一.移除…
阅读更多...
java selenium 元素点击不了

java selenium 元素点击不了

最近做了一个页面爬取&#xff0c;很有意思被机缘巧合下解决了。 这个元素很奇怪&#xff0c;用xpath可以定位元素&#xff0c;但是就是click()不了。 试过了网上搜的一些办法&#xff1a; //尝试一 WebElement a_tag driver.findElement(By.xpath("xxx")); a_tag…
阅读更多...
今天聊聊新零售

今天聊聊新零售

一、什么是新零售&#xff1f; 2016年&#xff0c;在杭州举行的“云栖大会”上&#xff0c;马云发表了讲话&#xff0c;首次提出了“新零售”这一概念。 1.1 新零售概念 新零售&#xff0c;英文是New Retailing&#xff0c;新零售是对人货场的重构。人是消费者、销售人员、…
阅读更多...
Linux：Jenkins全自动持续集成持续部署（3）

Linux：Jenkins全自动持续集成持续部署（3）

在上一章部署好了之后&#xff0c;还需要点击一下才能进行部署&#xff0c;本章的效果是&#xff1a;当gitlab上的代码发生了变化后&#xff0c;我们不需要做任何事情不需要去点击构建按钮&#xff0c;Jenkins直接自动检测变化&#xff0c;然后自动去集成部署Linux&#xff1a;…
阅读更多...
jmeter参数化--CSV数据驱动

jmeter参数化--CSV数据驱动

主要是用来接口测试正例反例测试。 http请求下添加csv数据文件设置 进行csv配置 1、首先创建csv文件 内容第一行输入变量名&#xff0c;逗号隔开 下面输入正常异常的测试值及对应的校验结果。 2、CSV数据文件配置 文件名路径选择上面创建的csv文件 编码选utf-8 变量名与csv…
阅读更多...
【深度学习】四种天气分类 模版函数 从0到1手敲版本

【深度学习】四种天气分类 模版函数 从0到1手敲版本

引入该引入的库 import torch import torch.nn as nn import matplotlib.pyplot as plt import torch.nn.functional as F import torchvision import torch.optim as optim %matplotlib inline import os import shutil import glob os.environ["KMP_DUPLICATE_LIB_OK&q…
阅读更多...
【数据挖掘】实验5：数据预处理（1）

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

实验5&#xff1a;数据预处理&#xff08;1&#xff09; 一&#xff1a;实验目的与要求 1&#xff1a;熟悉和掌握数据预处理&#xff0c;学习数据清洗、数据集成、数据变换、数据规约、R语言中主要数据预处理函数。 二&#xff1a;实验内容 【缺失值分析】 第一步&#xff1…
阅读更多...
Python工具-清理Unity(批量深度)清理U3D项目工程保留关键工程文件

Python工具-清理Unity(批量深度)清理U3D项目工程保留关键工程文件

前沿 1. Unity工程越来越多&#xff0c;很久不用的工程里存在了很多无用的大文件夹&#xff0c;极大的影响电脑容量。 2. 我电脑里面U3D工程只有17个&#xff0c;但容量就高达60GB&#xff0c;使用自己编写的工具清理后&#xff0c;减到了30GB多。清理了不是很重要的文件和文件…
阅读更多...
2024-03-22 问AI: 介绍一下深度学习中的 sigmoid函数

2024-03-22 问AI: 介绍一下深度学习中的 sigmoid函数

文心一言 Sigmoid函数是深度学习中常用的一种激活函数&#xff0c;主要用于将神经元的输出值压缩到0和1之间。这种特性使得sigmoid函数在二分类问题中特别有用&#xff0c;因为输出值可以被解释为属于某个类别的概率。 sigmoid函数的数学表达式为&#xff1a; σ(x) 1 / (1…
阅读更多...
Notepad++ 如何调整显示字面大小

Notepad++ 如何调整显示字面大小

在 Notepad 上&#xff0c;可以使用 ctrl 加上鼠标的左键来滚动来进行调整。 如何恢复默 可以使用 Ctrl 加数字键盘上的 / 键 来恢复默认设置。 当然也可以通过菜单栏上 view 菜单下的 Zoom 选项。 上面的界面中可以看到我们的在 Notepad 中使用的选项。 Notepad 如何调整显示…
阅读更多...
llvm后端

llvm后端

SelectionDAGBuilder是LLVM&#xff08;Low Level Virtual Machine&#xff09;编译器中的一个重要组件&#xff0c;它负责将LLVM中间表示&#xff08;Intermediate Representation&#xff0c;IR&#xff09;转换为SelectionDAG&#xff08;选择有向无环图&#xff09;的形式。…
阅读更多...
RabbitMq高可用

RabbitMq高可用

消息队列高级 服务异步通信-高级篇1.消息可靠性1.1.生产者消息确认1.2.消息持久化1.3.消费者消息确认1.4.消费失败重试机制1.5.总结 2.死信交换机2.1.初识死信交换机2.2.TTL2.3.延迟队列 3.惰性队列3.1.消息堆积问题3.2.惰性队列 4.MQ集群4.1.集群分类4.2.普通集群4.3.镜像集群…
阅读更多...
C#，图论与图算法，计算图（Graph）的岛（Island）数量的算法与源程序

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

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

Spring05 SpringIOC DI

名词解释 今天我们来介绍Spring框架的最重要的part之一 SpringIOC 和 DI 这里的SpringIOC 其实是容器的意思,Spring是一个包含了很多工具方法的IOC容器 什么是IOC呢? IOC其实是Spring的核心思想 Inversion of Control (控制反转) 可能这里你还是不理解这个是啥意思 其实就…
阅读更多...
xilinx的高速接口构成原理和连接结构

xilinx的高速接口构成原理和连接结构

本文来源&#xff1a; V3学院 尤老师的培训班笔记【高速收发器】xilinx高速收发器学习记录Xilinx-7Series-FPGA高速收发器使用学习—概述与参考时钟GT Transceiver的总体架构梳理 文章目录 一、概述&#xff1a;二、高速收发器结构&#xff1a;2.1 QUAD2.1.1 时钟2.1.2 CHANNEL…
阅读更多...
【SysBench】OLTP 基准测试示例

【SysBench】OLTP 基准测试示例

前言 本文采用 MySQL 沙盒实例作为测试目标&#xff0c;使用 sysbench-1.20 对其做 OLTP 基准测试。 有关 MySQL 沙盒的更多信息&#xff0c;请参阅 玩转 MySQL Shell 沙盒实例&#xff0c;【MySQL Shell】6.8 AdminAPI MySQL 沙盒 。 1、部署一个 MySQL 沙盒实例 使用 mysq…
阅读更多...
【ESP32S3 Sense接入百度在线语音识别】

【ESP32S3 Sense接入百度在线语音识别】

视频地址&#xff1a; 1. 前言 使用Seeed XIAO ESP32S3 Sense开发板接入百度智能云实现在线语音识别。自带麦克风模块用做语音输入&#xff0c;通过串口发送字符“1”来控制数据的采集和上传。 步骤概括    (1) 在百度云控制端选择“语音识别”并创建应用获取API Key和Secr…
阅读更多...
MapReduce学习问题记录

MapReduce学习问题记录

1、如何跳过对某行数据的处理 第一行数据是字段名不需要处理&#xff0c;我们知道第一行偏移量是0&#xff08;行记录的时候是从数组首地址开始&#xff0c;到了行标识符进行一次计数&#xff0c;这个计数就是行偏移量&#xff0c;从0开始&#xff09;&#xff0c;我们根据偏移…
阅读更多...
银行5G短消息应用架构设计

银行5G短消息应用架构设计

&#xff08;一&#xff09;RCS简介 1.1 RCS的提出与标准制定 RCS(Rich Communication Services & Suite&#xff0c;富媒体通信)是GSMA(Groupe Speciale Mobile Association&#xff0c;全球移动通信系统协会)在2008年提出的一种通讯方式&#xff0c;RCS融合了语音、消息…
阅读更多...
【算法每日一练]-图论（保姆级教程篇16 树的重心 树的直径）#树的直径 #会议 #医院设置

【算法每日一练]-图论（保姆级教程篇16 树的重心 树的直径）#树的直径 #会议 #医院设置

目录 树的直径 题目&#xff1a;树的直径 &#xff08;两种解法&#xff09; 做法一&#xff1a; 做法二&#xff1a; 树的重心&#xff1a; 题目&#xff1a; 会议 思路&#xff1a; 题目&#xff1a;医院设置 思路&#xff1a; 树的直径 定义&#xff1a;树中距离最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023