使用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中文网其他相关文章！