ホームページ > ウェブフロントエンド > jsチュートリアル > Connect フレームワークで接続する

Connect フレームワークで接続する

WBOY
リリース: 2023-08-29 18:41:09
オリジナル
1289 人が閲覧しました

与 Connect 框架连接

NodeJS を初めて使用する人は、その API を習得するのが難しいと感じることがよくあります。幸いなことに、多くの開発者が Node.js の操作を容易にするフレームワークを作成しました。 Connect はそのようなフレームワークです。これは Node の API の上に位置し、快適さと制御の間に境界線を引きます。

Connect をミドルウェア スタックとして考えてください。リクエストごとに、Connect はミドルウェア層を通じてフィルタリングされ、各層が HTTP リクエストを処理する機会を取得します。 T.J. Holowaychuk 氏が Connect を発表したとき、ミドルウェアには 2 種類あると述べました。 1 つ目は フィルター です。

フィルターはリクエストを処理しますが、それに応答しません (サーバーのログを考えてください)。

もう 1 つのタイプは、リクエストに応答する プロバイダー です。ミドルウェアは必要なだけ組み合わせることができ、ミドルウェアの 1 つがリクエストに応答するまで、リクエストは各層を通過します。


基本文法

まず、npm 経由で Connect パッケージをインストールする必要があります:

リーリー

次に、server.js ファイルを作成し、次のコードを追加します。 リーリー

connect 変数は、新しい Connect アプリケーションを返す関数です。したがって、次のステップはアプリケーションを作成することです: リーリー

ほとんどのアプリケーションでは、

app 変数を作成する必要はありません。アプリケーションの作成に関与する関数 (connect() および use()) はチェーン可能です: リーリー

use() 関数はアプリケーションにミドルウェア層を追加し、listen() 関数はアプリケーションに指定されたポート (この場合は 3000) の受け入れを開始するように指示します。接続オン。

単純なログ記録から始めましょう。ロギング ミドルウェアのみを使用する Connect アプリケーションのコードは非常に単純です:

リーリー

デフォルトでは、Node は受信リクエストをほとんど解析しません。

このコードをファイルに追加し、

node server.js を実行してサーバーを起動します。ブラウザで任意のパスに移動し、「Unable to get...」という結果は無視してください。私たちはサーバーがブラウザに何を送り返すかには興味がなく、サーバーのログに興味があります。ターミナルを見ると、リクエストのログが表示されます。追加機能とカスタマイズについては、ロガーのドキュメントを必ず確認してください。

これはフィルターでした。次にプロバイダーを見てみましょう。最も単純なプロバイダは静的プロバイダで、指定されたフォルダ内の静的ファイルを提供します。これがその構文です:

リーリー

Node の

__dirname 変数の目的はおそらく推測できるでしょう。これは現在のディレクトリへのパスです。このミドルウェアは、現在のディレクトリの public フォルダーにあるものすべてを静的に提供します。したがって、public/page.html を作成し、<h1> 要素を追加します。サーバー (</h1>node server.js) を再起動し、ブラウザで localhost:3000/page.html に移動します。ブラウザで page.html をレンダリングする必要があります。

次に、Connect の他のミドルウェア オプションをいくつか簡単に見てみましょう。


リクエスト本文を解析する

デフォルトでは、Node は少数の受信リクエストを解析しますが、より複雑な状況を処理する必要がある場合は、複数の異なるフィルターを組み合わせてリクエストを解析できます。 4 つのフィルターがあります:

  • connect.json() JSON リクエスト本文を解析します (content-typeapplication/json です)。
  • connect.urlencoded() x-ww-form-urlencoded リクエスト本文を解析します。
  • connect.multipart() multipart/form-data リクエストの本文を解析します。
  • connect.bodyParser() は、上記の 3 つの機能をすべて有効にするショートカットです。
これらのフィルターのいずれかを使用すると、

request.body 経由で解析された本文にアクセスできるようになります (request オブジェクトの取得方法については後ほど説明します)。

これらのフィルターは、Connect を通じてどのように詳細な制御が実現できるかを示す良い例だと思います。ほとんど処理を行わずにアプリケーションを簡素化できます。


Cookie とセッションの解析

Cookie とセッションは Web アプリケーションの重要な部分であり、それらの管理に役立つミドルウェアがいくつかあります。

connect.cookieParser() は Cookie を解析し、request.cookies オブジェクトを通じて Cookie とその値を取得できます。 connect.session() フィルターをアプリケーションに追加すると、これはさらに便利になります。このフィルタには、Cookie パーサーが配置されている必要があります。以下に小さな例を示します: リーリー

作成したすべてのミドルウェア関数は、リクエストを

next 層に渡すか、リクエストに応答する必要があります。

