Go to blue arrow
back to Tech Blog
Utveckling

Written by:

Last Published:

februari 23, 2024

Min Read

Node.js Administratörspaneler - Strapi och Express Admin granskade

Färgglad JavaScript-kod med syntax highlighting för Node.js adminpaneler som Strapi och Express.

På senare tid har jag letat efter ett snabbt och enkelt sätt att utveckla ett backoffice i JavaScript, utan att behöva skriva allt från grunden. Under min forskning hittade jag två bra alternativ - Strapie och Expressadministratör.

Om vi tittar på dem på förhand kan vi se att den största skillnaden när det gäller byggstacken är att Strapi admin-gränssnittet är byggt med React JS. Varje alternativ förtjänar dock mycket mer grundlig analys för att lära känna deras särdrag. Jag tar chansen att också ge lite information om hur man konfigurerar var och en och får dem att fungera smidigt på nolltid.

blå pil till vänster
Imaginary Cloud-logotyp

Expressadministratör

Express Admin-panel med ett formulär för bildata, rullgardinsmenyer för tema och modell och en öppen kalender.

Express Admin låter dig ansluta till MySQL-, MariaDB-, SQLite- och PostgreSQL-databaser, men observera att det är relationsdatabasorienterat. Express Admin-konfigurationer görs genom JSON manuellt skapade filer.

Dess huvudfunktioner är:• SQL-tabellrelationer - du kan definiera alla typer av tabellrelationer;• Internationalisering är möjlig• Möjlighet att skapa anpassade vyer och händelser;• Alla typer av bibliotek och kontroller på webbläsarsidan;• Tillåter teman (Bootswatch).

Så här får du Express Admin igång

Jag antar att du redan har både Node.js och NPM installerat i förväg (jag skulle också föreslå att du använder NVM här):

Så här hämtar du modulen

undefined

Så här skapar du ett projekt

undefined

Om du kör det här kommandot uppmanas databastyp, port, användare, databasnamn, lösenord, administratörsanvändare och administratörslösenord. Observera att Admin Express kräver att du har en befintlig databas med data.

Terminalutdata som visar Express Admin-konfigurationen med MySQL-databaskonfiguration och servern som lyssnar på port 3000.

Som du kan märka är ditt administratörsgränssnitt nu igång! Gå bara till din webbläsare och få tillgång till lokal värd: 3000.

Inloggningsskärm för Express-administratörspanelen med inmatningsfält för användarnamn och lösenord.

Logga in för att komma in på huvudskärmen:

Express-adminpanelgränssnitt för webbplatsadministration som visar ett tabellavsnitt med en länk till produkter.

Min databas har bara en tabell (produkter), men härifrån kan du lägga till nya poster, ta bort dem eller uppdatera de befintliga. Du har en full råvara.

Express-administratörspanelgränssnitt som visar en produktvalssida med en tabell för produkt-ID och beskrivning.

Express Admin kan läsa ditt schema och kartlägga det till en JSON-konfigurationsfil. Detta är en del av settings.json-filen som var

Skapat av admin:

JSON-kodavsnitt som definierar databasschema för produkter, används för att konfigurera en Node.js-administratörspanel.

Som du kan se definieras alla tabellfält här. Så här bygger Express Admin crud för varje bord. När det gäller databasåtkomstkonfigurationerna lagras de inuti config.json.

Om du vill veta mer om Express Admin-konfigurationen, gå bara till denna sida och följ de angivna stegen.

Express Admin huvudfunktioner

SQL-relationer

Express Admin låter dig också konfigurera relationer mellan tabeller för att automatiskt skapa rätt fält. Du kan ha en till många, många till många, många till en och en till en relationer. Gå bara till settings.json och ändra det efter dina behov. Följande bild visar ett exempel på en till många relationer:

undefined

För att veta mer om relationer, skanna bara igenom här.

Anpassning (vyer till exempel)

Ja, det är möjligt, eftersom du har en anpassad.json-fil där du kan konfigurera din anpassade kod:

undefined

Skapa bara din anpassade app.js och en visningsfil. För att veta mer om detta, följ bara denna sida.

Mina tankar om Express Admin

Om du bara behöver ett administratörsgränssnitt med CRUD-funktionerna och viss anpassningsnivå är Express Admin en bra lösning. Som vi såg tidigare tillåter det relationer mellan tabeller, stöder anpassade vyer och fungerar med flera databaser (endast relationella - MySQL, MariaDB, SQLite och PostgreSQL-databaser). Enligt min mening är Express Admin ett bra alternativ att välja på grund av dess enkelhet och anpassning.

Någon ytterligare typ av anpassning för instrumentpanelen saknas, men du kan alltid gaffla koden och ändra den efter dina behov.

blå pil till vänster
Imaginary Cloud-logotyp

Strapie

Som du säkert har märkt är Express Admin ett bra administratörsgränssnitt och mycket bra för vad det står. Föreställ dig nu att du kan ha alla dessa funktioner och också kunna generera ett API och andra funktioner som användarbehörighet och autentisering. Det skulle vara bra, eller hur? Tja, det är möjligt med Strapi!

Nästa kommer jag att ge dig en översikt över hur Strapi fungerar och hur du kommer igång med det. För ytterligare information kolla Strapi-dokumentationen.

Låt oss börja med att installera Strapi:

undefined

undefined

Därefter skapar du ett nytt projekt. Du uppmanas att ange databastyp, databasnamn och åtkomstdata.

undefined

undefined

Terminal som visar Strapi-projektinitiering, databaskonfiguration och loggar för lyckad Node.js-plugininstallation.

Innan du startar projektet måste du köra NPM-körinstallationen. Sedan, du är redo att gå.

undefined

Om du kommer åt localhost: 1337/admin du bör kunna se skärmen för skapande av administratörsanvändare:

Strapis installationsskärm med ett formulär för att skapa rot-administratören med användarnamn och lösenord.

Skapa bara din administratörsanvändare och därefter omdirigeras du till instrumentpanelen:

Strapi adminpaneler instrumentpanel med sidofältnavigering, välkomstmeddelande och en snabbstartsknapp för handledning.

Strapi Huvudfunktioner:

Innehållsskapande (innehållstyper)

Låt oss hoppa direkt till de bra sakerna och täcka hur du kan skapa innehåll. Du kan antingen använda ”Content Type Builder” på den vänstra menyn eller generatorer. Jag förklarar här hur du använder innehållstypbyggaren, men glöm inte att ge generatorerna ett försök också.

Innehållstyper är helt enkelt modellerna (och API) anslutna till din MySQL-databas som används av Strapi för att generera CRUD-skärmarna. Så låt oss lägga till en ny innehållstyp:

Skärmen Lägg till ny innehållstyp i en Strapi-adminpanel som visar inmatningsfält för namn, anslutning och beskrivning.

När det gäller fälten, när du klickar på lägg till nytt fält får du detta:

Strapi-gränssnittet ”Add New Field” med datatyperna String, Text, Number och JSON.

Strapi låter dig välja datatyp, som består av en av dess mest intressanta funktioner. Låt oss lägga till 2 fält (beskrivning och pris) och klicka på spara. Det är då saker blir riktigt intressanta. Titta bara på de genererade filerna:

Strapis projektstruktur i en kodredigerare med en admin-katalog och en routes.json-fil för Node.js.

Fantastiskt, eller hur? Strapi har precis skapat tjänsten, modellen och styrenheten för ditt API, och självklart kan du alltid anpassa

dem enligt dina behov.

En annan intressant funktion är möjligheten att skapa relationer inom innehållstyperna. Låt oss anta ytterligare en innehållstyp (kategori) som vi vill associera med produkten. När vi lägger till ett fält väljer vi relationstyp och sedan:

Strapi-administratörspanelen som visar gränssnittet Lägg till ny relation där en kategori har många produkter.

Du kan välja mellan en till en, en till många och många till många relationstyper. Så om du lägger till en produkt ser du att ett kategorifält visas.

Strapi-adminpanel för Node.js som visar ett formulär för ny post med fält för beskrivning, pris och kategorival.

Bygga API:er

API:et genereras automatiskt och du kan ändra koden efter dina behov.

Strapi-projektets mappstruktur och Category.js-kontrollkod i en kodredigerare för en Node.js-administratörspanel.

Roller och behörigheter

För att ge allmänheten tillgång till API kan du ställa in roller och behörigheter, vilket är en annan cool funktion på Strapi. Det kommer ut ur lådan med ett insticksprogram för roller/behörighetshantering.

Strapis sida ”Roles and Permissions” med användarroller som Administrator, Authenticated och Public.

För att tillåta allmän åtkomst till API:et ändrar du rollen:

Strapi-administratörspanelens gränssnitt som visar rollinformation och behörigheter för ett Node.js-projekt.

Mina tankar om Strapi

Om du behöver ett administratörsgränssnitt, men du också vill bygga och betjäna ett API, är Strapi ett utmärkt val för dig. Strapis innehållsgenerator är utmärkt och kommer att uppfylla nästan alla behov du kan ha. Om det inte gör det kan du alltid utveckla dina egna plugins. En annan bra funktion är rollerna/behörigheterna.

Tyvärr är Strapi fortfarande under utveckling och presenterar några buggar vid användning, men communityn växer och den är mycket aktiv på GitHub, så vi förväntar oss alltid förbättringar av det.

Översikt

Beroende på vad dina krav är kan du välja Express Admin om du bara vill integrera ett administratörsgränssnitt i din app för att hantera dina data (enkla CRUD-gränssnitt) och viss anpassningsnivå.

Om dina behov inkluderar att bygga ett API, roller och användarbehörigheter, bör Strapi definitivt vara ditt val.

Så vi kan säga att båda alternativen är utmärkta och valet bör göras enligt dina krav.

Annons för UX-granskning med fördelar för användarupplevelse och engagemang, med 3D-appgränssnitt.

Tyckte den här artikeln intressant? Du kanske gillar dessa också!

blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
Ricardo Henriques
Ricardo Henriques

Utvecklare @Imaginary Moln, dedikerad till att skapa exceptionella mjukvarulösningar, engagerad i innovation och omfamna avancerad teknik.

Läs fler inlägg av denna författare

People who read this post, also found these interesting:

Dropdown caret icon