現(xiàn)代網(wǎng)頁用戶期待流暢、動態(tài)的單頁應(yīng)用 (SPA) 體驗。然而，創(chuàng)建 SPA 通常需要 React 和 Angular 等複雜的框架，學(xué)習(xí)和使用這些框架可能很複雜。 htmx 應(yīng)運而生——它是一個庫，通過直接在 HTML 中利用 Ajax 和 CSS 過渡等功能，為構(gòu)建動態(tài)網(wǎng)頁體驗提供了新的視角。

本指南將探討 htmx 的功能、它如何簡化動態(tài) Web 開發(fā)以及如何利用它的潛力來增強您的 Web 開發(fā)流程。

關(guān)鍵要點

• htmx 基礎(chǔ)：htmx 通過利用 HTML 來實現(xiàn)動態(tài)網(wǎng)頁體驗，降低了通常與 JavaScript 密集型 SPA 相關(guān)的複雜性。
• 簡易安裝：htmx 可以通過 CDN 輕鬆集成到項目中，方便快速集成，無需複雜的設(shè)置。
• 簡化 Ajax：該庫允許使用特定屬性直接從 HTML 元素發(fā)出簡單的 Ajax 請求，增強用戶交互，無需大量的 JavaScript 代碼。
• 動態(tài)內(nèi)容加載：htmx 支持針對特定元素進行內(nèi)容更新，並提供多種插入新內(nèi)容的方式，使網(wǎng)頁更具交互性。
• 增強用戶體驗：htmx 內(nèi)置支持 CSS 過渡和實驗性的視圖過渡 API，允許在更新內(nèi)容時實現(xiàn)流暢的視覺效果。
• 表單處理和驗證：htmx 與 HTML5 驗證集成，確保表單按預(yù)期運行，增強可用性和功能性。

什麼是 htmx？它是如何工作的？

在構(gòu)建交互式 Web 體驗時，開發(fā)人員傳統(tǒng)上有兩種主要選擇，每種都有其自身的權(quán)衡。一方面，有多頁應(yīng)用程序 (MPA)，每次用戶與之交互時都會刷新整個頁面。這種方法確保服務(wù)器控制應(yīng)用程序狀態(tài)，客戶端忠實地表示它。但是，完整的頁面重新加載會導(dǎo)致緩慢且笨拙的用戶體驗。

另一方面，單頁應(yīng)用程序 (SPA) 依賴於在瀏覽器中運行的 JavaScript 來管理應(yīng)用程序狀態(tài)。它們使用 API 調(diào)用與服務(wù)器通信，API 調(diào)用返回數(shù)據(jù)，通常為 JSON 格式。然後，SPA 使用此數(shù)據(jù)來更新用戶界面而無需頁面刷新，從而提供更流暢的用戶體驗，有點類似於本機桌面或移動應(yīng)用程序。但是，這種方法也不是完美的。由於大量的客戶端處理，計算開銷通常更高；初始加載時間可能更慢，因為客戶端必須先下載和解析大型JavaScript 包才能呈現(xiàn)第一頁；設(shè)置開發(fā)環(huán)境通常需要處理複雜的構(gòu)建工具和工作流程。

htmx 為這兩種極端情況提供了一種折中方案。它提供了 SPA 的用戶體驗優(yōu)勢——無需完全頁面重新加載——同時保持了 MPA 的服務(wù)器端簡單性。在此模型中，服務(wù)器不是返回客戶端需要解釋和呈現(xiàn)的數(shù)據(jù)，而是返回 HTML 片段。然後，htmx 只需替換這些片段即可更新用戶界面。

這種方法通過最大限度地減少客戶端複雜性以及 SPA 常用的大量 JavaScript 依賴性來簡化開發(fā)過程。它不需要復(fù)雜的設(shè)置，並提供流暢且響應(yīng)迅速的用戶體驗。

安裝 htmx

有多種方法可以將 htmx 包含在您的項目中。您可以直接從項目的 GitHub 頁面下載它，或者如果您使用的是 Node.js，則可以使用命令 npm install htmx.org 通過 npm 安裝它。

但是，最簡單的方法（本指南中將使用的方法）是通過內(nèi)容交付網(wǎng)絡(luò) (CDN) 包含它。這允許我們在沒有任何設(shè)置或安裝過程的情況下開始使用 htmx。只需在您的 HTML 文件中包含以下腳本標(biāo)籤：

<??>

此腳本標(biāo)籤指向版本 1.9.4，但如果可用較新版本，則可以將“1.9.4”替換為最新版本。

htmx 非常輕量級，最小化和 gzip 版本的重量約為 ~14KB。它沒有依賴項，並且與所有主要瀏覽器兼容，包括 IE11。

將 htmx 添加到您的項目後，您可能需要檢查它是否正常工作。您可以使用以下簡單示例進行測試：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

單擊按鈕後，如果 htmx 正常工作，它將向 Joke API 發(fā)送 GET 請求，並用服務(wù)器的響應(yīng)替換

標(biāo)籤的內(nèi)容。

Ajax 請求：htmx 方法

htmx 的主要賣點之一是它使開發(fā)人員能夠通過利用一組不同的屬性直接從 HTML 元素發(fā)送 Ajax 請求。每個屬性代表不同的 HTTP 請求方法：

• hx-get：向指定的 URL 發(fā)出 GET 請求。
• hx-post：向指定的 URL 發(fā)出 POST 請求。
• hx-put：向指定的 URL 發(fā)出 PUT 請求。
• hx-patch：向指定的 URL 發(fā)出 PATCH 請求。
• hx-delete：向指定的 URL 發(fā)出 DELETE 請求。

這些屬性接受一個 URL，它們將向該 URL 發(fā)送 Ajax 請求。默認情況下，Ajax 請求是由 HTML 元素的“自然”事件觸發(fā)的（例如，在按鈕的情況下為單擊事件，或在輸入字段的情況下為更改事件）。

考慮以下內(nèi)容：

<button hx-get="/api/resource">Load Data</button>

在上面的示例中，按鈕元素被分配了一個 hx-get 屬性。單擊按鈕後，將向 /api/resource URL 發(fā)出 GET 請求。

服務(wù)器返回數(shù)據(jù)後會發(fā)生什麼？默認情況下，htmx 將直接將此響應(yīng)注入到啟動元素中——在我們的示例中，是按鈕。但是，htmx 不限於此行為，並提供將響應(yīng)數(shù)據(jù)指定為目標(biāo)元素的功能。我們將在接下來的部分中更深入地探討此功能。

使用 htmx 觸發(fā)請求

htmx 會響應(yīng)特定元素上發(fā)生的特定事件來啟動 Ajax 請求：

• 對於 input、textarea 和 select 元素，這是 change 事件。
• 對於表單元素，這是 submit 事件。
• 對於所有其他元素，這是 click 事件。

讓我們通過擴展上面的笑話示例來演示這一點，允許用戶搜索包含特定單詞的笑話：

<??>

要觸發(fā)搜索，我們需要觸發(fā) change 事件。對於 <input> 元素，當(dāng)元素的值更改後失去焦點時，就會發(fā)生這種情況。因此，在框中鍵入一些內(nèi)容（例如“bar”），單擊頁面上的其他位置，笑話就會出現(xiàn)在 <div> 元素中。這很好，但通常用戶希望在鍵入時更新其搜索結(jié)果。為此，我們可以向我們的 <input> 元素添加 htmx trigger 屬性：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

現(xiàn)在結(jié)果會立即更新。這很好，但它引入了一個新問題：我們現(xiàn)在正在使用每次按鍵都進行 API 調(diào)用。為了避免這種情況，我們可以使用修飾符來更改觸發(fā)器的行為。 htmx 提供以下內(nèi)容：

