[译]使用 Web3 和 Vue.js 来建立你的第一个以太坊 dAPP（第一部分）

• 原文地址：Create your first Ethereum dAPP with Web3 and Vue.JS (Part 1)
• 原文做者：Alt Street
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：foxxnuaa
• 校对者：yankwan,FateZeros

欢迎来到另外一个教程！在本教程中，咱们将讨论如何使用 Ethereum、Web3js、VueJS 和 Vuex 建立一个简单的、响应式的去中心化应用程序。您可能须要对 javascript 和 web 应用程序有一些了解才能真正享受本教程。若是您不了解 Vue，不用担忧，咱们将在实现应用程序时简要地介绍一下基础知识。

咱们的应用将会很简单。用户能够在 1 到 10 之间下注以太币。当用户猜对时，他获得了他的奖励 x10（略低于庄家切牌）。

第一部分，咱们将讨论项目设置和智能合约的建立。第二部分，咱们将介绍 web3js API 和 VueJS/Vuex，第三部分，咱们将融会贯通并将应用程序链接到合约中。跟着一块儿，享受旅程，会很棒的。

咱们的应用程序最终看起来像这样：

咱们的最终应用程序。

---

前提条件

因为项目比较简单，咱们不会使用 truffle。咱们将在测试网络上使用 MetaMask 和 Remix(remix.ethereum.org)编写和部署智能合约。

咱们须要作的第一件事是安装 nodeJS 和 NPM，在您的操做系统上按照步骤进行安装：nodejs.org/en/。在终端窗口运行以下命令检查 node 是否正确安装：

node -v
npm -v
复制代码

接下来，若是您还没安装 metamask，则安装 metamask：metamask.io/

咱们最后一个条件是 vue-cli，它将帮助咱们轻松设置 VueJS 项目：

npm i vue-cli -g
复制代码

---

项目设置

咱们将使用 remix 编写和部署智能合约，并经过 metamask 插件部署到 Ropsten 测试网络。在前端应用程序中，须要与合约交互的是合同地址和 ABI （ ABI 定义了如何在机器代码中访问数据结构或计算程序）。

咱们的前端将是一个 vue-cli 生成的 vueJS 应用程序。咱们也将使用 web3 来与合约通讯。遵循如下简单步骤，为客户端应用程序建立 backbone ：

1. 打开一个终端，并将目录更改成您想要建立应用程序的地方。
2. 在终端窗口输入如下命令来建立咱们的项目，并输入“回车”来完成向导：

vue init webpack betting-dapp
复制代码

3. 如今咱们将进入咱们的项目文件夹并安装 web3，vuex 和 font-awesome：

cd betting-dapp
npm i web3@^0.20.0 vuex font-awesome -s
//To start the dummy project generated by the vue-cli use 'npm start'
复制代码

咱们没有使用 web3 1.0.0 测试版，由于它在写入时与 MetaMask 不兼容。

---

编写智能合约

在咱们毫无头绪地编码以前，咱们必须首先分析咱们须要的组件：

1. 咱们须要知道合约的全部者并拥有访问权限（为简单起见，咱们将再也不修改全部者）
2. 合约的全部者能够销毁合约并提取余额
3. 用户能够在 1 - 10 之间下注
4. 在合约建立时，全部者可以设置最低下注金额和庄家上风（为简单起见，建立后不可更改）

第一步和第二步很是简单，咱们已经添加了注释，这样就没问题了。 打开 [Remix]（http://remix.ethereum.org）开始工做（文章结尾处的要点连接）：

pragma solidity ^0.4.10;
contract Ownable {
 address owner;
 function Ownable() public {
//Set owner to who creates the contract
 owner = msg.sender;
 }
//Access modifier 
modifier Owned {
 require(msg.sender == owner);
 _;
 }
}
contract Mortal is Ownable {
//Our access modifier is present, only the contract creator can      use this function
  function kill() public Owned { 
 selfdestruct(owner);
 }
}
复制代码

首先咱们建立合约 Ownable，构造函数 _Ownable（）_将在建立时被调用，并将状态变量 'owner' 设置为建立者的地址。 咱们还定义了一个访问控制，当咱们附加的函数的调用者不是合约全部者时，它将抛出异常。

咱们将此功能传递到 Mortal 合约中（Mortal 继承自 Ownabe ）。 它有一个函数，容许合约全部者（访问控制）销毁合约并将剩余资金发回给他。

你已经走到这一步了？你作的很好！咱们的合约差很少准备好了。

如今咱们在步骤3和步骤4将建立 Casino 合约:

