Share
Voor het bouwen van webtoepassingen moeten verschillende technologieën en hulpmiddelen worden gebruikt, die te maken hebben met databasemanipulatie, operaties aan de serverkant, en ook het afhandelen van de client en het weergeven van de gegevens die van de server komen. Voordat een nieuw project wordt gestart, moeten alle tools en de projectstructuur worden ingesteld, wat een tijdrovende klus is. Gebruik een kader of een stack voor deze taak kan de ontwikkeling worden versneld en het werk voor de ontwikkelaar worden vergemakkelijkt.
"MEAN is een fullstack JavaScript-platform voor moderne webapplicaties".
Dit is hoe de auteurs van de MEAN-stapel het op hun website definiëren. Het is heel duidelijk dat MEAN zich richt op allerlei JavaScript-ontwikkelaars (zowel aan de server- als aan de clientzijde) en ook dat het een stack-platform is dat aangeeft dat er verschillende componenten zijn die het samenstellen.
Deze componenten zijn:
Zoals je ziet, brengt MEAN vier van de meest gebruikte en gewaardeerde technologieën voor de ontwikkeling van JavaScript samen, waarmee de basis wordt gelegd voor het eenvoudig bouwen van complexe webtoepassingen..
De MEAN-stack kan op twee manieren worden geïnstalleerd:
Deze methode is vrij eenvoudig. Je hoeft alleen maar de site mean.io te bezoeken en dan kun je het framework downloaden als een ritssluiting bestand door op de grote groene knop te klikken.
Een andere optie die hier beschikbaar is, is om de Git-repository te klonen. Open een terminal en voer de volgende opdracht uit:
git clone https://github.com/linnovate/mean.git
Er zijn verschillende Yeoman-generatoren, geschreven door verschillende ontwikkelaars. Het gebruik van een generator om MEAN te installeren, gebeurt in twee stappen, eerst de generator installeren:
npm install -g generator-meanstack
en vervolgens yo gebruiken om de app te maken:
je bedoel
Het bovenstaande voorbeeld gaat uit van de installatie van de meanstack generator en ook dat Yeoman is geïnstalleerd. Voor een lijst van MEAN-generatoren, vinkt u deze link aan en filtert u op "gemiddeld". Voor informatie over het installeren van Yeoman, raadpleeg de site van Yeoman.
Addy Osmani schreef een zeer interessante blogpost over MEAN stack en Yeoman-generatoren. Ik raad ten zeerste aan dat te lezen, om erachter te komen hoe de stapel te installeren met behulp van generatoren.
Voor de toepassing van dit artikel zal ik de Git-kloneringsaanpak gebruiken.
Na de installatie, gewoon CD in de map waar u de MEAN-stack hebt geïnstalleerd en geeft u de knorren commando (je zou moeten hebben grunt-cli geïnstalleerd). Deze opdracht start een server die luistert op poort 3000, dus een bezoek http: // localhost: 3000 in de browser zal iets als dit worden weergegeven:
De MEAN-stack is in feite een volledig functionele applicatie voor blogmotoren. Het heeft authenticatie met behulp van verschillende methoden: Facebook, GitHub, Twitter of Google en ook door eenvoudige e-mail en wachtwoord.
Ik wed dat je nieuwsgierig bent om wat code tot nu toe te zien ... Dus laten we het eens bekijken. De MEAN stack-mappenstructuur zou als volgt moeten zijn:
De server is verdeeld over twee mappen en één bestand:
Accentsconagua
app map - bevat de controllers, modellen en weergaven waaruit de toepassing bestaatconfig map - bevat de bestanden die bepalen hoe de delen van de app zich gedragenserver.js - is het beginpunt van de applicatieLaten we ze een voor een nemen:
server.js het dossierDit is het bestand dat de volledige applicatie start. Als je niet wilt gebruiken knorren je kunt gebruiken knoopserver, js om de server te starten.
De server.js bestand is verantwoordelijk voor:
config MapDeze map bevat de toepassingsconfiguratiebestanden. Binnenin vind je een env map met configuraties voor de ontwikkelings-, productie- en testmodi voor het uitvoeren van de toepassing.
Er zijn ook bestanden met de configuratie voor de toepassing zelf, het expresgedeelte en de paspoortconfiguratie om in te loggen.
app mapBinnen in de app map, bevindt zich de volledige code aan de serverzijde. Deze map bevat submappen voor de controllers, modellen en views die de MVC-servertoepassing samenstellen en ook een map voor de routes die worden aangeboden.
Standaard zijn er controllers voor de artikelen, gebruikers en een indexbestand voor het rootpad. Ook worden er modellen voor de artikelen en gebruikers gemaakt en worden routes voor artikelen, gebruikers en het root-pad gemaakt tijdens de installatie.
Voor de standaard gemaakte weergaven wordt de volgende structuur gemaakt:
De omvat map bevat de voettekst en koptekst van de pagina's die worden ingevoegd in alle pagina's die bij de app horen. De lay-out map bevat de basis-HTML voor de pagina-indeling. Deze lay-out wordt uitgebreid tot de index.html bestand van de keer bekeken map.
De gebruikers map bevat de markup code voor aanmelden, aanmelden en authenticeren.
In de root van de keer bekeken map, naast de index.html bestand, zijn er bestanden met de markup voor 404 en 500-fouten.
De klantdeelcode bevindt zich in de openbaar map. Deze map bevat een css submap voor applicatiestyling en een img map met de afbeeldingen die in de toepassing worden gebruikt.
Speciale aandacht moet worden besteed aan de js map met de hoekcode voor de client-side app, de initialisatiecode, enkele richtlijnen en filtercode (momenteel lege bestanden) en de controllers en services voor de artikelen en het kopgedeelte van de toepassing. keer bekeken map bevat de opmaak voor het maken, bewerken, weergeven en bekijken van artikelen.
eindelijk, de lib map bevat de Angular bibliotheekcode.
De test map bevat de bestanden voor het testen van de applicatie. Voornamelijk zijn er bestanden voor het testen van het serverdeel met behulp van Mocha en bestanden voor het testen van het clientgedeelte met behulp van Karma.
Tijdens het gebruik van de MEAN-stack hebt u als ontwikkelaar ook toegang tot npm, bower en grunt die moeten worden geïnstalleerd,
Iets belangrijk om te vermelden dat JSHint wordt aangeboden en dat alle JavaScript-code pluis is. Met Grunt kan het project ook worden bekeken op wijzigingen en automatisch opnieuw worden opgebouwd.
Dit artikel is bedoeld om te worden opgevolgd door een tweede zelfstudie, waarin een volledige toepassing bovenop de MEAN-stack zal worden gebouwd, die laat zien hoe MEAN kan worden geconfigureerd en aangepast om te worden gebruikt voor andere soorten toepassingen.
Blijf op de hoogte voor het tweede deel!
