Hogyan adható hozzá a Swagger kezelőfelület a meglévő Node js és az Express.js projekthez

Ebben az oktatóanyagban megtanuljuk, hogyan adjunk hozzá swaggert a meglévő Node J-ekhez és az Express.js-hez. Amint azt már megtanultuk az 1. RÉSZBEN – Hogyan hozzunk létre egy REST API-t az Express.js és a Node.js (forráskód 1. rész) használatával, és most hozzáadjuk a swagger-t ebben a projektben.

A végleges projekt forráskódja itt található.

Mielőtt elkezdenénk, kérjük, olvassa el az alábbiakban a fontos technológiai definíciókat

a) Swagger Editor – A Swagger Editor egy nyílt forráskódú szerkesztő , amely RESTful API-kat tervez, definiál és dokumentál a Swagger Specifikáció

b) Swagger C odegen A Swagger Codegen egy nyílt forráskódú projekt, amely lehetővé teszi a API-ügyfélkönyvtárak (SDK-generálás), a szervercsonkok és a dokumentáció automatikusan az OpenAPI specifikációból.

c) Swagger UI A Swagger UI lehetővé teszi a fejlesztőcsapat számára, hogy az API erőforrásait vizualizálja és kölcsönhatásba lépjen velük anélkül, hogy a megvalósítási logika bármelyikének helye lenne. Az API-k felhasználói felületének bemutatása felhasználóbarát és könnyen érthető, minden logikai összetettség a képernyő mögött marad.

d) Swagger Inspector – egy eszköz az OpenAPI dokumentáció teszteléséhez és automatikus előállításához bármely API számára. A Swagger Inspector lehetővé teszi az API-k egyszerű validálását és tesztelését a tesztelés korlátozásai nélkül. A teszteket automatikusan menti a felhőbe, egyszerű hozzáféréssel.

3. Az OpenAPI specifikáció , eredetileg Th e Swagger Specification néven ismert, a RESTful webszolgáltatások leírásához, előállításához, fogyasztásához és vizualizálásához géppel olvasható felületfájlok specifikációja.

Ebben a projektben, mivel már létezik RESTful API (1. rész bemutató), és a Now Swagger kezelőfelületet csak a meglévő API dokumentálásához fogjuk használni

Első lépések

3. Most – a tényleges varázslat megindul a hullámzás

számára

Telepítse a függőségeket a swaggerhez

4. Hozzon létre új fájlt a swagger.json fájlból a gyökéren

5. Mielőtt elkezdenénk a kódolást, kérjük, olvassa el a definíciót és a linkeket, hogy jobban megértsék a Swagger API-definíciót.

Alapszerkezet

Az OpenAPI definíciókat JSON-ban írjuk. Ha nem ismeri a Swagger specifikációt, akkor a Swagger API definíció létrehozásához használt szabálykészletet. Kövesse ezt a linket az alábbi definíciók megértéséhez. A komplex szerkezet létrehozásához eligazítjuk az alapvető struktúrát és a mozgás módját.

Itt megtanuljuk az alapvető struktúrát és a CRUD útvonalakat. A címkék alatt észreveheti

a) A szakasz tartalmazza az API-információkat: title , description (opcionális), verzió :

b) Útvonalak – A elérési utak szakasz meghatározza az API végpontjait (elérési útjait) és a HTTP módszereket

c) Paraméterek – A műveletek paraméterei átadhatók az URL elérési útján ( / users / {userId} ), a lekérdezési karakterláncon ( / users?

d) Kérelem törzs - Ha egy művelet kérelem törzset küld, használja a requestBody kulcsszót a törzs tartalmának és médiatípusának leírására.

e) Válaszok - Az egyes műveletekhez megadhatja a lehetséges állapotkódokat, például 200 OK vagy 404 Nem található, és a válasz törzs séma .

Kezdjük a kódolást -

5. Nyissa meg a swagger.json fájlt, és adja hozzá az alábbi kódot

6. Nyissa meg a server.js fájlt , és adja hozzá az alábbi kódot az integráláshoz

Ezenkívül adja hozzá az alábbi kódot az a pp.listen kód elé.

7. Most nyissa meg a böngészőt a http: // localhost: 8000 / api-docs /

paranccsal

és láthatja a swagger felhasználói felületet a dokumentációhoz.

Most dokumentációt kell készítenünk a meglévő API-khoz. Mint tudjuk, négy API-s CRUD van (létrehozás (POST), olvasás (GET), frissítés (PUT) és törlés (törlés).

Tehát hozzáadjuk az elérési utat és a meghatározást a swagger.json fájlunkhoz. ha nem ismeri az útvonalakat, és ez a meghatározás, akkor kérjük, olvassa el ezt a linket további részletekért.

8. Hozzá kell adnunk egy útvonalat, amelyen a Swagger felhasználói felület

-et fogjuk üzemeltetni

a) GET -

Nyissa meg a swagger.json fájlt, és adja hozzá az alábbi kódot az API dokumentálásához (http: // localhost: 8000 / users)

A swagger.json hivatkozása -

9. Most nyissa meg a böngészőt a <http://localhost:8000/api-docs/

láthatja a GET Route dokumentációt a definíció és az elérési út alapján


10. POST - Nyissa meg a swagger.json fájlt, és adja hozzá az alábbi kódot az API dokumentálásához (http: // localhost: 8000 / addUser)

Itt csak még egy utat fogunk megadni, mivel a definíció már meg van határozva

11. PUT - Jelentés (Frissítés) - Nyissa meg a swagger.json fájlt, és írja be az API kódjának alábbi kódját (http: // localhost: 8000 / user / 1) (azaz az 1 dinamikus érték), és módosítani is fogja az útvonal a server.js

fájlban

Itt hozzáadunk még egy elérési utat és egy új meghatározást a frissítési útvonalhoz.

Adjon hozzá még egy objektumot az elérési út alá az alábbiak szerint a PUT hoz.

A frissítések meghatározása

12. Most nyissa meg a böngészőt a <http://localhost:8000/api-docs/

láthatja a PUT Route dokumentációt a definíció és az elérési út alapján

13. Törölje az elérési utat - Nyissa meg a swagger.json fájlt, és adja hozzá az alábbi kódot az API dokumentálásához (http: // localhost: 8000 / user / 1), és mi is frissítjük az útvonalat a server.js fájlban

A teljes forráskód itt található

Remélem, hogy egyszerű módon meg fogja érteni a folyamatot, és most módosíthatja a legújabb ES6 kóddal és az Express js MVC továbbfejlesztett struktúrájával.

Próbálja meg átalakítani a kódot MVC Express js és ES6 formátumra, és biztosan élvezni fogja :):

Következtetés:

Ez a H ow magyarázó közleménye, amely hozzáadja a Swagger kezelőfelületet a meglévő Node js és az Express.js projekt hez, ha kétségei vannak, kérjük, küldjön nekem e-mailt a kirtikau@gmail.com címre.

Nyugodtan adjon visszajelzést, mert én is sok mindent megtanulok, és nem lehet tökéletes lenni anélkül, hogy megosztanám az ismereteket 🙂

Legyen biztonságban és boldogan tanuljon 🙂