前端（vue）入門(mén)到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

最近 web3.0 的呼聲真的是越來(lái)越高，也越來(lái)越瘋狂。對(duì)于我們前端來(lái)說(shuō)，我們需要具備什么技術(shù)呢？（學(xué)習(xí)視頻分享：web前端）

首先先介紹一下 web3.0 是如何衍生的

互聯(lián)網(wǎng)

我們先聊一下啥是web，在1989 年，由CERN（歐洲粒子物理研究所）中 Tim Berners-Lee 領(lǐng)導(dǎo)的技術(shù)小組提交了一個(gè)針對(duì)互聯(lián)網(wǎng)的新協(xié)議和一個(gè)使用該協(xié)議的文檔系統(tǒng)，該系統(tǒng)命名為 World Wide Web，簡(jiǎn)稱(chēng) WWW（萬(wàn)維網(wǎng)），就是我們現(xiàn)在熟知的“互聯(lián)網(wǎng)”，它的目的在于使全球的科學(xué)家能夠利用互聯(lián)網(wǎng)來(lái)交流自己的工作文檔。它采用的技術(shù)主要是 HTML、URI 、URL、HTTP 等，可以通過(guò)靜態(tài)的方式展示網(wǎng)頁(yè)內(nèi)容。也就是我們

Web1.0

通常來(lái)說(shuō)，Web1.0 指的是20世紀(jì)90年代和21世紀(jì)初的互聯(lián)網(wǎng)。說(shuō)白了，就是由博客、留言板以及AOL和CompuServe等早期門(mén)戶(hù)網(wǎng)站組成的互聯(lián)網(wǎng)，國(guó)內(nèi)咱們所熟知得就是新浪、搜狐網(wǎng)易等網(wǎng)站就是當(dāng)時(shí)的產(chǎn)物。在 Web1.0 上基本上都是被動(dòng)地閱讀靜態(tài)網(wǎng)頁(yè)，網(wǎng)頁(yè)構(gòu)建協(xié)議都是使用 HTTP、FTP 等。在Web1.0 的情況下，網(wǎng)頁(yè)內(nèi)容是只讀的、靜態(tài)的，類(lèi)似于雜志，只能看不能修改、不能互動(dòng)。在Web1.0下，用戶(hù)只是信息（網(wǎng)頁(yè)）的消費(fèi)者，不能與之交互。Web1.0也是撥號(hào)上網(wǎng)，平均寬帶50k。

總的來(lái)說(shuō)，Web1.0 是只讀、去中心化的。

Web2.0

而 Web2.0 大概在2005年左右凸顯出來(lái)。 Web2.0 大概的含義就是用戶(hù)可以在網(wǎng)頁(yè)上創(chuàng)建和發(fā)布自己的內(nèi)容，主動(dòng)參與到互聯(lián)網(wǎng)中，不再是單純地被動(dòng)閱讀網(wǎng)頁(yè)。整個(gè)網(wǎng)頁(yè)最終的資金和控制權(quán)還是被網(wǎng)頁(yè)的擁有者所占據(jù)。比如 Facebook、Twitter和YouTube等社交媒體也是這個(gè)時(shí)代的產(chǎn)物。當(dāng)然通過(guò)這種方式讓用戶(hù)生成內(nèi)容的激增也造成了自然壟斷，這樣也會(huì)導(dǎo)致幾個(gè)問(wèn)題的產(chǎn)生：1.用戶(hù)數(shù)據(jù)是中心化的；2. 用戶(hù)數(shù)據(jù)不可移植；3. 用戶(hù)數(shù)據(jù)被出售

總而言之，Web2.0 是讀寫(xiě)并存的

Web3.0

