Nodejs の最初の段階の Express_node.js

前の記事「Node.js の初体験」 もよく書かれていますので、興味のある方はチェックしてみてください。

Node と NPM のインストールは、詳細を説明しなくても十分便利です...言及すべき基本的な点がいくつかあります。

1. インストールコマンドの「-g」はグローバルを意味します

2. Express のバージョンは通常の「-v」ではなく、「-V」で表示されます

3. Express プロジェクトをインストールするコマンドは次のとおりです

express -e nodejs-product
-e, --ejs add ejs engine support 
-J, --jshtml add jshtml engine support (defaults to jade)

追記: テンプレートエンジンは当面は気にする必要はありませんが、Node Express の構築を初めて覚えたときに ejs を使用したので、そのまま使い続けました

ノードの小さな友達スーパーバイザー

コードを変更するたびに自動的に再起動されます。怠惰なプログラマーは、生き残るためにこの種のトラブルを軽減するツールに依存しています:)

インストール: npm install -gvisor

実行: スーパーバイザー app.js

永遠の小さなゲイの友達がまた 1 つ増えました

ノード サービスは、仮想マシンがシャットダウンされるとすぐにシャットダウンされます。ただし、インストールと実行については詳しく説明しません。怠け者です:

Forever は、アプリ アプリケーションを起動、停止、再起動できるシンプルな命令型の Nodejs デーモンです。 Forever は完全にコマンドライン操作に基づいており、forever プロセスの下にノードの子プロセスが作成され、ファイルが更新されるかプロセスがハングすると、ノードの子プロセスの実行状態が自動的に監視されます。ノードサーバーを再起動して、アプリケーションが正常に動作することを確認します。

エクスプレスプロジェクトディレクトリ

上の図は Express プロジェクトの構造です。

を簡単に見てみましょう。

app.js: プロジェクトの入り口。Express では app.js という名前を使用しますが、index.js または main.js に変更できます。 PHPプロジェクトのindex.php、index.html
に相当 node_modules: プロジェクトの依存関係ライブラリを保存します
package.json: プロジェクトの依存関係の構成と開発者情報 (これは言いすぎです。他の人に誤解を与えないように、ドキュメントを読んだほうがよいでしょう。次号で Node モジュールについて短い段落で説明します。 )
public: css、js、img などの静的ファイル (追記: 私は実際にそれらを静的と呼ぶことに慣れています)
ルート: ルーティング ファイル (学習の重要なターゲット。ビジネスがうまくいくかどうかに関係なく、ルーティングが鍵となります)
ビュー: ページ ファイル (Ejs または jade テンプレート、デフォルトは jade、ここでは Ejs を使用します。最も重要なことは最初に練習することなので、試してみてください)

View ファイルを開いたときに、index.ejs が慣れていないことがわかりました。そのため、app.js に小さな変更を加えました。

「app.set('ビューエンジン', 'ejs');」は「app.engine('.html', ejs.__express);app.set('ビューエンジン', 'html');」になります

前の行にある ejs 変数には、require ejs モジュールが必要です。コード「var ejs = require('ejs');」を追加してください。

最終的な app.js は次のとおりです:

コードの説明:

初心者レベルのエントリーを目指しているため、引き続き Express の使用と Node のメソッドを見ていきます。

require() は、現在のモジュール内の他のモジュールをロードして使用するために使用されます。このメソッドはモジュールの基礎であり、使用にはパスの概念で十分です。 PS: JS ファイルは「.js」接尾辞を削除できます

Exports はモジュールのエクスポート オブジェクトを表し、モジュールの属性とパブリック メソッドをエクスポートするために使用されます。プロジェクトの Routes フォルダー (ルーティングの詳細) の下には、index.js と users.js があり、どちらも、exports オブジェクトを使用して、33 行目の Routes.index や 34 行目の user.list などのオブジェクトをエクスポートします。

追記: モジュールのコードは、モジュールが初めて使用されるときにのみ実行され、複数回の要求により複数回初期化されることはありません。

Express() は、Express アプリケーションを作成することを意味します。実際には、次のようにわずか数行のコードでアプリケーションを作成できます。

  var express = require('express'); 
  var app = express(); 
  app.get('/', function(req, res){ 
   res.send('hello world'); 
   console.log('hello world');
  }); 
  app.listen('8808');

     app.listen() 就是在给定的主机和端口上监听请求，这个和node中http模块的http.createServer(function(){...}).listen()效果一致；
     app.set(name, value)和app.get(name)就是你想的那样，set()为设置 name 的值设为 value，get()为获取设置项 name 的值。如俺app.js的图片16行中的一句“app.set('port', process.env.PORT || 3000)”就是设置项目的port，在下面使用http.createServer时就可以使用app.get('port')来获取，只是俺偷懒没用来着；

     了解app.engine()方法之前先看看express应用的安装命令:“express -e nodejs-product”，其中的 -e 和 -J 我们一开始已经提到，表示ejs和jade模板。

     如果想把模板后缀改成“.html”时就会用到app.engine方法，来重新设置模板文件的扩展名，比如想用ejs模板引擎来处理“.html”后缀的文件：app.engine('.html', require('ejs').__express);

    app.engine(ext, callback) 注册模板引擎的 callback 用来处理ext扩展名的文件。

　　 PS：__express不用去care，其实就是ejs模块的一个公共属性，表示要渲染的文件扩展名。

     app.use([path], function) 使用中间件 function,可选参数path默认为"/"。使用 app.use() “定义的”中间件的顺序非常重要，它们将会顺序执行，use的先后顺序决定了中间件的优先级(经常有搞错顺序的时候);

     最后介绍个很有用的express API：

     app.render(view, [options], callback) 渲染 view, callback 用来处理返回的渲染后的字符串。 

　　路由实战：　　

     路径代码应该是项目中最本机的一部分了。express中创建一个或者一套新的handle非常简单，先看看express现有的，一会儿我们创建俩个实际的规则。

 

    变量 routes 和 user 都是刚才require的模块，他们各自exports了index方法和list方法；其中Response.render()表示渲染view，同时传进对应的数据，Response.send()为发送一个响应；在设置路由时index和list方法作为回调函数最终执行。　

　　 流程大概了解啦，俺们也就实际搞一把，最easy的一种方式，简单俩步：

第一种方式就是在当前的routes/index.js或者routes/test.js中加几行代码如下

 exports.test = function(req, res){
 res.send('test welcome.');
};

在app.js文件设置路由那块加上app.get('/test', routes.test);

　　 第二种方式就是多了两步，先新建一个模块如test.js文件，输出然后exports对应的方法；在app.js中require这个模块，再加一行设置路由即完成了。

　　快速炫起来，集成Bootstrap：　

     JS工程师使用Nodejs上手还是以快速搭建网站为主，所以才会介绍Express，那么为了让网站更快的体面起来，集成使用Bootstrap就是上佳选择，非常喜欢其响应式布局和整体系的脚手架。

     PS：因为Bootstrap的JS插件都依赖jQeury，所以jQuery也一并引入了。

　　 前文已经说到了，静态文件都放在public文件夹中，切文件夹内已经帮我们把类目都分好了，images、 javascripts、 stylesheets。

　　 分别引入bootstrap.min.css文件至stylesheets目录下；jquery-1.x.x.min.js和bootstrap.min.js放到javascripts文件夹下。
　　 然后俺们修改view/index.html把文件引入使用即可，下面放出俺在bootstrap demo的基础改的index.html，大家随意拿去使用和修改。

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
 <title><%= title %></title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
 <!--<link href="/stylesheets/base.css" rel="stylesheet">-->
 <!--<link href="/stylesheets/common.css" rel="stylesheet">-->
 <!--<link href="/stylesheets/page.css" rel="stylesheet">-->
 <!-- 建议在项目中把CSS分好level，好维护和管理 -->
 <style>
  html, body { overflow-x: hidden;}
  body { padding-top: 70px;background:#f1f1f1; }
  footer { padding:20px 0 10px;text-align:center;font-weight:bold;border-top:1px solid #ddd;margin-top:30px;}
  .header-navbar-style {
   filter:alpha(opacity=90);
   -moz-opacity:0.9;
   -khtml-opacity: 0.9;
   opacity: 0.9;
   background: linear-gradient(45deg, rgb(60, 8, 34) 0%, rgb(49, 79, 117) 100%);
   border:1px solid #aaa;
   font-size:16px;
  }
  .beige {background:beige;}
  .bisque {background:bisque;}
  .darkseagreen{ background:darkseagreen;}
 </style>
 </head>
 <body>
 <div class="navbar navbar-fixed-top header-navbar-style navbar-inverse" role="navigation">
  <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="/">Product</a>
  </div>
  <div class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
   <li class="active"><a href="/">Home</a></li>
   <li class=""><a href="/contactus">Contact</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu beige">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
    </ul>
   </li>
   <li class=""><a href="/faq">FAQ</a></li>
   </ul>
  </div><!-- /.nav-collapse -->
  </div><!-- /.container -->
 </div><!-- /.navbar -->
 <!-- 以上位置建议创建个header.html维护起来 -->
 <style>
  @media screen and (max-width: 767px) {
  .row-offcanvas { position: relative;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  }
  .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }
  .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }
  .row-offcanvas-right.active { right: 50%; /* 6 columns */ } 
  .row-offcanvas-left.active { left: 50%; /* 6 columns */ } 
  .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ } }
 </style>
 <div class="container">
  <div class="row row-offcanvas row-offcanvas-right">
  <div class="col-xs-12 col-sm-9">
   <p class="pull-right visible-xs">
   <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
   </p>
   <div class="jumbotron bisque">
   <h1 id="Welcome-title">Welcome <%= title %>!</h1>
   <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
   </div>
   <div class="row">
   <div class="col-6 col-sm-6 col-lg-4">
    <h2 id="Heading">Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2 id="Heading">Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2 id="Heading">Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2 id="Heading">Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2 id="Heading">Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   <div class="col-6 col-sm-6 col-lg-4">
    <h2 id="Heading">Heading</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div><!--/span-->
   </div><!--/row-->
  </div><!--/span-->
  <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
   <div class="list-group">
   <a target="_blank" href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   <a href="#" class="list-group-item">Link</a>
   </div>
  </div><!--/span-->
  </div><!--/row-->
 </div><!--/.container-->
 <!-- 从header.html之后到此可分为page层 -->
 <footer class="darkseagreen">
  <p>Copyright &copy; 2014. Designed by nieweidong.</p>
 </footer>
 <script src="/javascripts/jquery-1.11.0.min.js"></script>
 <script src="/javascripts/bootstrap.min.js"></script>
 <script>
  $(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
   $('.row-offcanvas').toggleClass('active');
  });
  });
 </script>
 </body>
</html>

　　 如果样式有问题请检查下bootstrap的路径是否正确引入。

　　 启动项目之后觉得高大上很简单，有木有！！

　　FAQ&总结：　

     俺们的express项目暂时，且express也并没有涉及到任何数据库，这个事情需要第三方node模块，比如mysql或者MongoDB，后续俺会有一章单独介绍这块。

　　 express也不是Node中web框架的唯一选择，不过由于其文档较全，所以才以其为示例为大家介绍，其原理和实现其实细化之后并不复杂，也希望更多的JS工程师折腾出自己的Web框架。 

好了，今天先给大家絮叨到这里，希望本文分享大家喜欢。