Gyakorlat – Alapszintű webalkalmazás létrehozása

  • 15 perc

Eddig a MongoDB-t és a Node.js-t telepítette Ubuntu rendszerű virtuális gépére. Ideje létrehozni egy alapszintű webalkalmazást, hogy lássuk működni. Eközben az is kiderül, hogyan illik a képbe az AngularJS és az Express.

Tanulni példák alapján lehet a legjobban. A készítendő webalkalmazás egy egyszerű könyv-adatbázist valósít meg. A webalkalmazással listázhatja a könyvek adatait, új könyveket vehet fel, és törölheti a meglévő könyveket.

Az itt bemutatott webalkalmazás számos olyan alapelvet szemléltet, amely a MEAN verem webalkalmazások többségére érvényes. Igényei és érdeklődése szerint fedezheti fel a saját MEAN verem alkalmazások készítéséhez szükséges funkciókat.

Így fog kinézni a Books webalkalmazás.

Screenshot of a web page with a form and submission button.

A MEAN egyes összetevőinek szerepe a következő.

  • A MongoDB információkast tárol a könyvekről.
  • Az Express.js minden HTTP-kérést a megfelelő kezelőhöz irányít.
  • Az AngularJS köti össze a felhasználói felületet a program üzleti logikájával.
  • A Node.js üzemelteti a kiszolgálóoldali alkalmazást.

Fontos

Itt, tanulási célra, egy alapszintű webalkalmazást készítünk. A célja a MEAN verem tesztelése, és a működésének bemutatása. Az alkalmazás nem elég biztonságos vagy éles használatra kész.

Mi lesz az Express szerepe?

Az eddigiekben a MongoDB-t és a Node.js-t telepítette virtuális gépére. Mi a helyzet az Express.js-sel, az E a MEAN betűszóval?

Az Express.js egy olyan webkiszolgáló-keretrendszer, amely a Node.js számára készült, amely leegyszerűsíti a webalkalmazások létrehozásának folyamatát.

Az Express fő rendeltetése a kérések irányításának kezelése. Irányításon itt azt értjük, hogy hogyan válaszol az alkalmazás egy adott végponthoz küldött kérésre. A végpont egy elérési útból vagy URI-ból, valamint egy kérési módszerből, például GET vagy POST-ből áll. A /book végponthoz intézett GET kérésre válaszolhat például az adatbázisban lévő könyvek teljes listájával. Egy ugyanazon végponthoz küldött POST kérésre válaszolhat azzal, hogy új bejegyzést vesz fel az adatbázisba a felhasználó által a webes űrlapon kitöltött mezők alapján.

A rövidesen elkészülő webalkalmazásban az Express használatával fogja irányítani a HTTP-kéréseket, és visszaadni a webes tartalmat a felhasználónak. Az Express a HTTP-cookie-k kezelésében és a lekérdezési sztringek feldolgozásában is segíthet a webalkalmazásnak.

Az Express egy Node.js-csomag. Node.js-csomagok telepítésére és kezelésére a Node.js-hez tartozó npm segédprogramot használhatja. A lecke későbbi részében létre fog hozni egy expressz és egyéb függőségek definiálásához elnevezett package.json fájlt, majd a parancs futtatásával telepítheti ezeket a npm install függőségeket.

Mi lesz az AngularJS-szel?

Ahogyan az Expresst, a MEAN A betűjének megfelelő AngularJS-t sem telepítette még.

Az AngularJS megkönnyíti a webalkalmazások írását és tesztelését, mivel lehetővé teszi, hogy jobban elkülönítse a weblap megjelenését – a HTML-kódját – a weblap viselkedésétől. Ha ismeri a modell-nézet-vezérlő (MVC) mintázatot, vagy az adatkötés fogalmát, akkor az AngularJS-t is ismerősnek fogja találni.

Az AngularJS úgynevezett előtéri JavaScript-keretrendszer, vagyis csak az alkalmazáshoz hozzáférő ügyfélen kell elérhetőnek lennie. Másként fogalmazva az AngularJS nem az Ön webkiszolgálóján, hanem a felhasználó webböngészőjében fut. Mivel pedig az AngularJS JavaScript, könnyen felhasználható arra, hogy az oldalon megjelenítendő adatokat olvasson be a webkiszolgálóról.

Az AngularJS-t igazából nem kell telepíteni. Ehelyett egy hivatkozást kell megadni a HTML-oldalon a JavaScript-fájlban, ahogyan más JavaScript-kódtárak esetén. Az AngularJS-t több módon is belefoglalhatja weblapjaiba. Itt betölti az AngularJS-t egy tartalomkézbesítési hálózatból vagy CDN-ből. A CDN képek, videók és más tartalmak földrajzi elosztására szolgál a gyorsabb letöltés érdekében.

Ezt a kódot még ne illessze be, de ez egy olyan példa, amely az AngularJS-t tölti be egy CDN-ből. Ezt a kódot általában a <head> HTML-oldal szakaszához kell hozzáadnia.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>

Megjegyzés:

Az AngularJS nem tévesztendő össze az Angularral. Bár a kettő alapelvei között sok a hasonlóság, az AngularJS az Angular elődje. Az AngularJS-t még mindig gyakran használják webalkalmazások készítésére. Míg az AngularJS alapja a JavaScript, az Angular a TypeScriptre, a JavaScript programok írását megkönnyítő programozási nyelvre épül.

Hogyan készítem el az alkalmazást?

Itt egy egyszerű eljárást fog követni. Az alkalmazáskódot a Cloud Shellből írja meg, majd az SCP biztonságos másolási protokoll használatával másolja a fájlokat a virtuális gépére. Ezután elindítja a Node.js alkalmazást, és az eredményeket a böngészőben látja.

A gyakorlatban általában helyi környezetben, például a laptopról vagy egy helyileg futtatott virtuális gépről kell írni és tesztelni a webalkalmazást. Ezután a kódot egy verziókövetési rendszerben, például a Gitben tárolhatja, és egy folyamatos integrációs és folyamatos kézbesítési rendszert ( például az Azure DevOpst) használva tesztelheti a módosításokat, és feltöltheti őket a virtuális gépre. A modul végén további forrásokat is ajánlunk.

A Books webalkalmazás létrehozása

Itt létrehozza a webalkalmazást alkotó összes kódot, szkriptet és HTML-fájlt. Az áttekinthetőség kedvéért kiemeljük az egyes fájlok lényeges részleteit, de az összes részletet nem fogjuk tárgyalni.

Ha még mindig fennáll az SSH-kapcsolat a virtuális gépével, zárja be az SSH-munkamenetet az exit paranccsal, és térjen vissza a Cloud Shellbe.

exit

Ezzel visszatért Cloud Shell-munkamenetéhez.

A fájlok létrehozása

  1. A Cloud Shellben futtassa ezeket a parancsokat a webalkalmazás mappáinak és fájljainak létrehozásához:

    cd ~
mkdir Books
touch Books/server.js
touch Books/package.json
mkdir Books/app
touch Books/app/model.js
touch Books/app/routes.js
mkdir Books/public
touch Books/public/script.js
touch Books/public/index.html

    Ezek a következők:

    • Books a projekt gyökérkönyvtára.
      • A server.js fájl a webalkalmazás belépési pontját határozza meg. Betölti a szükséges Node.js-csomagokat, megadja a figyelendő portot, és figyelni kezdi a bejövő HTTP-forgalmat.
      • A package.json fájl az alkalmazásról nyújt olyan adatokat, mint a név, a leírás, valamint hogy milyen Node.js-csomagokra van szükség az alkalmazás futásához.
    • Books/app a kiszolgálón futó kódot tartalmaz.
      • A model.js fájl az adatbázis-kapcsolatot és -sémát definiálja. Felfogható az alkalmazás adatmodelljeként.
      • A routes.js fájl a kérések irányítását kezeli. Ez definiálja például a /book végponthoz intézett GET kéréseket az adatbázisban lévő könyvek teljes listájának megadásával.
    • Books/public a közvetlenül az ügyfél böngészőjének felkínált fájlokat tartalmazza.
      • Az index.html fájl az indexlapot tartalmazza. Tartalmaz egy webes űrlapot, amelyen a felhasználó a könyvekkel kapcsolatos információkat adhat meg. Az adatbázisban lévő összes könyvet is megjeleníti, és lehetővé teszi bejegyzések törlését az adatbázisból.
      • A script.js fájl a felhasználó webböngészőjében futó JavaScript-kódot tartalmaz. Kéréseket küldhet a kiszolgálónak könyvek listázására, könyveket vehet fel az adatbázisba, és könyveket törölhet az adatbázisból.

  2. A Cloud Shell szerkesztőjében a code paranccsal nyithatja meg fájljait.

    code Books

Az adatmodell létrehozása

  1. Nyissa meg app/model.js és adja hozzá a következőt a szerkesztőben:

    var mongoose = require('mongoose');
var dbHost = 'mongodb://localhost:27017/Books';
mongoose.connect(dbHost, { useNewUrlParser: true } );
mongoose.connection;
mongoose.set('debug', true);
var bookSchema = mongoose.Schema( {
    name: String,
    isbn: {type: String, index: true},
    author: String,
    pages: Number
});
var Book = mongoose.model('Book', bookSchema);
module.exports = Book;

    Fontos

    Mindenképp mentsen, miután beilleszt vagy módosít valamit a szerkesztőben megnyitott fájlban. Ehhez használhatja a „...” menüt, vagy a mentésre szolgáló billentyűparancsot (Ctrl + S Windows és Linux rendszeren, Command + S macOS rendszeren).

    Ez a kód a Mongoose használatával egyszerűsíti a MongoDB-be és onnan kifelé irányuló adatátvitel folyamatát. A Mongoose egy adatmodellezéshez használható sémaalapú rendszer. Ez a kód definiál egy „Book” nevű adatbázis-dokumentumot, a megadott sémával. A séma négy mezőt határoz meg egy könyv leírására:

    • A könyv neve, vagyis címe
    • Nemzetközi standard könyvszáma (ISBN), amely egyedileg azonosítja a könyvet
    • Szerzője
    • Oldalainak száma

    A következő lépésben a GET, POST és DELETE kéréseket adatbázis-műveletekre leképező HTTP-kezelőket fogja létrehozni.

A HTTP-kéréseket kezelő Express.js-útvonalak létrehozása

  1. A szerkesztőben nyissa meg app/routes.js és adja hozzá a következő kódot:

    var path = require('path');
var Book = require('./model');
var routes = function(app) {
    app.get('/book', function(req, res) {
        Book.find({}, function(err, result) {
            if ( err ) throw err;
            res.json(result);
        });
    });
    app.post('/book', function(req, res) {
        var book = new Book( {
            name:req.body.name,
            isbn:req.body.isbn,
            author:req.body.author,
            pages:req.body.pages
        });
        book.save(function(err, result) {
            if ( err ) throw err;
            res.json( {
                message:"Successfully added book",
                book:result
            });
        });
    });
    app.delete("/book/:isbn", function(req, res) {
        Book.findOneAndRemove(req.query, function(err, result) {
            if ( err ) throw err;
            res.json( {
                message: "Successfully deleted the book",
                book: result
            });
        });
    });
    app.get('*', function(req, res) {
        res.sendFile(path.join(__dirname + '/public', 'index.html'));
    });
};
module.exports = routes;

    Ez a kód négy útvonalat hoz létre az alkalmazás számára. Röviden mindegyiket ismertetjük.

    HTTP-parancs Végpont Leírás
    GET /book Minden könyvet lekér az adatbázisból.
    POST /book Létrehoz egy Book objektumot a felhasználó által a webes űrlapon megadott mezők alapján, és az adatbázisba írja ezt az objektumot.
    Törlés... /book/:isbn Törli az adatbázisból az ISBN-száma alapján azonosított könyvet.
    GET * Ha nincs más megfelelő útvonal, akkor az indexlapot adja vissza.

    Az Express.js közvetlenül az útvonalkezelő kódban képes HTTP-válaszokat kiszolgálni, vagy statikus tartalmakat képes kiszolgálni a fájlokból. Ez a kód mindkettőt bemutatja. Az első három útvonal JSON-adatokkal válaszol a könyvekre vonatkozó API-kérésekre. A negyedik (alapértelmezett) útvonal az index.html indexlap tartalmát adja vissza.

