开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP - 技术翻译 - 开源中国社区

使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP 【已翻译100%】

oschina 推荐于 2个月前 (共 12 段, 翻译完成于 04-16) 评论 4
收藏  
43
推荐标签: Vue.js 待读

欢迎回到这个很牛的教程系列的第2部分,在教程中我们亲手构建我们的第一个分布式应用程序。 在第二部分中,我们将介绍VueJS和Vuex的核心概念,并引入web3js以与metamask进行交互。

如果你错过了第一部分,你可以在下面找到它。

Tocy
 翻译得不错哦!

正事: VueJS

VueJS是一个用于构建UI的javascript框架。乍一看,它看起来与经典的moustache模板类似,但在底层为了使Vue变得响应式发生了很多事情。

<div id=”app”>
 {{ message }}
</div>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

这将是一个非常基础的Vue应用程序的结构。数据对象中的消息属性将渲染到id为'app'的元素的屏幕区域,当我们更改此消息时,它将在屏幕上更新并无需刷新。你可以在这个jsfiddle中查看它(须打开自动运行):https://jsfiddle.net/tn1mfxwr/2/ 。

Tocy
 翻译得不错哦!

VueJS的另一个重要特性是组件。组件是小规模的、可重用的和自包含的代码片断。本质上,Web应用程序可以抽象为一颗更小的组件树。当我们开始编写我们的前端应用程序时,这将会变得更加清晰。


将网页抽象成组件的示例。该网页由三部分组成。其中两个组件具有子组件。

Tocy
 翻译得不错哦!

状态的联合:Vuex

我们将使用Vuex来管理我们的应用程序的状态。与redux类似,Vuex实现了一个仓库,作为我们app相关数据的“唯一真实数据源”。Vuex允许我们以可预测的方式操作和提供我们的应用程序所使用的数据。

它的工作方式非常简单。组件在渲染时是需要数据的,它会派发一个动作(action)来获取它所需要的数据。获取数据的API调用发生在action的async中。 一旦数据被提取完成,action就会将这些数据提交mutation。 之后mutation会改变我们仓库中的状态。当该组件所使用的数据在仓库中发生更改时,它将重新渲染。


Vuex 的状态管理模式

Tocy
 翻译得不错哦!

在继续之前…

在第一部分中,我们使用 vue-cli 生成了 Vue 应用程序,同时还安装了需要的依赖项。 如果你还没有完成这一部分,请点击的顶部的链接。

如果你正确地完成了一切,目录结构应该如下所示:

新生成的 vue 应用

注意: 如果你打算从这里复制粘贴代码,添加/src/  .eslintignore 文件中,避免缩进错误。

无若
 翻译得不错哦!

你可以在终端输入‘npm start’来启动这个App。这个App会包含默认的vue应用,因此我们可以将它放出来。
注意:我们正在使用vue Router尽管只有一个route,我们不需要它,但是因为它太简单了,我认为将它放到教程里挺好的。
提示:在.vue文件将你的atom语法(例如 bottom right)添加到HTML。
现在来清理一下这个新项目:

  • 在app.vue中删除img-tag,同时删除在style-tags之间的所有东西。

  • 删除components/HelloWorld.vue,新建两个文件分别名为casino-dapp.vue(我们的主模块)和hello-metamask.vue(会包括我们的metamask数据)

  • 在我们的新文件hello-metamask.vue中粘贴以下代码,这些代码现在只是在一个p-tag中显示文字‘Hello’。

<template>
 <p>Hello</p>
</template>
<script>
 export default {
 name: 'hello-metamask'
}
</script>
<style scoped>
</style>
  • 通过引入文件,我们现在要加载hello-metamask模块到我们的主模块casino-dapp模块中,然后在我们的vue实例中关联这个模块,因此我们可以将它作为一个tag加到我们的模板中。将下面代码粘贴到casino-dapp.vue文件中:

<template>
 <hello-metamask/>
</template>
<script>
import HelloMetamask from '@/components/hello-metamask'
export default {
 name: 'casino-dapp',
 components: {
 'hello-metamask': HelloMetamask
 }
}
</script>
<style scoped>
</style>
  • 现在如果你打开了router/index.js,你就会看到我们根目录下只有一个route,它仍然指向我们已经删掉的HelloWorld.vue模块。我们需要将它改为指向我们的casino-dapp.vue模块。

import Vue from 'vue'
import Router from 'vue-router'
import CasinoDapp from '@/components/casino-dapp'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'casino-dapp',
 component: CasinoDapp
 }
 ]
})
琪花亿草
 翻译得不错哦!

关于Vue Router:你可以添加其他的路径以及绑定模块,当你访问定义的路径他们会进行渲染。因为我们App.vue文件中有route-view tag,正确的模块会被渲染。

  • 在src中创建一个名为util的新文件夹。在这个文件夹中创建另一个文件夹名为constants。创建一个名为network.js的新文件,然后将下面代码粘贴进去。当我们代码在清理的时候,这会让我们显示Ethereum 网络名称而不是它的id。

export const NETWORKS = {
 '1': 'Main Net',
 '2': 'Deprecated Morden test network',
 '3': 'Ropsten test network',
 '4': 'Rinkeby test network',
 '42': 'Kovan test network',
 '4447': 'Truffle Develop Network',
 '5777': 'Ganache Blockchain'
}
  • 最后但同样重要的是(现在其实并不重要),在src中创建一个名为store的新文件夹。在下一章我们再来谈论这个。

如果你在终端运行‘npm start’,然后在浏览器访问localhost:8080,你应该就能在屏幕上看到‘Hello’。如果是这样的,你就可以准备继续了。

