ホームページ  >  記事  >  ウェブフロントエンド  >  Nodejs ルーティングとコントローラーの使用

Nodejs ルーティングとコントローラーの使用

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-16 14:34:493048ブラウズ

今回は、Nodejs ルーティングとコントローラーの使用方法について説明します。Nodejs ルーティングとコントローラーを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

仕事の必要により、最近再びノードを学びました。最後にノードを学んだのは 2014 年でした。基本を学んだ後は、他のプロジェクトで忙しかったので、まったく個人的な興味がありました。今回はそれを拾っただけです。早速ですが、ここでの MEAN は Mongodb、Express、Angular、Node を指します。 プロジェクト全体を通して、段階的に団結していきます。 MEAN スタックの最大の特徴は、どのフレームワークやサードパーティが使用されているかではなく、フロントエンドとバックエンドの両方が同じ言語、つまり

JavaScript を使用していることです。私も最初の頃は、このページで DOM を操作するために使用されるスクリプト言語がバックエンドにこれほど多くのモジュールを実装できるだろうかと考えていました。しかし、疑問に思ったので、このシリーズの記事を書く前に、それについてもっと学ぶことにしました。

Mongodbはデータストレージに使用され、Expressはノードベースのバックエンドフレームワーク、Angularはフロントエンドフレームワーク、Nodeはバックエンドオペレーティング環境です。インストールプロセスとノードの機能については説明しません。オンラインにはたくさんの機能があります。開発環境はVS2013

NTVSがインストールされています。ノードのインストール後、環境変数の設定が必要になる場合があります。 cmd ディレクトリに「node -v」と入力すると、バージョン番号が表示され、インストールが正しいことを意味します。

プロジェクトを開始します

VS で新しいプロジェクトを作成し、JavaScript -->Node.js を選択し、Express4 アプリケーションを選択します。

常に Ctrl+C を押すのを避けるために、nodemon をインストールしてファイルを更新します。 -g はグローバルにインストールすることを意味します。

npm install nodemon -g
routesフォルダー下のindex.jsのタイトルをReadingClubに変更します。次に、cmd を使用してプロジェクト ディレクトリに切り替え、「nodemon」と入力してプロジェクトを開始します。

ブラウザで lochost:3000 にアクセスして、正常に開きます:

まず、routes フォルダーの下にあるindex.js を確認します。これは、単純なルートです。これは、「/」とリクエスト メソッドです。 get と req はリクエストを表し、res はレスポンスを表します。

render メソッドには、レンダリングされるビュー テンプレートの名前を表す 2 つのパラメーター「index」があり、ここでのデフォルトのビュー エンジンは jade で、次の {title:'ReadingClub'} が渡されるデータ モデルです。ビューに。これは Asp.net MVC の return View() に似ており、ここでの関数は Asp.net MVC のコントローラーのアクションに相当します。 View() のデフォルトは、現在のアクション名に対応するビューです。また、renderを指定する必要があります。

res は直接応答を返すこともできます

res.send('respond with a resource');
コントローラーの作成

デフォルトのルーティング ルールがある Asp.net MVC とは異なり、エクスプレス ルーティングは 1 つずつ構成する必要があるため、コントローラーを起動することもできます。その前に、まずディレクトリを変更しましょう。以下のように、app_serverフォルダーを作成します。これは、コントローラー、ビュー、ルートに分かれています。元のビューとルートを直接そこに移動できます。

controllers フォルダーに新しい home.js を作成し、index、books、about の 3 つのメソッドを追加します。

module.exports.index = function(req, res) {
    res.render('index', { title: 'Index' });
};module.exports.books = function(req, res) {
    res.render('books', { title: 'Books', });
};
module.exports.about = function (req, res) {
    res.render('about', { title: 'About' });
};
Routing

同様に、view フォルダーにindex.jadeを2回コピーし、books.jadeとabout.jadeに変更します。次に、routesの下にあるindex.jsを変更し、Expressフレームワークに付属のRouterを使用します。

var express = require('express');var router = express.Router();var homeController = require('../controllers/home');router.get('/', homeController.index);
router.get('/about', homeController.about);
router.get('/books', homeController.books);module.exports = router;

ディレクトリ構造を変更し、app.jsでリセットしていないため、現時点ではまだ実行できません。まずルーティングを設定します:

var routes = require('./app_server/routes/index');
app.use('/', routes);
ビューエンジンの開始位置を変更します

//app.set('views', path.join(dirname, 'views'));app.set('views', path.join(dirname, 'app_server', 'views'));
dirnameはルートディレクトリを表します。次に、ブラウザで /books または /about にアクセスします。

 这样就分离了controller,请求通过路由抵达控制器,控制器将模型数据填充到对应的视图的模板.这就是我们熟悉的MVC模式。我们再看router.METHOD方法定义。

router.METHOD(path, [callback, ...] callback)

这里的METHOD指get,post,put和delete等。因为我们可以定义:

router.get('/book/:bookId', homeController.detail);
router.put('/book/:bookId', homeController.updateBook);
router.delete('/book/:bookId', homeController.deleteBook);

虽然路径都是一样,但是代表的是不同的用意,完全restful,:bookId表示是参数。

同样支持正则匹配,会匹配类似于这样的‘GET /commits/71dbb9c’

router.get(/^\/commits\/(\w+)(?:\.\.(\w+))?$/, function(req, res){  var from = req.params[0];  var to = req.params[1] || 'HEAD';
  res.send('commit range ' + from + '..' + to);
});

如果每个请求都需要做某种处理,可以用all方法:

router.all('*', requireAuthentication, loadUser);

这等价于:

router.all('*', requireAuthentication)
router.all('*', loadUser);

