使用Blazor WebAssembly整合PocketBase的基礎專案模板

阿新發表於2024-06-13
BlazorWeb

使用Blazor WebAssembly整合PocketBase的基礎專案模板

在這篇部落格文章中，我們將探討如何建立一個整合PocketBase的基礎Blazor WebAssembly專案。我們將涵蓋使用者身份驗證、註冊和密碼找回功能。我們的專案使用PocketBaseClient，這是一個動態生成CRUD程式碼的CLI工具。這個專案模板非常適合初學者，因為它簡單易懂，是快速啟動小專案的絕佳方式。此外，部署Blazor WebAssembly專案非常方便，可以部署到任何環境，也支援Docker容器。

您可以在 GitHub 上找到這個專案的完整原始碼。




Demo: https://blazorpocket.blazorserver.com

入門指南

在深入程式碼之前，讓我們簡要介紹一下我們將使用的工具和技術：

  • Blazor WebAssembly：一個用於使用C#構建互動式Web應用程式的框架。
  • PocketBase：一個開源的後端解決方案，提供使用者身份驗證、實時資料庫功能等。
  • PocketBaseClient：一個CLI工具，用於連線PocketBase並動態生成CRUD操作程式碼。

先決條件

要跟隨本教程，請確保您已安裝以下內容：

  • .NET SDK
  • PocketBase
  • PocketBaseClient

設定PocketBase

首先，設定我們的PocketBase伺服器。下載並安裝PocketBase，然後啟動伺服器：

./pocketbase serve

在http://localhost:8090/_/訪問PocketBase管理員儀表板，並設定您的初始管理員使用者。

建立Blazor WebAssembly專案

使用.NET CLI建立一個新的Blazor WebAssembly專案：

dotnet new blazorwasm -o BlazorPocketBaseApp
cd BlazorPocketBaseApp

整合PocketBaseClient

使用.NET CLI安裝PocketBaseClient：

dotnet add package PocketBaseClient

接下來，為您的PocketBase集合生成CRUD程式碼。在專案目錄中執行：

pocketbase-client generate --url http://localhost:8090 --output ./PocketBaseClient

此命令連線到您的PocketBase伺服器，並生成與您的集合互動所需的程式碼。

實現使用者身份驗證

讓我們實現使用者身份驗證，包括登入、註冊和密碼找回。首先建立一個服務與PocketBase進行互動：

登入元件

建立一個Login.razor元件：

配置依賴注入

在Program.cs檔案中註冊PocketBaseService：

builder.Services.AddSingleton(new PocketBaseService("http://localhost:8090"));

執行應用程式

執行您的Blazor WebAssembly專案：

dotnet run

在瀏覽器中導航到應用程式。您應該看到登入、註冊和密碼找回頁面。

部署應用程式

部署Blazor WebAssembly應用程式很簡單。您可以部署到各種託管提供商，或使用Docker進行容器化。

Docker部署

在專案根目錄建立一個Dockerfile：

FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY ["BlazorPocketBaseApp.csproj", "."]
RUN dotnet restore "BlazorPocketBaseApp.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "BlazorPocketBaseApp.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "BlazorPocketBaseApp.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "BlazorPocketBaseApp.dll"]

構建並執行Docker容器：

docker build -t blazor-pocketbase-app .
docker run -d -p 8080:80 blazor-pocketbase-app

您的應用程式將在http://localhost:8080可訪問。

結論

在這篇部落格文章中，我們建立了一個整合PocketBase的基礎Blazor WebAssembly專案，涵蓋了使用者身份驗證、註冊和密碼找回功能。我們還探討了如何使用Docker部署應用程式。這個模板提供了構建更復雜應用程式的堅實基礎，可以輕鬆擴充套件以滿足各種專案需求。

您可以在 GitHub 上找到這個專案的完整原始碼。

請隨意探索和修改程式碼以適應您的特定需求。祝您編碼愉快！

相關文章