Location via proxy:
[ UP ]
[Report a bug]
[Manage cookies]
No cookies
No scripts
No ads
No referrer
Show this form
Submit Search
Submit Search
Upload
後期講座05
•
Download as PPTX, PDF
•
1 like
•
667 views
1 of 18
Download now
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
More Related Content
後期講座05
1.
電算部ネットワーク講座 05 Node.js Ⅴ
2.
目次 今回の内容 Web アプリケーションとは Express.js 導入 使い方 チュートリアル 応用
3.
今回の内容 今回は、 Node.js を用いて
Web アプリケーションを作成します。 Express.js という Web Application Framework (FW) を使います。 Framework とは、開発時に決まった枠組みに従ってコーディングすることで、 開発効率を向上させるためのツールです。 似たようなものにライブラリがありますが、呼び出すか、呼び出されるか…と いう点で異なります。 ライブラリは自分で書いたコードから呼び出されるものですが、フレームワー クは自分で書いたコードを読み込んで実行するものです。
4.
Express.js Node.js で Web
アプリケーション開発をする際によく用いられる FW です。 npm からインストールできます。 npm install express 今回は、このようにインストールして下さい (理由は後述) npm install –g express
5.
導入 npm install コマンドを実行する際に
–g オプションを付加すると インストールしたモジュールがコマンドを提供している場合に、コマンドプロ ンプト (またはターミナル) から直接呼び出せるようになります。 ※ g は global の略で、グローバルへインストールするという意味になりま す。 express コマンドを使って、次の文を入力・実行して下さい。 express –sH Web アプリケーションの雛形が作成されます!
6.
使い方 さっそく、雛形を実行しましょう。 node app.js このように表示されたら、正常に実行されています。 Express server
listening on port 3000 ブラウザで http://localhost:3000/ を開いてみてください。
7.
使い方 このように表示されたら成功です。
8.
チュートリアル – View テンプレート言語を用いて動的に生成される
HTML の雛形 (テンプレート) を 記述します。 テンプレートはテンプレートエンジンによって、 HTML に変換されます。 今回は、 Twitter でも使われている Hogan.js というテンプレートエンジンを使 います。テンプレート言語は Mustache です。 {{title}} このように {{, }} で囲まれた箇所が動的に置換されます。
9.
チュートリアル - View views/index.hjs
を開いて、 {{title}} の箇所を増やしてみましょう。 変更が反映されない場合は、サーバを再起動します。
10.
チュートリアル – Routing Express.js
は、柔軟なルーティングを提供します。 http://localhost:3000/ と http://localhost:3000/users/ を開いた時に帰ってくる結果 (HTML) は異なります。 この URL へアクセスされた場合はこの処理をする… に記述できます。 といったことがシンプル
11.
チュートリアル – Routing routes/index.js
を開いて res.render('index', { title: 'Express' }); この箇所を res.render('index', { title: „My HomePage' }); このように変更してみましょう。
12.
チュートリアル – Session Web
は基本的に Stateless (ステートレス) です。 状態を持たないため、複数のリクエストを全く関係のない別々のものとして扱 います。 しかし、会員専用サイトや、ネットショップ (EC サイト) などを作る上では、 Stateful (ステートフル) である必要があります。 状態の保持して、前回のリクエストと今回のリクエストが同じユーザからのも のであることを判別しなければいけません。 そこで使われるのが Session です。
13.
チュートリアル – Session Session
を実現するためによく使われる技術には Cookie があります。 ※ここで言う Cookie とは、ブラウザが食べるものです。 Cookie は小さな文字列のデータをブラウザに保持させて、リクエストの度にリ クエストヘッダ (Cookie) に含めてサーバへ送ります。 サーバ側では、 Cookie ヘッダを参照することで、どのユーザからのリクエス トであるか判別します。 と、難しい話をしましたが、 Express.js を使うとこれらの内部の細かい処理を 知らなくても、状態を保持するステートフルな Web アプリケーションが書け ます。
14.
チュートリアル – Session app.js
を開いて app.get('/users', user.list); の次の行 (35 行目付近) に app.get("/users/:name", user.one); これを追記します。 routes/user.js を開いて res.send(“respond with a resource”); の前の行に if (req.session.name) { res.send("I know you! You are " + req.session.name + "."); return; } これを追記します。
15.
チュートリアル - Session 最後に、
routes/user.js の行末に exports.one = function(req, res){ req.session.name = req.params.name; res.send("Your name is " + req.params.name + "."); }; これを追記して終わりです。 サーバを再起動して、 http://localhost:3000/users/ http://localhost:3000/users/test/ http://localhost:3000/users/ の順で開いて、挙動を確認してみて下さい。
16.
応用 実際に Web アプリケーションで
Session を扱う際は、 DB に Session 情報を入れる などして、データの永続化 (アプリケーションが終了してもデータを保持し続ける こと) を行う必要があります。 SQLite を使うと、別途 DB サーバを起動する必要が無いため簡単に導入できます。 導入 npm install connect-sqlite3 --save --save オプションを付加することで、 package.json にモジュールの依存関係が保 存されます。 次回から npm install ですべてのモジュールをインストールできるようになります。
17.
応用 app.js を開きます。 上部でモジュールを読み込んでいる部分 (require
を呼び出している部分) に 1 行追 記します。 var SQLiteStore = require('connect-sqlite3')(express); app.use(express.session()); この箇所を app.use(express.session({ store: new SQLiteStore })); このように書き換えます。
18.
応用 サーバを再起動しても名前を覚えていたら、成功です! Express はシンプルですが強力な FW
で、使いこなすと実用的な Web アプリ ケーションを開発することができます。 今回のサンプルコードはこちらです。 https://github.com/ww24/densan.info-networkcourse/tree/master/nodejs/05
Download now