Heim > Web-Frontend > js-Tutorial > Hauptteil

Nodejs lernen: Express-Einstieg und Grundlagen

青灯夜游
Freigeben: 2018-09-12 17:10:56
Original
1352 Leute haben es durchsucht

Dieses Kapitel führt Sie in die Einführung und die Grundkenntnisse des Lernens von nodejs: express ein. Was ist also Express? Express ist ein Webentwicklungs-Framework mit minimalen Funktionen und besteht vollständig aus Routing und Middleware: Im Wesentlichen ruft eine Express-Anwendung verschiedene Middleware auf. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Initialisierung

Neues Verzeichnis myapp erstellen, Projektinitialisierung

$ npm init
Nach dem Login kopieren

Express installieren

$ npm install express --save
Nach dem Login kopieren

Erstellen Sie eine Hallo-Welt-Instanz

Geben Sie das myapp-Verzeichnis ein und erstellen Sie eine Datei mit dem Namen app.js

var express = require('express');
var app = express();

app.get('/', function(req, res) {
	res.send('Hello World!');
});

var server = app.listen(3000, function() {
	var host = server.address().address;
	var port = server.address().port;

	console.log('Example app listening at http://%s:%s', host, port);
});
Nach dem Login kopieren

Der obige Code startet einen Dienst und lauscht von Port 3000 Alle eingehenden Verbindungsanfragen. Es wird die Zeichenfolge „Hello World!“ an alle (/) URLs oder Routen zurückgegeben. Alle anderen Pfade geben 404 Nicht gefunden zurück.

Starten Sie über die folgende Befehlszeile

$ node app.js
Nach dem Login kopieren

Express-Generator

Mit dem Anwendungsgenerator-Tool können Sie schnell eine Anwendung erstellen Express-Skelett.

1. Installieren Sie den folgenden Befehl

$ npm install express-generator -g
Nach dem Login kopieren

2. Erstellen Sie eine myapp-Anwendung im aktuellen Verzeichnis und führen Sie den folgenden Befehl aus:

$ express myapp
$ cd myapp 
$ npm install> set DEBUG=myapp & npm start
Nach dem Login kopieren

Über den Express-Anwendungsgenerator erstellte Anwendungen die folgende Verzeichnisstruktur:

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files
Nach dem Login kopieren

Express-Routing

Routing besteht aus einem URI (oder Pfad) und einer bestimmten HTTP-Methode ( GET, B. POST usw.), geht es darum, wie die Anwendung auf den Zugriff des Clients auf einen Website-Knoten reagiert. Jede Route kann eine oder mehrere Prozessorfunktionen haben. Wenn eine Route übereinstimmt, werden diese Funktionen/Funktionen ausgeführt.

Die Definition der Route besteht aus der folgenden Struktur: app.METHOD(PATH, HANDLER). Unter diesen ist app eine Express-Instanz; METHOD ist eine der HTTP-Anforderungsmethoden; HANDLER ist die Funktion, die ausgeführt werden muss, wenn die Route übereinstimmt.

Hier sind einige gängige Routing-Codes:

var express = require('express');
var app = express();

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function(req, res) {
  res.send('hello world');
});

// POST method route
app.post('/', function (req, res) {
  res.send('POST request to the homepage');
});
//app.all() 是一个特殊的路由方法,没有任何 HTTP 方法与其对应,它的作用是对于一个路径上的所有请求加载中间件。
app.all('/secret', function (req, res, next) {
  console.log('Accessing the secret section ...');
  next(); // pass control to the next handler
});
Nach dem Login kopieren

Beispiel für Routing-Pfade mit Zeichenfolgenmustern: Die Zeichen ?, +, * und () sind eine Teilmenge der regulären Ausdrücke, - und in stringbasierten Pfaden.

// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
  res.send('ab?cd');
});

// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});

// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});

// 匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
 res.send('ab(cd)?e');
});

//使用正则表达式的路由路径示例:
// 匹配任何路径中含有 a 的路径:
app.get(/a/, function(req, res) {
  res.send('/a/');
});

// 匹配 butterfly、dragonfly,不匹配 butterflyman、dragonfly man等
app.get(/.*fly$/, function(req, res) {
  res.send('/.*fly$/');
});
Nach dem Login kopieren

Route handle

kann mehrere Rückruffunktionen für die Anforderungsverarbeitung bereitstellen, die sich wie Middleware verhalten. Der einzige Unterschied besteht darin, dass diese Callback-Funktionen möglicherweise die next('route')-Methode aufrufen und andere Route-Callback-Funktionen überspringen.

Routenhandles gibt es in vielen Formen. Sie können eine Funktion, ein Array von Funktionen oder eine Mischung aus beiden sein, wie unten gezeigt:

//使用多个回调函数处理路由(记得指定 next 对象):
app.get('/example/b', function (req, res, next) {
  console.log('response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from B!');
});

//使用回调函数数组处理路由:
var cb0 = function (req, res, next) {
  console.log('CB0');
  next();
}
var cb1 = function (req, res, next) {
  console.log('CB1');
  next();
}
var cb2 = function (req, res) {
  res.send('Hello from C!');
}
app.get('/example/c', [cb0, cb1, cb2]);
Nach dem Login kopieren

Antwortmethode

Die Methoden des Antwortobjekts (res) in der Tabelle unten geben eine Antwort an den Client zurück und beenden so den Anfrage-Antwort-Zyklus. Wenn im Routenhandle keine Methode aufgerufen wird, bleiben Anfragen vom Client hängen.

Methodenbeschreibung:
res.download() fordert zum Herunterladen der Datei auf.
res.end() beendet den Antwortverarbeitungsprozess.
res.JSON() sendet eine Antwort im JSON-Format.
res.jsonp() sendet eine Antwort im JSON-Format, das JSONP unterstützt.
res.redirect() leitet die Anfrage um.
res.render() rendert die Ansichtsvorlage.
res.send() sendet verschiedene Arten von Antworten.
res.sendFile sendet eine Datei als Oktett-Stream.
res.sendStatus() legt den Antwortstatuscode fest und sendet ihn als Zeichenfolge als Teil des Antworttexts.

app.route()

Sie können app.route() verwenden, um ein verkettetes Routenhandle für einen Routingpfad zu erstellen. Da der Pfad an einer Stelle angegeben wird, hilft dies beim Erstellen eines modularen Routings und reduziert Coderedundanz und Tippfehler.

app.route('/book')
  .get(function(req, res) {    res.send('Get a random book');
  })
  .post(function(req, res) {    res.send('Add a book');
  })
  .put(function(req, res) {    res.send('Update the book');
  });
Nach dem Login kopieren

express.Router

Verwenden Sie die express.Router-Klasse, um modulare, montierbare Routenhandler zu erstellen. Eine Router-Instanz ist ein vollständiges Middleware- und Routing-System und wird daher oft als „Mini-App“ bezeichnet.

Erstellen Sie im App-Verzeichnis eine Datei namens „birds.js“ mit folgendem Inhalt:

var express = require('express');
var router = express.Router();
// 该路由使用的中间件
router.use(
	function timeLog(req, res, next) {
		console.log('Time: ', Date.now());
		next();
	});
// 定义网站主页的路由
router.get('/', function(req, res) {
	res.send('Birds home page');
});
// 定义 about 页面的路由
router.get('/about', function(req, res) {
	res.send('About birds');
});
module.exports = router;
Nach dem Login kopieren

Laden Sie dann das Routing-Modul in die Anwendung:

var birds = require('./birds');
...
app.use('/birds', birds);
Nach dem Login kopieren

Die Anwendung kann die verarbeiten Nachrichten, die von /birds- und /birds/about-Anfragen gesendet werden, und ruft die für diese Route angegebene timeLog-Middleware auf.

Verwenden Sie Express, um statische Dateien zu hosten

Mit Express können Sie problemlos statische Dateien wie Bilder, CSS- und JavaScript-Dateien hosten -in express.static warten.

Die Übergabe des Verzeichnisses, in dem sich die statischen Ressourcendateien befinden, als Parameter an die express.static-Middleware kann Zugriff auf statische Ressourcendateien ermöglichen. Wenn Sie beispielsweise Bilder, CSS- und JavaScript-Dateien im öffentlichen Verzeichnis ablegen, können Sie Folgendes tun:

app.use(express.static('public'));
Nach dem Login kopieren

Jetzt sind die Dateien im öffentlichen Verzeichnis zugänglich.

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
Nach dem Login kopieren

Wenn Ihre statischen Ressourcen in mehreren Verzeichnissen gespeichert sind, können Sie die express.static-Middleware mehrmals aufrufen:

app.use(express.static('public'));
app.use(express.static('files'));
Nach dem Login kopieren

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟(virtual)”目录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,如下所示:

app.use('/static', express.static('public'));
Nach dem Login kopieren

现在,你就爱可以通过带有 “/static” 前缀的地址来访问 public 目录下面的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html
Nach dem Login kopieren

常见问题

如何处理 404 ?

在 Express 中,404 并不是一个错误(error)。因此,错误处理器中间件并不捕获 404。这是因为 404 只是意味着某些功能没有实现。也就是说,Express 执行了所有中间件、路由之后还是没有获取到任何输出。你所需要做的就是在其所有他中间件的后面添加一个处理 404 的中间件。如下:

app.use(function(req, res, next) {  
res.status(404).send('Sorry cant find that!');
});
Nach dem Login kopieren

Express 支持哪些模板引擎?

Express 支持任何符合 (path, locals, callback) 接口规范的模板引擎。

如何渲染纯 HTML 文件?

不需要!无需通过 res.render() 渲染 HTML。你可以通过 res.sendFile() 直接对外输出 HTML 文件。如果你需要对外提供的资源文件很多,可以使用 express.static() 中间件。

Das obige ist der detaillierte Inhalt vonNodejs lernen: Express-Einstieg und Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!