Building Rester：類似郵差的副業項目
發佈於2024-11-04
瀏覽：459
介紹
本月，我開始從事一個名為 R2 Tester 的新副項目，最初名為 Postman-frontend，這要感謝 ChatGPT。 R2 Tester 被設計為學習工具，複製了 Postman 的介面和功能，幫助我加深對 API 互動的理解。這個想法源自於我上個月開始從事的另一個業餘項目（是的？♂️）。
關於R2測試儀
這是我建立的一個工具，用於練習與後端（在我的例子中為 Node.js）交換資料和檔案（尚未實作）。前端是使用 HTML、CSS/SASS、JavaScript、DOM 操作、Bootstrap 和 Prettify 開發的 JSON 格式。
該工具將請求保存在瀏覽器的本機儲存中，並將它們載入到 UI 上（基於使用者互動）。使用者可以建立集合、資料夾和單獨的請求，並透過 Prettify 在乾淨、格式化的視圖中視覺化回應。
主要特點
- 資料交換：R2 Tester旨在幫助使用者練習與後端發送和接收資料。
- 使用建構：HTML、CSS/SASS、JavaScript、DOM 和 Bootstrap。
- 請求管理：使用者可以建立和管理集合、資料夾和請求。
- LocalStorage：直接從瀏覽器的localStorage儲存和載入請求。
- Prettify：格式化 JSON 回應以方便閱讀。
程式碼和現場演示
您可以透過存取以下 URL 的專案的 GitHub 儲存庫來深入研究程式碼並直接在瀏覽器中查看專案的即時演示：
https://github.com/adnannazir235/R2-Tester
項目狀況
R2 Tester 是一項正在進行的工作，缺乏關鍵功能。其主要目的是學習 API 互動。雖然演示了核心概念，但它並不用於生產用途。出於教育目的探索程式碼，但請注意其局限性。
結論
R2 Tester 是一個令人興奮的教育項目，它讓我能夠探索 Web 開發和 API 互動的複雜性。當我繼續開發這個工具時，我希望它能為那些也希望加深對後端通訊和資料交換的理解的其他人提供有用的資源。
版本聲明
本文轉載於：https://dev.to/adnannazir235/building-r2-tester-a-postman-like-side-project-4gpl?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
Ubuntu 升級後如何解決 Python 中的「ImportError: No module named 'encodings'」？解決Ubuntu升級後Python中的「ImportError: No module name 'encodings'」問題無法取得語言環境編碼時出現的問題，導致錯誤訊息「ImportError：沒有名為'encodings'的模組。」儘管重新安裝Python 並設定...程式設計 發佈於2024-11-17 -
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...程式設計 發佈於2024-11-17
-
為什麼我的 Laravel 網站在將 Apache 升級到 2.4 並將 PHP 升級到 5.5.7 後顯示空白畫面？Laravel 網站在Apache 升級後顯示空白畫面Laravel 網站在Apache 升級後顯示空白畫面在升級到Apache 2.4 和PHP 5.5.7 之前，我的Laravel 網站運作正常。但是，我現在在訪問 laravel.mydomain.example 時遇到空白畫面。 Apache...程式設計 發佈於2024-11-17
-
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-11-17
-
如何在 PHP 中組合兩個關聯數組，同時保留唯一 ID 並處理重複名稱？在 PHP 中組合關聯數組在 PHP 中，將兩個關聯數組組合成一個數組是常見任務。考慮以下請求：問題描述：提供的代碼定義了兩個關聯數組，$array1和$array2。目標是建立一個新陣列 $array3，它合併兩個陣列中的所有鍵值對。 此外，提供的陣列具有唯一的 ID，而名稱可能重疊。要求是建構一...程式設計 發佈於2024-11-17
-
你需要像專業人士一樣閱讀科技文章在快节奏的技术世界中，并非您阅读的所有内容都是准确或公正的。并非您读到的所有内容都是由人类编写的！ 细节可能存在微妙的错误，或者文章可能故意误导。让我们来看看一些可以帮助您阅读科技文章或任何媒体内容的技能。 1. 培养健康的怀疑态度 培养健康的怀疑态度至关重要。质疑大胆的主张，寻找...程式設計 發佈於2024-11-17
-
如何找到一個多維數組中存在但另一個多維數組中不存在的行？比較多維數組的關聯行您有兩個多維數組，$pageids 和$parentpage，其中每行代表一個包含列的記錄“id”、“連結標籤”和“url”。您想要尋找 $pageids 中存在但不在 $parentpage 中的行，從而有效地建立一個包含缺少行的陣列 ($pageWithNoChildren)...程式設計 發佈於2024-11-17
-
為什麼 Windows 中會出現「Java 無法辨識」錯誤以及如何修復它？解決Windows 中的「Java 無法識別」錯誤嘗試在Windows 7 上檢查Java 版本時，使用者可能會遇到錯誤「'Java' 無法識別”作為內部或外部命令。 」此問題通常是由於缺少Java 安裝或環境變數不正確而引起的。要解決此問題，您需要驗證Java 安裝並配置必要的環境...程式設計 發佈於2024-11-17
-
儘管檔案存在且有權限，為什麼 File.delete() 會回傳 False？儘管存在並進行權限檢查，File.delete() 返回False使用FileOutputStream 寫入檔案後嘗試刪除檔案時，某些使用者遇到意外問題： file.delete() 傳回false。儘管檔案存在且所有權限檢查（.exists()、.canRead()、.canWrite()、.ca...程式設計 發佈於2024-11-17
-
如何有效地從 Go 中的切片中刪除重複的對等點？從切片中刪除重複項給定一個文字文件，其中包含表示為具有“Address”和“PeerID”的對象的對等點清單屬性，任務是根據程式碼配置中「Bootstrap」切片中匹配的「Address」和「PeerID」刪除所有重複的對等點。 為了實現此目的，我們迭代切片中的每個對等點物件多次。在每次迭代期間，我...程式設計 發佈於2024-11-17
-
如何自訂Bootstrap 4的檔案輸入元件？繞過 Bootstrap 4 檔案輸入的限制Bootstrap 4 提供了自訂檔案輸入元件來簡化使用者的檔案選擇。但是，如果您希望自訂「選擇檔案...」佔位符文字或顯示所選檔案的名稱，您可能會遇到一些挑戰。 更改 Bootstrap 4.1 及更高版本中的佔位符自 Bootstrap 4.1 起，佔...程式設計 發佈於2024-11-17
-
如何在 CSS 盒子上創建斜角？在 CSS 框上建立斜角可以使用多種方法在 CSS 框上實現斜角。一種方法描述如下：使用邊框的方法此技術依賴於沿容器左側建立透明邊框和沿底部建立傾斜邊框。以下程式碼示範如何實現：<div class="cornered"></div> <div cl...程式設計 發佈於2024-11-17
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
