Úvod do JHipster

1. Úvod

Tento článok vám poskytne rýchly prehľad o aplikácii JHipster, ukáže vám, ako vytvoriť jednoduchú monolitickú aplikáciu a vlastné entity pomocou nástrojov príkazového riadku.

Počas každého kroku tiež preskúmame vygenerovaný kód a pokryjeme tiež príkazy na zostavenie a automatizované testy.

2. Čo je Jhipster

JHipster je v skratke generátor kódov na vysokej úrovni postavený na rozsiahlom zozname špičkových vývojových nástrojov a platforiem.

Hlavné komponenty nástroja sú:

  • Yeoman, čelný lešenársky nástroj
  • Stará dobrá jarná topánka
  • AngularJS, prominentný rámec Javascript. JHipster tiež pracuje s AngularJS 2

JHipster vytvára pomocou niekoľkých príkazov shellu plnohodnotný webový projekt Java s priateľským a pohotovým front-endom, zdokumentovaným REST API, komplexným testovacím pokrytím, základným zabezpečením a integráciou databázy! Výsledný kód je dobre komentovaný a riadi sa osvedčenými postupmi odvetvia.

Medzi ďalšie kľúčové technológie, ktoré využíva, patria:

  • Swagger, pre dokumentáciu API
  • Maven, Npm, Yarn, Gulp a Bower ako manažéri závislostí a nástroje na vytváranie
  • Jazmín, uhlomer, uhorka a Gatling ako testovacie rámce
  • Liquibase na správu verzií databázy

Nie sme povinní používať všetky tieto položky v našej generovanej aplikácii. Nepovinné položky sa vyberajú počas vytvárania projektu.

Krásna aplikácia vygenerovaná JHipsterom. Toto je výsledok práce, ktorú budeme robiť v tomto článku.

3. Inštalácia

Ak chcete nainštalovať JHipster, najskôr si musíme nainštalovať všetky jeho závislosti:

  • Java - odporúčané vydanie 8
  • Git - systém riadenia verzií
  • NodeJS
  • Yeoman
  • Priadza

To je dosť závislostí, ak sa rozhodnete použiť AngularJS 2. Avšak ak chcete radšej používať AngularJS 1, musíte si tiež nainštalovať Bower a Gulp.

Teraz, na záver, stačí nainštalovať samotný JHipster. To je najjednoduchšia časť. Pretože JHipster je generátor Yeoman, ktorý je zase balíkom Javascript, inštalácia je taká jednoduchá ako spustenie jednoduchého príkazu shellu:

globálna priadza pridať generátor-jhipster

To je všetko! Na inštaláciu generátora JHipster sme použili správcu balíkov Yarn.

4. Vytvorenie projektu

Vytvorenie projektu JHipster v podstate znamená vybudovanie projektu Yeoman. Všetko začína s jaj príkaz:

mkdir baeldung-app && cd baeldung-app yo jhipster

Týmto sa vytvorí náš priečinok projektu s názvom baeldung-appa spustíme rozhranie príkazového riadku Yeoman, ktoré nás prevedie vytvorením projektu.

Tento proces zahŕňa 15 krokov. Odporúčam vám preskúmať dostupné možnosti v každom kroku. V rozsahu tohto článku vytvoríme jednoduchý, Jednoliaty bez toho, aby sa príliš odchýlili od predvolených možností.

Tu sú kroky, ktoré sú pre tento článok najrelevantnejšie:

  • Typ žiadosti - Vyberte si Monolitická aplikácia (odporúčaná pre jednoduché projekty)
  • Inštalácia ďalších generátorov z JHipster Marketplace - Typ N. V tomto kroku by sme mohli chcieť nainštalovať zaujímavé doplnky. Niektoré populárne sú audit entít, ktorý umožňuje sledovanie údajov; bootstrap-material-design, ktorý využíva trendy komponenty Material Design, a uhlové dátové tabuľky
  • Maven alebo Gradle - Vyberte si Maven
  • Ostatné technológie - Nevyberajte žiadne možnosti, iba stlačte Zadajte prejsť na ďalší krok. Tu sa môžeme rozhodnúť pripojiť sociálne prihlásenie pomocou služieb Google, Facebook a Twitter, čo je veľmi príjemná funkcia.
  • Rámec klienta - Vyberte si [BETA] Uhlová 2.x. Mohli by sme ísť aj s AngularJS 1
  • Povoliť internacionalizáciu - Typ Y., potom vyberte Angličtina ako materinský jazyk. Môžeme si zvoliť toľko jazykov, koľko chceme, ako druhý jazyk
  • Testovacie rámce - Vyberte Gatling a Uhlomer

JHipster vytvorí súbory projektu a potom začne inštalovať závislosti. Vo výstupe sa zobrazí táto správa:

Som hotový. Prebieha inštalácia npm install na inštaláciu potrebných závislostí. Ak sa to nepodarí, skúste príkaz spustiť sami.

Inštalácia závislostí môže chvíľu trvať. Po dokončení sa zobrazí:

Aplikácia servera bola úspešne vygenerovaná. Spustite aplikáciu Spring Boot: ./mvnw Klientská aplikácia sa vygenerovala úspešne. Spustite svoj vývojový server Webpack s: npm start

Náš projekt je teraz vytvorený. Môžeme spustiť hlavné príkazy v našom koreňovom priečinku projektu:

./mvnw #starts Spring Boot, na porte 8080 ./mvnw čistý test # spustí testovanie aplikácie test priadze # spustí test klienta

JHipster generuje súbor README, ktorý je umiestnený priamo v koreňovom priečinku nášho projektu. Tento súbor obsahuje pokyny na spustenie mnohých ďalších užitočných príkazov týkajúcich sa nášho projektu.

5. Prehľad vygenerovaného kódu

Prezrite si automaticky generované súbory. Všimnete si, že projekt vyzerá dosť podobne ako štandardný projekt Java / Spring, ale má veľa doplnkov.

Pretože JHipster sa stará aj o vytvorenie front-endového kódu, nájdete a balíček.json pilník, a webpack priečinok a niektoré ďalšie webové súbory.

Poďme rýchlo preskúmať niektoré dôležité súbory.

5.1. Back-end súbory

  • Podľa očakávania je kód Java obsiahnutý v src / main / java priečinok
  • The src / main / resources priečinok obsahuje statický obsah používaný kódom Java. Tu nájdeme súbory s internacionalizáciou (v priečinku i18n priečinok), e-mailové šablóny a niektoré konfiguračné súbory
  • Testy jednotiek a integrácie sa nachádzajú v src / test / java priečinok
  • Testy výkonu (Gatling) sú v src / test / gatling. V tomto okamihu však nebude v tomto priečinku veľa obsahu. Po vytvorení niektorých entít sa tu budú nachádzať výkonnostné testy týchto objektov

5.2. Front-end

  • Koreňový front-end priečinok je src / main / webapp
  • The aplikácia priečinok obsahuje veľa modulov AngularJS
  • i18n obsahuje súbory internacionalizácie pre frontendovú časť
  • Jednotkové testy (Karma) sú v src / test / javascript / spec priečinok
  • Kompletné testy (uhlomer) sú v src / test / javascript / e2e priečinok

6. Vytváranie vlastných entít

Entity sú stavebnými kameňmi našej aplikácie JHipster. Predstavujú obchodné objekty, ako napríklad Používateľ, a Úloha, a Príspevok, a Komentovať, atď.

Vytváranie entít pomocou JHipsteru je bezbolestný proces. Objekt môžeme vytvoriť pomocou nástrojov príkazového riadku, podobne ako sme vytvorili samotný projekt, alebo prostredníctvom JDL-Studio, online nástroja, ktorý generuje JSON reprezentáciu entít, ktoré je možné neskôr importovať do nášho projektu.

V tomto článku použijeme nástroje príkazového riadku na vytvorenie dvoch entít: Príspevok a Komentovať.

A Príspevok by mal mať názov, textový obsah a dátum vytvorenia. Mal by tiež súvisieť s používateľom, ktorý je tvorcom Príspevok. A Používateľ môže mať veľa Príspevky s nimi spojené.

A Príspevok môže mať aj nulu alebo veľa Pripomienky. Každý Komentovať má text a dátum vytvorenia.

Rozpáliť proces tvorby nášho Príspevok entita, prejdite do koreňového priečinka nášho projektu a zadajte:

jo jhipster: príspevok subjektu

Teraz postupujte podľa krokov uvedených v rozhraní.

  • Pridajte pole s názvom titul typu String a pridať do poľa nejaké overovacie pravidlá (Požadovaný, Minimálna dĺžka a Maximálna dĺžka)
  • Pridajte ďalšie pole s názvom obsah typu String a urob to tiež Požadovaný
  • Pridajte tretie pole s názvom dátum vytvoreniatypu LocalDate
  • Teraz pridajme vzťah s Používateľ. Všimnite si, že entita Používateľ už existuje. Vzniká pri koncepcii projektu. Názov druhého subjektu je používateľ, názov vzťahu je tvorcaa typ je mnoho-k-jednému, je zobrazovacie pole názov, a je lepšie vytvoriť vzťah požadovaný
  • Nevyberajte si použitie DTO, choďte na Priamy subjekt namiesto toho
  • Vyberte, či chcete vložiť úložisko priamo do triedy služieb. Všimnite si, že v aplikácii v reálnom svete by bolo asi rozumnejšie oddeliť radič REST od triedy služieb
  • Dokončite výberom položky nekonečný zvitok ako typ stránkovania
  • Ak je to potrebné, dajte JHipster povolenie na prepísanie existujúcich súborov

Vyššie uvedený postup opakujte, aby ste vytvorili entitu s názvom komentovať, s dvoma poľami, text, typu Reťazec, a dátum vytvorenia typu LocalDate. Komentovať by tiež mali mať povinné mnoho-k-jednému vzťah s Príspevok.

To je všetko! Existuje mnoho krokov k procesu, ale uvidíte, že ich dokončenie netrvá toľko času.

Všimnete si, že JHipster v rámci procesu vytvárania entít vytvára veľa nových súborov a upravuje niekoľko ďalších:

  • A.jhipster vytvorí sa priečinok obsahujúci a JSON súbor pre každý objekt. Tieto súbory popisujú štruktúru entít
  • Aktuálny @Entity anotované triedy sú v doména balíček
  • Úložiská sa vytvárajú v priečinku Úložisko balíček
  • Ovládače REST idú do web.rest balíček
  • Liquibase changelogy pre každé vytvorenie tabuľky sú v resources / config / liquibase / changelog priečinok
  • V klientskej časti je v priečinku vytvorený priečinok pre každú entitu subjekty adresár
  • Súbory o internacionalizácii sú uvedené v dokumente i18n priečinok (ak chcete, môžete ich pokojne upraviť)
  • V prehliadači je vytvorených niekoľko front-endových a back-endových testov src / test priečinok

To je pomerne veľa kódu!

Nebojte sa vykonať testy a znova skontrolovať, či všetky vyhovujú. Teraz môžeme tiež vykonať testy výkonu s Gatlingom pomocou príkazu (musí byť spustená aplikácia, aby tieto testy prešli):

mvnw gatling: vykonať

Ak chcete skontrolovať front-end v akcii, spustite aplikáciu pomocou./ mvnw, prejdite na // localhost: 8080 a prihláste sa ako admin používateľ (heslo je admin).

Vyberte si Príspevok v hornom menu pod Subjekty položka ponuky. Zobrazí sa vám prázdny zoznam, ktorý bude neskôr obsahovať všetky príspevky. Klikni na Vytvorte nový príspevok tlačidlo na vyvolanie formulára na zahrnutie:

Všimnite si, ako opatrný je nástroj JHipster na súčastiach formulára a overovacích správach. Samozrejme, že môžeme frontend upravovať, koľko chceme, ale forma je veľmi dobre zostavená.

7. Podpora nepretržitej integrácie

JHipster môže automaticky vytvárať konfiguračné súbory pre najpoužívanejšie nástroje na kontinuálnu integráciu. Stačí spustiť tento príkaz:

jo jhipster: ci-cd

A odpovedzte na otázky. Tu si môžeme vybrať, pre ktoré nástroje CI chceme vytvárať konfiguračné súbory, či už chceme použiť Docker, Sonar a dokonca nasadiť do Heroku ako súčasť procesu zostavovania.

The ci-cd príkazom môžete vytvoriť konfiguračné súbory pre nasledujúce nástroje CI:

  • Jenkins: súbor je JenkinsFile
  • Travis CI: súbor je .travis.yml
  • Kruh CI: súbor je kruh.yml
  • GitLab: súbor je .gitlab-ci.yml

8. Záver

Tento článok trochu ochutnal to, čoho je JHipster schopný. Je tu samozrejme oveľa viac, ako tu môžeme pokryť, takže určite pokračujte v objavovaní oficiálnych webových stránok JHipster.

A ako vždy, kód je k dispozícii na GitHub.


$config[zx-auto] not found$config[zx-overlay] not found