Jak zacząć od Mern Stack

Mern Stack to zestaw niezawodnych i potężnych technologii, które można wykorzystać do opracowywania skalowalnych aplikacji internetowych. Ta aplikacja internetowa obejmuje front-end, zaplecze i bazę danych do przechowywania danych. Jest to pełny stos ramy JavaScript używane do budowania przyjaznych dla użytkownika stron internetowych i aplikacji.

Aby rozpocząć od stosu Mern, musimy zrobić następujące thfirstirstly, skonfigurować serwer węzłów, utworzyć bazę danych MongoDB i nawiązać połączenie z serwerem węzłów. Trzeci i najważniejszym krokiem jest zbudowanie reagowania front-end.Aplikacja JS. Ten zapis pokaże, jak wykonać wszystkie te operacje. Przed pójściem do przodu omówmy wspomniane elementy stosu Mern.

Składniki Mern Stack

• JS jest uważany za najwyższy poziom w rozwoju Stack Mern. To deklaracja JavaScript Framework Służy do opracowywania dynamicznych aplikacji po stronie klienta. Pozwala również na tworzenie złożonych interfejsów poprzez podłączenie komponentów danych z serwera backend, a następnie renderowanie ich jako HTML. React wyróżnia się również w obsłudze interfejsów opartych na danych i stanowych z minimalnym kodem i innymi funkcjami, takimi jak obsługa błędów, listy, formularze, zdarzenia, których oczekujesz od nowoczesnej frameworku internetowego.
• Jeśli chcesz opracować aplikację na podstawie Mern Stack To zapisuje dowolną formę danych, takich jak zdarzenia, komentarze, profile użytkowników, treść i przesyłanie, będziesz potrzebować prostej bazy danych do użycia z front-end i zaplecza. To jest sytuacja MongoDB wchodzi w grę. W React.JS Front, utworzone dokumenty JSON są wysyłane do ekspresu.JS i węzeł.serwer JS, przetwarzanie ich i przechowywanie w bazie danych MongoDB.
• W Rozwój Stack Mern, poziom obecny pomiędzy bazą danych MongoDB a react.JS Front-end to „JS". Można go opisać jako minimalistyczne, nieinonione i szybkie ramy internetowe dla węzła.JS. Wyrazić.JS Framework obsługuje węzeł.serwer JS w nim. Możesz połączyć się z ekspresem.Funkcje JS z Front-end aplikacji, wysyłając posty, GETS lub żądania HTTP. Te określone funkcje są następnie wykorzystywane do zmiany lub dostępu do danych MongoDB za pośrednictwem obietnic lub zwrotów zwrotnych. Wyrazić.JS oferuje również potężne modele do obsługi odpowiedzi HTTP, żądań i routingu adresów URL.

Teraz zacznijmy ze stosem Mern!

Jak skonfigurować serwer węzłów w Mern Stack Development

Aby skonfigurować serwer węzłów w Mern Stack Development, pierwszą rzeczą, którą musisz zrobić, to pobrać węzeł.JS w twoim systemie za pośrednictwem oficjalnej strony internetowej:

Następnie użyj pobranego pliku, aby wypełnić instalację węzła.JS i po zakończeniu określonej operacji wykonaj poniżej podanie w wierszu polecenia:

> węzeł -v

Powyższe dane „węzeł„Polecenie z„-v„Opcja wydrukuje bieżącą wersję„Węzeł.JS”, Który jest zainstalowany w twoim systemie:

Po zainstalowaniu węzła.JS, przejdziemy do procedury rozwoju serwera. W tym celu najpierw utworzymy folder podstawowy, a następnie zainstalujemy wszystkie wymagane pakiety lub zależności dla programowania serwera węzłów.

Do określonej operacji możesz również użyć wiersza polecenia. Jednak użyjemy „Kod Studio Visual„Terminal, który ułatwi również pracę w plikach serwera węzłów.

W następnym kroku otworzymy nasz folder podstawowy za pomocą „Otwórz folder„Opcja„Plik" menu:

Wybraliśmy „Pracownik pracownika„Folder do przechowywania plików związanych z serwerem węzłów stosu Mern:

Teraz naciśnij „Ctrl+Shift+„”, Aby otworzyć nowe okno terminalu w kodzie Visual Studio. W tym celu możesz także użyć menu „Terminal”:

W następnym kroku stworzymy „Backend„Folder wewnątrz naszego„Pracownik pracownika„Korzenie lub folder podstawowy. Aby zrobić to samo, możesz wykonać poniżej „poniżej”Mkdir„Polecenie w otwartym terminalu:

> Backend Mkdir

Po tym przejdziemy do nowo utworzonego „Backend„Folder, aby dodać w nim plik związany z serwerem:

> Backend CD

Wewnątrz „Backend„Folder, teraz utworzymy„pakiet.JSON" plik. Paczka.plik JSON jest podstawowym elementem serwera węzłów w programie Mern Stack Development. Zawiera metadane projektu Mern Stack, a także definiuje atrybuty funkcjonalne, które mogą być następnie wykorzystane przez NPM do wykonywania skryptów i instalowania zależności.

Aby utworzyć nowy pakiet.plik JSON dla serwera węzłów, wpisz następujące polecenie:

> npm init -y

Jak zainstalować zależności dla serwera węzłów w Mern Stack Development

W tej sekcji pokazuje procedurę instalowania niezbędnych zależności, takich jak „wyrazić”,„CORS”,„mangusta", I "Dotenv„Dla twojego serwera węzłów w programie Mern Stack Development. Menedżer pakietów węzłów lub „NPM”Można użyć do instalacji określonych zależności w następujący sposób:

> NPM instaluj express cors mongoose dotenv

Tutaj:

• „Express” jest dodawany do instalacji „Express”, który jest lekką strukturą internetową dla węzła.JS. Ma również możliwość wspierania wielu środowisk, które pomagają w ułatwieniu i krótszego pisania kodu.
• „CORS” to akronim do udostępniania zasobów krzyżowych. Ten pakiet zezwala na żądanie AJAX dostęp do zasobów od zdalnych hostów.
• „Mongoose” jest dodawany do zainstalowania pakietu „Mongoose”. Pakiet Mongoose pomaga serwerowi węzłów w interakcji z MongoDB w Mern Stack Development.
• Na koniec pakiet „Dotenv” załaduje zmienne środowiskowe z „.env ”do„ procesu.plik env ”. Zarządza również poświadczeniami bazy danych w środowisku współpracy.

Dla naszego serwera węzłów kolejnym pakietem, który zamierzamy zainstalować, jest „Nodemon". Automatycznie ponownie uruchamia aplikację Node, gdy wprowadziłeś pewne zmiany w pliku podczas opracowywania węzła.Aplikacja oparta na JS:

> sudo npm instaluj -g Nodemon

Jak uruchomić serwer węzłów w Mern Stack Development

Do tego momentu zainstalowaliśmy węzeł.JS oraz wymagane pakiety i zależności. Teraz nadszedł czas na utworzenie i uruchomienie węzła zaplecza.serwer JS. Aby to zrobić, kliknij „Backend„Folder i z menu rozwijanego wybierz„Nowy plik" opcja:

Tutaj możesz nowy „serwer.JS„Plik JavaScript jest dodawany w folderze backend:

Teraz w „serwer.JS”Plik, utworzymy„wyrazić„Serwer, wtedy dołączymy„wyrazić.JSON„Zabranie pośrednie i”CORS". „„wyrazić.JSON„Naczynie pośrednie zostanie użyte do wysyłania i odbierania„ JSON ”. Również węzeł.Serwer JS będzie mógł słuchać „5000" Port:

const express = wymaga („express”);
const cors = wymaga („cors”);
Wymagaj („dotenv”).config ();
const app = express ();
const port = proces.Env.Port || 5000;
App.Użyj (CORS ());
App.Użyj (Express.JSON ());
App.Listen (port, () =>
konsola.log („serwer działa na porcie: $ port ');
);

Po dodaniu powyższego kodu w „serwer.JS”Plik, naciśnij„Ctrl+s„Aby zapisać zmiany, a następnie uruchomić serwer węzłów za pomocą„Nodemon”:

> Serwer Nodemon

Ze wyjścia widać, że nasz serwer z powodzeniem działa na porcie ”5000”:

Po pomyślnym uruchomieniu węzła.serwer JS na określonym porcie, przejdź do procesu podłączania węzła.serwer JS do bazy danych MongoDB. W tym celu musisz najpierw utworzyć konto MongoDB.

Jak stworzyć bazę danych MongoDB w Mern Stack Development

W rozwoju Mern Stack posiadanie konta bazy danych MongoDB jest obowiązkowym. Tworzenie konta MongoDB pozwala na budowę bazy danych zgodnie z Twoimi wymaganiami. Następnie możesz dodać „Grupa„Do nowo utworzonej bazy danych i generuj ciąg połączenia, który pomoże ci w podłączeniu węzła.serwer JS do bazy danych MongoDB. Zacznijmy więc tę procedurę, przechodząc w kierunku oficjalnej strony MongoDB:

Teraz utwórz konto do hostowania bazy danych w „Atlas MongoDB”:

Zobaczysz pulpit poniżej. Teraz kliknij „Nowy projekt”Przycisk, który znajduje się po prawej stronie deski rozdzielczej:

W podświetlonym polu wejściowym wprowadź nazwę projektu MongoDB i kliknij „Następny" przycisk:

W tym momencie tworzony jest projekt MongoDB i wszyscy jesteście gotowi zbudować nową bazę danych:

W następnym kroku wybierz dostawcę i strefę swojej bazy danych. Na przykład wybraliśmy „Google Cloud”Jako dostawca chmury i„Lowa„Jako nasz region. Zaleca się również wybrać bezpłatny poziom, który okazuje się świetny dla środowiska piaskownicy.

Po wybraniu wymaganych opcji kliknij „Utwórz klaster„Przycisk, aby przejść do przodu:

Aby zachować bezpieczeństwo MongoDB, wybierz opcję między „Nazwa użytkownika i hasło" I "Certyfikat”W celu uwierzytelniania połączenia z lub do węzła.JS. W naszym przypadku dodaliśmy nazwę użytkownika i hasło:

Teraz dodaj swoje adresy IP do białej białej MongoDB. Ta opcja pozwoli skonfigurowanemu adresowi IP na dostęp do klastrów projektu:

Po skonfigurowaniu adresu IP kliknij „Zakończ i zamknij" przycisk:

W ciągu kilku minut udostępniono utworzony klaster projektu MongoDB:

Jak wygenerować ciąg MongoDB do podłączenia węzła.Serwer JS w Mern Stack Development

Po skonfigurowaniu „Pracownik pracownika„Baza danych i nowo utworzona”Klaster0”, Przejdź do„Wdrożenia bazy danych”Sekcja i wybierz klaster. Po tym kliknij „Łączyć”Przycisk, który jest podświetlony na poniższym obrazie:

Następnie zostaniesz poproszony o wybranie metody połączenia dla klaster0. Chcemy podłączyć nasz węzeł.serwer JS do bazy danych MongoDB w Mern Stack Application Development, więc pójdziemy z „Podłącz swoją aplikację”Opcje:

Następnie wybierz „KIEROWCA" i jego "WERSJA”, A następnie skopiuj ciąg połączenia od dołu okna:

Jak podłączyć węzeł.Serwer JS do bazy danych MongoDB w Mern Stack Development

W rozwoju Mern Stack, aby podłączyć węzeł.JS i baza danych MongoDB, użyjemy ciągu połączenia, który skopiowaliśmy z „Połącz się z klaster0- Okno. Aby to zrobić, otwórz węzeł.JS „serwer.JS”Plik i upewnij się, że Twój serwer działa:

> serwer Nodeman

W następnym kroku dodamy „mangusta" biblioteka. „„mangusta„Węzeł.Biblioteka JS pomaga w nawiązaniu połączenia między klastrem MongoDB a węzłem.serwer JS:

const mongoose = wymaga („mongoose”);

Teraz utworzymy osobne „.Env„Plik do przechowywania Atlas MongoDB”URI" albo "Ciąg połączenia". W tym celu kliknij węzeł.Folder serwera JS, który jest „Backend”W naszym przypadku, a następnie tworzy„Nowy plik”:

Nazwaliśmy nowy plik „.Env”:

Jeśli nie masz ciągu połączenia, skopiuj go z podświetlonej sekcji:

Następnie dodaj skopiowany ciąg połączenia jako „Atlas_uri" w ".Env" plik:

Atlas_uri = MongoDB+srv: // linuxhint:@cluster0.8jdc7.MongoDB.Net/myfirstDatabase?RetryWrites = True & w = większość

W dodanym „Atlas_uri”Podaj swoją nazwę użytkownika i hasło MongoDB i naciśnij”Ctrl+s„Aby zapisać dodane zmiany:

Teraz dodaj następujący kod w swoim węźle.JS „serwer" plik:

const uri = proces.Env.Atlas_uri;
mangusta.Connect (URI);
Const Connection = Mongoose.połączenie;
połączenie.raz („Open”, () =>
konsola.log („Połączenie bazy danych MongoDB ustalone pomyślnie”);
)

Dodany kod będzie próbował połączyć się z „Atlas MongoDB" za pomocą "mangusta„Biblioteka i altas_uri, a jeśli połączenie zostanie ustanowione, wydrukuje”Połączenie bazy danych MongoDB ustalone pomyślnie„W oknie terminalu:

Naciskać "Ctrl+s”Aby zapisać dodane zmiany, a następnie uruchomić swój węzeł.serwer JS:

> Serwer Nodemon

Poniższe dane wyjściowe deklaruje, że pomyślnie połączyliśmy nasz węzeł.Serwer JS do bazy danych MongoDB w programie Mern Stack Development:

Teraz sprawdzimy metodę konfigurowania React.JS po stronie klienta w rozwoju Mern Stack.

Jak skonfigurować reakcję.JS po stronie klienta w rozwoju Mern Stack

Aby skonfigurować React.JS po stronie klienta w Mern Stack Development, pierwszą rzeczą, którą musisz zrobić, jest wybranie katalogu do instalacji React.Projekt oparty na JS. Możesz użyć „Wiersz polecenia”W tym celu. Jednak użyjemy „Kod Studio Visual„Terminal, który ułatwi również działanie z react.Aplikacja JS.

Aby to zrobić, najpierw będziemy szukać „Kod Studio Visual”Zastosowanie i otwórz:

W otwartej aplikacji kliknij „Plik„Opcja paska menu i wybierz„Otwórz folder" opcja:

Teraz przejdź do folderu, w którym chcesz umieścić React.plik związany z aplikacją JS. W naszym przypadku wybraliśmy „Pracownik pracownika”Folder, obecny w„Dysk lokalny (e :)”:

Następnie naciśnij „Ctrl+Shift+'„Aby otworzyć terminal kodu Visual Studio. Możesz także wykonać określoną operację za pomocą menu „Terminal”:

W tym momencie wszyscy jesteśmy gotowi skonfigurować React.Aplikacja JS w Mern Stack Development. Wykonanie „NPX„Polecenie z„Create-React-App„Opcja pomaga w tworzeniu reakcji.Aplikacja JS. Na przykład poniżej „poniżej”NPX„Polecenie utworzy„Mern-Imsystem" Reagować.Aplikacja JS, która będzie miała wszystkie wymagane zależności w folderze projektu:

> NPX Create-React-App Mern-Imsystem

Poczekaj kilka minut, ponieważ instalacja pakietów zajmie trochę czasu:

Poniższe dane wyjściowe wolne od błędów wskazuje, że pomyślnie zainstalowaliśmy „Mern-Imsystem" Reagować.Aplikacja JS:

Kod Visual Studio automatycznie załaduje utworzony folder ReactJS-Application. Teraz wprowadzimy pewne zmiany w „indeks.html”Plik„Mern-Imsystem" Reagować.Aplikacja JS:

„„indeks.html„Plik twojego react.Aplikacja JS w jakiś sposób będzie wyglądać tak:

Tutaj, "Aplikacja React”Reprezentuje„tytuł" z naszego "Mern-Imsystem" aplikacja:

Wykorzystamy utworzony React.Aplikacja JS do opracowania systemu zarządzania pracownikami z Mernem Stack. Po pierwsze, zmienimy tytuł naszego „Mern-Imsystem" Reagować.Aplikacja JS do „System zarządzania pracownikami”I zapisz otwarte„indeks.html" plik:

W następnym kroku zmienimy obecny katalog roboczy na „Mern-Imsystem„Korzystanie z terminalu:

> CD Mern-Imsystem

Teraz wypisz poniżej „poniżej”NPM„Polecenie do rozpoczęcia opracowywania serwera WWW:

> start npm

Jak widać z wyjścia, że ​​nasze „Mern-Imsystem„Projekt jest kompilowany pomyślnie i gotowy do obejrzenia w przeglądarce:

Wpisując „LocalHost: 3000„Na pasku adresu naszej przeglądarki zobaczymy następujący interfejs dla„Mern-Imsystem" Reagować.Aplikacja JS:

Możesz także dodać zmianę zawartości „App.JS”Plik JavaScript do obsługi lub przeglądania komponentów aplikacji React:

Na przykład dodanie następującego kodu w naszym „App.JS”Plik zapisuje„System zarządzania pracownikami„Treść w pojemniku:

import './App.CSS ';
funkcja app ()
powrót (

System zarządzania pracownikami

);

Domyślna aplikacja eksportu;

Z poniższego obrazu widać, że dodano „System zarządzania pracownikami„Treść dla naszego React.Aplikacja JS jest pomyślnie wyświetlana:

Chodziło o procedurę konfiguracji React.Aplikacja JS na stronie klienta w Mern Stack Development. Możesz wykonać dalsze dostosowywanie zgodnie z Twoimi wymaganiami.

Wniosek

Mern Stack to potężna struktura aplikacji internetowych używana do budowania nowoczesnych stron internetowych i aplikacji. Obejmuje to reaguj.JS do opracowania front-end, express i węzeł.JS do utworzenia bazy danych i bazy danych MongoDB w celu utrzymania bazy danych. Ten napis wykazał, jak zacząć ze stosem Mern. Każda procedura jest zapewniana z konfiguracji React.Aplikacja i węzeł JS.serwer JS do podłączania serwera z bazą danych MongoDB.