使用solidity与web3创作一个在线小游戏之三：（在VUE中使用WEB3，并使用Truffle包装对象与智能合约交互）

最新推荐文章于 2025-04-10 20:21:16 发布
原创 最新推荐文章于 2025-04-10 20:21:16 发布 · 895 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #智能合约 #区块链

本文介绍了如何在Vue项目中集成Web3.js和Truffle Contract，通过命令行创建Vue环境，安装必要的依赖，并实现与自定义智能合约的交互。在过程中，遇到并解决了yarn serve的错误，最终成功在Vue组件中初始化Web3对象和合约抽象对象。

在我的上一篇文章使用solidity与web3创作一个在线小游戏之二：（proxy合约，solidity中的数组与mapping，状态变量的存储模型）_lixiaodog的博客-优快云博客中，我们完成了proxy合约以及一个可更新的合约，并了解了solidity的存储模型，在本章中，我们将使用vue做框架，并引入web3与truffle-constract，并与我们编写好的合约进行交互。接下来，让我们出发！

1。安装vue开发环境：

在命令行中输入：

$ npm install vue@next

结果如下图：

 

 安装编写单组件的配套工具

npm install -D @vue/compiler-sfc

命令行工具 (CLI)

npm install -g @vue/cli

 

最低0.47元/天 解锁文章
【区块链技术开发】 Solidity使用truffle工具创建智能合约项目案例
源代码杀手的博客
04-02 1916
您可以在官网上找到 Truffle 的文档、教程、示例代码等资源，以及社区论坛和支持服务等。此外，Truffle 的源代码也托管在 GitHub 上，可以在找到。Truffle 是一个用于构建和测试以太坊智能合约的开发框架。它提供了一整套工具，包括编译器、部署脚本、测试框架等，使得以太坊开发更加容易和高效。智能合约编译器：Truffle 内置了 Solidity 智能合约编译器，支持 Solidity 版本管理，并支持多种编译器选项，如优化、源映射等。智能合约部署和迁移。
Web3前端开发：与以太坊智能合约交互实录
s13166803785的博客
05-29 180
Web3前端开发：与以太坊智能合约交互实录
vue-drizzle-erc-721-example：ERC-721智能合约的一个示例，它允许创建不同类别的令牌
02-17
用松露，细雨和Vue制成的ERC-721示例 ERC-721，其中NFT令牌可以分为多个类别（形状）： 界 方格 三角形 等等（合同所有者可以创建新类别） 该示例与的相似，不同的是在这种情况下，令牌（不仅仅是类别）是完全不可替代的。 使用ERC-721的实现 该项目使用。 屏幕截图 薄荷页面 个人资料页 管理员页面 设置 安装松露 是用于开发以太坊dApp的框架： npm install truffle -g 安装Ganache Ganache是​​以太坊区块链/网络的本地主机模拟器。 我建议将Ganache与GUI一起使用（但如果需要，也可以使用CLI版本）： : 。 请注意，目前存在将MetaMask连接到Ganache GUI的，因此请考虑改用Ganache CLI（直到问题解决）。 像这样使用Ganache CLI： ganache-cli --chainId=13
使用solidity与web3创作一个在线小游戏之四：基于VUE的DAPP，与智能合约的交互
lixiaodog的博客
04-20 1137
在我的上一篇文章 使用solidity与web3创作一个在线小游戏之三：（在VUE中使用WEB3，并使用Truffle包装对象与智能合约交互）_lixiaodog的博客-优快云博客 中，我们完成了VUE框架的搭建，并成功编写了myWeb3对象，然后用这个对象成功获取到了我们当前的地址。在这章中，我们将使用VUE编写一个简单的LOGIN页面，并使用这个页面与GameManage合约完成登录这个交互动作。 首先在GameManage合约中，加入代码： function adminLogin(
使用 Vue+智能合约 构建一款基于区块链的应用
Christopher的博客
10-23 3573
银色子弹（SilverBullet） Vue2.x + Vuex + Vue-router + Nebulas + Nebpay + WebExtensionWallet +SmartContract 声明：该项目创意来自 https://aim400kg.com/ ，仅供学习交流使用，请勿用于其他商业用途。 项目地址 在线预览地址 Github地址 特性 前端使用vue + vue...
002-Solidity 在线运行环境完全指南
小宝哥Code的专栏
04-10 1566
针对特定版本要求。
Blockchain Task2
xiaowu_55555的博客
03-21 282
Solidity 入门教学 1、 简介 1.1 Solidity是什么 Solidity 是一门面向合约的、为实现智能合约而创建的高级编程语言。这门语言受到了 C++，Python 和 Javascript 语言的影响，设计的目的是能在以太坊虚拟机（EVM）上运行。 Solidity 是静态类型语言，支持继承、库和复杂的用户定义类型等特性。 内含的类型除了常见编程语言中的标准类型，还包括 address等以太坊独有的类型，Solidity 源码文件通常以 .sol 作为扩展名 目前尝试 Solidity 编
EthVoteDemo:本人学习solidity的投票demo，使用python编写dapp的服务端代码，采用的是flask+web3框架；前端使用的是vue.js
05-08
EthVoteDemo ...部署方案 ...# install truffle and testrpc npm install -g truffle npm install -g testrpc # serve test network at ...# 先找个干净的目录安装一个python的虚拟环境，需要python3.6 cd ../../ virtu
智能合约调用示例
weixin_44172023的博客
02-20 459
想知道更多关于区块链技术知识，请百度【链客区块链技术问答社区】 链客，有问必答！！ 故事是这样的，有5个小伙伴，他们为 黄豆芽, 黑豆芽，绿豆芽 中的哪种最好吃发生了分歧，于是它们准备发起一个投票。但是大家都希望投票的过程是完全去中心化的…最后他们决定使用区块链智能合约来解决这个问题 准备工作 启动geth（为了更快的打包，建议dev模式），新建5个账户，并把defaultAccount（如果没...
以太坊：调用已部署的智能合约
weixin_30647065的博客
12-15 692
转载请注明出处：https://www.cnblogs.com/zhizaixingzou/p/10122350.html 目录 1.调用已部署的智能合约 相关截图来自： https://solidity-cn.readthedocs.io/zh/develop/abi-spec.html https://github.com/ethereum/ethereumj ...
truffle-vue：一个松露盒，可作为任何Truffle和Vue.js dApp的基础。 随附Vue.js，vue-router和Vuex
02-05
Vue.js松露盒 一个 ，可以作为任何和 dApp的基础。 随附 ， ， 和 。 还提供了一个极简的用户身份验证智能合约。 目录结构 该松露盒经过精心设计，可以强制执行干净的目录结构。 / | +-- build/ | | | +-- contracts/ | | | | | + truffle compiled contracts | +-- config/ | | | +-- babel/ | | | | | + babel config files - to come (babel does not allow to specify
trufflevue这是一个基于vue的solidity开发Dapp框架
08-12
truffle-vue：这是一个基于vue的solidity开发Dapp框架
truffle-solidity-web3.js之truffle篇1
y943711797的博客
05-07 421
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 1、先看目录 2、全局安装truffle cmd sudo npm install -g truffle truffle中有一个box的概念，为了开发方便，就已经把代码框架打包好，可以直接下载。 3、全局安装ganache节点 sudo npm install -g ganache-cli //安装ganache-cli节点 ...
Solidity番外篇（一）Solidity在线or插件使用
程序新视界
11-18 7125
在学习以太坊合约的过程中会需要自己编写智能合约，官方提供了几种方式供大家使用。下面分别简单介绍一下，如果有错误的地方，还留言指正补充。DAPP IDE说实话，这个版本IDE我还没有使用过，只提供一个连接地址供大家参考。 The-DApp-IDE 此连接中有具体的使用描述。在线编程Solidity支持在线编程，在线编程网址为：https://ethereum.github.io/browser-s
使用solidity与web3创作一个在线小游戏之二：（proxy合约，solidity中的数组与mapping，状态变量的存储模型）
lixiaodog的博客
04-17 6666
在上一章（solidity教程）使用solidity与web3创作一个在线小游戏之一:proxy合约，call, delegatecall与callcode_lixiaodog的博客-优快云博客 中，我们了解了可更新合约的基本原理，与solidity的三种函数调用方法，在本章中我们将完成一个基本的proxy,并写一个与之相配的可更新合约。在编写的过程中，我们还会接解到solidity的数组与mapping。 请看下面代码： pragma solidity >0.4.24; contract
使用 Infura 和 web3.js 调用智能合约
mongo_node的专栏
04-25 4352
Infura 提供公开的 Ethereum 主网和测试网络节点。到 Infura 官网申请，输入一些基本资料和 Email，就可以收到 API-key。infura使用 RPC 查询合约内存储的状态最常需要查询的状态就是 Token 的余额。就用 EOS Token 合约做为示例来看看。取得取得合约信息可以通过 Etherscan，大部分知名的合约可以直接搜索到。etherscan要调用合约，至少...
Vue+web3.js+solidity+truffle开发以太坊区块链合约部署全过程！（注意：这里没有使用truffle-contract库调用智能合约）
weixin_43343144的博客
03-13 3940
运行代码的时候有一个注意事项： 就是在调用deploy()方法部署合约的时候，会弹出Metamask付款，可能出现2个问题： 第一：你的gas不够，可以参考send方法的gas设置（我是设置默认，付款的时候，修改大点）http://cw.hubwiz.com/card/c/web3.js-1.0/1/4/6/ 第二个问题：错误提示：Error: the tx doesn't have th...
Truffle+Vue+MetaMask创建一个以太坊Dapp
weixin_33796205的博客
12-12 3082
参考资料 使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP web3 1.0 API 开发环境 Windows10 web3 1.0 编写第一个Solidity智能合约 一个简单的例子是编写一个可以注册，保存社区成员信息和简单电子钱包功能的账户合约 pragma solidity ^0.4.24; import "./SafeMath.sol";//开源的安全操作uni...
Win10安装truffle+vue-cli运行一个以太坊dapp
mingrizhixin的博客
02-22 1162
安装truffle 与Ubuntu系统不同，这里直接安装就成功了 F:\ethProjects\simple_voting_dapp_truffle>npm install -g truffle@4.1.14 npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has c
使用node、vue、solidity、ganache、metamask，在IDEA中制作一个资产管理系统
最新发布
05-30
<think>嗯，用户想用Node.js、Vue.js、Solidity、Ganache和MetaMask在IntelliJ IDEA里开发一个资产管理系统。首先，我得理清楚整个开发流程需要哪些步骤。可能需要先搭建环境，然后编写智能合约，再处理前后端集成，最后测试和部署。 用户可能不太清楚如何将这些技术整合在一起。比如，Solidity用于编写智能合约，但怎么在IDEA里配置呢？可能需要安装Solidity插件。然后，用Ganache作为本地区块链，MetaMask连接测试网络。前后端方面，Node.js做后端API，Vue.js做前端界面，需要用到axios进行通信。还要考虑智能合约的部署，可能需要使用Truffle或者Hardhat，但用户提到的是Ganache，所以可能用Truffle来编译和部署。然后，前端如何与MetaMask交互？需要注入web3.js或者ethers.js库，处理用户的钱包连接和交易签名。 另外，用户可能遇到环境配置的问题，比如Node.js和VueCLI的安装，Solidity编译器的版本，Ganache的账户配置，以及MetaMask的网络设置是否正确。需要确保前后端都能正确连接到本地区块链，并且处理交易和事件监听。 可能还需要考虑安全性和错误处理，比如用户登录时的地址验证，交易失败时的反馈，以及如何通过Vue的拦截器处理token和认证问题。参考之前提到的引用，用户可能需要处理axios的请求和响应拦截器，比如在header中添加token，或者处理401错误跳转登录页面。 总之，步骤大概分为环境搭建、智能合约开发、前后端开发、集成测试四个部分。需要详细说明每个步骤的具体操作，包括必要的代码示例和配置要点，同时指出可能遇到的问题和解决方法。最后生成相关的问题，帮助用户深入理解各个部分。</think>### 如何使用Node.js、Vue.js、Solidity、Ganache和MetaMask在IDEA中开发资产管理系统 #### 一、环境搭建 1. **IntelliJ IDEA配置** - 安装**Solidity插件**（支持智能合约语法高亮和编译） - 安装**Node.js环境**（后端服务与工具链依赖） - 安装**Vue CLI**（前端框架初始化工具） 2. **区块链工具链** - 部署本地测试链：`Ganache`提供预配置账户和私有链 - 配置`MetaMask`钱包： - 添加Ganache网络（RPC URL默认`http://localhost:7545`） - 导入Ganache生成的测试账户私钥 ```bash # 示例：安装Vue CLI npm install -g @vue/cli ``` #### 二、智能合约开发（Solidity） 1. **编写资产合约** ```solidity // AssetManager.sol pragma solidity ^0.8.0; contract AssetManager { mapping(address => uint256) public balances; function deposit() public payable { balances[msg.sender] += msg.value; } function transfer(address recipient, uint256 amount) public { require(balances[msg.sender] >= amount); balances[msg.sender] -= amount; balances[recipient] += amount; } } ``` 2. **合约编译与部署** - 使用`Truffle`或`Hardhat`框架部署到Ganache： ```javascript // truffle-config.js module.exports = { networks: { development: { host: "127.0.0.1", port: 7545, network_id: "*" } } }; ``` #### 三、前后端开发 1. **Node.js后端** - 创建REST API处理业务逻辑： ```javascript // server.js const express = require(&#39;express&#39;); const app = express(); app.post(&#39;/api/transfer&#39;, (req, res) => { // 与合约交互逻辑 }); app.listen(3000); ``` 2. **Vue.js前端** - 集成MetaMask交互： ```javascript // AssetTransfer.vue methods: { async connectWallet() { if (window.ethereum) { const accounts = await ethereum.request({ method: &#39;eth_requestAccounts&#39; }); this.userAddress = accounts[0]; } }, async transfer() { const contract = new web3.eth.Contract(abi, contractAddress); await contract.methods.transfer(this.recipient, this.amount).send({ from: this.userAddress }); } } ``` #### 四、集成与测试 1. **Ganache交易监控** - 在Ganache界面实时查看合约部署和交易日志 2. **MetaMask交易签名** - 前端发起交易时触发MetaMask弹窗确认 #### 五、关键问题解决方案 1. **跨域请求处理** - 后端配置CORS： ```javascript const cors = require(&#39;cors&#39;); app.use(cors({ origin: &#39;http://localhost:8080&#39; })); ``` 2. **用户认证集成** - 参考代码片段实现请求拦截器[^2]： ```javascript axios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem(&#39;token&#39;)}`; return config; }); ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值