Web3.0 是一個(gè)去中心化的網(wǎng)絡(luò)，通過(guò)將權(quán)力和數(shù)據(jù)集中到用戶(hù)手中，而不是某個(gè)公司所獨(dú)有。將數(shù)據(jù)分布到網(wǎng)絡(luò)上其中內(nèi)含去中心化的區(qū)塊鏈技術(shù)。Web3.0 這個(gè)詞語(yǔ)已存在多年了，只是在過(guò)去一年才開(kāi)始流行起來(lái)。使用 Web3，網(wǎng)絡(luò)是去中心化的，因此沒(méi)有權(quán)威機(jī)構(gòu)對(duì)其進(jìn)行控制，并且構(gòu)建在網(wǎng)絡(luò)之上的去中心化應(yīng)用程序（dapps）是開(kāi)放的。去中心化網(wǎng)絡(luò)的開(kāi)放性意味著任何一方都無(wú)法控制數(shù)據(jù)或限制訪問(wèn)。任何人都可以在未經(jīng)中央公司許可的情況下構(gòu)建和連接不同的 dapp。

Web3.0 的主要特點(diǎn)包括如下幾點(diǎn)：

• 語(yǔ)義 Web——它是 Web3.0 的關(guān)鍵，使機(jī)器易于處理數(shù)據(jù)。

• AI——AI是影響 Web3.0 技術(shù)流行的主要關(guān)鍵因素之一。它使機(jī)器通過(guò)大量的Web數(shù)據(jù)變得更加智能，以滿(mǎn)足用戶(hù)的需求。

• 3D圖形——Web3.0 已經(jīng)超越了傳統(tǒng)的互聯(lián)網(wǎng)，因?yàn)樗娜S技術(shù)，它提供了一個(gè)比2D更現(xiàn)實(shí)的三維在線世界。

• 無(wú)處不在——同時(shí)存在或無(wú)處不在的概念，移動(dòng)設(shè)備的興起日益增加，許多人更容易隨時(shí)隨地訪問(wèn)互聯(lián)網(wǎng)。

• 開(kāi)放性和互操作性，這指的是在應(yīng)用程序編程接口、數(shù)據(jù)格式、協(xié)議和設(shè)備與平臺(tái)之間的互操作性方面的開(kāi)放性。

• 全球數(shù)據(jù)存儲(chǔ)庫(kù)，這是一種跨程序和跨網(wǎng)絡(luò)訪問(wèn)信息的能力。

總之：Web3.0 是讀、寫(xiě)、擁有網(wǎng)絡(luò)的一切。

介紹

對(duì)于我們前端開(kāi)發(fā)者來(lái)說(shuō)，我們應(yīng)該掌握哪些技術(shù)或者應(yīng)該了解什么呢？簡(jiǎn)單來(lái)說(shuō)，web3 開(kāi)發(fā)人員創(chuàng)建了分散的全棧應(yīng)用程序，這些應(yīng)用程序存在于區(qū)塊鏈上并與之交互。下面簡(jiǎn)單得說(shuō)一下。

我們先了解一下專(zhuān)業(yè)術(shù)語(yǔ)有哪些：