• once：如果您只想執(zhí)行一次請求，請使用此修飾符。
• changed：此修飾符確保僅在元素的值已更改時才發(fā)出請求。
• delay:：此修飾符在發(fā)出請求之前設(shè)置等待時間（例如 1 秒）。如果在此等待期間再次觸發(fā)事件，則倒計時將重置。
• throttle:：使用此修飾符，您也可以在發(fā)出請求之前設(shè)置等待時間（例如 1 秒）。但是，與 delay 不同，如果在設(shè)定的時間內(nèi)觸發(fā)了新的事件，則該事件將被忽略，確保僅在定義的時間段後才觸發(fā)請求。
• from:：此修飾符允許您偵聽不同元素上的事件，而不是原始元素。

在這種情況下，我們似乎需要 delay：

<button hx-get="/api/resource">Load Data</button>

現(xiàn)在，當(dāng)您在框中鍵入內(nèi)容（嘗試使用較長的單詞，例如“developer”）時，只有在您暫?；蛲瓿涉I入時才會觸發(fā)請求。

正如您所看到的，這允許我們僅用幾行客戶端代碼來實現(xiàn)活動搜索框模式。

請求指示器

在 Web 開發(fā)中，用戶反饋至關(guān)重要，尤其是在可能需要花費大量時間才能完成的操作（例如發(fā)出網(wǎng)絡(luò)請求）方面。提供此反饋的一種常見方法是通過請求指示器——指示操作正在進行中的視覺提示。

htmx 集成了對請求指示器的支持，允許我們向用戶提供此反饋。它使用 hx-indicator 類來指定用作請求指示器的元素。任何具有此類的元素的不透明度默認為 0，使其不可見但存在於 DOM 中。

當(dāng) htmx 發(fā)出 Ajax 請求時，它會將 htmx-request 類應(yīng)用於啟動元素。 htmx-request 類將導(dǎo)致該元素（或任何具有 htmx-indicator 類的子元素）過渡到不透明度為 1。

例如，考慮一個使用加載微調(diào)器作為其請求指示器的元素：

<??>

當(dāng)單擊具有 hx-get 屬性的按鈕並啟動請求時，按鈕將接收 htmx-request 類。這會導(dǎo)致顯示圖像，直到請求完成並刪除該類。

也可以使用 htmx-indicator 屬性來指示哪個元素應(yīng)該接收 htmx-request 類。

讓我們用我們的 Joke API 示例來演示這一點：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

注意：我們可以從 CSS 加載器和微調(diào)器中獲取微調(diào)器的 CSS 樣式。有很多可供選擇；只需單擊一個即可接收 HTML 和 CSS。

這將導(dǎo)致在請求進行中時顯示加載微調(diào)器。

如果我們的網(wǎng)絡(luò)速度很快，則在發(fā)出請求時微調(diào)器只會短暫閃爍。如果我們想確保它確實存在，我們可以使用瀏覽器的開發(fā)工具來限制我們的網(wǎng)絡(luò)連接速度。

或者，僅僅是為了好玩（也就是說，不要在真實的應(yīng)用程序中這樣做），我們可以配置 htmx 來模擬一些網(wǎng)絡(luò)延遲：

<button hx-get="/api/resource">Load Data</button>

這利用了 htmx 的事件系統(tǒng)，我們可以利用它來修改和增強其行為。在這裡，我們使用 htmx:afterOnLoad 事件，該事件在 Ajax onload 完成後觸發(fā)。我還使用了來自 SitePoint 文章中關(guān)於同一主題的 sleep 函數(shù)。

這是完成的演示。在框中鍵入一些內(nèi)容（例如“JavaScript”），然後在啟動請求後觀察加載指示器。

正如您所看到的，這允許我們僅用幾行客戶端代碼來實現(xiàn)活動搜索框模式。

目標(biāo)元素和內(nèi)容交換

在某些情況下，我們可能希望更新與啟動請求的元素不同的元素。 htmx 允許我們使用 hx-target 屬性來定位特定元素以進行 Ajax 響應(yīng)。此屬性可以採用 CSS 選擇器，htmx 將使用它來查找要更新的元素。例如，如果我們有一個將新評論發(fā)佈到我們博客的表單，我們可能希望將新評論附加到評論列表，而不是更新表單本身。

