Express.js + Bootstrap: Tutorial zur Entwicklung von Webanwendungen

In den letzten Beiträgen haben wir etwas über die erstellte REST-API und die Authentifizierung bei Twitter mithilfe von Express.js gesehen. In diesem Beitrag sehen wir, wie wir Webanwendungen erstellen können, indem wir das Bootstrap CSS Framework mit Express.js verwenden. Wenn Sie daran interessiert sind, das Bootstrap-Framework kennenzulernen, lesen Sie bitte unsere ausführlichen Tutorials zum Bootstrap-CSS-Framework. Lesen Sie auch dieses Tutorial, um die Bootstrap-Umgebung in Ihrem lokalen System einzurichten.

Express ist ein führendes Webanwendungs-Framework für die Entwicklung von Webanwendungen mithilfe der Node.js-Pakete. Die Installation mit npm ist einfach und der Einstieg in einfache Anwendungen ist problemlos möglich.

Bootstrap ist das beliebteste HTML-, CSS- und JS-Framework für die Entwicklung reaktionsfähiger, mobiler Projekte im Web.

Dieses Tutorial ist eine einfache Schritt-für-Schritt-Anleitung zum Entwickeln einer Webanwendung mit Express.js und Bootstrap als UI-Framework.

  • Bootstrap vs. Foundation

Webanwendungsentwicklung mit Express.js + Bootstrap

äußern

Statische Dateien von Express.js bereitstellen

Schauen wir uns an, wie wir statische Dateien, d. h. Ihre CSS-, Javascript- und Bilddateien, vom Express.js-Server bereitstellen können. Express stellt eine spezielle Middleware zur Verfügung express.static dafür. Wir übergeben das Stammverzeichnis mit den statischen Dateien an den express.static Middleware. Wir können auch eine URL an dieses Stammverzeichnis binden (Lesen Sie auch : Statische Dateien in Express bereitstellen). Der folgende Code zeigt diese Integrationen:

var express = require('express');

//NPM Module to integrate Handlerbars UI template engine with Express
var exphbs  = require('express-handlebars');

var app = express();

//Declaring Express to use Handlerbars template engine with main.handlebars as
//the default layout
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

//Defining middleware to serve static files
app.use('/static', express.static('public'));

Die statischen Dateien, also CSS-, Javascript- und Bilddateien, werden im öffentlichen Ordner abgelegt.

Schauen wir uns die Erstellung einiger Ansichtsvorlagen an.

Layoutvorlage mit Bootstrap

Im Allgemeinen gibt es eine Layoutvorlage oder eine Basisvorlage, die die Kopf- und Fußzeilen, die CSS-Verknüpfung und die Javascript-Verknüpfung definiert, und diese Layout-/Basisvorlage wird von allen anderen Ansichtsvorlagen wiederverwendet ODER mit anderen Worten: Die Basisvorlage enthält die Ausgabe aller anderen Ansichten Vorlagen.

Da wir Bootstrap verwenden würden, müssten Sie Bootstrap-bezogenes CSS, Javascript, Bilder und andere statische Dateien herunterladen. Sie können es herunterladen unter Hier.

Nachfolgend sehen Sie unsere Verzeichnisstruktur für dieses Beispiel:

|--express_bootstrap.js
|--public
  |--css
  |--fonts
  |--js
|--views
  |--home.handlebars
  |--layouts
    |--main.handlebars

Der Inhalt des öffentlichen Ordners oben ist der Inhalt der heruntergeladenen Bootstrap-Dateien.

Der Code für main.handlebars ist unten angegeben. Bitte lesen Sie unseren vorherigen Artikel über die Twitter-Anmeldung, in dem erklärt wird, wie Sie die Handlebars-Template-Engine verwenden:

<!-- Filename: main.handlebars -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/static/css/bootstrap.css" media="screen" charset="utf-8">
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>
    <div  >
      {{{body}}}
    </div>
    <script src="/static/js/jquery.js" charset="utf-8"></script>
    <script src="/static/js/bootstrap.js" charset="utf-8"></script>
</body>
</html>

Oben sehen Sie, wie die CSS- und Javascript-Dateien aus dem Bootstrap konfiguriert sind. Beachten Sie auch, dass die URL der statischen Dateien mit /static beginnt. Dies haben wir in unserer express.js-Middleware definiert.

Erstellen einer der Ansichtsvorlagen mit Bootstrap

Twitter-Bootstrap

Jetzt müssen wir eine Ansichtsvorlage erstellen, die von unserer Node.js-Anwendung verwendet wird. Der Vorlagenname ist home.handlebars und unten ist der Code dafür:

<div  >
  <div  >
    <h1>Home</h1>
  </div>
</div>

<div  >
  <div  >
    <p>This is Column 1</p>
  </div>
  <div  >
    <p>
      This is Column 2
    </p>
  </div>
  <div  >
    <p>
      This is Column 3
    </p>
  </div>
</div>

Sie können oben sehen, dass ich CSS-Klassen von verwende Bootstrap.

Express.js-Server

Sehen wir uns nun an, wie wir den express.js-Code schreiben können, um die oben erstellte Vorlage „home.handlebars“ zu rendern, und dann die express.js-Middleware konfigurieren, um statische Dateien in unserem öffentlichen Ordner bereitzustellen.

//Filename: express_bootstrap.js
var express = require('express');

//NPM Module to integrate Handlerbars UI template engine with Express
var exphbs  = require('express-handlebars');

var app = express();

//Declaring Express to use Handlerbars template engine with main.handlebars as
//the default layout
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

//Defining middleware to serve static files
app.use('/static', express.static('public'));

app.get("/home", function(req, res){
  res.render("home")
});

app.listen(3000, function(){
  console.log('Server up: http://localhost:3000');
});

Führen Sie den oben genannten Server mit dem Befehl aus node express_bootstrap.js erzeugt einen Server auf Port 3000. Wenn Sie zu http://localhost:3000/home navigieren, wird eine Webseite angezeigt, die etwa der folgenden ähnelt:

Zusammenfassung

Dieses Tutorial hilft Ihnen, die grundlegenden Konzepte zum Erstellen einer einfachen Webanwendung mithilfe der Frameworks Express.js und Bootstrap zu verstehen. Beachten Sie, dass dies Ihnen möglicherweise nicht dabei hilft, große Projekte zu erstellen, aber dies sind die grundlegenden Bausteine, um mehr über das ExpressJS-Framework und die Bootstrap-Integration zu erfahren. Wenn Sie nach einer Möglichkeit suchen, Express.js (ExpressJS) und Bootstrap zu integrieren, hilft Ihnen dieses Tutorial. Wenn Sie Fragen haben, schreiben Sie diese bitte in den Kommentarbereich.

Buchreferenz: Webentwicklung mit Node und Express

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen