NFT交易市场-后端开发

最新推荐文章于 2024-07-30 14:39:06 发布
最新推荐文章于 2024-07-30 14:39:06 发布
阅读量1.2k 收藏 31
点赞数 28
分类专栏： Dapp设计与开发学习 文章标签： 区块链 智能合约 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thq_kuqi/article/details/136740336
版权 
<!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，我这里是成功了哈，注意别替换错了。
  • 未完待续~😀（有什么问题欢迎提问哈）
酷七嗷呜~
关注
  • 28
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
2022NFT开发平台数字藏品开发平台源码
10-25
7. **交易市场**：实现NFT的拍卖、固定价格销售等功能，可能包含订单系统和结算逻辑。 8. **铸造与发行**：允许创作者上传作品并铸造成NFT，这需要处理文件上传、元数据创建和智能合约调用。 9. **版权保护**：NFT...
NFT数字藏品艺术品交易平台，数字藏品系统源码
06-01
后端采用Spring Boot、Spring Data Jpa、Sa Token、 Redis、Mysql。 前端采用uniapp跨端开发，一套代码，可发布到iOS、Android、Web（响应式）等多个平台。 本项目主要供交流学习，请不要用于商业项目。 h5版本：...
手把手教你区块链java开发智能合约nft-第一篇
huangxuanheng的专栏
06-23 8189
刚接触区块链开发，使用java开发，真的是太难了，自己一步步摸索，从新手小白一路碰壁，动不动就报错，去网上搜索对应错误，还真什么都搜索不到，摸索了三四个月，今天终于有了一些进展，今天开始分享出来，希望能帮助到需要的朋友 我作为一个java后端的程序员，不会写智能合约，但是可以找对应会的人写，或者自己网上找资料自己写。这里只介绍怎么将智能合约转为java代码...
NFT数字艺术-数字藏品-小程序APP源码|元宇宙区块链nft-功能介绍
.
10-29 505
NFT数字藏品及NFT交易市场。源码，可以二开（源码正常运行）前端uni，后端php。
推荐项目：nft_simple - 轻松构建你的NFT应用
gitblog_00015的博客
06-05 360
推荐项目：nft_simple - 轻松构建你的NFT应用 项目地址:https://gitcode.com/azkadev/nft_app 1、项目介绍 在Web3.0的世界里，非同质化代币（NFT）已成为数字艺术、游戏收藏品和虚拟世界资产的新宠。nft_simple 是一个开源的Flutter项目，专为快速开发NFT相关应用而设计。它提供了简洁的UI和基础功能，让开发者能够以最小的学习曲线，迅...
天空艺术藏品NFT源码
07-04
综合以上信息，我们可以推测这是一个完整的NFT艺术交易平台的开发资源包，涵盖了从后端服务到前端展示的全部技术栈。开发者或学习者可以通过研究这个项目，了解如何利用ThinkPHP框架构建一个支持NFT的Web应用，以及...
space数藏源码-数字藏品NFT数藏源码
08-25
在当前的数字收藏市场中，NFT已经成为一种热门的投资和创作工具。 该源码可能包含以下几个关键部分： 1. **前端界面**：这部分代码负责用户交互，包括藏品展示、购买、出售、拍卖等功能。前端可能使用React、Vue或...
数源三街 NFT 数字藏品系统源码
12-28
主要包括数字藏品铸造、发行、空投、盲盒、合并、交易、分享、预售等相关功能开发。标准化产品，已对接 BSN、Polygon、以太坊等。快速交付。后端 Java 语言，稳定可靠。 演示地址：https://web.shuyuansanjie.com ...
区块链媒体：5种区块链媒体发布推广方法
li15929946878的博客
07-26 373
这种跨文化的交流不仅促进了社会的进步，还为各国合作提供了更多的机会。本文介绍的5种区块链媒体发布推广方法，包括发布新闻稿、撰写专栏或博客文章、参与线上社区讨论、举办线上/线下活动以及寻求合作或公关报道，可以帮助区块链项目吸引更多的关注和用户，提升项目的。加入各大区块链社交平台或论坛，如Reddit、Bitcointalk等，积极回答用户关于项目的问题，解答疑惑，与用户进行交流，可以建立起项目与用户之间的信任和亲近感。通过与合作伙伴和媒体的合作，将项目引入更广泛的视野，从而有机会获得更多的关注和认可。
2024第八届全国职工职业技能大赛“网络与信息安全管理员”赛项技术文件及任务书
Aluxian_的博客
07-27 995
全国职工职业技能大赛网络与信息安全管理员赛项参赛对象为从事网络安全工作的职工。鉴于参赛选手日常工作的主要职责是保障信息系统安全稳定运行，大赛将从政策法规标准和网络安全风险评估、安全应急响应技术、数据安全、人工智能、国产信创等全方位考核从业职工的网络安全综合能力。
【区块链+绿色低碳】雄韬智慧锂电储能管理系统 | FISCO BCOS应用案例
FISCO_BCOS的博客
07-26 230
系统采用了 FISCO BCOS 联盟链，融合了物联网、智能锂电、云计算、AI 等技术，一方面可以作为储能系统独立运营， 通过自动匹配与执行相关地区、区域的峰谷电价，智能执行分时策略，通过峰谷差价直接为用户创造经济效益； 另一方面，系统也可以作为新能源聚合商接入虚拟电厂，向上提供对聚合区域设备的调度和管理，参与电网需求响应市场。
Covalent（CXT）在主要交易平台上线CXT代币，不断扩大生态影响力
区块链蓝海
07-29 367
Covalent Network（CXT）是领先的模块化数据基础设施层，致力于解决区块链和 AI 领域的主要挑战，包括可验证性、去中心化 AI 推理和长期数据可用性。CXT 在上述领先平台上的上线，凸显了 Covalent Network（CXT）扩大影响力并为全球用户提供无缝访问其代币的承诺，并使全球的交易者和投资者能够参与到 CXT 的交易中，从而将促进更多代币在 Covalent Network（CXT）网络中进行抵押和委托参与，目前已质押的代币数量约占流通代币总量的 35%。拓展影响力与可访问性。
区块链软硬件协同，做产业数字化转型的“安全官” |《超话区块链》直播预告
最新发布
FISCO_BCOS的博客
07-30 151
8月1日晚8点，我们不见不散。
ETH现货ETF流入量估算：会重演BTC现货ETF走势吗？
Lovely_xwys的博客
07-27 396
ETH流入ETH ETF → ETH价格上涨 → 对ETH的兴趣上升 → DeFi/链使用率上升 → DeFi基本指标改善 → EIP-1559销毁增加 → ETH供应量下降 → ETH价格上涨 → 更多ETH流入ETH ETF → 对ETH的兴趣上升。这种循环在BTC ETF中缺乏，ETH作为“去中心化的应用商店”，拥有完整的生态系统，将受益于基础资产的持续流入。ETH DeFi协议中有2000万ETH（630亿美元）的TVL，随着ETH交易的走高，ETH DeFi的投资吸引力也越来越大。
智能合约在能源行业中的应用：促进可再生能源的发展与利用
Roun3的博客
07-26 342
智能合约作为区块链技术的重要应用之一，在能源行业中展现了广泛的应用前景和潜力。通过智能合约的自动化执行和区块链技术的安全保障，我们可以期待未来能源行业更加智能化、高效化和可持续发展的新局面。
【区块链+绿色低碳】数字碳链 | FISCO BCOS应用案例
FISCO_BCOS的博客
07-26 364
深圳职业技术大学采用 FISCO BCOS 联盟链开源技术，推出数字碳链。
【参会邀请】第四届区块链技术与信息安全国际会议（ICBCTIS 2024）诚邀相聚江城！
07-29 319
我们诚挚地邀请您参与第四届区块链技术与信息安全国际会议（ICBCTIS 2024）。本届会议将于2024年8月17日~19日在中国武汉召开。会议将围绕区块链技术与信息安全等相关研究领域，特邀国内外数位在此领域学术卓越的学者专家做相关致辞与报告，共同探讨当今计算机范畴内学科领域的最新发展方向及行业前沿动态。
2022年1-2月全球NFT市场交易深度分析报告
"全球NFT交易月报（2022年1-2月）.pdf" 是一份详细分析2022年1月和2月全球NFT市场的报告，由多个贡献者编撰，包括JianWenYuan、HaoLanHuang、ManYuan和KunWeiLiang。报告旨在填补NFT市场研究的空白，提供一个全面、...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值