• Web3：它是以太坊區(qū)塊鏈 Ethereum blockchain 和你的智能合約 Smart Contracts 之間的連接。
• 以太坊 Ethereum：一個(gè)去中心化的開(kāi)源區(qū)塊鏈 blockchain，允許用戶(hù)通過(guò)創(chuàng)建智能合約 creating smart contracts 與網(wǎng)絡(luò)進(jìn)行交互。它的原生加密貨幣是以太幣。就市值而言，以太幣是僅次于比特幣的第二大最有價(jià)值的加密貨幣。它由 Vitalik Buterin 于 2013 年創(chuàng)建。
• 智能合約 Smart Contracts ：它們是存儲(chǔ)在區(qū)塊鏈上的計(jì)算機(jī)程序 computer programs ，在滿(mǎn)足預(yù)定條件時(shí)運(yùn)行。智能合約是用 Solidity 語(yǔ)言編寫(xiě)的。
• 去中心化 Decentralized ：數(shù)據(jù)狀態(tài)不由中央實(shí)體 central entity、平臺(tái) platform 或個(gè)人 individual 收集
• 區(qū)塊鏈：區(qū)塊鏈網(wǎng)絡(luò)是一種點(diǎn)對(duì)點(diǎn)連接，其中信息在多個(gè)設(shè)備之間共享，幾乎不可能被黑客入侵。它是一種記錄信息的系統(tǒng)，其方式使得很難或不可能更改保存在網(wǎng)絡(luò)上的信息。
• Solidity：一種用于編寫(xiě)智能合約 writing smart contracts 的面向?qū)ο?object-oriented 的編程語(yǔ)言。它用于在各種區(qū)塊鏈平臺(tái)上實(shí)施智能合約，最著名的是以太坊。Solidity 的語(yǔ)法類(lèi)似于 javascript。要了解 Solidity，最好有 javascript 等編程語(yǔ)言的背景。直接跳入 Solidity 是一個(gè)壞主意
• Dapp：代表去中心化應(yīng)用程序 Decentralized App 。它們是在去中心化網(wǎng)絡(luò)或區(qū)塊鏈上運(yùn)行其后端代碼（主要用 Solidity 編寫(xiě)的智能合約）的應(yīng)用程序?？梢允褂?react、vue 或 Angular 等前端框架構(gòu)建 Dapps。
• Bitcoin 比特幣：世界上第一個(gè)被廣泛應(yīng)用的加密貨幣。
• Crypto: 又稱(chēng) Cryptocurrency，加密貨幣，一種去中心化的數(shù)字貨幣。
• NFT： Non-Fungible Token，一種在鏈上被記錄的、有所有權(quán)的數(shù)字資產(chǎn)。
• DAO： Decentralized Autonomous Organization，去中心化的自治組織。
• Metaverse元宇宙：一種由科技手段創(chuàng)造的虛擬世界的構(gòu)想。
• DeFi Decentralized Finance：去中心化金融系統(tǒng)。
• Token 代幣：可以理解為加密貨幣、NFT 等數(shù)字資產(chǎn)的統(tǒng)稱(chēng)。
• GameFi： Game + DeFi，中文說(shuō)法鏈游，游戲中的金融系統(tǒng)可通過(guò)加密貨幣和 NFT 映射到現(xiàn)實(shí)。

介紹完以上這些，我們?cè)倭南聟^(qū)塊鏈對(duì)于開(kāi)發(fā)人員也是分類(lèi)得。主要是核心區(qū)塊鏈開(kāi)發(fā)（核心區(qū)塊鏈工程師負(fù)責(zé)區(qū)塊鏈系統(tǒng)的架構(gòu)和安全協(xié)議）和區(qū)塊鏈軟件開(kāi)發(fā)（這些區(qū)塊鏈開(kāi)發(fā)人員利用核心區(qū)塊鏈開(kāi)發(fā)人員提供的設(shè)計(jì)架構(gòu)創(chuàng)建 Dapp）。

開(kāi)始

下面我們來(lái)點(diǎn)實(shí)在得，對(duì)于我們前端開(kāi)發(fā)，我們想要開(kāi)發(fā)駐留并與區(qū)塊鏈交互的去中心化應(yīng)用程序，就必須使用 web3.js 和 Ethers.js 庫(kù)。

web3.js

web3.js 是一個(gè)JavaScript API庫(kù)。要使 DApp 在以太坊上運(yùn)行，我們可以使用web3.js庫(kù)提供的web3對(duì)象。web3.js 通過(guò)RPC調(diào)用與本地節(jié)點(diǎn)通信，它可以用于任何暴露了RPC層的以太坊節(jié)點(diǎn)。web3 包含 eth 對(duì)象 – web3.eth（專(zhuān)門(mén)與以太坊區(qū)塊鏈交互）和 shh 對(duì)象 – web3.shh（用于與 Whisper 交互）

添加web3

將 web3 引入到你的工程中，其實(shí)跟我們現(xiàn)有的引用方式基本一致

• npm: npm install web3
• bower: bower install web3
• metor: meteor add ethereum:web3
• vanilla: dist./web3.min.js

使用

