Erstellen Sie Webanwendungen mit Node.js.

() translation by (you can also view the original English article)

Einführung

Neben dem Erstellen von APIs eignet sich Node.js hervorragend zum Erstellen von Standard-Webanwendungen. Es verfügt über leistungsstarke Werkzeugs, die den Geschmack von Webentwicklern erfüllen. In diesem Lernprogramm erstellen Sie eine Webanwendung, die als lokale Bibliothek dienen kann.

Während des Erstellens lernen Sie einige Arten von Middleware kennen, erfahren, wie Sie mit dem Senden von Formularen in Node.js umgehen, und Sie können auch auf zwei Modelle verweisen.

Lass uns anfangen.

Loslegen

Installieren Sie zunächst den Expressgenerator auf Ihrer Maschine.

1	npm install express-generator -g

Führen Sie den Befehl express generator aus, um Ihre Anwendung zu generieren.

1	express tutsplus-library --view=pug

   create : tutsplus-library
   create : tutsplus-library/package.json
   create : tutsplus-library/app.js
   create : tutsplus-library/public
   create : tutsplus-library/routes
   create : tutsplus-library/routes/index.js
   create : tutsplus-library/routes/users.js
   create : tutsplus-library/views
   create : tutsplus-library/views/index.pug
   create : tutsplus-library/views/layout.pug
   create : tutsplus-library/views/error.pug
   create : tutsplus-library/bin
   create : tutsplus-library/bin/www
   create : tutsplus-library/public/javascripts
   create : tutsplus-library/public/images
   create : tutsplus-library/public/stylesheets
   create : tutsplus-library/public/stylesheets/style.css

   install dependencies:
     $ cd tutsplus-library && npm install

   run the app:
     $ DEBUG=tutsplus-library:* npm start

Migrieren Sie nun in Ihre Arbeit, öffnen Sie package.json und stellen Sie die Abhängigkeiten ähnlich wie unten dar.

#package.json

{
  "name": "tutsplus-library",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "connect-flash": "^0.1.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "express-messages": "^1.0.1",
    "express-session": "^1.15.5",
    "express-validator": "^4.2.1",
    "mongoose": "^4.11.12",
    "morgan": "~1.8.1",
    "pug": "~2.0.0-beta11",
    "serve-favicon": "~2.4.2"
  }
}

Führen Sie den Befehl aus, um die Pakete zu installieren.

1	npm install

Richten Sie die Eingabedatei ein

app.js wurde erstellt, als Sie den Generatorbefehl ausgeführt haben. Sie müssen jedoch eine zusätzliche Konfiguration einrichten. Bearbeiten Sie die Datei so, dass sie wie folgt aussieht.

#app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
const session = require('express-session')
const expressValidator = require('express-validator')
const flash = require('connect-flash')
const mongoose = require('mongoose')

// 1
const genres = require('./routes/genres');
const books = require('./routes/books');

var app = express();

// 2
mongoose.Promise = global.Promise
const mongoDB = process.env.MONGODB_URI || 'mongodb://127.0.0.1/tutsplus-library'
mongoose.connect(mongoDB)

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// 3
app.use(session({
  secret: 'secret',
  saveUninitialized: true,
  resave: true
}))

// 4
app.use(expressValidator({
  errorFormatter: function(param, msg, value) {
    var namespace = param.split('.')
    , root = namespace.shift()
    , formParam = root

    while(namespace.length) {
      formParam += '[' + namespace.shift() + ']'
    }
    return {
      param : formParam,
      msg : msg,
      value : value
    }
  }
}))

// 5
app.use(flash())
app.use(function (req, res, next) {
  res.locals.messages = require('express-messages')
  next()
})

// 6
app.use('/genres', genres);
app.use('/books', books);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Sie haben die beiden Routen benötigt, die Sie beim Erstellen dieser Anwendung verwenden werden. Sie werden die Routendatei in Kürze erstellen. Die erforderlichen Routen werden als Werte zwei verschiedenen Variablen zugewiesen, die beim Einrichten der Middleware für Ihre Routen verwendet werden.
Sie setzen Mongoose auf global.Promise. Der Variablen MongoDB wird die MONGODB_URI Ihrer Umgebung oder der Pfad zu Ihrem lokalen Mongo-Server zugewiesen. Diese Variable wird als Argument für die Verbindung zum laufenden MongoDB-Server übergeben.
Sie richten die Sitzungs-Middleware mit express-session ein. Diese Middleware ist wichtig, da in einigen Teilen Ihrer Anwendung Flash-Meldungen angezeigt werden.
Sie richten die Middleware zur Validierung ein. Diese Middleware wird zur Überprüfung der Formulareingabe verwendet, um sicherzustellen, dass Benutzer der Anwendung kein leeres Formular senden. Die Validierung verwendet ein installiertes Paket, express-validator.
Sie richten eine Middleware ein, die sich beim Anzeigen von Flash-Nachrichten als nützlich erweist. Diese Middleware verwendet connect-flash.
Die Routen für die Anwendung sind so eingerichtet, dass sie die von Ihnen benötigte Routendatei verwenden. Anfragen, die auf /genres und /books verweisen, verwenden die Genres- bzw. Buchroutendateien. In diesem Moment haben Sie die Routendateien noch nicht erstellt, aber Sie werden dies bald tun.

Buch- und Genre-Modell

Das Buchmodell verwendet das Mungo-Schema, um zu definieren, wie die Bücher strukturiert werden. Erstellen Sie ein Verzeichnis mit dem Namen models und eine neue Datei mit dem Namen Book.js. So sieht es aus.

#models/Book.js

const mongoose = require('mongoose')
mongoose.Promise = global.Promise
const Schema = mongoose.Schema

const bookSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a book name'
  },
  description: {
    type: String,
    trim: true
  },
  author: {
    type: String,
    trim: true,
  },
  genre: [{
    type: Schema.Types.ObjectId,
    ref: 'Genre'
  }]
})

module.exports = mongoose.model('Book', bookSchema)

Hier haben Sie vier Felder. Das letzte Feld wird verwendet, um das Genre zu speichern, zu dem jedes Buch gehört. Das Genre-Feld hier verweist auf das Genre-Modell, das als nächstes erstellt wird. Aus diesem Grund wird der Typ auf Schema.Types.ObjectId festgelegt. Hier werden die IDs der einzelnen Genres gespeichert, auf die verwiesen wird. ref gibt das Modell an, auf das Sie verweisen. Beachten Sie, dass das Genre als Array gespeichert wird. Dies bedeutet, dass ein Buch mehr als ein Genre haben kann.

Lassen Sie uns fortfahren und das Genre-Modell erstellen.

#models/genre.js

const mongoose = require('mongoose')
mongoose.Promise = global.Promise
const Schema = mongoose.Schema

const genreSchema = Schema({
  name: {
    type: String,
    trim: true,
    required: 'Please enter a Genre name'
  }
})

module.exports = mongoose.model('Genre', genreSchema)

Für Ihr Genre benötigen Sie nur ein Feld: name.

Genre Index Route und Ansicht

In diesem Tutorial verwenden Sie zwei Routenpfade für Ihr Genre: einen Pfad zum Hinzufügen neuer Genres und einen anderen, der die Genres auflistet, über die Sie verfügen. Erstellen Sie in Ihrem Routenverzeichnis eine Datei mit dem Namen genres.js.

Beginnen Sie damit, dass Sie alle Module benötigen, die Sie verwenden werden.

#routes/genres.js

var express = require('express');
var router = express.Router();
const mongoose = require('mongoose')
const Genre = require('../models/Genre')

Geben Sie als Nächstes die Route ein, die die Indexdatei für Ihre Genres verarbeitet.