我們實際上在第一個示例中看到了這一點：

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

按鈕不會替換它自己的內(nèi)容，而是 hx-target 屬性聲明響應(yīng)應(yīng)該替換 ID 為“joke-container”的元素的內(nèi)容。

擴展 CSS 選擇器

htmx 還提供了一些更高級的方法來選擇應(yīng)將內(nèi)容加載到的元素。這些包括 this、closest、next、previous 和 find。

• this 關(guān)鍵字指定具有 hx-target 屬性的元素是實際目標(biāo)。
• closest 關(guān)鍵字查找與給定 CSS 選擇器匹配的源元素的最近祖先。
• next 和 previous 關(guān)鍵字查找 DOM 中與給定 CSS 選擇器匹配的後續(xù)或前序元素。
• find 關(guān)鍵字查找與給定 CSS 選擇器匹配的第一個子元素。

參考我們之前的示例，我們還可以編寫 hx-target="next p" 來避免指定 ID。

內(nèi)容交換

默認情況下，htmx 將使用 Ajax 響應(yīng)替換目標(biāo)元素的內(nèi)容。但是，如果我們想附加新內(nèi)容而不是替換它呢？這就是 hx-swap 屬性的用武之地。此屬性允許我們指定如何將新內(nèi)容插入到目標(biāo)元素中?？赡艿闹凳?outerHTML、innerHTML、beforebegin、afterbegin、beforeend 和 afterend。例如，使用 hx-swap="beforeend" 將在新內(nèi)容添加到目標(biāo)元素的末尾，這對於我們的新評論場景來說非常完美。

htmx 中的 CSS 過渡

CSS 過渡允許元素的樣式從一種狀態(tài)平滑地更改為另一種狀態(tài)，無需使用 JavaScript。這些過渡可以像顏色更改一樣簡單，也可以像完整的 3D 變換一樣複雜。

htmx 使在我們的代碼中使用 CSS 過渡變得很容易：我們只需要在 HTTP 請求中保持一致的元素 ID。

考慮此 HTML 內(nèi)容：

<??>

在對 /new-content 進行 htmx Ajax 請求後，服務(wù)器返回以下內(nèi)容：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

儘管內(nèi)容髮生了變化，但 <div> 保持相同的 ID。但是，fadeIn 類已添加到新內(nèi)容中。我們現(xiàn)在可以創(chuàng)建一個 CSS 過渡，該過渡會平滑地從初始狀態(tài)過渡到新狀態(tài)：

<button hx-get="/api/resource">Load Data</button>

當(dāng) htmx 加載新內(nèi)容時，它會觸發(fā) CSS 過渡，從而創(chuàng)建到更新狀態(tài)的平滑視覺進度。

使用視圖過渡 API

新的視圖過渡 API 提供了一種在 DOM 元素的不同狀態(tài)之間進行動畫的方法。與 CSS 過渡（涉及更改元素的 CSS 屬性）不同，視圖過渡是關(guān)於對元素的內(nèi)容進行動畫。

視圖過渡 API 是一項新的實驗性功能，目前正在積極開發(fā)中。在撰寫本文時，此 API 已在 Chrome 111 中實現(xiàn)，預(yù)計更多瀏覽器將在未來添加支持（您可以在 caniuse 上檢查其支持情況）。 htmx 提供了一個用於使用視圖過渡 API 的接口，並在不支持 API 的瀏覽器中回退到非過渡機制。

在 htmx 中，有兩種使用視圖過渡 API 的方法：

• 將 htmx.config.globalViewTransitions 配置變量設(shè)置為 true。這將對所有交換使用過渡。
• 在 hx-swap 屬性中使用 transition:true 選項。

可以使用 CSS 定義和配置視圖過渡。這是一個“彈跳”過渡的示例，其中舊內(nèi)容彈跳出來，新內(nèi)容彈跳進來：

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

在 htmx 代碼中，我們在 hx-swap 屬性中使用 transition:true 選項，並將 bounce-it 類應(yīng)用於我們要對其進行動畫處理的內(nèi)容：

