Share
Å bygge webapplikasjoner innebærer å måtte bruke forskjellige teknologier og verktøy, som omhandler databasemanipulering, server side operasjoner, og også klient sidehåndtering og visning av dataene som kommer fra serveren. Før du starter et nytt prosjekt, må alle verktøy og prosjektstruktur settes opp, noe som er en tidkrevende oppgave. Bruke et rammeverk eller a stable for denne oppgaven kan påskynde utviklingen og lette arbeidet for utvikleren.
"MEAN er en fullstack JavaScript-plattform for moderne webapplikasjoner".
Slik definerer forfatterne av MEAN-stakken den på deres hjemmeside. Det er veldig klart at MEAN er rettet mot alle slags JavaScript-utviklere (både server og klientside), og at det er en stabelplattform som indikerer at det er flere komponenter som omfatter det.
Disse komponentene er:
Som du kan se, samler MEAN fire av de mest brukte og verdsatte teknologiene for JavaScript-utvikling, og legger grunnlaget for enkelt å bygge komplekse webapplikasjoner.
MEAN-stakken kan installeres på to måter:
Denne metoden er ganske enkel. Du må bare besøke mean.io nettstedet og deretter kan du laste ned rammen som en glidelås fil ved å klikke på den store grønne knappen.
Et annet alternativ tilgjengelig herfra er å klone Git-depotet. Bare åpne en terminal og utsted følgende kommando:
git klon https://github.com/linnovate/mean.git
Det er flere Yeoman generatorer, skrevet av forskjellige utviklere. Bruke en generator for å installere MEAN er gjort i to trinn, først installere generatoren:
npm installer -g generator-meanstack
og deretter bruker du yo til å lage appen:
yo meanstack
Eksemplet ovenfor forutsetter installasjon av meanstack generator og også at Yeoman er installert. For en liste over MEAN generatorer, sjekk denne lenken og filtrer med "mean". For informasjon om å installere Yeoman, sjekk Yeoman-nettstedet.
Addy Osmani skrev et veldig interessant bloggpost om MEAN stack og Yeoman generatorer for det. Jeg anbefaler på det sterkeste å lese det for å finne ut hvordan du installerer stakken ved hjelp av generatorer.
For formålet med denne artikkelen vil jeg bruke Git kloning tilnærming.
Etter installasjon, bare cd inn i mappen der du installerte MEAN-stakken og utsted grynte kommando (du burde ha grynt-cli installert). Denne kommandoen starter en server lytter på port 3000, så besøker http: // localhost: 3000 i nettleseren vil du vise noe slikt:
MEAN-stakken er faktisk en fullt funksjonell bloggmotorapplikasjon. Den har autentisering ved hjelp av ulike metoder: Facebook, GitHub, Twitter eller Google, og også med enkel e-post og passord.
Jeg vedder på at du er nysgjerrig på å se noen kode frem til nå ... Så la oss sjekke det ut. Mappe strukturen mappe skal være som følger:
Serveren er delt over to mapper og en fil:
Accentsconagua
app mappe - inneholder kontroller, modeller og visninger som utgjør programmetconfig mappe - inneholder filene som styrer hvordan delene av appen oppfører segserver.js - er inngangspunktet for søknadenLa oss ta dem en etter en:
server.js FilDette er filen som starter hele applikasjonen. Hvis du ikke vil bruke grynte du kan bruke nodeserver, js for å starte serveren.
De server.js filen er ansvarlig for:
config MappeDenne mappen inneholder programkonfigurasjonsfilene. Innsiden finner du en env mappe som inneholder konfigurasjoner for utviklings-, produksjons- og testmodusene for å kjøre programmet.
Det er også filer som inneholder konfigurasjonen for selve applikasjonen, ekspresdelen og passkonfigurasjonen for logging inn.
app mappeInne i app mappe, ligger hele serverens sidekode. Denne mappen inneholder undermapper for kontrollerne, modellene og visningene som komponerer MVC-serverprogrammet og også en mappe for rutene som blir servert.
Som standard er det kontroller for artiklene, brukerne og en indeksfil for roten banen. Også modeller for artiklene og brukerne blir opprettet, og ruter for artikler, brukere og roten blir opprettet under installasjonen.
Når det gjelder standardopprettede visninger, opprettes følgende struktur:
De inkluderer mappen inneholder bunntekst- og overskriftsdelene av sidene som settes inn i alle sidene som tilhører appen. De oppsett mappen inneholder basen HTML for sidelayout. Denne utformingen er utvidet til index.html fil fra visninger mappe.
De brukere mappen inneholder oppføringskoden for å logge på, registrere deg og godkjenne.
I roten av visninger mappe, ved siden av index.html fil, det er filer som inneholder oppslaget for 404 og 500 feil.
Klientens delkode ligger i offentlig mappe. Denne mappen inneholder en css undermappe for applikasjons styling og en img mappe som inneholder bildene som brukes i programmet.
Spesiell oppmerksomhet bør gis til js mappe som inneholder Angular-koden for klientsiden-appen, initialiseringskoden, noen direktiver og filtrekode (for øyeblikket tomme filer) og kontrollerne og tjenestene for artiklene og hoveddelen av programmet. visninger mappen inneholder oppslag for artikkelskaping, redigering, visning og visning.
Endelig, den lib mappen inneholder Angular-bibliotekskoden.
De test mappen inneholder filene for testing av programmet. Det er hovedsakelig filer for å teste serverdelen ved å bruke Mokka og filer for å teste klientdelen ved hjelp av Karma.
Når du bruker MEAN-stakken, har du som utvikler også tilgang til npm, bower og grunt som skal installeres,
Noe viktig å nevne at JSHint er gitt, og all JavaScript-koden er linted. Også ved hjelp av Grunt kan prosjektet overvåkes og ombygges automatisk.
Denne artikkelen er ment å bli fulgt opp av en annen opplæring, der en komplett applikasjon vil bli bygd oppå MEAN-stakken, og viser deg hvordan MEAN kan konfigureres og tilpasses, for å brukes til andre typer applikasjoner.
Hold deg innstilt for den andre delen!
