各位观众老爷们,大家好!欢迎来到今天的“Vue DApp 养成记”讲座。今天咱们不讲玄学,只讲实操,手把手教你把你的 Vue 应用变成链上的一份子,让它也能在区块链的世界里浪起来。
开场白:DApp,不仅仅是个 App
啥是 DApp?别看名字好像很高大上,其实说白了,就是跑在区块链上的应用程序。它跟普通 App 的区别在于:
- 去中心化: 没有中心服务器,数据存储在区块链上,抗审查,更安全。
- 透明: 所有交易记录都公开透明,可追溯。
- 不可篡改: 一旦写入区块链,数据就无法修改,保证了数据的真实性。
当然,DApp 也不是万能的,它也有缺点,比如交易速度慢,开发难度高等。但是,随着区块链技术的不断发展,这些问题都在逐步得到解决。
第一部分:准备工作,工欲善其事
要打造一个 Vue DApp,我们需要准备以下工具和环境:
- Node.js 和 npm (或 yarn): 这是 Vue 项目的基础环境,用来管理依赖包和运行开发服务器。
- Vue CLI: Vue 的脚手架工具,可以快速创建 Vue 项目。
- MetaMask 浏览器插件: 这是一个以太坊钱包,可以用来连接 DApp 和区块链网络。
- 一个以太坊节点 (或 Ganache): 可以连接到公共以太坊网络 (如 Ropsten、Rinkeby) 或使用 Ganache 创建一个本地的模拟区块链网络。
- Web3.js (或 ethers.js): 这是一个 JavaScript 库,可以用来与以太坊区块链进行交互。
- 一个 Solidity 编译器: 用于将智能合约代码编译成字节码 (bytecode)。
安装工具:
- Node.js 和 npm: 直接去 Node.js 官网下载安装包,一路 next 就行。安装完成后,打开命令行工具,输入
node -v
和npm -v
,如果能显示版本号,就说明安装成功了。 - Vue CLI: 在命令行中运行
npm install -g @vue/cli
或者yarn global add @vue/cli
,安装完成后,输入vue --version
,如果能显示版本号,就说明安装成功了。 - MetaMask: 在 Chrome 浏览器中搜索 MetaMask 插件,安装并按照提示创建或导入一个钱包。
- Ganache: 可以从 Truffle Suite 官网下载 Ganache,安装后运行,它会创建一个本地的区块链网络。
第二部分:创建 Vue 项目,打好地基
有了工具,咱们就可以开始创建 Vue 项目了。
- 使用 Vue CLI 创建项目: 在命令行中运行
vue create my-dapp
,选择默认配置或者自定义配置,创建一个新的 Vue 项目。 - 进入项目目录: 运行
cd my-dapp
,进入项目目录。 - 安装 Web3.js: 运行
npm install web3
或者yarn add web3
,将 Web3.js 安装到项目中。
第三部分:编写智能合约,灵魂所在
DApp 的灵魂在于智能合约,它是运行在区块链上的代码,定义了 DApp 的逻辑和规则。
- 创建一个 Solidity 文件: 在项目根目录下创建一个
contracts
文件夹,然后在contracts
文件夹中创建一个Greeter.sol
文件。 - 编写智能合约代码: 在
Greeter.sol
文件中写入以下代码:
pragma solidity ^0.8.0;
contract Greeter {
string public greeting;
constructor(string memory _greeting) {
greeting = _greeting;
}
function setGreeting(string memory _greeting) public {
greeting = _greeting;
}
function getGreeting() public view returns (string memory) {
return greeting;
}
}
这个合约很简单,它包含一个 greeting
变量,一个构造函数用来初始化 greeting
,一个 setGreeting
函数用来修改 greeting
,一个 getGreeting
函数用来获取 greeting
。
-
编译智能合约: 可以使用 Remix IDE 在线编译,也可以安装 Solidity 编译器
solc
在本地编译。- Remix IDE: 打开 Remix IDE (remix.ethereum.org),将
Greeter.sol
文件复制到 Remix IDE 中,选择 Solidity 编译器版本 (0.8.0),点击编译按钮。 - solc: 安装 solc:
npm install -g solc
或者yarn global add solc
。然后在命令行中运行solc --abi --bin contracts/Greeter.sol -o build
,将合约编译成 ABI 和 bytecode,它们会保存在build
文件夹中。
- Remix IDE: 打开 Remix IDE (remix.ethereum.org),将
-
理解ABI和Bytecode:
概念 | 解释 |
---|---|
ABI | 应用程序二进制接口 (Application Binary Interface),它定义了智能合约的函数、参数和返回值的格式。 Web3.js 使用 ABI 来与智能合约进行交互,知道如何调用合约的函数,以及如何解析合约返回的数据。 |
Bytecode | 智能合约的编译后的机器码,它可以部署到以太坊区块链上。 部署智能合约时,需要将 bytecode 发送到以太坊网络。 |
第四部分:连接 Vue 和区块链,搭桥铺路
现在我们有了 Vue 项目和智能合约,接下来需要将它们连接起来。
- 引入 Web3.js: 在 Vue 组件中引入 Web3.js。
import Web3 from 'web3';
- 初始化 Web3: 在 Vue 组件的
mounted
钩子函数中初始化 Web3。
mounted() {
// 检查是否已经注入了 Web3 provider (MetaMask)
if (window.ethereum) {
this.web3 = new Web3(window.ethereum);
try {
// 请求用户授权连接
window.ethereum.enable().then(() => {
this.getAccount();
this.loadContract();
});
} catch (error) {
console.error("User denied account access");
}
} else if (window.web3) {
// 使用旧版本的 Web3 provider
this.web3 = new Web3(window.web3.currentProvider);
this.getAccount();
this.loadContract();
} else {
console.log('No web3 instance detected. Please install MetaMask!');
}
},
这段代码首先检查浏览器是否已经安装了 MetaMask 插件,如果安装了,就使用 MetaMask 提供的 Web3 provider 初始化 Web3 实例。如果没安装,就提示用户安装 MetaMask。
- 获取用户账户: 使用
web3.eth.getAccounts()
获取用户账户。
methods: {
async getAccount() {
const accounts = await this.web3.eth.getAccounts();
this.account = accounts[0];
},
这段代码使用 web3.eth.getAccounts()
获取用户账户,并将第一个账户赋值给 this.account
。
- 加载智能合约: 使用 ABI 和合约地址加载智能合约。
async loadContract() {
const abi = /* 从编译后的 JSON 文件中获取 ABI */;
const contractAddress = /* 部署合约后得到的合约地址 */;
this.contract = new this.web3.eth.Contract(abi, contractAddress);
},
这段代码首先从编译后的 JSON 文件中获取 ABI,然后从部署合约后得到的合约地址,使用 web3.eth.Contract()
创建一个合约实例。
- 调用智能合约函数: 使用合约实例调用智能合约函数。
async setGreeting(newGreeting) {
await this.contract.methods.setGreeting(newGreeting).send({ from: this.account });
this.getGreeting();
},
async getGreeting() {
const greeting = await this.contract.methods.getGreeting().call();
this.greeting = greeting;
},
}
这段代码定义了两个函数,setGreeting
用来修改 greeting
变量,getGreeting
用来获取 greeting
变量。
setGreeting
函数使用contract.methods.setGreeting(newGreeting).send({ from: this.account })
调用智能合约的setGreeting
函数,send()
函数表示这是一个需要发送交易的函数,需要指定交易的发送者from
。getGreeting
函数使用contract.methods.getGreeting().call()
调用智能合约的getGreeting
函数,call()
函数表示这是一个只读函数,不需要发送交易。
第五部分:部署智能合约,走向链上
智能合约写好后,需要部署到区块链上才能被 DApp 使用。
-
连接到区块链网络: 可以使用 MetaMask 连接到公共以太坊网络 (如 Ropsten、Rinkeby) 或使用 Ganache 创建一个本地的模拟区块链网络。
-
使用 Truffle 部署智能合约: Truffle 是一个以太坊开发框架,可以用来编译、测试和部署智能合约。
- 安装 Truffle: 运行
npm install -g truffle
或者yarn global add truffle
,安装 Truffle。 - 初始化 Truffle 项目: 在项目根目录下运行
truffle init
,创建一个 Truffle 项目。 - 配置 Truffle: 修改
truffle-config.js
文件,配置网络信息。
- 安装 Truffle: 运行
module.exports = {
networks: {
development: {
host: "127.0.0.1",
port: 7545, // Ganache 默认端口
network_id: "*" // 匹配任何 network id
},
ropsten: {
provider: () => new HDWalletProvider(mnemonic, `https://ropsten.infura.io/v3/${infuraProjectId}`),
network_id: 3, // Ropsten's id
gas: 5500000, // Ropsten has a lower block limit than mainnet
confirmations: 2, // # of confs to wait between deployments. (default: 0)
timeoutBlocks: 200, // # of blocks before a deployment times out (minimum: 50)
skipDryRun: true // Skip dry run before migrations? (default: false for public nets )
},
},
// Configure your compilers
compilers: {
solc: {
version: "0.8.0", // Fetch exact version from solc-bin (default: truffle's version)
}
},
};
* **编写部署脚本:** 在 `migrations` 文件夹中创建一个 `1_deploy_greeter.js` 文件,编写部署脚本。
const Greeter = artifacts.require("Greeter");
module.exports = function (deployer) {
deployer.deploy(Greeter, "Hello, Blockchain!");
};
* **部署智能合约:** 在命令行中运行 `truffle migrate`,部署智能合约到区块链上。
- 获取合约地址: 部署成功后,会得到合约地址,将合约地址复制到 Vue 项目中。
第六部分:前端界面,用户体验
光有后台逻辑还不行,还得有一个漂亮的前端界面,才能让用户更好地使用 DApp。
- 创建 Vue 组件: 创建一个 Vue 组件,用来显示和修改
greeting
变量。
<template>
<div>
<h1>Greeting: {{ greeting }}</h1>
<input type="text" v-model="newGreeting">
<button @click="setGreeting(newGreeting)">Set Greeting</button>
</div>
</template>
<script>
import Web3 from 'web3';
export default {
data() {
return {
web3: null,
account: null,
contract: null,
greeting: '',
newGreeting: ''
}
},
mounted() {
if (window.ethereum) {
this.web3 = new Web3(window.ethereum);
try {
window.ethereum.enable().then(() => {
this.getAccount();
this.loadContract();
});
} catch (error) {
console.error("User denied account access");
}
} else if (window.web3) {
this.web3 = new Web3(window.web3.currentProvider);
this.getAccount();
this.loadContract();
} else {
console.log('No web3 instance detected. Please install MetaMask!');
}
},
methods: {
async getAccount() {
const accounts = await this.web3.eth.getAccounts();
this.account = accounts[0];
},
async loadContract() {
const abi = /* 从编译后的 JSON 文件中获取 ABI */;
const contractAddress = /* 部署合约后得到的合约地址 */;
this.contract = new this.web3.eth.Contract(abi, contractAddress);
this.getGreeting();
},
async setGreeting(newGreeting) {
await this.contract.methods.setGreeting(newGreeting).send({ from: this.account });
this.getGreeting();
},
async getGreeting() {
const greeting = await this.contract.methods.getGreeting().call();
this.greeting = greeting;
},
}
}
</script>
- 将组件添加到 App.vue: 将创建的组件添加到
App.vue
中。
第七部分:测试和优化,精益求精
DApp 开发完成后,需要进行充分的测试和优化,确保 DApp 的功能正常,性能良好,用户体验优秀。
- 功能测试: 测试 DApp 的所有功能,确保功能正常。
- 性能测试: 测试 DApp 的性能,确保性能良好。
- 安全测试: 测试 DApp 的安全性,确保 DApp 安全。
- 用户体验测试: 测试 DApp 的用户体验,确保用户体验优秀。
第八部分:总结和展望,未来可期
恭喜你,经过以上步骤,你已经成功地创建了一个 Vue DApp!虽然这只是一个简单的示例,但是它包含了 DApp 开发的核心要素。
DApp 开发是一个充满挑战和机遇的领域,随着区块链技术的不断发展,DApp 的应用场景将会越来越广泛。希望今天的讲座能够帮助你入门 DApp 开发,开启你的区块链之旅!
一些额外的提示:
- 错误处理: 在 DApp 开发中,错误处理非常重要。需要对所有可能出错的地方进行错误处理,防止 DApp 崩溃。
- Gas 优化: 在以太坊网络上,每次交易都需要消耗 Gas。Gas 越多,交易费用越高。因此,需要尽可能地优化智能合约代码,减少 Gas 消耗。
- 安全性: DApp 的安全性非常重要。需要对智能合约代码进行安全审计,防止智能合约被攻击。
- 用户体验: DApp 的用户体验也很重要。需要设计一个简洁易用的用户界面,让用户能够轻松地使用 DApp。
最后,祝大家开发愉快,链上见!