cookieParser の後に session フィルターを組み込み、それに 2 つのオプションを渡します。 <ul> <li> <code>secret 创建一个签名 cookie,用于跟踪会话。

  • cookie.maxAge 定义其生命周期(以毫秒为单位);此代码中的 30000 是 30 秒。
  • 在最后的 use() 调用中,我们传递一个响应请求的函数。我们使用 request 对象中的两个属性:req.session 用于会话数据,req.url 用于请求 URL。

    如果应用程序收到对 /name/some_name 的请求,则它将值 some_name 存储在 req.session.name 中。会话中存储的任何内容都可以在会话期间的后续请求中检索。对 /name/other 发出的任何请求都会替换会话变量,对其他 URL 的任何请求都会输出会话变量的值和会话剩余时间。

    因此,您可以导航到 localhost:3000/name/your_name,然后转到 localhost:3000 查看 your_name。刷新页面几次并观察秒数倒计时。当会话过期时,您将看到默认的“未存储名称”消息。

    我提到 cookieParser 过滤器必须位于 session 之前。

    包含的顺序对于中间件很重要,因为请求是按顺序从一层传递到另一层的。

    由于session需要解析后的cookie数据,因此请求必须先经过cookieParser,然后再经过session

    我可以解释所有其他内置中间件,但在我们编写自己的代码与 Connect 交互之前,我只会再提一些。

    • compress:Gzip压缩中间件
    • basicAuth:基本http认证
    • 目录:列出中间件的目录
    • errorHandler:灵活的错误处理程序

    编写自己的中间件

    您刚刚学习了如何使用 Connect 编写自己的代码。这是基本语法:

    .use(function (req, res, next) {
    
    })
    
    ログイン後にコピー

    函数的三个参数很重要;它们提供了通往外部世界的通道。 req 参数当然是请求对象,res 是响应。第三个参数 next 是使函数在中间件堆栈中正常运行的关键。它是一个将请求传递到堆栈中的下一个中间件的函数。请参阅此示例:

    connect()
        .use(function (req, res, next) {
            if (req.method === 'POST') {
                res.end("This is a POST request");
            } else {
                next();
            }
        })
        .use(function (req, res) {
            res.end("This is not a POST request (probably a GET request)");
        }).listen(3000);
    
    ログイン後にコピー

    这段代码使用了两个中间件函数。第一个函数检查请求方法以查看是否是 POST 请求。如果是,它就会这样回应。否则,我们调用 next() 并将请求传递给下一个函数,该函数无论如何都会响应。使用 curl 在终端中测试两层:

    $ curl http://localhost:3000
    This is not a POST request (probably a GET request)
    
    $ curl -X POST http://localhost:3000
    This is a POST request
    
    ログイン後にコピー

    如果您不喜欢该终端,请尝试这个有用的 Chrome 插件。

    重要的是要记住,您编写的每个中间件函数都需要将请求传递到 next 层或响应请求。如果您的函数分支(通过 if 语句或其他条件),您必须确保每个分支都会传递请求或响应请求。如果您的应用程序在浏览器中挂起,可能是因为您忘记在某个时刻调用 next()

    现在,那些 requestresponse 参数怎么样?这些与您在使用“原始”节点服务器时收到的请求和响应对象完全相同:

    require("http").createServer(function (req, res) {
        // ...
    }).listen(3000);
    
    ログイン後にコピー

    如果您以前没有使用过 Node 的服务器 API,让我向您展示可以用它做什么。


    请求对象

    request对象实际上是一个http.IncomingMessage对象,其重要属性如下::

    • req.method 告诉您使用了哪种 HTTP 方法。
    • req.url 告诉您请求的是哪个 URL。
    • req.headers 是一个包含标头名称和值的对象。
    • req.query 是一个包含查询字符串中任何数据的对象(要解析它,您需要 connect.query() 中间件)。
    • req.body 是表单数据的对象(您需要一些正文解析中间件)。
    • req.cookies是cookie数据的对象(需要cookie解析)。
    • req.session 是会话数据的对象(同样,您需要 cookie 解析和会话中间件)

    您可以使用以下代码查看所有这些工作:

    connect()
        .use(connect.query()) // gives us req.query
        .use(connect.bodyParser())  // gives us req.body
        .use(connect.cookieParser()) // for session
        .use(connect.session({ secret: "asdf" }))     // gives us req.session
        .use(function (req, res) {
            res.write("req.url: " + req.url + "\n\n");
            res.write("req.method: " + req.method + "\n\n");
            res.write("req.headers: " + JSON.stringify(req.headers) + "\n\n");
            res.write("req.query: " + JSON.stringify(req.query) + "\n\n");
            res.write("req.body: " + JSON.stringify(req.body) + "\n\n");
            res.write("req.cookies: " + JSON.stringify(req.cookies) + "\n\n");
            res.write("req.session: " + JSON.stringify(req.session));
            res.end();
        }).listen(3000);
    
    ログイン後にコピー

    要查看其中每个值的某些内容,您需要使用查询字符串将一些数据发布到 URL。以下内容应该足够了:

    curl -X POST -d "name=YourName" "http://localhost:3000/some/url?some=data"
    
    ログイン後にコピー

    通过这七个属性,您几乎可以管理收到的任何请求。我不认为经常使用预告片(根据我的经验,我从未见过它们),但是如果您希望在请求中使用预告片,则可以使用 req.trailers (预告片就像标头一样,但位于正文之后)。

    那么,你的回应呢?


    响应对象

    原始响应对象不提供库(如 Express)为您提供的便利。例如,您无法通过对预制模板的简单渲染调用来响应 - 至少默认情况下不能。响应中的假设很少,因此您需要填写所有小细节。

    我们将从状态代码和响应标头开始。您可以使用 writeHead() 方法一次性设置所有这些。以下是 Node 文档中的示例:

    var body = 'hello world';
    response.writeHead(200, {
        'Content-Length': body.length,
        'Content-Type': 'text/plain' 
    });
    
    ログイン後にコピー

    如果需要单独设置header,可以使用setHeader()方法:

    connect()
        .use(function (req, res) {
            var accept = req.headers.accept.split(","),
                body, type;
                console.log(accept);
            if (accept.indexOf("application/json") &gt; -1) {
                type = "application/json";
                body = JSON.stringify({ message: "hello" });
            } else if (accept.indexOf("text/html") &gt; -1) {
                type = "text/html";
                body = "<h1> Hello! </h1>";
            } else {
                type = "text/plain";
                body = "hello!";
            }
            res.statusCode = 200;
            res.setHeader("Content-Type", type);
            res.end(body);
        }).listen(3000);
    
    ログイン後にコピー

    将此代码添加到文件中,启动服务器并从浏览器请求它。你有 HTML!现在运行:

    curl http://localhost:3000
    
    ログイン後にコピー

    您将收到纯文本。对于 JSON,请尝试以下操作:

    curl -H "accept:application/json" http://localhost:3000
    
    ログイン後にコピー

    全部来自同一个 URL!

    如果您需要知道已经设置了哪些标头,请使用 res.getHeader(name) 。您还可以使用 res.removeHeader(name) 删除标头。

    当然,没有正文的响应是没有用的。正如您在本教程中所看到的,您可以使用 res.write() 方法将数据块写入正文。它接受字符串或缓冲区对象作为参数。如果是字符串,第二个参数是编码类型(默认为utf8)。

    res.end() 方法关闭主体,但您可以向其传递数据以写入响应流。这在您只需要输出一行的情况下非常有用。


    第三方中间件

    在普通的旧 Node 和 Connect 中响应较大的 HTML 主体有些困难。这是将第三方中间件加入其中的好地方。您可以在 Connect Github wiki 上找到第三方中间件的列表。例如,我们将使用 connect-jade 包,它允许我们渲染 jade 视图。

    首先,安装connect-jade

    npm install connect-jade
    
    ログイン後にコピー

    接下来,需要并将其添加为中间件。您需要设置一些默认值:

    var connect = require("connect"),
        connectJade = require("connect-jade");
    
    connect()
        .use(connectJade({
            root: __dirname + "/views",
            defaults: {
                title: "MyApp"
            }
        }))
        .use(function (req, res) {
            res.render("index", { heading: "Welcome to My App" });
        }).listen(3000);
    
    ログイン後にコピー

    将根目录设置为包含视图文件的目录。您还可以设置 defaults;这些是每个视图中可用的变量,除非我们稍后在调用 render() 时覆盖它们。

    此代码中的最后一个函数调用 res.render()。该方法由 connect-jade 包提供。

    它接受的第一个参数是要渲染的视图的名称。

    它是视图的路径,我们在添加中间件时定义的路径, jade 文件扩展名。对于这段代码,我们需要一个 views/index.jade 模板来渲染。我们会保持简单:

    html
      head
        title= title
      body
        h1= heading
    
    ログイン後にコピー

    如果您不熟悉jade,我们会缩进标签名称来创建HTML 结构。等号检索 JavaScript 变量的值。这些变量来自我们设置的 defaults ,加上传递给 res.render() 的(可选)第二个参数对象。

    还有许多其他第三方中间件,但它们的工作原理彼此相似。您可以通过 npm 安装它们、需要它们并将它们付诸实践。


    模块作为中间件

    如果你深入研究 Connect 的工作原理,你会发现每一层实际上都是一个 Node 模块——这是一个非常智能的设计。如果您将 Connect 用于大型应用程序,那么以 Node 模块格式编写代码将是理想的选择。您可能有一个 app.js 文件,如下所示:

    // app.js
    module.exports = function (req, res, next) {
        res.end("this comes from a module");
    };
    
    ログイン後にコピー

    在你的 server.js 中:

    var connect = require("connect"),
        app = require("./app");
    
    connect()
        .use(app)
        .listen(3000);
    
    ログイン後にコピー

    结论

    如果您想要一个适合初学者的库来轻松构建大型 Web 应用程序,那么 Connect 不是您的解决方案。 Connect 旨在成为原始 Node API 之上的一个薄层,让您可以完全控制服务器应用程序。如果你想要更多,我推荐 Express(顺便说一下,是同一个人做的)。除此之外,Connect 是一个出色的、可扩展的 Node Web 应用程序库。

    以上がConnect フレームワークで接続するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート