国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【IPFS + 區塊鏈 系列】 入門篇 - IPFS + Ethereum （上篇）-js-ipfs

VincentFF / 602人閱讀 

作者：黎躍春，孔壹學院創始人，區塊鏈、高可用架構師


微信：liyc1215


區塊鏈博客：http://liyuechun.org
Ebay項目

基于以太坊Ethereum & IPFS的去中心化Ebay區塊鏈項目詳情鏈接

目錄

1. 內容簡介

2. IPFS-HTTP效果圖

3. 實現步驟

3.1 安裝create-react-app

3.2 React項目創建

3.3 運行React項目

3.4 瀏覽項目

3.5 安裝ipfs-api

3.6 完成UI邏輯

3.7 導入IPFS

3.8 編寫上傳大文本字符串到IPFS的Promise函數

3.9 上傳數據到IPFS

3.10 跨域資源共享CORS配置

3.11 再次刷新網頁提交數據并在線查看數據

3.12 從IPFS讀取數據

3.13 總結

4. 下篇文章預告

1. 內容簡介

【IPFS + 區塊鏈 系列】 入門篇 - IPFS環境配置

【IPFS + 區塊鏈 系列】 入門篇 - IPFS+IPNS+個人博客搭建

在前面兩篇文章中，第一篇春哥給大家詳細介紹了IPFS環境配置，第二篇介紹了IPFS如何搭建個人博客，通過這兩篇文章相信大家已經對IPFS有所了解，接下來的這篇文章，我們將為大家講解js-ipfs-api的簡單使用，如何將數據上傳到IPFS，以及如何從IPFS通過HASH讀取數據。

2. IPFS-HTTP效果圖

3. 實現步驟 3.1 安裝create-react-app

參考文檔：https://reactjs.org/tutorial/tutorial.html

localhost:1123 yuechunli$ npm install -g create-react-app
3.2 React項目創建 
localhost:1123 yuechunli$ create-react-app ipfs-http-demo
localhost:ipfs-http-demo yuechunli$ ls
README.md    package.json    src
node_modules    public        yarn.lock
localhost:ipfs-http-demo yuechunli$
3.3 運行React項目 
localhost:ipfs-http-demo yuechunli$ npm start
Compiled successfully!

You can now view ipfs-http-demo in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.0.107:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.
3.4 瀏覽項目

瀏覽器瀏覽http://localhost:3000。

效果如下：

3.5 安裝ipfs-api

??：在這里我就不過多的去介紹React的使用以及開發，如果感興趣的可以去看這套React的視頻，學完這套視頻你可以直接進企業找React相關的前端開發工作。

項目結構

安裝ipfs-api

切換到項目根目錄，安裝ipfs-api。

$ npm uninstall --save ipfs-api
localhost:ipfs-http-demo yuechunli$ ls
README.md    package.json    src
node_modules    public        yarn.lock
localhost:ipfs-http-demo yuechunli$ pwd
/Users/liyuechun/Desktop/1123/ipfs-http-demo
localhost:ipfs-http-demo yuechunli$ npm uninstall --save ipfs-api

??：ipfs安裝完后，如上圖所示，接下來刷新一下瀏覽器，看看項目是否有問題，正常來講，一切會正常，???，Continue，Continue，Continue......

3.6 完成UI邏輯

拷貝下面的代碼，將src/App.js里面的代碼直接替換掉。

import React, { Component } from "react";
import "./App.css";

class App extends Component {


      constructor(props) {
          super(props);
          this.state = {
            strHash: null,
            strContent: null
          }
      }

    render() {
      return (
        

          
          

          
{this.state.strHash}


          
           
{this.state.strContent}

        

      );
    }
}

export default App;

上面的代碼完成的工作是，當我們在輸入框中輸入一個字符串時，點擊提交到IPFS按鈕，將文本框中的內容取出來打印，后續我們需要將這個數據上傳到IPFS。點擊讀取數據按鈕，我們也只是隨便打印了一個字符串，后面需要從IPFS讀取數據，然后將讀取的數據存儲到狀態機變量strContent中并且展示出來。

3.7 導入IPFS 
const ipfsAPI = require("ipfs-api");
const ipfs = ipfsAPI({host: "localhost", port: "5001", protocol: "http"});
3.8 編寫上傳大文本字符串到IPFS的Promise函數 
saveTextBlobOnIpfs = (blob) => {
    return new Promise(function(resolve, reject) {
      const descBuffer = Buffer.from(blob, "utf-8");
      ipfs.add(descBuffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }

response[0].hash返回的是數據上傳到IPFS后返回的HASH字符串。

3.9 上傳數據到IPFS 
this.saveTextBlobOnIpfs(ipfsContent).then((hash) => {
    console.log(hash);
    this.setState({strHash: hash});
});

ipfsContent是從文本框中取到的數據，調用this.saveTextBlobOnIpfs方法將數據上傳后，會返回字符串hash，并且將hash存儲到狀態機變量strHash中。

目前完整的代碼：

import React, {Component} from "react";
import "./App.css";

const ipfsAPI = require("ipfs-api");
const ipfs = ipfsAPI({host: "localhost", port: "5001", protocol: "http"});

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      strHash: null,
      strContent: null
    }
  }

  saveTextBlobOnIpfs = (blob) => {
    return new Promise(function(resolve, reject) {
      const descBuffer = Buffer.from(blob, "utf-8");
      ipfs.add(descBuffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }

  render() {
    return (

      
      

      
{this.state.strHash}


      
      
{this.state.strContent}

    
);
  }
}

export default App;

測試：

3.10 跨域資源共享CORS配置

跨域資源共享( CORS )配置，依次在終端執行下面的代碼：

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods "["PUT", "GET", "POST", "OPTIONS"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "["*"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "["true"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers "["Authorization"]"

localhost:ipfs-http-demo yuechunli$ ipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers "["Location"]"

用正確的端口運行daemon：

localhost:ipfs-http-demo yuechunli$ ipfs config Addresses.API
/ip4/127.0.0.1/tcp/5001
localhost:ipfs-http-demo yuechunli$ ipfs config Addresses.API /ip4/127.0.0.1/tcp/5001
localhost:ipfs-http-demo yuechunli$ ipfs daemon
3.11 再次刷新網頁提交數據并在線查看數據

上傳數據，并且查看返回hash值

在線查看上傳到IPFS的數據

3.12 從IPFS讀取數據

ipfs.cat

ipfs.cat(this.state.strHash).then((stream) => {
    console.log(stream);
    let strContent = Utf8ArrayToStr(stream);
    console.log(strContent);
    this.setState({strContent: strContent});
});

stream為Uint8Array類型的數據，下面的方法是將Uint8Array轉換為string字符串。

Utf8ArrayToStr

function Utf8ArrayToStr(array) {
    var out, i, len, c;
    var char2, char3;

    out = "";
    len = array.length;
    i = 0;
    while(i < len) {
    c = array[i++];
    switch(c >> 4)
      {
        case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
          // 0xxxxxxx
          out += String.fromCharCode(c);
          break;
        case 12: case 13:
          // 110x xxxx   10xx xxxx
          char2 = array[i++];
          out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
          break;
        case 14:
          // 1110 xxxx  10xx xxxx  10xx xxxx
          char2 = array[i++];
          char3 = array[i++];
          out += String.fromCharCode(((c & 0x0F) << 12) |
                         ((char2 & 0x3F) << 6) |
                         ((char3 & 0x3F) << 0));
          break;
        default:
          break;
      }
    }

    return out;
}

完整源碼

import React, {Component} from "react";
import "./App.css";

const ipfsAPI = require("ipfs-api");
const ipfs = ipfsAPI({host: "localhost", port: "5001", protocol: "http"});

function Utf8ArrayToStr(array) {
  var out,
    i,
    len,
    c;
  var char2,
    char3;

  out = "";
  len = array.length;
  i = 0;
  while (i < len) {
    c = array[i++];
    switch (c >> 4) {
      case 0:
      case 1:
      case 2:
      case 3:
      case 4:
      case 5:
      case 6:
      case 7:
        // 0xxxxxxx
        out += String.fromCharCode(c);
        break;
      case 12:
      case 13:
        // 110x xxxx   10xx xxxx
        char2 = array[i++];
        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
        break;
      case 14:
        // 1110 xxxx  10xx xxxx  10xx xxxx
        char2 = array[i++];
        char3 = array[i++];
        out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0));
        break;
      default:
        break;
    }
  }

  return out;
}

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      strHash: null,
      strContent: null
    }
  }

  saveTextBlobOnIpfs = (blob) => {
    return new Promise(function(resolve, reject) {
      const descBuffer = Buffer.from(blob, "utf-8");
      ipfs.add(descBuffer).then((response) => {
        console.log(response)
        resolve(response[0].hash);
      }).catch((err) => {
        console.error(err)
        reject(err);
      })
    })
  }

  render() {
    return (

      
      

      
{this.state.strHash}


      
      
{this.state.strContent}

    
);
  }
}

export default App;
3.13 總結

這篇文章主要講解如何配置React環境，如何創建React項目，如何安裝js-ipfs-api，如何上傳數據，如何設置開發環境，如何下載數據等等內容。通過這篇文章的系統學習，你會掌握js-ipfs-api在項目中的使用流程。

這是【IPFS + 區塊鏈 系列】 入門篇 - IPFS + Ethereum （上篇）-js-ipfs-api，下篇講解如何將IPFS和以太坊智能合約結合進行數據存儲。

4. 下篇文章預告

這是【IPFS + 區塊鏈 系列】 入門篇 - IPFS + Ethereum （上篇）-js-ipfs-api，下篇講解如何將IPFS和以太坊智能合約結合進行數據存儲。

5. 技術交流

區塊鏈技術交流QQ群：348924182

進微信群請加微信：liyc1215

「區塊鏈部落」官方公眾號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/23933.html

相關文章

  • 區塊鏈技術學習指引

    摘要：引言給迷失在如何學習區塊鏈技術的同學一個指引，區塊鏈技術是隨比特幣誕生，因此要搞明白區塊鏈技術，應該先了解下比特幣。但區塊鏈技術不單應用于比特幣，還有非常多的現實應用場景，想做區塊鏈應用開發，可進一步閱讀以太坊系列。 本文始發于深入淺出區塊鏈社區, 原文：區塊鏈技術學習指引 原文已更新，請讀者前往原文閱讀 本章的文章越來越多，本文是一個索引帖，方便找到自己感興趣的文章，你也可以使用左側...

    Cristic 評論0 收藏0

  • 【戴嘉樂】（進階）基于IPFS和Ngrok構建自維護資源網關

    摘要：五參考文獻區塊鏈利用構建自己的去中心化分布式系統相關文章和視頻推薦戴嘉樂入門基于和構建自維護資源網關圓方圓學院匯集大批區塊鏈名師，打造精品的區塊鏈技術課程。 作者簡介：戴嘉樂( Mr.Maple ) | 前百度高級研發工程師 | IPFS應用實踐者&布道師|個人網站：https://www.daijiale.cn聯系方式：微信號：daijiale6239。 一、背景 上篇文章[《（入門...

    xiyang 評論0 收藏0

  • 【戴嘉樂】（入門）基于IPFS和Ngrok構建自維護資源網關

    摘要：作者簡介戴嘉樂前百度高級研發工程師應用實踐者布道師個人網站聯系方式微信號。二技術介紹對這項技術不熟悉的同學，可以參考我之前一次演講分享的內容戴嘉樂詳解的本質技術架構以及應用。 作者簡介：戴嘉樂( Mr.Maple ) | 前百度高級研發工程師 | IPFS應用實踐者&布道師|個人網站：https://www.daijiale.cn聯系方式：微信號：daijiale6239。 一、應用背...

    CloudwiseAPM 評論0 收藏0

  • 2018以太坊智能合約編程語言solidity的最佳IDEs

    摘要：使用基于以太坊的智能合約的集成開發環境。以太坊教程，主要介紹智能合約與應用開發，適合入門。以太坊，主要是介紹使用進行智能合約開發交互，進行賬號創建交易轉賬代幣開發以及過濾器和事件等內容。 Solidity是一種以智能合約為導向的編程語言。這是一種只有四年的年輕語言，旨在幫助開發基于以太坊數字貨幣的智能合約。 理解它官方文檔應該是學習Solidity的最佳來源：solidity.read...

    darkerXi 評論0 收藏0

  • 【戴嘉樂】基于IPFS和GeoHash構建具有地理位置價值服務的DDApp（理論篇）

    摘要：數據將具有如下個特點將二維的經緯度轉換成字符串，比如下圖展示了北京個區域的字符串，分別是，等等，每一個字符串代表了某一矩形區域。例如，坐標對，位于北京安定門附近，后形成的值為。 作者簡介：戴嘉樂( Mr.Maple ) | 前百度高級研發工程師 | IPFS應用實踐者&布道師|個人網站：https://www.daijiale.cn聯系方式：微信號：daijiale6239。 show...

    lmxdawn 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<