Express&jade を使用して Web サイトを迅速に構築する最初の試み

最近はWeb開発関連の本を読んでいますが、「Node開発ガイド」は以前からある程度の知識を学んでいたので、比較的早く基礎知識を学びました。この章を開発して実践する段階になると、多くの内容が実践に従えないことがわかりました。 Node は近年急速に発展しているため、その Web 開発フレームワーク Express もより頻繁に更新する必要があり、バージョン間に大きな違いがあります。したがって、この本には今では絶対に実行できないコードがたくさんあるはずですが、大まかなフレームワークはまだ存在しており、それを実践したい場合は、やはり公式ドキュメントを参照する必要があります。

1. Express プロジェクトの生成

公式ドキュメントの紹介に従って、Express Web サイトを構築する手順を大まかに書き留めます。

1. npm install Express インストールExpress
2. npm install Express-generator -g は、Express アプリケーション ジェネレーターをインストールします
3. Express myapp は、Express プロジェクト ディレクトリと基本的なスタートアップ コードを生成します
4. DEBUG=myapp npm start アプリケーションを開始します(Mac または Linux); set DEBUG=myapp & npm start アプリケーションを開始します (Windows)
5. ブラウザーで http://localhost:3000 にアクセスします

プロジェクトのデプロイメント上記の手順ですぐに完了したら、次の手順でコンテンツを入力します。ただし、多くの重要な詳細は無視されます。

myapp フォルダーを開くと、次のようなプロジェクトのディレクトリ構造が表示されます。

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

についてある程度の知識があれば、 Nodeは、ご存知のとおり、他の言語であるJavaやPHPと同様に、動的Webページを介してWebサイトを実装しますが、動的ページを実装するには、HTMLテンプレートにプログラムコードを挿入する必要があるため、次のような技術があります。 JSP、PHP、ASP。 JavaScript を使用して実装されたテンプレート エンジンは数多くありますが、Jade がその 1 つである理由は何でしょうか。とにかく、私はこれを初めて使用するため、そのままにしておきます。

2. Jade テンプレート エンジン

初心者なので、基本的な使い方については公式サイトを参照してください。この種の言語は基本的に一度読めば80％から90％は理解できるので、次のステップはそれを上手に使うことです。

• Jade テンプレート構文の例別ドキュメント
• Jade - Node.js から派生した HTML テンプレート エンジン - ニュース - SegmentFault

3. 振り返って見るapp.js

// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'jade');

これは、Jade テンプレート エンジンとビュー ディレクトリが設定される場所です。

4. ルーティング ルールを作成します

ルーティング ルールを作成し、routes/index.js ファイルを開き、4 つの異なるページを表す 4 つのルーティング ルールを追加します。

/* GET home page. */router.get('/', function(req, res, next) {  res.render('index', { title: 'Home Page'});});/* GET detail page. */router.get('/detail/:id', function(req, res, next) {  res.render('detail', { title: 'Detail Page'});});/* GET admin page. */router.get('/admin', function(req, res, next) {  res.render('admin', { title: 'Admin Page'});});/* GET list page. */router.get('/list', function(req, res, next) {  res.render('list', { title: 'List Page'});});

5. jade テンプレート ビュー ファイルを確認します

views/layout.jade を開きます

doctype htmlhtml  head    title= title    link(rel='stylesheet', href='/stylesheets/style.css')  body    block content

jade 構文の基本を読んだ後、これが基本的なページであることがわかり、views/index.jade を開きます。

extends layoutblock content  h1= title  p Welcome to #{title}

ルーティングルールでは、ここでは title 変数が使用されているため、動的ページです。 npm start でアプリケーションを起動し、http://localhost:3000 にアクセスして、以下に示すページを取得します。

6. 詳細ページ、リストページ、管理ページを順番に作成します

ルーティング ルールで指定されたアクセス パスに従って、それらのページにアクセスすると、さまざまな動的ページが表示されます。次々と。