streamalism.org

1. Inleiding

Dit artikel geeft u een snel overzicht van JHipster en laat u zien hoe u een eenvoudige monolithische applicatie en aangepaste entiteiten kunt maken met behulp van opdrachtregelprogramma's.

We zullen ook de gegenereerde code tijdens elke stap onderzoeken, en ook de build-opdrachten en geautomatiseerde tests behandelen.

2. Wat is Jhipster

JHipster is, in een notendop, een codegenerator op hoog niveau die is gebaseerd op een uitgebreide lijst met geavanceerde ontwikkeltools en -platforms.

De belangrijkste componenten van de tool zijn:

• Yeoman, een front-end steigertool
• Goede oude Spring Boot
• AngularJS, het prominente Javascript-framework. JHipster werkt ook met AngularJS 2

JHipster creëert, met slechts een paar shell-opdrachten, een volwaardig Java-webproject met een vriendelijke, responsieve front-end, gedocumenteerde REST API, uitgebreide testdekking, basisbeveiliging en database-integratie! De resulterende code is goed becommentarieerd en volgt de best practices van de industrie.

Andere belangrijke technologieën die erdoor worden gebruikt, zijn:

• Swagger, voor API-documentatie
• Maven, Npm, Yarn, Gulp en Bower als afhankelijkheidsmanagers en bouwen tools
• Jasmine, Gradenboog, Komkommer en Gatling als testkaders
• Liquibase voor database-versiebeheer

We zijn niet verplicht om al deze items te gebruiken in onze gegenereerde applicatie. De optionele items worden geselecteerd tijdens het maken van het project.

Een prachtige door JHipster gegenereerde applicatie. Dit is het resultaat van het werk dat we in dit artikel zullen doen.

3. Installatie

Om JHipster te installeren, moeten we eerst al zijn afhankelijkheden installeren:

• Java - release 8 aanbevolen
• Git - het versiebeheersysteem
• NodeJS
• Yeoman
• Garen

Dat zijn voldoende afhankelijkheden als u besluit AngularJS 2 te gebruiken. als u liever voor AngularJS 1 kiest, moet u ook Bower en Gulp installeren.

Om het af te ronden, hoeven we alleen JHipster zelf te installeren. Dat is het gemakkelijkste deel. Omdat JHipster een Yeoman-generator is, die op zijn beurt een Javascript-pakket is, is de installatie net zo eenvoudig als het uitvoeren van een eenvoudig shell-commando:

garen globaal toevoegen generator-jhipster

Dat is het! We hebben Yarn-pakketbeheerder gebruikt om de JHipster-generator te installeren.

4. Een project aanmaken

Het creëren van een JHipster-project is in wezen het bouwen van een Yeoman-project. Alles begint met de yo opdracht:

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

Hierdoor wordt onze projectmap gemaakt met de naam baeldung-app, en start de opdrachtregelinterface van Yeoman die ons helpt bij het maken van het project.

Het proces omvat 15 stappen. Ik moedig u aan om bij elke stap de beschikbare opties te verkennen. In het kader van dit artikel maken we een eenvoudige, Monolithisch applicatie, zonder al te veel af te wijken van de standaard opties.

Dit zijn de stappen die het meest relevant zijn voor dit artikel:

• Type applicatie - Kiezen Monolithische toepassing (aanbevolen voor eenvoudige projecten)
• Installatie van andere generatoren van de JHipster Marketplace - Type N. In deze stap kunnen we coole add-ons installeren. Enkele populaire zijn entiteit-audits die het traceren van gegevens mogelijk maken; bootstrap-material-design, dat gebruik maakt van de trendy Material Design-componenten, en angular-datatables
• Maven of Gradle - Kiezen Maven
• Andere technologieën - Selecteer geen opties, druk gewoon op Enter om naar de volgende stap te gaan. Hier kunnen we ervoor kiezen om Social login in te pluggen met Google, Facebook en Twitter, wat een erg leuke functie is.
• Client raamwerk - Kiezen [BETA] Hoekig 2.x. We kunnen ook gaan met AngularJS 1
• Maak internationalisering mogelijk - Type Y, kies dan Engels als de moedertaal. We kunnen zoveel talen kiezen als we willen als de tweede taal
• Test frameworks - Selecteer Gatling en Gradenboog

JHipster maakt de projectbestanden aan en begint vervolgens met het installeren van de afhankelijkheden. Het volgende bericht wordt weergegeven in de uitvoer:

Ik ben helemaal klaar. Npm install uitvoeren zodat u de vereiste afhankelijkheden kunt installeren. Als dit niet lukt, probeer het commando dan zelf uit te voeren.

De installatie van afhankelijkheden kan even duren. Als het klaar is, wordt het volgende weergegeven:

Servertoepassing succesvol gegenereerd. Start uw Spring Boot-applicatie: ./mvnw Client-applicatie is succesvol gegenereerd. Start uw Webpack-ontwikkelserver met: npm start

Ons project is nu gemaakt. We kunnen de hoofdopdrachten uitvoeren in de hoofdmap van ons project:

./mvnw #starts Spring Boot, op poort 8080 ./mvnw clean test # voert de tests van de toepassing uit garentest # voert de clienttests uit

JHipster genereert een README-bestand, dat rechtstreeks in de hoofdmap van ons project wordt geplaatst. Dat bestand bevat instructies om vele andere nuttige opdrachten uit te voeren die verband houden met ons project.

5. Overzicht van gegenereerde code

Bekijk de automatisch gegenereerde bestanden. Je zult merken dat het project nogal wat lijkt op een standaard Java / Spring-project, maar met veel extra's.

Aangezien JHipster ook zorgt voor het maken van de front-endcode, vindt u een package.json dien een ... in webpack map en enkele andere webgerelateerde dingen.

Laten we snel enkele van de kritieke bestanden bekijken.

5.1. Back-end-bestanden

• Zoals verwacht bevindt de Java-code zich in de src / main / java map
• De src / main / resources map bevat een deel van de statische inhoud die wordt gebruikt door de Java-code. Hier vinden we de internationalisatiebestanden (in het i18n map), e-mailsjablonen en enkele configuratiebestanden
• Unit- en integratietests bevinden zich in het src / test / java map
• Prestatietests (Gatling) zijn binnen src / test / gatling. Op dit moment staat er echter niet veel inhoud in deze map. Nadat we enkele entiteiten hebben gemaakt, worden de prestatietests voor die objecten hier geplaatst

5.2. Voorkant

• De root-frontend-map is src / main / webapp
• De app map bevat veel van de AngularJS-modules
• i18n bevat de internationaliseringsbestanden voor het frontend-gedeelte
• Unit tests (Karma) zijn in de src / test / javascript / spec map
• End-to-end-tests (gradenboog) zijn in de src / test / javascript / e2e map

6. Aangepaste entiteiten maken

Entiteiten zijn de bouwstenen van onze JHipster-applicatie. Ze vertegenwoordigen de bedrijfsobjecten, zoals een Gebruiker, een Taak, een Post, een Commentaar, enz.

Entiteiten maken met JHipster is een pijnloos proces. We kunnen een object maken met behulp van opdrachtregelprogramma's, net zoals we het project zelf hebben gemaakt, of via JDL-Studio, een online tool die een JSON-weergave genereert van de entiteiten die later in ons project kunnen worden geïmporteerd.

Laten we in dit artikel de opdrachtregelprogramma's gebruiken om twee entiteiten te maken: Post en Commentaar.

EEN Post moet een titel, een tekstinhoud en een aanmaakdatum hebben. Het moet ook verband houden met een gebruiker, die de maker is van het Post. EEN Gebruiker kan er veel hebben Berichten geassocieerd met hen.

EEN Post kan ook nul of veel hebben Opmerkingen. Elk Commentaar heeft een tekst en aanmaakdatum.

Om het creatieproces van onze Post entiteit, ga naar de hoofdmap van ons project en typ:

yo jhipster: entiteitspost

Volg nu de stappen die door de interface worden gepresenteerd.

• Voeg een veld toe met de naam titel van het type Draad en voeg enkele validatieregels toe aan het veld (Verplicht, Minimale lengte en Maximale lengte)
• Voeg nog een veld toe met de naam inhoud van het type Draad en maak het ook Verplicht
• Voeg een derde veld toe met de naam Aanmaakdatum, van het type LocalDate
• Laten we nu de relatie met toevoegen Gebruiker. Merk op dat de entiteit Gebruiker bestaat al. Het is gemaakt tijdens de conceptie van het project. De naam van de andere entiteit is gebruiker, de relatienaam is Schepper, en het type is veel-op-een, het weergaveveld is naam, en het is beter om de relatie aan te gaan verplicht
• Kies er niet voor om een ​​DTO te gebruiken, ga mee Directe entiteit in plaats daarvan
• Kies ervoor om de repository rechtstreeks in de serviceklasse te injecteren. Merk op dat het in een echte wereld waarschijnlijk redelijker zou zijn om de REST-controller te scheiden van de serviceklasse
• Selecteer om af te sluiten oneindige scroll als het pagineringstype
• Geef JHipster toestemming om bestaande bestanden indien nodig te overschrijven

Herhaal het bovenstaande proces om een ​​entiteit met de naam te maken commentaar, met twee velden, tekst, van het type Draad, en Aanmaakdatum van het type LocalDate. Commentaar zou ook een vereiste moeten hebben veel-op-een relatie met Post.

Dat is het! Er zijn veel stappen in het proces, maar u zult zien dat het niet veel tijd kost om ze te voltooien.

U zult opmerken dat JHipster een aantal nieuwe bestanden maakt en enkele andere wijzigt, als onderdeel van het proces van het maken van de entiteiten:

• EEN .jhipster map is gemaakt, met daarin een JSON bestand voor elk object. Die bestanden beschrijven de structuur van de entiteiten
• De daadwerkelijke @Entiteit geannoteerde klassen bevinden zich in de domein pakket
• Repositories worden aangemaakt in het repository pakket
• REST-controllers gaan in de web.rest pakket
• Liquibase-wijzigingslogboeken voor elke aanmaak van een tabel staan ​​in de resources / config / liquibase / changelog map
• In het front-end-gedeelte wordt voor elke entiteit een map gemaakt in het entiteiten directory
• Internationaliseringsbestanden worden aangemaakt in het i18n map (voel je vrij om deze aan te passen als je dat wilt)
• Er worden verschillende tests, front-end en back-end gemaakt in het src / test map

Dat is best veel code!

Voel je vrij om de tests uit te voeren en dubbel te controleren of ze allemaal slagen. Nu kunnen we ook prestatietests uitvoeren met Gatling, met behulp van de opdracht (de applicatie moet worden uitgevoerd om deze tests te laten slagen):

mvnw gatling: uitvoeren

Als u de front-end in actie wilt zien, start u de applicatie met./ mvnw, navigeren naar // localhost: 8080 en log in als het beheerder gebruiker (wachtwoord is beheerder).

Kiezen Post in het bovenste menu, onder de Entiteiten menu onderdeel. Je krijgt een lege lijst te zien, die later alle berichten zal bevatten. Klik op de Maak een nieuw bericht knop om het opnameformulier te openen:

Merk op hoe zorgvuldig JHipster is met de formuliercomponenten en validatieberichten. Natuurlijk kunnen we de voorkant zoveel aanpassen als we willen, maar de vorm is erg goed gebouwd zoals hij is.

7. Continue integratieondersteuning

JHipster kan automatisch configuratiebestanden maken voor de meest gebruikte tools voor continue integratie. Voer gewoon deze opdracht uit:

yo jhipster: ci-cd

En beantwoord de vragen. Hier kunnen we kiezen voor welke CI-tools we configuratiebestanden willen maken, of we Docker, Sonar willen gebruiken en zelfs naar Heroku willen implementeren als onderdeel van het bouwproces.

De ci-cd commando kan configuratiebestanden maken voor de volgende CI-tools:

• Jenkins: het bestand is JenkinsFile
• Travis CI: het bestand is .travis.yml
• Circle CI: het bestand is cirkel.yml
• GitLab: het bestand is .gitlab-ci.yml

8. Conclusie

Dit artikel gaf een klein beetje de smaak van waartoe JHipster in staat is. Er is natuurlijk veel meer aan de hand dan we hier kunnen behandelen, dus blijf zeker de officiële JHipster-website verkennen.

En zoals altijd is de code beschikbaar op GitHub.