Asp.net MVC的路由每一个都需要设置名称,且不能重复出现,且匹配到之后就不再匹配,Express没有这个限制,匹配到之后只要没返回响应就会向下继续传递。相对而言,Express的Router更灵活一些。

更多细节请参考官方API:http://www.expressjs.com.cn/4x/api.html#router

接下来我们回顾下整个app.js。

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');var routes = require('./app_server/routes/index');var app = express();// view engine setupapp.set('views', path.join(dirname, 'app_server', 'views'));
app.set('view engine', 'jade');// uncomment after placing your favicon in /public//app.use(favicon(dirname + '/public/favicon.ico'));app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(require('stylus').middleware(path.join(dirname, 'public')));
app.use(express.static(path.join(dirname, 'public')));
app.use('/', routes);// catch 404 and forward to error handlerapp.use(function (req, res, next) {    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});// error handlers// development error handler// will print stacktraceif (app.get('env') === 'development') {
    app.use(function (err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}// production error handler// no stacktraces leaked to userapp.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
module.exports = app;

View Code

1.模块定义:

首先看到很多的require的语法。

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');var routes = require('./app_server/routes/index');

require表示应用一个模块,npm上已经有超过25万个包。这些能直接引用的模块,是已经安装在node_modules文件中。如果是自己定义的模块,比如routes 就要用相对路径。在node中模块分以下几类:

  • 核心模块,如http,fs,path等

  • .或..开始的相对路径文件模块

  • 以/开始的绝对路径文件模块

  • 非路径形式的文件模块,如自定义的模块。

核心模块会优先加载,以相对或绝对路径加载的模块,require都会转为真实路径,将编译执行后的结果放到缓存中,这样二次加载就会更快。require能加载.js,.node.json的文件,其余扩展名都会被当.js文件载入。模块与文件是一一对应的,一个文件夹的模块就称作包,包通常是一些模块的集合。require是用来获取模块,而exports对象就是用来定义模块。

module.exports.hello = function() {
console.log('Hello.');
};

相当于是定义接口,给外部调用。而上面的路由就是把一整个对象封装到模块中。

module.exports = router;

在app.js中直接获取到整个路由对象:

var routes = require('./app_server/routes/index');

看到module.exports直接赋值router有点奇怪,会想不会覆盖掉其他的模块吗,但事实上在编译的过程中,node会对获取的JavaScript文件内容进行包装,等于是每个文件之间都进行了作用域的隔离。

2.app.set

app.js中用set方法设置了路由起始路径和视图引擎。 

app.set('views', path.join(dirname, 'app_server', 'views'));//这里我们修改了路径在app_server文件夹下
app.set('view engine', 'jade');//默认的视图引擎是jade

还可以设置路由是否忽略大小写,默认是不忽略。

app.set('case sensitive routing',true)

还可以设置环境变量是开发环境还是生产环境,更多的设置可以参考官方文档:http://www.expressjs.com.cn/4x/api.html#app.settings.table

3.app.use

use方法是用来注册一系列中间件,监听端口上的请求,中间件利用了尾触发机制,每个中间件传递请求对象,响应对象和尾触发函数,通过队列形成一个处理流。

 最简单的中间件形式:

app.use(function (req, res, next) {
  console.log('Time: %d', Date.now());
  next();
})

看下各个中间件的作用:

app.use(logger('dev')); //日志,在开发环境下用彩色输出响应状态,会显示请求方式,响应时间和大小。
app.use(bodyParser.json());//解析json请求。
app.use(bodyParser.urlencoded({ extended: false }));//解析form请求(含有key-value键值对),false表示value的类型是string或array,为true表示任意类型。
app.use(cookieParser());//解析cookie
app.use(require('stylus').middleware(path.join(dirname, 'public')));//使用stylus做css预编译,并指定路径。
app.use(express.static(path.join(dirname, 'public')));//静态文件路径

4.error

我们看到在设置了路由之后,如果请求还没返回则认为页面没有找到,这个时候app抛出一个error。并继续往下传递

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

而接下来,对错误进行了处理

// 开发环境错误处理// 会打印出错误堆栈if (app.get('env') === 'development') {
    app.use(function (err, req, res, next) {
        res.status(err.status || 500);//如果不是404就认为是内部错误
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}// 生产环境错误处理// no stacktraces leaked to userapp.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

检测到异常的时候,就渲染error模板。 接下来看下error模板,简单介绍下jade语法:

extends layout  //相当于Asp.net MVC 设置Layout
block content //相当于 Asp.net MVC RenderBody
  h1= message  //显示message
  h2= error.status  //显示错误状态
  pre #{error.stack} //错误堆栈

这样就能处理404和500错误页面。

概要: この時点で、デフォルト プロジェクト全体が導入されました。このセクションでは、基本的なリクエストと応答、ノードの基本モジュールとミドルウェアを理解するために基本的な MVC プロジェクトが確立され、確立するための予備的なルーティングが設定されます。専用のコントローラー。app.js 内の関連コードを解釈します。次のセクションではモデルとビューに焦点を当てます。現在、node の開発環境は非常に完成しており、この技術は 2009 年から現在まで 7 年間使用されており、すでに多くの書籍や資料が出版されており、国内の cnode コミュニティは非常に活発です。テクノロジーを株に例えると、Java、C#、および PHP は間違いなく市場のホワイトホース株であり、そのようなテクノロジーを学ぶことはリスクが低く、仕事を見つけることを心配する必要はありません。ノードは GEM 株のようなものです。大きなバブルが発生しており、新興企業は単なる投機的な概念にすぎないと思われるかもしれませんが、急速に成長しています。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Nodejsのビューとモデルの開発

NodejsはMongooseを使用してモデルとAPを作成しますI

JavaScriptのvarとthis、{}とfunction

以上がNodejs ルーティングとコントローラーの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。