許多人對jamstack是什么感到困惑。首字母縮寫代表JavaScript，API和Markup，但確實，Jamstack不必包括所有三個。定義jamstack的是它是沒有網(wǎng)絡(luò)服務(wù)器的。如果您考慮計算的歷史記錄，則這種抽象不是不自然的。相反，這是這個行業(yè)一直在發(fā)展的不可避免的進步。

因此，如果jamstack根據(jù)定義傾向于靜態(tài)，那么它不能具有動態(tài)功能，服務(wù)器端事件或使用JavaScript框架，對嗎？值得慶幸的是，不是。在本教程中，我們將設(shè)置一個JAMSTACK電子商務(wù)應(yīng)用程序，并使用NetLify函數(shù)添加一些無服務(wù)器功能（在我看來，AWS Lambda AWS lambda，這是超級涂料）。

我將更直接地展示如何在后續(xù)文章中設(shè)置NUXT/VUE部件，但就目前而言，我們將重點關(guān)注Stripe無服務(wù)器功能。我將向您展示如何設(shè)置這個，甚至我們將討論如何連接到其他靜態(tài)站點生成器（例如Gatsby）。全面披露，我為Netlify工作，并為此使用了他們的工具，可以與其他服務(wù)連接到條紋。我之所以選擇在某種程度上為Netlify工作，因為我喜歡他們的服務(wù)提供的一些不錯的抽象。

如果您想自己設(shè)置類似的東西，該網(wǎng)站和回購應(yīng)該讓您入門：

Github倉庫

腳手架我們的應(yīng)用程序

第一步是設(shè)置我們的應(yīng)用程序。這是使用NUXT構(gòu)建的，以創(chuàng)建VUE應(yīng)用程序，但是您可以將這些命令替換為您的Tech stack的選擇：

紗線創(chuàng)建nuxt-app

集線器創(chuàng)建

git add -a
git commit -m“初始提交”

git push -U原始大師

我正在使用紗線，樞紐（它允許我從命令行創(chuàng)建存儲庫）和NUXT。在繼續(xù)之前，您可能需要在本地或全球安裝這些工具。

有了這幾個命令，按照提示，我們可以設(shè)置一個全新的NUXT項目以及倉庫。

如果我們登錄Netlify和驗證，它將要求我們選擇一個倉庫：

我將使用紗線生成來創(chuàng)建項目。這樣，我可以在DIST目錄中的NUXT添加網(wǎng)站設(shè)置并擊中Feploy！這就是設(shè)置CI /CD并部署網(wǎng)站所需的一切！現(xiàn)在，每當(dāng)我推到主分支時，我不僅會部署，而且還會為該特定部署提供一個唯一的鏈接。太棒了。

具有NetLify的基本無服務(wù)器功能

因此，這是令人興奮的部分，因為這種功能的設(shè)置非?？欤∪绻皇煜o服務(wù)器，則可以將其視為您所知道和喜歡的JavaScript功能，但在服務(wù)器上執(zhí)行。無服務(wù)器功能是事件驅(qū)動的邏輯，其價格極低（不僅在網(wǎng)絡(luò)上，而且在整個行業(yè)上），并且使用使用情況。是的，我們必須在此處添加預(yù)選賽：無服務(wù)器仍然使用服務(wù)器，但是保姆不再是您的工作。讓我們開始。

我們非?；镜墓δ芸雌饋硐襁@樣。我將我的我存儲在一個名為函數(shù)的文件夾中，并將其稱為index.js。您可以真正致電該文件夾并運行您想要的內(nèi)容。

 // functions/index.js
exports.handler = async（event，context）=> {
  返回 {
    狀態(tài)代碼：200，
    正文：json.stringify（{
      消息：“嗨，炸玉米餅”，
      事件
    }））
  }
}

我們還需要在項目的根部創(chuàng)建一個netlify.toml文件，并讓它知道要在哪個目錄中找到該功能，在這種情況下是“函數(shù)”。

 // netlify.toml
[建造]
  功能=“功能”

如果我們推動掌握并進入儀表板，您會看到它拾取了功能！

如果您查看上面列出的端點，則存儲在此處：
https://ecommerce-netlify.netlify.com/.netlify/functions/index

確實，對于您提供的任何站點，URL將遵循以下模式：
https：//。netlify/functions/

當(dāng)我們點擊該端點時，它為我們提供了我們傳達(dá)的消息，以及我們記錄的所有事件數(shù)據(jù)：

我喜歡那幾步！這小小的代碼為我們提供了無限的功能和能力，可在我們的網(wǎng)站上提供豐富的動態(tài)功能。

連接條紋

與條紋配對非常有趣，因為它易于使用，精致，具有出色的文檔，并且可以很好地與無服務(wù)器功能合作。我還有其他使用條紋的教程，因為我非常喜歡使用他們的服務(wù)。

這是我們將要構(gòu)建的應(yīng)用程序的鳥類視圖：

首先，我們要去Stripe儀表板并獲取鑰匙。對于現(xiàn)在完全丑聞的人來說，沒關(guān)系，這些正在測試鍵。您也可以使用它們，但是如果您自己設(shè)置它們，您將了解更多。 （這是兩次點擊，我保證從這里不難跟隨。）

我們將安裝一個名為Dotenv的軟件包，該軟件包將幫助我們存儲鑰匙并在本地進行測試。然后，我們將我們的條紋秘密鍵存儲到條紋變量中。 （您可以稱其為任何東西，但是在這里我稱其為Stripe_secret_key，這幾乎是行業(yè)標(biāo)準(zhǔn)。）

紗線添加dotenv

 require（“ dotenv”）。config（）

const Stripe = require（“ stripe”）（process.env.stripe_secret_key）

在NetLify儀表板中，我們將轉(zhuǎn)到“構(gòu)建和部署”，然后轉(zhuǎn)到“環(huán)境”以添加環(huán)境變量，其中stripe_secret_key是鍵，該值將是以SK開頭的鍵。

我們還將添加一些標(biāo)題，因此我們不會遇到CORS問題。我們將在要構(gòu)建的整個功能中使用這些標(biāo)題。

 const標(biāo)題= {
  “ Access-Control-Allow-Origin”：“*”，
  “訪問控制 - 允許頭”：“ content-type”
}

因此，現(xiàn)在我們將創(chuàng)建與條紋交談的功能。我們將確保我們將處理這不是我們期望的HTTP方法的案例，還可以獲取所期望的信息。

您已經(jīng)可以在這里看到，通過我們檢查的內(nèi)容，我們需要發(fā)送哪些數(shù)據(jù)以進行條紋。我們需要令牌，總金額和一個勢力密鑰。

如果您不熟悉IDEMPOTENCY密鑰，則它們是由客戶端生成的唯一值，并將其發(fā)送到API以及請求以及如果連接中斷。如果服務(wù)器接收到它意識到的呼叫是重復(fù)的，則它會忽略請求并使用成功的狀態(tài)代碼響應(yīng)。哦，這是一個不可能發(fā)音的詞。

 exports.handler = async（event，context）=> {
  如果（！event.body || event.httpmethod！==“ post”）{
    返回 {
      狀態(tài)代碼：400，
      標(biāo)題，
      正文：json.stringify（{
        狀態(tài)：“無效HTTP方法”
      }））
    }
  }

  const data = json.parse（event.body）

  if（！data.stripetoken ||！data.stripeamt ||！data.stripeidempotency）{
    Console.Error（“缺少必需的信息?！保?
    返回 {
      狀態(tài)代碼：400，
      標(biāo)題，
      正文：json.stringify（{
        狀態(tài)：“丟失信息”
      }））
    }
  }

現(xiàn)在，我們將啟動Stripe付款處理！我們將使用電子郵件和令牌創(chuàng)建一個條紋客戶，進行一些記錄，然后創(chuàng)建條紋費用。我們將指定貨幣，金額，電子郵件，客戶ID，并在我們使用時提供描述。最后，我們將提供IDEMPOTENCY鍵（發(fā)音為Eye-Dem-po-ten-see ），并記錄它是成功的。

（雖然這里沒有顯示，但我們也會做一些錯誤處理。）

 // Stripe付款處理從這里開始
嘗試 {
  等待條紋
    。創(chuàng)造（{
      電子郵件：data.StripeMail，
      資料來源：data.StripeToken
    }））
    。然后（客戶=> {
      console.log（
        `啟動費用，amt：$ {data.stripeamt}，電子郵件：$ {data.stripeemail}`
      ）
      返回條紋
        。創(chuàng)造（
          {
            貨幣：“美元”，
            金額：data.stripeamt，
            receipt_email：data.StripeMail，
            客戶：customer.id，
            描述：“樣品充電”
          }，，
          {
            idempotency_key：data.stripeidempotency
          }
        ）
        然后（結(jié)果=> {
          console.log（創(chuàng)建電荷：$ {result}`）
        }））
    }））

將其連接到nuxt

如果我們回顧我們的應(yīng)用程序，您會看到我們有生活在頁面內(nèi)的頁面和組件。 Vuex商店就像我們應(yīng)用的大腦一樣。它將擁有該應(yīng)用程序的狀態(tài)，這就是與條紋進行通信的情況。但是，我們?nèi)匀恍枰ㄟ^客戶端與用戶通信。我們將在稱為AppCard.Vue的組件中收集信用卡數(shù)據(jù)，該組件將在購物車頁面上。

首先，我們將安裝一個稱為Vue-Stripe-Elements-Plus的軟件包，該軟件包為我們提供了一些條紋元素，使我們能夠收集信用卡數(shù)據(jù)，甚至通過付費方法來使我們能夠為Stripe付款處理創(chuàng)建令牌。我們還將添加一個名為UUID的庫，該庫將允許我們生成唯一的鍵，該鍵將用于IDEMPOTENCY密鑰。

紗線添加vue-stripe-elements-plus uuid

他們給我們的默認(rèn)設(shè)置與vue-stripe-elements-plus合作，如下所示：

 
  <div id="'app'">
    <h1>請給我們您的付款詳細(xì)信息：</h1>
    
    <button class="'付費">用信用卡付款</button>
  </div>

 <script>
從&#39;./stripeconfig.json&#39;導(dǎo)入{stripekey，stripeoptions}
導(dǎo)入{card，createToken}來自&#39;vue-stripe-elements-plus&#39;

導(dǎo)出默認(rèn){
  數(shù)據(jù) （） {
    返回 {
      完成：false，
      條紋：{
        //有關(guān)詳細(xì)信息，請參見https://stripe.com/docs/stripe.js#element-options
      }
    }
  }，，

  組件：{card}，

  方法： {
    支付 （） {
      // createToken返回的諾言，可以在結(jié)果對象中解決
      //令牌或錯誤鍵。
      //有關(guān)令牌對象的https://stripe.com/docs/api#tokens。
      //有關(guān)錯誤對象，請參見https://stripe.com/docs/api#errors。
      //更通用的https://stripe.com/docs/stripe.js#stripe-create-token。
      createToken（）。然后（data => console.log（data.token））
    }
  }
}
</script>

所以這就是我們要做的。我們將更新以存儲客戶電子郵件的表格，并更新付費方法，以將其發(fā)送給Vuex商店的令牌或錯誤鍵。我們將派遣一項行動。

數(shù)據(jù)（） {
    返回 {
      ...
      Stripemail：“”
    };
  }，，
  方法： {
    支付（） {
      createToken（）。然后（data => {
        const stripata = {data，stripemail：this.stripemail};
        this。$ store.dispatch（“ postStripeFunction”，lindata）;
      }）;
    }，，
 ...

我們派遣的后條線函數(shù)看起來像這樣：

 // VUEX商店
導(dǎo)出const Action = {
  異步PostStripeFunction（{getters，commits}，有效載荷）{
    提交（“ UpdateCartui”，“加載”）

    嘗試 {
      等待Axios
        。郵政（
          “ https://ecommerce-netlify.netlify.com/.netlify/functions/index”，
          {
            StripeMail：有效載荷。條紋郵件，
            條紋：Math.floor（getters.carttotal * 100），//預(yù)計價格為美分                        
            脫鐵：“ tok_visa”，//測試令牌，以后我們將使用pareload.data.token
            stripeidempotency：uuidv1（）//我們使用此庫創(chuàng)建唯一的ID
          }，，
          {
            標(biāo)題：{
              “ content-type”：“ application/json”
            }
          }
        ）
        。然后（res => {
          如果（res.status === 200）{
            提交（“ UpdateCartui”，“成功”）
            settimeout（（）=> commit（“ clearcart”），3000）
            …

我們將在處理時將UI狀態(tài)更新為加載。然后，我們將使用AXIOS發(fā)布到我們的功能端點（您設(shè)置函數(shù)時在帖子中看到的URL）。我們將發(fā)送電子郵件，AMT，令牌和我們構(gòu)建的功能所期望的唯一鍵。

然后，如果成功，我們將更新UI狀態(tài)以反映這一點。

我要給出的最后一個值得一提的是，我將UI狀態(tài)存儲在字符串中，而不是布爾值。我通常以“閑置”之類的東西開始，在這種情況下，我也會有“負(fù)載”，“成功”和“失敗”。我不使用布爾州，因為我很少遇到UI狀態(tài)只有兩個狀態(tài)的情況。當(dāng)您為此目的與布爾值合作時，您傾向于將其分解為越來越多的狀態(tài)，并且檢查所有狀態(tài)可能會變得越來越復(fù)雜。

就目前而言，我可以反映帶有可讀條件的購物車頁面上UI的變化，例如：

 
  <app-cart-display></app-cart-display>


<v-else-if cartuistatus="=='loading'”">
  <app-loader></app-loader>



  <h2>成功！</h2>
  <p>感謝您的購買。您將在4個工作日內(nèi)收到您的物品。</p>
  <p>忘記了什么？</p>

  <button>
    <nuxt-link cract to="“/”">回家</nuxt-link>
  </button>


<v-else-if cartuistatus="=='失敗'”">
  <p>糟糕，出了點問題。將您重定向到購物車重試。</p>
</v-else-if></v-else-if>

那里有它！我們所有人都設(shè)置并運行，以接受NUXT上的Stripe，帶有NetLify功能的VUE網(wǎng)站上的付款，設(shè)置甚至不那么復(fù)雜！

蓋茨比應(yīng)用

在這種情況下，我們使用了NUXT，但是如果您想使用使用諸如gatsby之類的反應(yīng)的東西設(shè)置相同的功能，則有一個插件。 （所有內(nèi)容都是蓋茨比中的插件。

您將使用此命令安裝它：

紗線添加了蓋茨比 - 普格丁 - 新網(wǎng)絡(luò)功能

…并這樣將插件添加到您的應(yīng)用程序中：

插件：[
  {
    解決：`gatsby-plugin-netlify-unctions'，
    選項： {
      functionsSrc：`$ {__ dirname}/src/functions`，
      functionsOutput：`$ {__ dirname}/functions`，
    }，，
  }，，
這是給出的

此演示中使用的無服務(wù)器函數(shù)是直接上升的JavaScript，因此它也可以移植到React應(yīng)用程序。有一個插件可以將Stripe腳本添加到您的Gatsby應(yīng)用程序（同樣，所有內(nèi)容都是插件）。公平警告：這將腳本添加到網(wǎng)站上的每個頁面。為了收集客戶的信用卡信息，您將使用React Stripe Elements，這與我們上面使用的VUE相似。

只需確保您從客戶端收集并傳遞了功能所期望的所有信息：

• 用戶電子郵件
• 總金額，以美分
• 令牌
• 揮霍鍵

Github倉庫

有了如此低的進入障礙，您可以看到如何使用Jamstack應(yīng)用程序進行真正的動態(tài)體驗。如果沒有服務(wù)器的任何維護成本，您可以完成多少工作，這真是令人驚訝。 Stripe和NetLify功能構(gòu)成了在靜態(tài)應(yīng)用程序中設(shè)置付款處理，因此開發(fā)人員的體驗如此順暢！

以上是讓我們使用Netlify功能構(gòu)建一個Jamstack電子商務(wù)商店的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！