琪花亿草
 翻译得不错哦!

设置我们的 Vuex store

在这一章我们要设置我们的store。现在开始在我们的全新的store目录(上一章的最后一部分)创建两个文件:index.js和state.js;我们由state.js开始,这个文件将会作为一个新的我们检索数据的代表。

let state = {
 web3: {
 isInjected: false,
 web3Instance: null,
 networkId: null,
 coinbase: null,
 balance: null,
 error: null
 },
 contractInstance: null
}
export default state

好的,现在我们开始在index.js中配置我们的store。我们要引入vuex库供vueJS使用。我们还要引入state,然后也加入我们的store中。

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex)
export const store = new Vuex.Store({
 strict: true,
 state,
 mutations: {},
 actions: {}
})

最后一步来编辑main.js来包含我们的store:

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

做得不错,完成了这么多的配置,给自己一点表扬。现在我们准备好了开始通过web3 API获取我们的metamask数据,然后让他为我们的应用服务。就要实现了!

琪花亿草
 翻译得不错哦!

从Web3和Metamask开始

就像之前提到的,为了将数据获取到我们的Vue app,我们需要发送一个action来做异步API调用。我们使用promises将一些调用连接到一起,然后将其抽象成一个文件。因此在util文件夹中创建一个名为getWeb.js的新文件。将下面的代码粘贴到里面,这些代码包含了你要遵循的相当多的注解。我们在代码块下面也会提到。

import Web3 from 'web3'

/*
* 1. Check for injected web3 (mist/metamask)
* 2. If metamask/mist create a new web3 instance and pass on result
* 3. Get networkId - Now we can check the user is connected to the right network to use our dApp
* 4. Get user account from metamask
* 5. Get user balance
*/

let getWeb3 = new Promise(function (resolve, reject) {
  // Check for injected web3 (mist/metamask)
  var web3js = window.web3
  if (typeof web3js !== 'undefined') {
    var web3 = new Web3(web3js.currentProvider)
    resolve({
      injectedWeb3: web3.isConnected(),
      web3 () {
        return web3
      }
    })
  } else {
    // web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545')) GANACHE FALLBACK
    reject(new Error('Unable to connect to Metamask'))
  }
})
  .then(result => {
    return new Promise(function (resolve, reject) {
      // Retrieve network ID
      result.web3().version.getNetwork((err, networkId) => {
        if (err) {
          // If we can't find a networkId keep result the same and reject the promise
          reject(new Error('Unable to retrieve network ID'))
        } else {
          // Assign the networkId property to our result and resolve promise
          result = Object.assign({}, result, {networkId})
          resolve(result)
        }
      })
    })
  })
  .then(result => {
    return new Promise(function (resolve, reject) {
      // Retrieve coinbase
      result.web3().eth.getCoinbase((err, coinbase) => {
        if (err) {
          reject(new Error('Unable to retrieve coinbase'))
        } else {
          result = Object.assign({}, result, { coinbase })
          resolve(result)
        }
      })
    })
  })
  .then(result => {
    return new Promise(function (resolve, reject) {
      // Retrieve balance for coinbase
      result.web3().eth.getBalance(result.coinbase, (err, balance) => {
        if (err) {
          reject(new Error('Unable to retrieve balance for address: ' + result.coinbase))
        } else {
          result = Object.assign({}, result, { balance })
          resolve(result)
        }
      })
    })
  })

export default getWeb3

首先要注意的是我们使用promises来连接回调,如果你不知道promises,查看相关链接。下一步我们检查用户是否有Metamask(或者 Mist)在运行。Metamase注入他自己的web3的实例,我们因此确认window.web3(被注入的实例)已经定义了。如果没有定义的话,我们要使用Metamask创建一个web3实例作为当前provider,因此我们不依赖被注入的实例的版本。我们将我们新创建的实例传给下一个promises,在这里我们做几个API调用:

  • web3.version.getNetwork() 会返回我们连接的网络ID。

  • web3.eth.coinbase() 返回我们节点属于的地址,当使用Metamask的时候这会是我们选择的账户。

  • web3.eth.getBalance(<address>) 返回我们作为参数传过去的地址的balance。

琪花亿草
 翻译得不错哦!

还记得我们说的在我们的Vuex store中需要在一个action产生异步API调用吗?我们现在会把它hook出来,之后从我们的组件dispatch出去。在store/index.js中我们会引入我们的getWeb3.js文件,调用它然后将它commit给一个mutation,然后在我们的store中保存。
在你的引用语句中添加

import getWeb3 from '../util/getWeb3'

然后在action对象(在你的sotre中)中我们会调用getWeb3然后commit结果。我们在逻辑中添加了大量的console.logs,因此我们可以看到进程的步骤,这会让我们对完全的dispatch-action-commit-mutation-statechange流程了解的更加透彻。

registerWeb3 ({commit}) {
      console.log('registerWeb3 Action being executed')
      getWeb3.then(result => {
        console.log('committing result to registerWeb3Instance mutation')
        commit('registerWeb3Instance', result)
      }).catch(e => {
        console.log('error in action registerWeb3', e)
      })
    }
琪花亿草
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(4)
Ctrl/CMD+Enter

第一部分的翻译呢?还有第二部分呢?

引用来自“php110”的评论

第一部分的翻译呢?还有第二部分呢?
应该第三部分也没翻译呢 https://itnext.io/@Alt_Street
看完之后我决定还是看原文。。。
推荐一个适合区块链开发新手入门DApp实战开发教程:http://xc.hubwiz.com/course/5a952991adb3847553d205d1?affid=612oschina
顶部