使用NetLify功能訪問您的數據並進行反應

靜態站點生成器以其速度，安全性和用戶體驗而受歡迎。但是，有時您的應用程序需要構建網站時無法提供的數據。 React是一個用於構建用戶界面的庫，可幫助您在客戶端應用程序中檢索和存儲動態數據。

動物群是一個靈活的，無服務器的數據庫，它作為API提供了完全消除運營開銷的空間，例如容量計劃，數據複製和計劃的維護。 Fauna允許您將數據建模為文檔，從而自然適合用React編寫的Web應用程序。儘管您可以通過JavaScript驅動程序直接訪問Fauna，但這需要為連接到數據庫的每個客戶端的自定義實現。通過將FAUNA數據庫放置在API之後，您可以使任何授權的客戶端連接，無論編程語言如何。

NetLify函數允許您通過部署用作API端點的服務器端代碼來構建可擴展的動態應用程序。在本教程中，您可以使用React，NetLify功能和動物群構建無服務器應用程序。您將學習使用動物群的存儲和檢索數據的基礎知識。您可以創建和部署NetLify功能，以安全地訪問Fauna的數據。最後，您將React應用程序部署到NetLify。

Fauna入門

Fauna是一個分佈式的，強烈的OLTP NOSQL無服務器數據庫，它是符合酸的，並提供了多模型接口。 Fauna還支持單個查詢的文檔，關係，圖形和時間數據集。首先，我們將通過選擇“數據庫”選項卡並單擊創建數據庫按鈕來創建在動物群機中的數據庫。

接下來，您需要創建一個集合。為此，您需要選擇一個數據庫，然後在“集合”選項卡下，單擊創建集合。

在持續數據時，動物群使用特定的結構。該設計由下面的示例組成。

 {
  “ ref”：ref（收集（“復仇者”），“ 2992210878999615749”），
  “ TS”：1623215668240000，
  “數據”： {
    “ ID”：“ DB7BD11D-29C5-4877-B30D-DFC4DFB2B90E”，
    “名稱”：“美國隊長”，
    “力量”：“高力量”，
    “描述”：“盾牌”
  }
}

請注意，Fauna保留了一個參考列，該列是用於識別特定文檔的唯一標識符。 TS屬性是確定創建記錄的時間和負責數據的數據屬性的時間戳。

為什麼創建索引很重要

接下來，讓我們為我們的《復仇者聯盟》系列創建兩個索引。這將在項目的後半部分非常有價值。您可以從索引選項卡或“ shell”選項卡創建索引，該索引提供了執行腳本的控制台。動物群支持兩種類型的查詢技術：FQL（Fauna的查詢語言）和GraphQl。 FQL基於Fauna的模式，其中包括文檔，集合，索引，集合和數據庫。

讓我們從外殼創建索引。

此命令將在集合上創建索引，該命令將通過數據對像中的ID字段創建一個索引。該索引將返回數據對象的參考。接下來，讓我們為名稱屬性創建另一個索引，並將其命名為Avenger_by_name 。

創建服務器密鑰

要創建服務器鍵，我們需要導航“安全”選項卡，然後單擊新的鍵按鈕。本節將提示您為所選數據庫和用戶角色創建密鑰。

開始使用NetLify功能並做出反應

在本節中，我們將了解如何使用React創建NetLify函數。我們將使用Create-React-App來創建React應用程序。

 NPX創建反應復仇者聯盟-FAUNADB

創建React應用程序後，讓我們安裝一些依賴項，包括動物群和Netlify依賴關係。

紗線添加Axios bootstrap節點 -  sass uuid faunadb react-netlify-nideity react-netlify-nettility-netity-witget

現在，讓我們創建我們的第一個Netlfiy功能。為了使功能首先，我們需要在全球安裝NetLifiy CLI。

 NPM安裝NetLify -CLI -G

現在安裝了CLI，讓我們在我們的項目root上創建一個.env文件，並使用以下字段創建一個。

 faunadb_server_secret = <faunadb>
react_app_netlify = <netlify></netlify></faunadb>

接下來，讓我們看看如何從創建NetLify函數開始。為此，我們將需要在我們的項目根中創建一個名為functions的目錄和一個名為netlify.toml的文件，該文件將負責維護我們的NetLify項目的配置。該文件定義了我們函數的目錄，構建目錄和命令要執行。

 [建造]
命令=“ npm run構建”
functions =“功能/”
發布=“構建”

[[重定向]]
  來自=“/api/*”
  to =“ /.netlify/functions/:splat”
  狀態= 200
  力= true

我們將為NetLify配置文件做一些其他配置，例如在本示例的重定向部分中。請注意，我們正在更改/.netlify/xper的netLify函數的默認路徑為 /api /。該配置主要用於改進API URL的外觀和場。因此，要觸發或調用我們的功能，我們可以使用路徑：

 https://domain.com/api/getpokemons

…而不是：

 https://domain.com/.netlify/getpokemons

接下來，讓我們在功能目錄中創建我們的NetLify函數。但是，首先，讓我們製作一個名為util/connections.js的動物的連接文件，返回動物區連接對象。

 const faunadb = require（'faunadb'）;
const q = faunadb.query

const clientquery = new faunadb.client（{{
  秘密：process.env.faunadb_server_secret，
}）;

Module.exports = {ClientQuery，Q};

接下來，讓我們創建一個輔助功能檢查參考和返回，因為我們需要在整個應用程序中多次解析數據。此文件將是util/helper.js 。

 const響應obj =（statuscode，data）=> {
  返回 {
    狀態代碼：狀態代碼，
    標題：{
     / * CORS支持工作所必需的 */
      “ Access-Control-Allow-Origin”：“*”，
      “訪問控制 - 允許頭”：“*”，
      “ Access-Control-Allow-Methods”：“獲取，發布，選項”，
    }，，
   正文：json.stringify（數據）
  };
};

const requestObj =（data）=> {
  返回JSON.PARSE（數據）;
}

Module.exports = {ResponseObj：ResponseObj，requestObj：requestObj}

請注意，上述助手功能處理了JSON數據的CORS問題，串聯和解析。讓我們創建我們的第一個功能GetAvengers ，它將返回所有數據。

 const {Response obj} = require（'./ util/helper'）;
const {q，clientquery} = require（'./ util/connection'）;

exports.handler = async（event，context）=> {
  嘗試 {
   讓Avengers =等待clientquery.query（
     q.map（
       q.Paginate（q.documents（q.Collection（'vengers'））），），
       q.lambda（x => q.get（x））
      ）
    ）
    返迴響應obj（200，復仇者聯盟）
  } catch（錯誤）{
    console.log（錯誤）
    返迴響應obj（500，錯誤）;
  }
};

在上面的代碼示例中，您可以看到我們使用了多個FQL命令，例如MAP ， PAGINES ， LAMDA。地圖鍵用於迭代數組，它需要兩個參數：一個數組和lambda 。我們已將第一個參數傳遞給了Caginate，該參數將檢查參考並返回結果的頁面（數組）。接下來，我們使用了LAMDA語句，這是一個與ES6中匿名箭頭函數非常相似的匿名函數。

接下來，讓我們創建我們的函數Addavenger負責將數據創建/插入集合中。

 const {requestObj，wendespobj} = require（'./ util/helper'）;
const {q，clientquery} = require（'./ util/connection'）;

exports.handler = async（event，context）=> {
  令data = requestObj（event.body）;

  嘗試 {
    讓Avenger =等待客戶端。Query（
      Q.創建（
        Q.Collection（“復仇者”），
        {
          數據： {
            id：data.id，
            名稱：data.name，
            電源：data.power，
            描述：Data.Description
          }
        }
      ）
    ）；

    返迴響應obj（200，復仇者）
  } catch（錯誤）{
    console.log（錯誤）
    返迴響應obj（500，錯誤）;
  }
 
};

為了將數據保存為特定集合，我們將不得不將數據或數據傳遞給數據：{}對象，如上面的代碼示例中。然後，我們需要將其傳遞給創建功能，並將其指向您想要的集合和數據。因此，讓我們運行代碼，看看它如何通過NetLify Dev命令來工作。

讓我們通過URL http：// localhost：8888/api/getavengers觸發getavengers功能。

以上功能將通過從Avenger_by_name索引搜索的名稱屬性獲取復仇者對象。但是，首先，讓我們通過NetLify函數調用GetAvengerByName功能。為此，讓我們創建一個稱為SearchAvenger的函數。

 const {Response obj} = require（'./ util/helper'）;
const {q，clientquery} = require（'./ util/connection'）;

exports.handler = async（event，context）=> {
  const {
    QueryStringParameters：{name}，
  } = event;

  嘗試 {
    讓Avenger =等待客戶端。Query（
      Q.CALL（Q.Function（“ getavengerbyname”），[name]）
    ）；
    返迴響應obj（200，復仇者）
  } catch（錯誤）{
    console.log（錯誤）
    返迴響應obj（500，錯誤）;
  }
};

請注意，呼叫函數採用兩個參數，其中第一個參數將是我們創建的FQL函數的引用以及我們需要傳遞給該函數的數據。

通過React調用NetLify功能

現在可以使用多個功能，讓我們通過React消耗這些功能。由於功能是REST API，讓我們通過Axios食用它們，對於狀態管理，讓我們使用React的上下文API。讓我們從稱為AppContext.js的應用程序上下文開始。

從“ react”導入{createContext，usereducer}；
從“ ./appreducer”進口批准的人

const initialstate = {
    編輯：錯誤，
    復仇者：{名稱：''，描述：''，Power：''}，
    復仇者：[]，
    用戶：null，
    Isloggedin：false
};

導出const appContext = createContext（initialstate）;

導出const appContextProvider =（{children}）=> {
    const [state，dispatch] =用戶educer（批准的，初始狀態）;

    const login =（data）=> {dispatch（{type：'login'，有效載荷：data}）}}
    const logout =（data）=> {dispatch（{type：'lemout'，有效載荷：data}）}}
    const getavenger =（data）=> {dispatch（{type：'get_avenger'，有效載荷：data}）}}
    const UpdateAvenger =（data）=> {dispatch（{type：'update_avenger'，有效載荷：data}）}}
    const clearavenger =（data）=> {dispatch（{type：'clear_avenger'，有效載荷：data}）}}
    const selectavenger =（data）=> {dispatch（{type：'select_avenger'，有效載荷：data}）}}
    const getavengers =（data）=> {dispatch（{type：'get_avengers'，有效載荷：data}）}}
    const createAvenger =（data）=> {dispatch（{type：'create_avenger'，有效載荷：data}）}}
    const deleteavengers =（data）=> {dispatch（{type：'delete_avenger'，有效載荷：data}）}}

    返回<appcontext.provider value="{{{" ... selectavenger updateavenger clearavenger getavenger getavengers createavenger> {兒童} </appcontext.provider>
}

導出默認AppContextProvider;

讓我們在“批准”文件中為此上下文創建還原器，該文件將由應用程序上下文中每個操作的還原函數組成。

 const updateEtem =（復仇者，data）=> {
    令Avenger = Avengers.find（（Avenger）=> Avenger.id === data.id）;
    讓UpdatedAvenger = {... Avenger，... data};
    令AvengerIndex = Avengers.FindIndex（（Avenger）=> Avenger.id === data.id）;
    返回 [
        ... Avengers.slice（0，AvengerIndex），
        更新avenger，
        ... Avengers.slice（AvengerIndex），
    ];
}

const deleteitem =（復仇者，id）=> {
    返回avengers.filter（（Avenger）=> Avenger.data.id！== ID）
}

const批准=（狀態，操作）=> {
    switch（action.type）{
        案例“ select_avenger”：
            返回 {
                ...狀態，
                編輯：是的，
                復仇者：action.payload
            }
        案例“ clear_avenger”：
            返回 {
                ...狀態，
                編輯：錯誤，
                復仇者：{名稱：''，描述：''，Power：''}
            }
        案例“ Update_avenger”：
            返回 {
                ...狀態，
                編輯：錯誤，
                Avengers：UpdateItem（State.Avengers，Action.Payload）
            }
        案例“ get_avenger”：
            返回 {
                ...狀態，
                復仇者：action.payload.data
            }
        案例“ get_avengers”：
            返回 {
                ...狀態，
                復仇者：array.isarray（action.payload && action.payload.data）？ action.payload.data：[{... action.payload}]
            };
        案例“ create_avenger”：
            返回 {
                ...狀態，
                復仇者：[{data：action.payload}，... state.avengers]
            };
        案例“ delete_avenger”：
            返回 {
                ...狀態，
                復仇者聯盟：deleteitem（state.avengers，action.payload）
            };
        案例“登錄”：
            返回 {
                ...狀態，
                用戶：action.payload，
                Isloggedin：是的
            };
        案例“註銷”：
            返回 {
                ...狀態，
                用戶：null，
                Isloggedin：false
            };
        預設:
            返回狀態
    }
}

出口默認批准者；

由於現在可以使用應用程序上下文，因此我們可以從我們創建的NetLify函數中獲取數據，並在應用程序上下文中持續存在。因此，讓我們看看如何調用這些功能之一。

 const {復仇者，getavengers} = usecontext（appContext）;

const getavengers = async（）=> {
  令{data} =等待axios.get（'/api/getavengers）;
  getavengers（數據）
}

要將數據獲取到應用程序上下文，讓我們從我們的應用程序上下文中導入函數getavengers ，然後傳遞get呼叫的數據。此功能將調用還原函數，該功能將使數據保持在上下文中。要訪問上下文，我們可以使用稱為“復仇者聯盟”的屬性。接下來，讓我們看看如何在《復仇者聯盟》集合中保存數據。

 const {createAvenger} = usecontext（appContext）;

const createAvenger = async（e）=> {
  e.preventDefault（）;
  讓new_avenger = {id：uuid（），... newavenger}
  等待Axios.post（'/api/addavenger'，new_avenger）;
  清除（）;
  CreateAvenger（new_avenger）
}

上述newavenger對像是將保留表單數據的狀態對象。請注意，我們將UUID類型的新ID傳遞給每個文檔。因此，當數據保存在動物區系中時，我們將在應用程序上下文中使用CreateAvenger函數來保存數據。同樣，我們可以通過Axios使用類似的CRUD操作來調用所有NetLify功能。

如何部署應用程序以netlify

現在我們有了一個工作應用程序，我們可以部署此應用程序來進行NetLify。我們可以通過多種方式部署此應用程序：

1. 通過GitHub連接和部署應用程序
2. 通過Netlify CLI部署應用程序

使用CLI將提示您輸入特定的詳細信息和選擇，並且CLI將處理其餘的。但是在此示例中，我們將通過GitHub部署應用程序。因此，首先，讓我們登錄到NetLify儀表板，然後從Git按鈕中單擊新站點。接下來，它將提示您選擇需要部署的存儲庫以及網站的配置，例如build command，build build folder等。

如何通過NetLify身份來驗證和授權功能

NetLify Identity為您的應用程序提供了完整的身份驗證功能，這將幫助我們在整個應用程序中管理認證的用戶。無需使用任何其他第三方服務和庫即可輕鬆將Netlify身份集成到應用程序中。要啟用NetLify身份，我們需要登錄到NELTIFY儀表板，在部署的站點下，我們需要移至“身份”選項卡並允許身份功能。

啟用身份將提供指向您的Netlify身份的鏈接。您必須複製該URL，並將其添加到react_app_netlify應用程序的.env文件中。接下來，我們需要通過NetLify-nidentity-Widget和NetLify函數將NetLify身份添加到我們的React應用程序中。但是，首先，讓我們添加index.js文件中的身份上下文提供商組件的react_app_netlify屬性。

從“反應”中導入反應；
從“反應”進口反應；
導入'./index.css';
導入“ react-netlify-niendity-witget/styles.css”
導入“ bootstrap/dist/css/bootstrap.css”;
從'./app'導入應用程序；
從“ React-Netlify-niendity-Widget”中導入{IdentityContextProvider}
const url = process.env.react_app_netlify;

Reactdom.render（
  <identitycontextprovider url="{url}">
    <app></app>
  </identitycontextprovider>，
  document.getElementById（'root'）
）；

該組件是我們在此應用程序中使用的導航欄。該組件將位於所有其他組件的頂部，是處理身份驗證的理想場所。此React-Netlify-Indentity-Widget將添加另一個可以處理用戶signi = in和註冊的組件。

接下來，讓我們在NetLify函數中使用身份。身份將為我們的功能引入一些較小的修改，例如以下功能getavenger。

 const {Response obj} = require（'./ util/helper'）;
const {q，clientquery} = require（'./ util/connection'）;

exports.handler = async（event，context）=> {
    if（context.clientcontext.user）{
        const {
            QueryStringParameters：{id}，
        } = event;
        嘗試 {
            const avenger =等待clientquery.query（
                問：
                    q. -match（q.index（'avenger_by_id'），id）
                ）
            ）；
            返迴響應obj（200，復仇者）
        } catch（錯誤）{
            console.log（錯誤）
            返迴響應obj（500，錯誤）;
        }
    } 別的 {
        返迴響應obj（401，“未經授權”）；
    }
};

每個請求的上下文將由一個稱為客戶端的屬性組成， 它將由經過身份驗證的用戶詳細信息組成。在上面的示例中，我們使用簡單的條件來檢查用戶上下文。

為了在我們的每個請求中獲取客戶端context，我們需要通過授權標頭傳遞用戶令牌。

 const {user} = useidentityContext（）;

const getavenger = async（id）=> {
  令{data} =等待axios.get（'/api/getavenger/？id ='id，用戶&& {
    標題：{
      授權：`bearer $ {user.token.access_token}`
    }
  }）;
  getavenger（數據）
}

該用戶令牌將在用戶上下文中可用，一旦通過NetLify Identity小部件登錄到該應用程序。

如您所見，NetLify功能和動物群看起來似乎是構建無服務器應用程序的有前途的二重奏。您可以關注此GitHub存儲庫以獲取完整的代碼，並參考此URL進行工作演示。

結論

總之，Fauna和Netlify看起來是構建無服務器應用程序的有前途的二人組。 Netlify還提供了通過插件擴展其功能以增強體驗的靈活性。隨著您的薪水，帶薪的定價計劃是開發人員開始使用動物群的理想選擇。動物群體非常快，並且它是自動尺度的，因此開發人員將有時間專注於他們的開發。 Fauna可以處理複雜的數據庫操作，您可以在關係，文檔，圖形，時間數據庫中找到。動物驅動程序支持所有主要語言，例如Android，C＃，GO，Java，JavaScript，Python，Ruby，Scala和Swift。憑藉所有這些出色的功能，Fauna看起來是最好的無服務器數據庫之一。有關更多信息，請瀏覽動物群文檔。

以上是使用NetLify功能訪問您的數據並進行反應的詳細內容。更多資訊請關注PHP中文網其他相關文章！