首先咱们须要 minBet 和 houseEdge，能够在建立合约时设置。经过将参数传递给构造函数 _Casino() 实现。咱们将会使构造函数为 payable，这样咱们就能够在部署时使用 Ether 预先加载合约。咱们也会实现回退过程：

contract Casino is Mortal{
 uint minBet;
 uint houseEdge; //in %
//true+amount or false+0
event Won(bool _status, uint _amount);
function Casino(uint _minBet, uint _houseEdge) payable public {
 require(_minBet > 0);
 require(_houseEdge <= 100);
 minBet = _minBet;
 houseEdge = _houseEdge;
 }
 
function() public { //fallback
 revert();
 }
}
复制代码

这还不够，因此接下来咱们将添加函数用于下注一个数字。此函数将生成一个随机数（此方式不安全！），而后计算并发送赢得的奖励。在你的回退函数下面加上以下部分:

function bet(uint _number) payable public {
 require(_number > 0 && _number <= 10);
 require(msg.value >= minBet);
 uint winningNumber = block.number % 10 + 1;
 if (_number == winningNumber) {
   uint amountWon = msg.value * (100 — houseEdge)/10;
   if(!msg.sender.send(amountWon)) revert();
   Won(true, amountWon);
 } else {
   Won(false, 0);
 }
}
复制代码

为了在 1 - 10 之间生成一个随机数，咱们取当前区块编号，并取当前区块号的模量（除数余数）。这老是会产生 0-9 之间的一个数，因此咱们加1，从而获得一个 1 - 10 之间的“随机”数字。

例如:若是咱们在新的匿名窗口中使用 javascript VM 在 remix 上部署合约，并在部署后调用 bet 函数，咱们将老是获得 2 做为中奖号码。这是由于第一个块是 #1。1 的模是 1，加 1 等于 2。

** 请注意，这并非真正随机的，由于很容易预测下一个区块号。更多地了解 solidity 的随机性，请查看[https:/ /www.youtube.com/watch?v=3wY5PRliphE].(https://www.youtube.com/watch?v=3wY5PRliphE)

为了计算赢取的奖金，咱们只需计算一个乘数：

bet * (100 — houseEdge)/10 
复制代码

若是庄家上风为 0，咱们的乘数是 10；若是庄家上风是 10%，则乘数是 9。

最后，咱们将为全部者添加一个函数，以检查合约的余额，理想状况下，咱们还但愿为全部者添加一个提取函数，但咱们如今就不作了。在你的 bet 函数下面添加如下几行:

function checkContractBalance() Owned public view returns(uint) {
 return this.balance;
 }
复制代码

**伟大的工做!**合约如今已经准备好进行测试了!

---

在 remix 上测试咱们的合约

在 remix 的右上角单击 run 选项卡。确保将环境设置为 Javascript VM。在 value 字段中输入 20 并从下拉列表中选择 Ether 而不是 Wei 。这将在部署时使用 20 Eth 预加载合约。下面，在 create 按钮旁边输入咱们的构造器参数 minBet 和 houseEdge (好比，10000 wei 和 10% 的庄家上风)。

作完它应该是这样的：

在点击“建立”以前，它应该是这样的。

如今单击 create 按钮，合约实例应该出如今屏幕的右下角。将会有四个函数可见，点击 getContractBalance() 检查一切是否正常，应该返回 20000000000000000000，这是咱们发送的 20 ether 转换成 wei 获得的。你也会在右上角的帐户旁边看到你的余额，如今将略低于80 ether。

点击“建立”合约后，余额应该是 20*1e18 wei。

好了!一切运行正常。就像前面提到的，当使用 javascript VM 时，第一个块老是 1，因此第一个中奖号码老是 2。咱们能够经过在 value 字段中输入 1 ether 来测试，并将 2 做为参数传递给 bet。

当点击 bet 时，咱们应该看到余额再次增长，在控制台点击详情，并滚动到“日志”。咱们应该看到一个咱们已经赢了的事件:

咱们赢了 9 以太币！

好吧!咱们的合约运行正常。在下一节中，咱们将在 Ropsten 测试网络上部署咱们的合约，并获取合约地址和 ABI ，以便在咱们的客户端应用程序中使用。在那以前!

阅读 PART 2 !

若是您喜欢咱们的教程，欢迎打赏，感谢您的阅读，若是您已经读到这里，请坚持下去！

ETH-0x6d31cb338b5590adafec46462a1b095ebdc37d50

完整的合约代码: gist.github.com/anonymous/6…

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。