Az ügyféloldali JavaScript-alkalmazás létrehozása

  1. A szerkesztőből nyissa meg a public/script.js fájlt, és egészítse ki ezzel a kóddal:

    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    var getData = function() {
        return $http( {
            method: 'GET',
            url: '/book'
        }).then(function successCallback(response) {
            $scope.books = response.data;
        }, function errorCallback(response) {
            console.log('Error: ' + response);
        });
    };
    getData();
    $scope.del_book = function(book) {
        $http( {
            method: 'DELETE',
            url: '/book/:isbn',
            params: {'isbn': book.isbn}
        }).then(function successCallback(response) {
            console.log(response);
            return getData();
        }, function errorCallback(response) {
            console.log('Error: ' + response);
        });
    };
    $scope.add_book = function() {
        var body = '{ "name": "' + $scope.Name +
        '", "isbn": "' + $scope.Isbn +
        '", "author": "' + $scope.Author +
        '", "pages": "' + $scope.Pages + '" }';
        $http({
            method: 'POST',
            url: '/book',
            data: body
        }).then(function successCallback(response) {
            console.log(response);
            return getData();
        }, function errorCallback(response) {
            console.log('Error: ' + response);
        });
    };
});

    Figyelje meg, hogy a kód egy „myApp” nevű modult és egy „myCtrl” nevű vezérlőt definiál. A modulok és vezérlők működését itt nem tárgyaljuk részletesen, de ezeket a neveket használni fogja a következő lépésben, amikor összeköti a felhasználói felületet (a HTML-kódot) és az alkalmazás üzleti logikáját.

    A fentiekben négy útvonalat hozott létre, amelyek a különböző GET, POST és DELETE műveleteket kezelik a kiszolgálón. Ez a köd ezekhez a műveletekhez hasonlít, de az ügyfél oldaláról (a felhasználó webböngészőjéből).

    A getData függvény például egy GET kérést küld a /book végponthoz. Mint bizonyára emlékszik, a kiszolgáló ezt a kérést úgy kezeli, hogy minden könyv adatait lekéri az adatbázisból, és ezt az információt adja vissza JSON-adatok formájában. Figyelje meg, hogy az eredményként előálló JSON-adatok a $scope.books változóhoz vannak hozzárendelve. A következő lépésben megtudhatja, hogy ez hogyan befolyásolja, hogy a felhasználó mit lát a weblapon.

    Ez a kód az oldal betöltésekor hívja meg a getData függvényt. A del_book és az add_book függvény tanulmányozásával Ön is megállapíthatja, hogy hogyan működnek. Nincs szükség ügyféloldali kódra a kiszolgáló alapértelmezett kezelőjének megfelelően, mert az alapértelmezett kezelő az indexlapot adja vissza, nem pedig a JSON-adatokat.

A felhasználói felület létrehozása

  1. A szerkesztőből nyissa meg a public/index.html fájlt, és egészítse ki ezzel a kóddal:

    <!doctype html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div>
    <table>
        <tr>
        <td>Name:</td>
        <td><input type="text" ng-model="Name"></td>
        </tr>
        <tr>
        <td>Isbn:</td>
        <td><input type="text" ng-model="Isbn"></td>
        </tr>
        <tr>
        <td>Author:</td>
        <td><input type="text" ng-model="Author"></td>
        </tr>
        <tr>
        <td>Pages:</td>
        <td><input type="number" ng-model="Pages"></td>
        </tr>
    </table>
    <button ng-click="add_book()">Add</button>
    </div>
    <hr>
    <div>
    <table>
        <tr>
        <th>Name</th>
        <th>Isbn</th>
        <th>Author</th>
        <th>Pages</th>
        </tr>
        <tr ng-repeat="book in books">
        <td><input type="button" value="Delete" data-ng-click="del_book(book)"></td>
        <td>{{book.name}}</td>
        <td>{{book.isbn}}</td>
        <td>{{book.author}}</td>
        <td>{{book.pages}}</td>
        </tr>
    </table>
    </div>
</body>
</html>

    Ez a kód létrehoz egy egyszerű HTML-űrlapot, amely négy mezőt tartalmaz a könyvadatok elküldéséhez, valamint egy táblát, amely megjeleníti az adatbázisban tárolt összes könyvet.

    Habár egy szabványos HTML-kód, a ng- HTML-attribútumok talán nem ismerősek. Ezek a HTML-attribútumok fűzik össze az AngularJS-kódot a felhasználói felülettel. Amikor például a Hozzáadás lehetőséget választja, az AngularJS meghívja az add_book függvényt, amely elküldi a kiszolgálónak az űrlap adatait.

    Itt megvizsgálhatja a kódot, hogy képet kapjon arról, hogy az egyes attribútumok hogyan kapcsolódnak az ng- alkalmazás üzleti logikájához.

Az Express.js-kiszolgáló létrehozása az alkalmazás üzemeltetéséhez

  1. A szerkesztőből nyissa meg a server.js fájlt, és egészítse ki ezzel a kóddal:

    var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());
require('./app/routes')(app);
app.set('port', 80);
app.listen(app.get('port'), function() {
    console.log('Server up: http://localhost:' + app.get('port'));
});

    Ez a kód magát a webalkalmazást hozza létre. Statikus fájlokat szolgál ki a public címtárból, és a korábban megadott útvonalakat használja a kérések kezeléséhez.

Csomagadatok és függőségek definiálása

Mint láttuk, a package.json fájl az alkalmazásról nyújt olyan adatokat, mint a név, a leírás, valamint hogy milyen Node.js-csomagokra van szükség az alkalmazás futásához.

  1. A szerkesztőből nyissa meg a package.json fájlt, és egészítse ki ezzel a kóddal:

    {
  "name": "books",
  "description": "Sample web app that manages book information.",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/MicrosoftDocs/mslearn-build-a-web-app-with-mean-on-a-linux-vm"
  },
  "main": "server.js",
  "dependencies": {
    "express": "~4.16",
    "mongoose": "~5.3",
    "body-parser": "~1.18"
  }
}

Itt az alkalmazásról szóló információkat, vagyis metaadatokat talál, köztük a nevét, a leírását és a licencét.

A repository mező azt adja meg, hogy a kód hol van kezelve. Referenciaként később a GitHubon, vagy az itt megjelenő URL-címen tekintheti át a kódot.

A main mező az alkalmazás belépési pontját adja meg. A teljesség érdekében itt érhető el, de ez nem fontos, mert nem tervezi az alkalmazást Node.js-csomagként közzétenni mások számára, hogy letölthessenek és használhassa.

A dependencies mező fontos. Ez adja meg az alkalmazáshoz szükséges Node.js-csomagokat. Rövidesen ismét csatlakozni fog virtuális gépéhez, és az npm install paranccsal telepíteni fogja ezeket a csomagokat.