router.get('/', (req, res, next) => {
  const genres = Genre.find({}).exec()
    .then((genres) => {
      res.render('genres', { genres: genres })
  }, (err) => {
    throw err
  })
});

Diese Route wird immer dann aufgerufen, wenn Anfragen an /genres gestellt werden. Hier rufen Sie die Suchmethode für Ihr Genre-Modell auf, um alle erstellten Genres abzurufen. Diese Genres werden dann in einer Vorlage namens genres gerendert. Lassen Sie uns fortfahren und das erstellen, aber aktualisieren Sie zuerst Ihr layout.pug so, dass es so aussieht:

#views/layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='https://bootswatch.com/paper/bootstrap.css')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
  body
    .container-fluid
      block header
        nav.navbar.navbar-inverse
          .container-fluid
            .navbar-header
              button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-2')
                span.sr-only Toggle navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
              a.navbar-brand(href='#') Local Library
            #bs-example-navbar-collapse-2.collapse.navbar-collapse
              ul.nav.navbar-nav.navbar-right
                li
                  a(href='/books') View Books
                li
                  a(href='/books/add') Add New Book
                li
                  a(href='/genres') View Genres
                li
                  a(href='/genres/add') Add New Genre
        block content

Dies gibt Ihren Ansichten eine schöne Struktur, um die Navigation zu erleichtern. Erstellen Sie nun eine Ansichtsdatei mit dem Namen genre.pug. In dieser Datei durchlaufen Sie die erstellten Genres und geben jedes Genre in einer ungeordneten Liste aus.

So sollte die Datei aussehen.

#views/genres.pug

extends layout

block content
  h1 Genre
  ul.well.well-lg
    each genre, i in genres
      li.well.well-sm
        p #{genre.name}

Neue Genre-Routen hinzufügen und anzeigen

Kehren Sie zu Ihren routes/genres.js zurück, um die Routen hinzuzufügen, die für die Erstellung neuer Genres verwendet werden.

#routes/genres.js

// 1
router.get('/add', (req, res, next) => {
  res.render('addGenre')
})

// 2
router.post('/add', (req, res, next) => {
  req.checkBody('name', 'Name is required').notEmpty()

  const errors = req.validationErrors()

  if (errors) {
    console.log(errors)
    res.render('addgenres', { genre, errors })
  }

  const genre = (new Genre(req.body)).save()
    .then((data) => {
      res.redirect('/genres')
    })
    .catch((errors) => {
      console.log('oops...')
      console.log(errors)
    })
})

// 3
module.exports = router;

Die Aufgabe dieses Routers besteht darin, einfach die Seite zum Hinzufügen neuer Routen anzuzeigen. Dieser Router wird aufgerufen, wenn Anforderungen an /genres/add path gestellt werden.
Dieser Router übernimmt die Übermittlung des Formulars. Wenn das Formular gesendet wird, prüfen wir, ob der Benutzer einen Namen eingegeben hat. Wenn kein Name eingegeben wird, wird die Seite neu gerendert. Wenn die Überprüfungen noch nicht abgeschlossen sind, wird das Genre gespeichert und der Benutzer wird zur Seite /genres weitergeleitet.
Das Modul wird als Router exportiert.

Jetzt können Sie die Seite zum Hinzufügen eines neuen Genres erstellen.

#views/addGenre.pug

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/genres/add")
        .form-group
          label.col-lg-2.control.label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')
      
      if errors
        ul
          for error in errors
            li!= error.msg

Bücher Routen und Ansicht

Erstellen Sie eine neue Routendatei für Bücher und nennen Sie sie books.js. Wie Sie es zuvor mit dem Genre getan haben, benötigen Sie zunächst die erforderlichen Module.

#routes/books.js

var express = require('express');
var router = express.Router();
const mongoose = require('mongoose')
const Book = require('../models/Book')
const Genre = require('../models/Genre')

Richten Sie als Nächstes den Router für die Anzeige aller in der Bibliothek gespeicherten Bücher ein. Versuchen Sie das selbst auf die Art und Weise, wie Sie das Genre einrichten. Sie können jederzeit zurückschauen, um Korrekturen vorzunehmen.

Ich denke, Sie haben das ausprobiert - so sollte es aussehen.

router.get('/', (req, res, next) => {
  const books = Book.find({}).exec().then((books) => {
    res.render('books', { books: books })
  }, (err) => {
    throw err
  })
});

Wenn dieser Router aufgerufen wird, wird eine Anforderung gestellt, alle in der Datenbank gespeicherten Bücher zu finden. Wenn alles gut geht, werden die Bücher auf der Seite /books angezeigt, andernfalls wird ein Fehler ausgegeben.

Sie müssen eine neue Datei erstellen, um alle Bücher anzuzeigen. So sollte sie aussehen.

#views/books.pug

extends layout

block content
  h1 Books
  ul.well.well-lg
    each book, i in books
      li.well.well-sm
        a(href=`/books/show/${book.id}`) #{book.name}
        p= book.description

Sie durchlaufen einfach die zurückgegebenen Bücher und geben den Namen und die Beschreibung jedes Buches mithilfe einer ungeordneten Liste aus. Der Name des Buches verweist auf die einzelne Seite des Buches.

Neue Buchrouten hinzufügen und anzeigen

Der nächste von Ihnen eingerichtete Router übernimmt das Hinzufügen neuer Bücher. Hier werden zwei Router verwendet: Einer rendert einfach die Seite und ein anderer übernimmt die Übermittlung des Formulars.

So sehen die Router aus.

router.get('/add', (req, res, next) => {
  const genres = Genre.find({}).exec()
    .then((genres) => {
      res.render('addBooks', { genres })
    })
    .catch((err) => {
      throw err
    })
})

router.post('/add', (req, res, next) => {
  req.checkBody('name', 'Name is required').notEmpty()
  req.checkBody('description', 'Description is required').notEmpty()
  req.checkBody('genre', 'Genre is required').notEmpty

  const errors = req.validationErrors()

  if (errors) {
    console.log(errors)
    res.render('addBooks', { book, errors })
  }

  const book = (new Book(req.body)).save()
    .then((data) => {
      res.redirect('/books')
    })
    .catch((errors) => {
      console.log('oops...')
    })
})

Im ersten Router wird die Seite /addBooks angezeigt. Dieser Router wird aufgerufen, wenn eine Anforderung an /add path gestellt wird. Da hinzugefügte Bücher Genres haben sollen, möchten Sie die Genres anzeigen, die in der Datenbank gespeichert wurden.

