ホームページ > 記事 > ウェブフロントエンド > Node.js_node.js の Express フレームワークの使用に関する入門ガイド
Express の概要
npm は、この章で説明する軽量 Web フレームワークである Express などの多くの Web フレームワークを含む、多数のサードパーティ モジュールを提供します。
Express は、シンプルで柔軟な Node.js Web アプリケーション開発フレームワークであり、テンプレート解析、静的ファイル提供、ミドルウェア、ルーティング制御などの一連の強力な機能を提供し、プラグインも使用できます。他のモジュールは、さまざまな Web およびモバイル デバイス アプリケーションの作成に役立ちます。Node.js に基づく現在最も人気のある Web 開発フレームワークであり、Ejs、jade、およびその他のテンプレートをサポートしているため、完全な機能を備えた Web サイトを迅速に構築できます。
さて、始めましょう!
1. NPM のインストール
npm install express
2.
を取得して引用します。var express = require('express'); var app = express();
変数「app」を通じて、さまざまな表現方法を呼び出すことができます。楽しみはまだ始まったばかりです。頑張ってください。
アプリケーションを作成する
Express フレームワークを理解した後、最初の Express アプリケーションの作成を開始しました。
次のコンテンツをデフォルトのプロジェクトのメインファイル app.js に追加します:
var express = require('express'); var app = express(); app.get('/', function (request, response) { response.send('Hello World!'); }); app.listen(80);
注: 次のコースでは、ポート 80 を使用してリクエストをリッスンします。
追加後、右側の列の「テストアドレス」でブラウザの内容を確認し、「Hello World!」の内容が表示されたら、簡単な高速アプリケーションが正常に作成されたことを意味します。
リクエストを取得
先ほどは簡単な Express アプリケーションを実装しました。次に、その具体的な実装について詳しく説明します。まず、Express の一般的なメソッドを学びましょう。
get メソッド - リクエスト パスに従ってクライアントによって発行された GET リクエストを処理します。
形式:
app.get(path,function(request, response));
path はリクエストのパス、2 番目のパラメータはリクエストを処理するためのコールバック関数です。パラメータはリクエストとレスポンスの 2 つで、リクエスト情報とレスポンス情報を表します。
以下の例:
var express = require('express'); var app = express(); app.get('/', function(request, response) { response.send('Welcome to the homepage!'); }); app.get('/about', function(request, response) { response.send('Welcome to the about page!'); }); app.get("*", function(request, response) { response.send("404 error!"); }); app.listen(80);
上記例では、ページパス、ルートパス、全パスについての処理方法を指定しています。そして、コールバック関数内で、HTTP 応答の send メソッドを使用して文字列をブラウザに送信します。
上記のコードを参照して、get リクエストのパスを自分で設定し、ブラウザからそのアドレスにアクセスしてリクエストが成功するかどうかを確認してください。
ミドルウェアc82a283a3edc00d144f66423713963f4
1. ミドルウェアとは何ですか?
ミドルウェアは、HTTP リクエストを処理する機能であり、ユーザーがログインしているかどうかの確認、データの分析、データが最終的にユーザーに送信される前に完了する必要があるその他のタスクなど、さまざまな特定のタスクを完了するために使用されます。 。 最大の特徴は、あるミドルウェアが処理した後、対応するデータを次のミドルウェアに引き継げることです。
2. 操作を実行せず、リクエスト オブジェクトのみを渡すミドルウェア。おそらく次のとおりです。
function Middleware(request, response, next) { next(); }
上記のコードの次は、ミドルウェアのコールバック関数です。パラメーターを受け取る場合は、エラーがスローされることを意味し、パラメーターはエラー テキストになります。
function Middleware(request, response, next) { next('出错了!'); }
エラーがスローされると、エラー処理関数が見つかるまで、後続のミドルウェアは実行されなくなります。次のメソッドが呼び出されないと、後から登録された関数は実行されません。
全機能の基本的な使い方
get 関数とは異なり、app.all() 関数はすべての HTTP 動詞に一致します。つまり、all 関数を使用してミドルウェアを定義する場合、すべてのリクエストが通過する必要があることを意味します。まずはミドルウェア。
形式:
app.all(path,function(request, response));
以下に示すように、all 関数を使用して、リクエストの前にレスポンス ヘッダー属性を設定します。
var express = require("express"); var app = express(); app.all("*", function(request, response, next) { response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); //设置响应头属性值 next(); }); app.get("/", function(request, response) { response.end("欢迎来到首页!"); }); app.get("/about", function(request, response) { response.end("欢迎来到about页面!"); }); app.get("*", function(request, response) { response.end("404 - 未找到!"); }); app.listen(80);
上記のコード パラメーターの「*」は、すべてのパスに対して有効であることを意味します。このメソッドは、どのパスを要求しても、すべてのパスを処理するときに特に便利です。あらかじめ。
表示されている場合、すべての機能をスキップするとどうなりますか? 実際に試してみてください。
基本的な使い方 1
use は Express のミドルウェア呼び出しメソッドであり、関数を返します。
形式:
app.use([path], function(request, response, next){}); //可选参数path默认为"/"。
1. ミドルウェアを使用する
app.use(express.static(path.join(__dirname, '/')));
上記と同様に、use 関数を使用して Express ミドルウェアを呼び出し、静的ファイル ディレクトリ (ここではルート パスであると仮定します) へのアクセス パスを設定します。
2. 次の例に示すように、2 つのミドルウェアを連続して呼び出す方法:
var express = require('express'); var app = express(); app.use(function(request, response, next){ console.log("method:"+request.method+" ==== "+"url:"+request.url); next(); }); app.use(function(request, response){ response.writeHead(200, { "Content-Type": "text/html;charset=utf-8" }); response.end('示例:连续调用两个中间件'); }); app.listen(80);
回调函数的next参数,表示接受其他中间件的调用,函数体中的next(),表示将请求数据传递给下一个中间件。
上面代码先调用第一个中间件,在控制台输出一行信息,然后通过next(),调用第二个中间件,输出HTTP回应。由于第二个中间件没有调用next方法,所以req对象就不再向后传递了。
use基本用法2
use方法不仅可以调用中间件,还可以根据请求的网址,返回不同的网页内容,如下示例:
var express = require("express"); var app = express(); app.use(function(request, response, next) { if(request.url == "/") { response.send("Welcome to the homepage!"); }else { next(); } }); app.use(function(request, response, next) { if(request.url == "/about") { response.send("Welcome to the about page!"); }else { next(); } }); app.use(function(request, response) { response.send("404 error!"); }); app.listen(80);
上面代码通过request.url属性,判断请求的网址,从而返回不同的内容。
回调函数
Express回调函数有两个参数,分别是request(简称req)和response(简称res),request代表客户端发来的HTTP请求,request代表发向客户端的HTTP回应,这两个参数都是对象。示例如下:
function(req, res) { });
在后面的学习中,我们会经常和它打交道,牢牢记住它的格式吧!
获取主机名、路径名
今天我们就先来学习如何使用req对象来处理客户端发来的HTTP请求。
req.host返回请求头里取的主机名(不包含端口号)。
req.path返回请求的URL的路径名。
如下示例:
var express = require('express'); var app = express(); app.get("*", function(req, res) { console.log(req.path); res.send("req.host获取主机名,req.path获取请求路径名!"); }); app.listen(80);
试一试在浏览器中输入任意一个请求路径,通过req查看主机名或请求路径。
query基本用法
query是一个可获取客户端get请求路径参数的对象属性,包含着被解析过的请求参数对象,默认为{}。
var express = require('express'); var app = express(); app.get("*", function(req, res) { console.log(req.query.参数名); res.send("测试query属性!"); }); app.listen(80);
通过req.query获取get请求路径的对象参数值。
格式:req.query.参数名;请求路径如下示例:
例1: /search?n=Lenka
req.query.n // "Lenka"
例2: /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
req.query.order // "desc" req.query.shoe.color // "blue" req.query.shoe.type // "converse"
试一试get请求一个带参数路径,使用“req.query.参数名”方法获取请求参数值。
param基本用法
和属性query一样,通过req.param我们也可以获取被解析过的请求参数对象的值。
格式:req.param("参数名");请求路径如下示例:
例1: 获取请求根路径的参数值,如/?n=Lenka,方法如下:
var express = require('express'); var app = express(); app.get("/", function(req, res) { console.log(req.param("n")); //Lenka res.send("使用req.param属性获取请求根路径的参数对象值!"); }); app.listen(80);
例2:我们也可以获取具有相应路由规则的请求对象,假设路由规则为 /user/:name/,请求路径/user/mike,如下:
app.get("/user/:name/", function(req, res) { console.log(req.param("name")); //mike res.send("使用req.param属性获取具有路由规则的参数对象值!"); });
PS:所谓“路由”,就是指为不同的访问路径,指定不同的处理方法。
看了上面的示例,试一试使用req.param属性解析一个请求路径对象,并获取请求参数值。
params基本用法
和param相似,但params是一个可以解析包含着有复杂命名路由规则的请求对象的属性。
格式:req.params.参数名;
例1. 如上课时请求根路径的例子,我们就可以这样获取,如下:
var express = require('express'); var app = express(); app.get("/user/:name/", function(req, res) { console.log(req.params.name); //mike res.send("使用req.params属性获取具有路由规则的参数对象值!"); }); app.listen(80);
查看运行结果,和param属性功能是一样的,同样获取name参数值。
例2:当然我们也可以请求复杂的路由规则,如/user/:name/:id,假设请求地址为:/user/mike/123,如下:
app.get("/user/:name/:id", function(req, res) { console.log(req.params.id); //"123" res.send("使用req.params属性复杂路由规则的参数对象值!"); });
对于请求地址具有路由规则的路径来说,属性params比param属性是不是又强大了那么一点点呢!
send基本用法
send()方法向浏览器发送一个响应信息,并可以智能处理不同类型的数据。格式如下: res.send([body|status], [body]);
1.当参数为一个String时,Content-Type默认设置为"text/html"。
res.send('Hello World'); //Hello World
2.当参数为Array或Object时,Express会返回一个JSON。
res.send({ user: 'tobi' }); //{"user":"tobi"} res.send([1,2,3]); //[1,2,3]
3.当参数为一个Number时,并且没有上面提到的任何一条在响应体里,Express会帮你设置一个响应体,比如:200会返回字符"OK"。
res.send(200); // OK res.send(404); // Not Found res.send(500); // Internal Server Error
send方法在输出响应时会自动进行一些设置,比如HEAD信息、HTTP缓存支持等等。