...
hx-trigger="keyup"
...

在此示例中，當(dāng) <div> 的內(nèi)容更新時，舊內(nèi)容將彈跳出來，新內(nèi)容將彈跳進來，從而產(chǎn)生令人愉悅且引人入勝的視覺效果。

請記住，目前，此演示僅適用於基於 Chromium 的瀏覽器。

表單驗證

htmx 與 HTML5 驗證 API 很好地集成，如果用戶輸入驗證失敗，它將阻止發(fā)送表單請求。

例如，當(dāng)用戶單擊提交時，只有當(dāng)輸入字段包含有效的電子郵件地址時，才會向 /contact 發(fā)送 POST 請求：

<??>

如果我們想更進一步，我們可以添加一些服務(wù)器端驗證以確保只接受 gmail.com 地址：

<button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single"
        hx-target="#joke-container">
  Make me laugh!
</button>

<p id="joke-container">Click the button to load a joke...</p>

在這裡，我們添加了一個父元素（div#wrapper），它將自身聲明為請求的接收者（使用 this 關(guān)鍵字）並使用 outerHTML 交換策略。這意味著整個 <div> 將被服務(wù)器的響應(yīng)替換，即使它不是實際觸發(fā)請求的元素。我們還在輸入字段中添加了 hx-post="/contact/email"，這意味著每當(dāng)此字段模糊時，它都會向 /contact/email 端點發(fā)送 POST 請求。此請求將包含我們字段的值。

在服務(wù)器端（在 /contact/email），我們可以使用 PHP 進行驗證：

<button hx-get="/api/resource">Load Data</button>

如您所見，htmx 期望服務(wù)器返回 HTML（不是 JSON），然後將其插入到頁面中指定的位置。

如果我們運行上面的代碼，在輸入中鍵入非 gmail.com 地址，然後使輸入失去焦點，則會在字段下方出現(xiàn)一條錯誤消息，指出“Only Gmail addresses accepted！”

注意：當(dāng)動態(tài)地將內(nèi)容插入 DOM 時，我們還應(yīng)該考慮屏幕閱讀器如何解釋此內(nèi)容。在上面的示例中，錯誤消息位於我們的標(biāo)籤內(nèi)，因此屏幕閱讀器將在字段下次獲得焦點時讀取它。如果錯誤消息插入到其他位置，我們應(yīng)該使用 aria-describedby 屬性將其與正確的字段關(guān)聯(lián)起來。

還值得注意的是，htmx 在驗證過程中會觸發(fā)一組事件，我們可以使用這些事件來添加我們自己的驗證邏輯和錯誤處理方法。例如，如果我們想在 JavaScript 代碼中實現(xiàn)電子郵件檢查，我們可以這樣做：

<label for="contains">Keyword:</label>
<input type="text"
       placeholder="Enter a keyword..."
       hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode"
       hx-target="#joke-container"
       name="contains" />

<p id="joke-container">Results will appear here</p>

在這裡，我們使用 htmx 的 htmx:validation:validate 事件，該事件在調(diào)用元素的 checkValidity() 方法之前調(diào)用。

現(xiàn)在，當(dāng)我們嘗試使用非 gmail.com 地址提交表單時，我們將看到相同的錯誤消息。

htmx 還能做什麼？

htmx 是一個多功能、輕量級且易於使用的工具。它成功地將 HTML 的簡單性與通常與復(fù)雜的 JavaScript 庫相關(guān)的動態(tài)功能相結(jié)合，為創(chuàng)建交互式 Web 應(yīng)用程序提供了一個引人注目的替代方案。

但是，它不是一個萬能的解決方案。對於更複雜的應(yīng)用程序，您可能仍然需要 JavaScript 框架。但是，如果您的目標(biāo)是創(chuàng)建快速、交互式和用戶友好的 Web 應(yīng)用程序而無需添加太多複雜性，那麼 htmx 絕對值得考慮。

隨著 Web 開發(fā)的不斷發(fā)展，htmx 等工具為構(gòu)建更好的用戶體驗提供了令人興奮的新方法。為什麼不在未來的項目中嘗試一下，看看 htmx 能為您做什麼呢？

關(guān)於 HTMX 的常見問題解答 (FAQ)

什麼是 HTMX，它與其他 UI 設(shè)計工具有何不同？

HTMX 是一個現(xiàn)代的、輕量級的 HTML 擴展，用於 AJAX、CSS 過渡、WebSockets 和服務(wù)器發(fā)送事件。它允許您直接從 HTML 訪問現(xiàn)代瀏覽器功能，而無需 JavaScript 或 JQuery。這使其與其他 UI 設(shè)計工具不同，後者通常嚴(yán)重依賴 JavaScript。 HTMX 易於與任何後端集成，並且不需要您重寫現(xiàn)有代碼。它是增強用戶界面的強大工具，同時保持代碼簡潔且易於維護。

如何開始使用 HTMX？

開始使用 HTMX 非常簡單。您只需在 HTML 文件中包含 HTMX 腳本即可。完成此操作後，您可以開始在 HTML 標(biāo)籤中使用 HTMX 屬性來啟用 AJAX、WebSockets 和其他功能。 HTMX 網(wǎng)站提供全面的指南和示例，以幫助您入門。

HTMX 可以與任何後端一起使用嗎？

是的，HTMX 的主要優(yōu)勢之一就是它與後端無關(guān)的特性。它可以與任何服務(wù)器端語言或框架一起使用。這使其成為在不同環(huán)境中工作的開發(fā)人員的通用工具。

HTMX 的一些常見用例是什麼？

HTMX 可用於各種場景，在這些場景中，您希望增強用戶界面而無需依賴 JavaScript。這包括表單提交、實時搜索、無限滾動、實時更新等等。它是創(chuàng)建動態(tài)、交互式 Web 應(yīng)用程序的強大工具。

HTMX 如何處理 CSS 過渡？

HTMX 內(nèi)置支持 CSS 過渡。您可以使用“hx-swap”屬性來指定在發(fā)出請求時元素應(yīng)如何交換進出。這允許您創(chuàng)建流暢、視覺上吸引人的過渡，而無需編寫任何 JavaScript。

HTMX 與所有瀏覽器兼容嗎？

HTMX 旨在與所有現(xiàn)代瀏覽器兼容。但是，因為它使用了一些較新的瀏覽器功能，所以在較舊或不太常見的瀏覽器中可能無法完美運行。始終建議在用戶可能使用的瀏覽器中測試您的應(yīng)用程序。

HTMX 如何提高 Web 應(yīng)用程序的性能？

通過允許您直接從 HTML 訪問現(xiàn)代瀏覽器功能，HTMX 可以大大減少您需要編寫的 JavaScript 量。這可以導(dǎo)致更快的加載時間和更高的性能，尤其是在移動設(shè)備上，JavaScript 在移動設(shè)備上可能特別慢。

我可以將 HTMX 與我現(xiàn)有的 HTML 和 CSS 一起使用嗎？

是的，HTMX 旨在與您現(xiàn)有的 HTML 和 CSS 一起使用。您無需重寫代碼或?qū)W習(xí)新的語言即可開始使用 HTMX。這使其成為增強現(xiàn)有應(yīng)用程序的絕佳選擇。

HTMX 提供哪種類型的支持？

HTMX 是一個開源項目，並且有一個充滿活力的開發(fā)人員社區(qū)使用和貢獻它。您可以在 HTMX 網(wǎng)站、GitHub 和各種在線論壇上找到幫助和建議。

如何為 HTMX 項目做出貢獻？

作為一個開源項目，HTMX 歡迎社區(qū)的貢獻。您可以通過多種方式做出貢獻，從報告錯誤和建議新功能到編寫代碼和改進文檔。查看 HTMX GitHub 頁面，了解如何參與。

以上是HTMX的簡介，以HTML為中心的動態(tài)UI庫的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！