专门为前端工程师设计 Nodejs+React 实战开发区块链“慕课”DApp

专门为前端工程师设计 Nodejs+React 实战开发区块链“慕课”DApp

专门为前端工程师设计 Nodejs+React 实战开发区块链“慕课”DApp

获取ZY↑↑方打开链接↑↑

手把手教你使用Nodejs+React开发区块链“慕课”DApp

导语：随着区块链技术的不断发展，越来越多的应用场景开始涌现。本文将带领大家使用Nodejs和React技术栈，实战开发一款基于区块链的“慕课”DApp（去中心化应用），让你轻松掌握区块链应用开发。

一、项目背景

近年来，在线教育市场火爆，慕课（MOOC）作为一种新型的在线教育模式，受到了广泛关注。然而，传统的慕课平台存在数据不透明、版权纠纷等问题。利用区块链技术，我们可以打造一个去中心化的慕课平台，实现数据透明、版权保护等功能。

二、项目准备

技术选型

后端：Nodejs + Express 前端：React + Ant Design 区块链：以太坊（Ethereum）

环境搭建

（1）安装Nodejs和npm （2）安装Truffle框架：npm install -g truffle （3）安装Ganache，用于本地以太坊网络测试 （4）安装React相关依赖：npm install create-react-app

三、项目实战

智能合约开发

（1）创建Truffle项目：truffle init （2）编写智能合约：在contracts目录下创建Mooc.sol文件

pragma solidity ^0.5.0;

contract Mooc {

struct Course {

uint256 id;

string name;

address author;

uint256 price;

}

mapping(uint256 => Course) public courses;

uint256 public courseCount;

event CourseCreated(

uint256 id,

string name,

address author,

uint256 price

);

function createCourse(string memory _name, uint256 _price) public {

require(bytes(_name).length > 0, "课程名称不能为空");

require(_price > 0, "课程价格必须大于0");

courseCount++;

courses[courseCount] = Course(courseCount, _name, msg.sender, _price);

emit CourseCreated(courseCount, _name, msg.sender, _price);

}

function buyCourse(uint256 _id) public payable {

require(_id > 0 && _id <= courseCount, "课程ID不存在");

Course memory course = courses[_id];

require(msg.value >= course.price, "支付金额不足");

address payable author = address(uint160(course.author));

author.transfer(msg.value);

}

}

（3）编译智能合约：truffle compile

后端开发

（1）创建Express项目：npm init -y && npm install express web3 （2）编写后端代码：在项目根目录下创建server.js文件

const express = require('express');

const web3 = require('web3');

const app = express();

// 连接本地Ganache以太坊网络

const web3Provider = new web3.providers.HttpProvider('http://localhost:7545');

const web3Instance = new web3(web3Provider);

// 读取智能合约地址和ABI

const contractAddress = '智能合约部署后的地址';

const contractABI = require('./build/contracts/Mooc.json').abi;

// 创建智能合约实例

const moocContract = new web3Instance.eth.Contract(contractABI, contractAddress);

// 获取课程列表

app.get('/courses', async (req, res) => {

try {

const courses = [];

for (let i = 1; i <= await moocContract.methods.courseCount().call(); i++) {

const course = await moocContract.methods.courses(i).call();

courses.push(course);

}

res.json(courses);

} catch (error) {

res.status(500).send(error.message);

}

});

// 启动服务器

const port = 3000;

app.listen(port, () => {

console.log(Server is running on port ${port});

});

前端开发

（1）创建React项目：create-react-app mooc-dapp （2）编写前端代码：在src目录下创建App.js文件

import React, { useEffect, useState } from 'react';

import { List, Button, InputNumber } from 'antd';

import axios from 'axios';

const App = () => {

const [courses, setCourses] = useState([]);

const [loading, setLoading] = useState(false);

useEffect(() => {

fetchCourses();

}, []);

const fetchCourses = async () => {

setLoading(true);

try {

const response = await axios.get('/courses');

setCourses(response.data);

} catch (error) {

console.error(error);

}

setLoading(false);

};

const buyCourse = async (id, price) => {

// 调用智能

合约的buyCourse方法进行购买，此处需要使用web3.js与以太坊交互 // 以下代码仅为示例，实际应用中需要处理交易发送、事件监听等逻辑 const web3 = new Web3(Web3.givenProvider || ‘http://localhost:7545’); const accounts = await web3.eth.getAccounts(); const contractAddress = ‘智能合约部署后的地址’; const contractABI = require(‘…/path/to/contracts/Mooc.json’).abi; const moocContract = new web3.eth.Contract(contractABI, contractAddress);

await moocContract.methods.buyCourse(id).send({

from: accounts[0],

value: web3.utils.toWei(price.toString(), 'ether')

});

fetchCourses(); // 重新获取课程列表

};

return (

);

};

export default App;

（3）在src目录下创建index.js文件，并引入App组件

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import 'antd/dist/antd.css';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

项目部署与测试

（1）部署智能合约到本地Ganache网络：truffle migrate （2）启动后端服务器：node server.js （3）启动前端项目：npm start （4）在浏览器中访问前端项目，进行功能测试

四、总结

本文通过一个简单的区块链“慕课”DApp项目，介绍了如何使用Nodejs和React技术栈进行区块链应用开发。通过这个项目，我们可以了解到智能合约的编写、前端与后端的交互以及如何与区块链网络进行通信。希望这篇文章能帮助您快速上手区块链应用开发。