Contenu connexe
Similaire à 大阪Node学園八時限目 「expressで作るWebアプリ」
Similaire à 大阪Node学園八時限目 「expressで作るWebアプリ」 (20)
大阪Node学園八時限目 「expressで作るWebアプリ」
- 9. プロジェクトの初期化
expressコボンドでプロジェクトを初期化します
1 $ express handson
expressの依存モジュールをインストール
1 $ cd handson
2 $ npm install
これでexpressが立ち上がるようになっているので動かしてみる。
1 $ node app.js
ブラウザで http://localhost:3000 にアクセスする。
"Error: listen EADDRINUSE" エラーで動かない場合は p.ecstacy app.jsをテキストエディタで開き 15行目のホート番号を3000な に変
更します。
- 13. パスとイベントハンドラの追加の仕方
パスの追加
1 app.HTTPメソッ 名('ルー か のURLパス', イベン ハン
イベントハンドラの書き方
1 function(req, res){
//ここでユーザか の入力値を け
2
//ユーザに返す ータを作る
3
4 }
5
、
jQueryで
1 $('#top').on('click', function(){
//イベン ハン
ング
2
3 });
と書くのと比較すると覚えやすいかと思います。
);
- 14. テンプレートで値を表示
先ほ の app.get('/hello', ...); では直接文字列を返していましたが テンプレ
ートを使ってHTMLを返すように変更してみます。
handson/views/ ディレクトリに hello.jade という新しいファイルを作って テキ
ストエディタで開きます。
内容を次のように書いてく さい。
1 h1 こんにちは
2 p #{message} へようこそ
3
ここで作成したファイルは jade というテンプレートエンジン用のテンプレートファ
イルです。
- 15. テンプレートで値を表示
app.js の res.send('Hello', ...); の部分を次のように変更します。
1 app.get('/hello', function (req, res) {
// res.send('Hello'); この行は削除する
2
res.locals.message = 'expressハンズオン';
3
res.render('hello');
4
5 });
6
こんにちは expressハンズオンへようこそ と表示されます。
サーバを再起動してブラウザを再読み込みします。
- 17. 入力値の け取り クエリ引数編
ブラウザで http://localhost:3000/hello?greeting=hoge を開きます。
hoge という文字列はま
この hoge という文字列をページに表示してみます。
こにも表示されていません。
app.get('/hello', ...); を次のように変更します。
1 app.get('/hello', function(req, res){
res.locals.message = req.query.greeting;
2
res.render('hello');
3
4 });
こんにちは hogeへようこそ と表示されます。
サーバを再起動して 再度ブラウザでアクセスします。
- 18. 入力値の け取り URLパラメータ編
次に app.get('/hello') を次のように変更します
1 app.get('/hello/:greeting', function (req, res) {
res.locals.message = req.params.greeting;
2
res.render('hello');
3
4 });
5
http://localhost:3000/hello/fuga
サーバを再起動し ブラウザで
を開くと
fugaへようこそ と と表示されます。
- 19. 入力値の け取り URLパラメータ編
この状態で http://localhost:3000/hello や http://localhost:3000/hello/ に
アクセスするとエラーになるので
空のパラメータも け付けるようにするには :greeting? のようにパラメータの最
後に?をつけます。
:greeting がないときにデフォルトの値を表示するには
1 res.locals.message = req.params.greeting || ' フォル メッセージ';
2
のようにします。
- 20. 入力値の け取り POSTデータ編
hello.jade にフォームを追加します
1 form(action="/hello", method="post")
input(type="text", name="greeting")
2
input(type="submit", value="送信")
3
テキストフィールドに moga と入力して送信ボタンを押します。
ブラウザをリロードするとフォームが表示されるので
Cannot POST /hello というエラーになります。
- 21. 入力値の け取り POSTデータ編
app.get('/hello'); は変更せ 、その後に次のように書きます。
1 app.post('/hello', function(req, res){
res.locals.message = req.body.greeting;
2
res.render('hello');
3
4 });
5
今度はエラーになら に mogaへようこそ 表示されます。
サーバを再起動し 再度 フォームから値を送信してみます。
- 22. GETとPOST
app.get と app.post は同じURLパスでも別の処理として記述します。
GET
POST
データの取得に使われるHTTPメソッド
サーバにデータを送るときに使われるメソッド
HTTPメソッドの種類に関係なく常に処理を実行したい場合は app.all() が使え
ます
- 27. セッション
セッションを使うには app.js に設定を追加します。
20行目の
1 app.use(express.bodyParser());
の後に二行設定を追加します。
1 app.use(express.cookieParser());
2 app.use(express.session({key: 'sess_id', secret: 'salt'}));
3
これでセッションが使えるようになりました。
express.sessionはデフォルトでメモリ上にセッション情報を保存するので実運
用には向きません
- 29. セッション
app.js にダミーのログイン処理を追加します。
1 app.post('/login', function(req, res){
req.session.username = req.body.username;
2
res.redirect('/hello');
3
4 });
5
http://localhost:3000/hello でログイン名を表示できるようにします。
1 app.get('/hello', function(req, res){
res.locals.username = req.session.username;
2
res.render('hello');
3
4 });
5
- 33. イベントハンドラの分離
次に app.js と routes/handson.js をつなげるため
いま handson.js に貼りつけたイベントハンドラに名前をつけます。
routes/handson.js
1 exports.index = function(req, res){
res.locals.username = req.session.username;
2
res.render('hello');
3
4 }
5
最後に 今名前をつけた関数を app.js で呼び出します。
app.js
1 app.get('/hello', handson.index);
- 34. 実行時の環境変数
サーバ実行時に環境変数を渡すことができます。
1 $ NODE_ENV=production node app.js
nodemonを使っている場合も同じです。
1 $ NODE_ENV=production nodemon app.js
2
スクリプト内では process.env で環境変数を参照できます。
app.js の最後に以下の一行を追加してみます。
1 console.log(process.env.NODE_ENV);
コンソールの最後にproduction と表示されます。
process.env の代わりに app.get('env') でも同じ結果を得られます。
1 console.log(app.get('env'));
- 45. asyncの例
MongoDBで登録されたメッセージの総数と一覧を取得してみます。
1 app.get('/hello/list', function (req, res) {
var messages = mongo.collection('messages');
2
async.parallel({
3
total: function (callback) {
4
messages.count(function (err, count) {
5
callback(err, count);
6
});
7
},
8
list: function (callback) {
9
messages.find().toArray(function (err, data) {
10
callback(err, data);
11
});
12
}
13
}, function (err, results) {
14
res.locals.data = results.list;
15
res.locals.total = results.total;
16
res.render('hello');
17
});
18
19 });