A Node-csomagok általában a szemantikus verziószámozás nevű verziókezelési sémát használják. A verziószám három részből áll: főverzió, alverzió és javítás. A hullámos vonal ~ jel itt arra utasítja az npm segédprogramot, hogy a megadott fő- és alverziószám alatti legújabb javítást telepítse. Az itt látható verziók a legújabbak, amelyekkel ezt a modult tesztelték. A gyakorlatban idővel növelheti a verziószámot, miközben alkalmazását az egyes függő csomagok által kínált legújabb funkciók kihasználása érdekében frissíti és teszteli.

A fájlok átmásolása a virtuális gépre

A folytatás előtt győződjön meg arról, hogy a virtuális gép IP-címe kéznél van. Ha nem rendelkezik vele, futtassa az alábbi parancsokat a Cloud Shellből a lekéréséhez:

ipaddress=$(az vm show \
  --name MeanStack \
  --resource-group "<rgn>[sandbox resource group name]</rgn>" \
  --show-details \
  --query [publicIps] \
  --output tsv)

echo $ipaddress

  1. A fájlok szerkesztésével már végzett. Győződjön meg arról, hogy az egyes fájlok módosításait mentette, majd zárja be a szerkesztőt.

    A szerkesztő bezárásához jelölje ki a jobb felső sarokban lévő három pontot, majd válassza a Szerkesztő bezárása lehetőséget.

  2. Futtassa a következő scp parancsot a Cloud Shell-munkamenet könyvtárának ~/Books tartalmának a virtuális gép ugyanazon könyvtárnevére való másolásához:

    scp -r ~/Books azureuser@$ipaddress:~/Books

További Node-csomagok telepítése

Tegyük fel, hogy a fejlesztési folyamat során további Node-csomagokat talált, amelyeket használni szeretne. Idézze fel például, hogy az app/model.js fájl első sora a következő.

var mongoose = require('mongoose');

Mint tudja, az alkalmazás a Mongoose használatával segíti az adatok átvitelét a MongoDB-adatbázisba és onnan kifelé.

Az alkalmazáshoz express.js és törzselemző csomagok is szükségesek. A Body-parser egy beépülő modul, amely lehetővé teszi az Express számára, hogy az ügyfél által küldött webes űrlap adataival dolgozzon.

Csatlakozzunk a virtuális géphez, és telepítsük a package.json fájlban megadott csomagokat.

  1. A virtuális géphez való csatlakozás előtt győződjön meg arról, hogy kéznél van a virtuális gép IP-címe. Ha nem rendelkezik vele, futtassa az előző szakaszban található Cloud Shell-parancsokat a lekéréséhez.

  2. Ahogyan korábban is tette, hozzon létre egy SSH-kapcsolatot a virtuális géppel:

    ssh azureuser@$ipaddress

  3. Ugrás a Books kezdőkönyvtár alatti könyvtárra:

    cd ~/Books

  4. Futtassa npm install a függő csomagok telepítését:

    sudo apt install npm -y && npm install

Tartsa nyitva az SSH-kapcsolatot a következő szakaszban.

Az alkalmazás tesztelése

Ezzel készen áll saját Node.js-webalkalmazása tesztelésére!

  1. ~/Books A címtárban futtassa ezt a parancsot a webalkalmazás elindításához:

    sudo nodejs server.js

    Ez a parancs úgy indítja el az alkalmazást, hogy a 80-as porton figyeli a bejövő HTTP-kéréseket.

  2. Egy külön böngészőlapon nyissa meg virtuális gépe nyilvános IP-címét.

    Az indexlap jelenik meg, amely egy webes űrlapot is tartalmaz.

    Screenshot of the book web page with a form and submission button.

    Próbáljon meg felvenni néhány könyvet az adatbázisba. Valahányszor felvesz egy könyvet, az oldal a könyvek teljes listájával frissül.

    Screenshot of the book web page with sample data populated.

    A könyv adatbázisból való törléséhez a Törlés lehetőséget is választhatja.