自学Vue开发Dapp去中心化钱包（一）

文章目录

目录

前言

本文记录了我自学Vue前端知识的过程，以及实践参与去中心化钱包入口的开发（包括在以太坊链上的操作）。 所谓自学，后面的内容对于大佬们来说简直是小菜一碟。 看错了或者小儿科，不要怪大家，还请多多指教。

一、需求背景

突然接到公司领导的命令，公司搞了个web3项目，现在缺一个门户开发，还要参与门户后端开发。 领导找到我，让我自学Vue做门户开发。

2.名词学习1.web3

什么是 web3

web1时代是静态页面时代，人机交互较少；

web2是用户互联时代，中心化的寡头控制着所有的用户数据，比如TX；

web3 是一个由用户管理的免费、安全的互联网。 概念是去中心化的，意思是没有中心化的服务器，主要存在于区块链中。 虽然目前还处于概念阶段，但在国外已经吸引了大量资金。 看看比特币就明白了，1比特币的价值确实是真金白银，也很受投资者欢迎。

2.去中心化钱包

去中心化钱包，所谓去中心化就是不由中央服务器管理的钱包。 目前主流的有Coinbase、imToken、AToken、HyperPay、TokenPocket、Bitpie、Jaxx wallet、Blockchain等。

在去中心化钱包中，私钥掌握在用户自己手中，资产存储在区块链上。 用户是真实数字货币的持有者。 钱包只是帮助用户管理链上资产和读取数据的工具。

因此，去中心化钱包很难被黑客攻击，用户也不用担心钱包服务商被盗或跑路，因为只要在创建钱包时保管好自己的私钥，您的资产是安全的。还在链上，换钱包一样可以显示。

3.中心化钱包

也称为链下钱包（Offchain），它完全依赖运行钱包的公司和服务器。 交易所存储的比特币存储在中心化钱包（链下钱包）中。 私钥不属于用户，而是在中心化服务器托管链中的钱包项目方比特币软件开发第一代团队，通常资金也委托给服务器。

4. 区块链

它是共享数据库，存储的数据或信息具有“不可伪造”、“全程留痕”、“可追溯”、“公开透明”、“集体维护”等特点。 起源于比特币。

区块是一个个存储单元，记录了一定时间内各个区块节点的所有通信信息。

每个块由随机散列（也称为散列算法）链接。 后一个块包含前一个块的哈希值。 随着信息交换的扩展，一个块之后是另一个块。 结果称为区块链。

5.以太坊.js

ethers.js 库旨在为以太坊区块链及其生态系统提供一个小而完整的 JavaScript API 库。 与web3.js相比，ethers.js接口API相对简单，易学易用。 API地址：文档

6. 视图

Vue 是一个用于创建用户界面的开源 JavaScript 框架和一个用于创建单页应用程序的 Web 应用程序框架； Vue的重点核心是MVC模型中的视图层，它也可以方便的获取数据更新，通过组件内部的具体方法实现视图与模型的交互。

7.以太坊

以太坊是一个可编程的、可视化的、更易于使用的区块链，允许任何人编写智能合约并发行代币 ETH。 和比特币一样，以太坊是去中心化的，全网记账，账目公开透明，不可篡改。 与比特币不同的是，以太坊是一个可编程的区块链，提供了一套图灵完备的脚本语言，因此开发者可以直接用C等高级语言编程，并转换成汇编语言。 这里需要了解合约和代币发行的概念。

8. 小狐狸钱包

MetaMask 是一款在 Google Chrome 上使用的插件式以太坊钱包。 这个钱包不需要下载。 只需要在谷歌浏览器中添加相应的扩展，轻量级。 使用起来会很方便。 它还具有像 Mist 一样的钱包功能，允许用户管理自己的账户，并允许 DApps 通过 Web3 JavaScript API 与以太坊区块链进行交互。

三、技术选型 1、前端入口

没有理由用Vue，主流。

2. 以太坊交易所

选择 ethers.js 是因为 ethers.js 易于使用并且文档 API 相当清晰。

3.兑换钱包

目前选择Metamask小狐狸钱包，文档

4.后端框架

公司自建biz-sip框架，在springcloud基础上进行封装。

概括

本文仅记录Vue和ethers.js的学习和使用，不涉及后端开发知识。

该门户已选择使用 Vue 开发。 但是，我对 Vue.js 的体验几乎为零。 好在之前做过全栈，js、jquery、css、html都做过。 想想就释然了。 既然让我做了，就说明领导接受了我。 首先，我处于学习阶段，可以学习新的知识。 怎么了（ps我一直想学vue比特币软件开发第一代团队，但是拿不定主意）。 作为一个java后端工程师，学习过大数据相关的组件。 现在学一个前端不是小菜一碟吗？ （等着打脸！）

未完待续