Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
In deze zelfstudie wordt een website gebouwd die door een catalogus met boeken zoekt en vervolgens de website implementeert in een Statische Azure-web-app.
Wat doet het voorbeeld?
Deze voorbeeldwebsite biedt toegang tot een catalogus van 10.000 boeken. U kunt in de catalogus zoeken door tekst in te voeren in de zoekbalk. Terwijl u tekst invoert, gebruikt de website de suggestiefunctie van de zoekindex om de tekst automatisch aan te vullen. Wanneer de query is voltooid, geeft de website de lijst met boeken weer met een deel van de details. U kunt een boek selecteren om alle details, opgeslagen in de zoekindex, van het boek weer te geven.
De zoekervaring omvat:
- Zoeken : biedt zoekfunctionaliteit voor de toepassing.
- Suggesties : geeft suggesties terwijl de gebruiker in de zoekbalk typt.
- Facetten en filters : biedt een facetnavigatiestructuur die filtert op auteur of taal.
- Gepagineerde resultaten - biedt pagineringsbesturingselementen voor het bladeren door resultaten.
- Documentzoekactie : zoekt een document op basis van id op om alle inhoud van het document op te halen voor de detailpagina.
Hoe is het voorbeeld ingedeeld?
De voorbeeldcode bevat de volgende onderdelen:
| App | Doel | GitHub Opslagplaats Locatie |
|---|---|---|
| client | React-app (presentatielaag) om boeken weer te geven, met zoeken. Hiermee wordt de Azure Function-app aangeroepen. | /azure-search-static-web-app/client |
| api | Azure .NET Function-app (bedrijfslaag): roept de Azure AI Search-API aan met behulp van .NET SDK | /azure-search-static-web-app/api |
| bulksgewijs invoegen | .NET-project om de index te maken en er documenten aan toe te voegen. | /azure-search-static-web-app/bulk-insert |
De ontwikkelomgeving instellen
Maak services en installeer de volgende software voor uw lokale ontwikkelomgeving.
- Azure AI Search, elke regio of laag
- .NET 9 of nieuwste versie
- Git
- Visual Studio Code
- C# Dev Tools-extensie voor Visual Studio Code
- Azure Static Web App-extensie voor Visual Studio Code
In deze zelfstudie wordt de Azure Function-API niet lokaal uitgevoerd. Als u deze lokaal wilt uitvoeren, installeert u azure-functions-core-tools.
Fork en kloon het zoekvoorbeeld met Git
Als u de statische web-app wilt implementeren, moet u de voorbeeldopslagplaats splitsen. De web-apps gebruiken uw GitHub-fork-locatie om de buildacties en implementatie-inhoud te bepalen. Code-uitvoering in de statische web-app vindt op afstand plaats, waarbij Azure Static Web Apps de code leest uit uw geforkte voorbeeld.
Fork op GitHub de opslagplaats azure-search-static-web-app.
Voltooi het forkproces in uw webbrowser met uw GitHub-account. In deze zelfstudie wordt uw fork gebruikt als onderdeel van de implementatie in een Statische Azure-web-app.
Download in een Bash-terminal uw geforkte voorbeeldtoepassing naar uw lokale computer.
Vervang door
YOUR-GITHUB-ALIASuw GitHub-alias.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.gitGa in dezelfde Bash-terminal naar uw geforkte opslagplaats voor het zoekvoorbeeld van deze website:
cd azure-search-static-web-appGebruik de opdracht
code .Visual Studio Code om uw geforkte opslagplaats te openen. U voert de resterende taken uit Visual Studio Code uit, tenzij dit is opgegeven.code .