1	const genres = Genre.find({}).exec()
2	.then((genres) => {

Der obige Code findet alle Genres in Ihrer Datenbank und gibt sie in den variablen Genres zurück. Auf diese Weise können Sie die Genres durchlaufen und als Kontrollkästchen anzeigen.

Der zweite Router übernimmt die Übermittlung des Formulars. Zunächst überprüfen Sie den Hauptteil der Anforderung, um sicherzustellen, dass einige Felder nicht leer sind. Hier bietet sich die in app.js festgelegte express-validator-Middleware an. Bei Fehlern wird die Seite neu gerendert. Wenn keine vorhanden sind, wird die neue Buchinstanz gespeichert und der Benutzer wird zur Seite /books weitergeleitet.

Lassen Sie uns fortfahren und die Ansichten dafür erstellen.

Erstellen Sie eine neue Ansichtsdatei mit dem Namen addBooks.pug. Beachten Sie, dass der Name der Ansicht mit dem ersten Parameter übereinstimmt, der res.render zugewiesen wurde. Dies liegt daran, dass Sie eine Vorlage rendern. Während der Umleitung übergeben Sie einfach den Pfad, zu dem Sie umleiten möchten, wie Sie es mit res.redirect('/books') getan haben.

Nachdem dies festgestellt wurde, sollten die Ansichten wie folgt aussehen.

#views/addBooks.pug

extends layout

block content
  .row
    .col-md-12
      h1 Add Book
      form(method="POST", action="/books/add")
        .form-group
          label.col-lg-2.control-label Name
          .col-lg-10
            input.form-control(type="text", name='name')
        .form-group
          label.col-lg-2.control-label Author
          .col-lg-10
            input.form-control(type="text", name='author')
        .form-group
          label.col-lg-2.control-label Book Description
          .col-lg-10
            textarea#textArea.form-control(rows='3', name='description')
        .form-group
          label.col-lg-2.control-label Genre
          .col-lg-10
            for genre in genres
              .checkbox
                input.checkbox(type='checkbox', name='genre', id=genre._id, value=genre._id, checked=genre.checked)
                label(for=genre._id) #{genre.name}
        .form-group
          .col-lg-10.col-lg-offset-2
            input.button.btn.btn-primary(type='submit', value='Submit')
      
      if errors
        ul
          for error in errors
            li!= error.msg

Das Wichtigste dabei ist die Formaktion und -methode. Wenn Sie auf die Schaltfläche "Senden" klicken, senden Sie eine POST-Anfrage an /books/add. Eine andere Sache - Sie durchlaufen erneut die Sammlung der zurückgegebenen Genres und zeigen jedes einzelne an.

Buch Route und Ansicht anzeigen

Lassen Sie uns in die Route eintauchen, um die an jede Buchseite gestellten Anfragen zu bearbeiten. Während Sie dort sind, ist es wichtig, auch Ihr Modul zu exportieren.

#routes/books.js

router.get('/show/:id', (req, res, next) => {
  const book = Book.findById({ _id: req.params.id })
  .populate({
    path: 'genre',
    model: 'Genre',
    populate: {
      path: 'genre',
      model: 'Book'
    }
  })
  .exec()
    .then((book) => {
      res.render('book', { book })
    })
    .catch((err) => {
      throw err
    })
})

module.exports = router;

Hier passiert keine Magie.

Erstens müssen Anforderungen an diesen Router eine ID haben: die ID des Buches. Diese ID wird aus den Parametern der Anforderung mit req.params.id abgerufen. Dies wird verwendet, um das spezifische Buch zu identifizieren, das aus der Datenbank abgerufen werden soll, da die IDs eindeutig sind. Wenn das Buch gefunden wurde, wird der Genrewert des Buches mit allen Genres gefüllt, die in dieser Buchinstanz gespeichert wurden. Wenn alles gut geht, wird die Buchansicht gerendert, andernfalls wird ein Fehler ausgegeben.

Lassen Sie uns die Ansicht für ein Buch erstellen. So sollte es aussehen.

block content
  .well.well-lg
    h1 #[strong Name:] #{book.name}
    ul
      li #[strong Description:] #{book.description}
      li #[strong Author]: #{book.author}
      li #[strong Genre:]
        each genre in book.genre
          #{genre.name}
          |,

Sie können Ihren Knotenserver starten, indem Sie Folgendes ausführen:

1	DEBUG=tutsplus-library:* npm start

Abschluss

Jetzt wissen Sie, wie Sie in Node.js eine Standard-Webanwendung erstellen, nicht nur eine einfach zu erledigende App. Sie konnten die Formularübermittlung durchführen, auf zwei Modelle verweisen und Middleware einrichten.

Sie können noch weiter gehen, indem Sie die Anwendung erweitern. Versuchen Sie, die Möglichkeit zum Löschen eines Buches hinzuzufügen. Fügen Sie zuerst eine Schaltfläche zur Show-Seite hinzu, gehen Sie dann zu den Routendateien und fügen Sie dazu einen Router hinzu. Beachten Sie, dass dies eine POST-Anforderung sein wird.

Sie können sich auch weitere Funktionen vorstellen, die Sie der Anwendung hinzufügen können. Ich hoffe, dass es Ihnen gefallen hat.