然后你需要?jiǎng)?chuàng)建一個(gè)web3的實(shí)例，設(shè)置一個(gè)provider。為了保證你不會(huì)覆蓋一個(gè)已有的provider，比如使用Mist時(shí)有內(nèi)置，需要先檢查是否web3實(shí)例已存在

if (!web3) {   web3 = new Web3(web3.currentProvider); } else {   web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); }

由于這套API被設(shè)計(jì)來(lái)與本地的RPC結(jié)點(diǎn)交互，所有函數(shù)默認(rèn)使用同步的HTTP的請(qǐng)求。如果你想發(fā)起一個(gè)異步的請(qǐng)求。大多數(shù)函數(shù)允許傳一個(gè)跟在參數(shù)列表后的可選的回調(diào)函數(shù)來(lái)支持異步

web3.eth.getBlock(48, function(error, result){   if(!error)       console.log(result)   else       console.error(error); })

API的具體目錄可以點(diǎn)擊查看

Ethers.js

為以太坊區(qū)塊鏈及其生態(tài)系統(tǒng)提供一個(gè)小而完整的 JavaScript API 庫(kù) 它最初是與 ethers.io 一起使用，現(xiàn)在已經(jīng)擴(kuò)展為更通用的庫(kù)。功能上基本和web3.js差不多。

特點(diǎn)如下：

• 將私鑰保存在客戶(hù)端，安全 可信賴(lài)
• 可支持導(dǎo)入和導(dǎo)出的 JSON錢(qián)包文件 （Geth，Parity和crowdsale）
• 從任何合同ABI創(chuàng)建JavaScript 元類(lèi)對(duì)象，包括 ABIv2 和 可讀的 ABI
• 支持通過(guò) JSON-RPC，INFURA ， Etherscan 或 MetaMask 連接到以太坊節(jié)點(diǎn)。
• 庫(kù) 非常小 （壓縮~88kb;未壓縮284kb）

工具

當(dāng)然除了上面這些，我們也會(huì)用到很多工具去完善我們的開(kāi)發(fā)

• Truffle: 提供了一個(gè)使用以太坊虛擬機(jī)編譯和測(cè)試智能合約的開(kāi)發(fā)環(huán)境，用作項(xiàng)目中的構(gòu)建依賴(lài)項(xiàng)
• Remix IDE: 編寫(xiě)和使用智能合約的完美環(huán)境，我們可以使用它直接從瀏覽器創(chuàng)建、修改和執(zhí)行智能合約。它更像是一個(gè)編輯器
• MetaMask: 一個(gè) Chrome 擴(kuò)展程序，可讓您從瀏覽器連接到以太坊區(qū)塊鏈網(wǎng)絡(luò)
• Ganache: 提供了一個(gè)本地區(qū)塊鏈環(huán)境來(lái)測(cè)試您的智能合約

構(gòu)建

我們想構(gòu)建一個(gè)全棧 Dapp 如果您想為項(xiàng)目添加用戶(hù)界面，react.js、vue.js 或 angular.js 是很好的 javascript 前端框架，因?yàn)樗鼈兛梢允褂?ethers.js 或 web3.js 輕松與區(qū)塊鏈網(wǎng)絡(luò)集成。有多種平臺(tái)可讓您在不編寫(xiě)代碼的情況下創(chuàng)建完整的 Dapp比如：Bunz、Dapp builder、Atra io、Bubble io

結(jié)論

總的來(lái)說(shuō)，Web3.0 不是一種技術(shù)，而是一個(gè)概念。我們前端開(kāi)發(fā)者也不用很慌張，不管技術(shù)發(fā)展成什么樣子，都會(huì)用到前端。我們可以利用我們 react.js、vue.js 或 angular.js 去為我們自己開(kāi)發(fā)的 Dapp 應(yīng)用去搭建屬于我們自己的平臺(tái)，也可以利用 nodejs 通過(guò)使用web3.js這個(gè)以太坊提供的工具包，來(lái)完成合約的編譯，發(fā)布，合約方法調(diào)用的一整個(gè)流程。