第2回鹿児島node.jsの会資料_内村

1,090 views

Published on

第2回の資料です。初心者向けです。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,090
On SlideShare
0
From Embeds
0
Number of Embeds
424
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

第2回鹿児島node.jsの会資料_内村

  1. 1. 第2回勉強会 Node.jsでハンズオン 内村 康一
  2. 2. 理屈はいい、作ってみよう 前回の反省として・・・  導入部分だけの説明で実際に作れるようになるまで はいきませんでした。 そこで!  今回はハンズオンの形式で実際に作ってみようと 思います。
  3. 3. 目次 第1章 ejsテンプレートの基本 第2章 フォームからデータ送信(POST) 第3章 フォームからデータ送信(GET) 第4章 パラメータを取得しよう
  4. 4. 第1章  ejsテンプレートの基本
  5. 5. • Expressは入っている前提で、プロジェクトを作成。コマ ンドプロンプト(ターミナル)で以下を入力。  express -e kagonode  これでejsテンプレートを使ったExpressプロジェクトが 作成されます。kagonodeフォルダができたのがわかると 思います。 何はともあれExpress
  6. 6. app.jsの中身を書き換えます 今回は外部ファイルを使わないので以下の2行を削ります。 var routes = require('./routes'); var user = require('./routes/user'); また、var app = express();の前後に以下の2行を追加します。 var port = 3000; var server = http.createServer(app); 以下の3行を削ります(最後)。 http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); 以下の2行を追加します(最後)。 server.listen(port); console.log(“listening on port 3000”);                これでOK!
  7. 7. Index.ejsとの連携 プロジェクトフォルダの中にviewというフォルダがあり、そこにindex.ejsが入っていま す。このejsファイルがクライアント側のブラウザで表示する内容です。ほとんどhtml と同じ内容です。 このindex.ejsの内容を表示してみましょう。 <<app.js>> 以下の3行を加えます。 app.get('/', function(req, res){   res.render('index.ejs', {title:“kagonode"}); }); <<index.ejs>> そのままでOK。 コマンドプロンプトで「node app.js」を実行し、ブラウザで「localhost:3000」にアクセ スしてみましょう。
  8. 8. kagonodekagonodekagonodekagonode Welcome to kagonode この画面が出ます。 成功したら・・・
  9. 9.  タイトル表示を変えたいときは <app.js> app.get('/', function(req, res){   res.render('index.ejs', {title:“hogehoge"}); }); タイトル表示を変えたいときは ここを変えればOK!
  10. 10. <<app.js>> app.get('/', function(req, res){   res.render(‘index.ejs’, {name:“node“, age:”19歳”, height:”168cm”, sex:”男”}); }); <<index.ejs>> <body> <h1><%= name %></h1> <ul> <li><%= age %></li> <li><%= height %></li> <li><%= sex %></li> </ul> </body> いろいろサーバ側から送りたいときは 表示結果はこんな感じ nodenodenodenode ・19歳 ・168cm ・男
  11. 11. index.ejsをコピーしてstat.ejs(ステータス表示用)を作成 <<app.js>> app.get('/status', function(req, res){ res.render(‘stat.ejs’, {name:”node“,age:”20歳”,”address:”鹿児島市”,tel:”080-0000- 0000”,mail:”hoge@hoge.hoge”}); }); <<stat.ejs>> <body> <h1><%= name %></h1> <ul> <li><%= age %></li> <li><%= address %></li> <li><%= tel %></li> <li><%= mail %></li> </body> index.ejs以外を使うときは localhost:3000/statusにアクセスすると stat.ejsの内容を表示する 表示結果はこんな感じ nodenodenodenode ・20歳 ・鹿児島市 ・080-0000-0000 ・hoge@hoge.hoge
  12. 12.  フォームからデータ送信(POST) 第2章
  13. 13. POSTとGETの基本 POST GET URLには表示されない URLにhttp://○○.jp/?q=hoge といった形で表示される 文字数制限なし 文字数制限あり(数千バイト) req.body.○○で取り出し req.query.○○で取り出し
  14. 14. app.jsとsubmit.ejsへコードを書きます。 <<app.js>> app.get('/submit', function(req, res){ res.render(‘result.ejs’, {name:req.body.name, age:req.body.age, height:req.body.height, sex:req.body.sex}); }); <<submit.ejs>> <body> <form method=“post” action=“/submit”> 名前:<input type=“text” name=“name” /><br /> 年齢:<input type=“text” name=“age” /><br /> 身長:<input type=“text” name=“height” /><br /> 性別:<input type=“radio” name=“sex” value=“男” checked>男 <input type=“radio” name=“sex” value=“女”>女<br /> <input type=“submit” value=“送信” /> </form> </body> この2つが対応します。
  15. 15. <<result.ejs>> <body> <p>名前:<%= name %></p> <p>年齢:<%= age %></p> <p>身長:<%= height %></p> <p>性別:<%= sex %></p> </body> 結果表示用のresult.ejsも作成します。
  16. 16. 送信フォームと結果画面 名前: 年齢: 身長: 性別: 名前:hoge 年齢:32 身長:168 性別:男 送信 男 女 送信フォーム 結果画面
  17. 17.  フォームからデータ送信(GET) 第3章
  18. 18. app.jsとsubmit2.ejsへコードを書きます。 <<app.js>> app.get('/submit', function(req, res){ res.render(‘result2.ejs’, {name:req.query.name, age:req.query.age, height:req.query.height, sex:req.query.sex}); }); <<submit2.ejs>> <body> <form method=“get” action=“/submit”> 名前:<input type=“text” name=“name” /><br /> 年齢:<input type=“text” name=“age” /><br /> 身長:<input type=“text” name=“height” /><br /> 性別:<input type=“radio” name=“sex” value=“男” checked>男 <input type=“radio” name=“sex” value=“女”>女<br /> <input type=“submit” value=“送信” /> </form> </body> この2つが対応します。
  19. 19. <<result2.ejs>> <body> <p>名前:<%= name %></p> <p>年齢:<%= age %></p> <p>身長:<%= height %></p> <p>性別:<%= sex %></p> </body> 結果表示用のresult2.ejsも作成します。
  20. 20. 送信フォームと結果画面 名前: 年齢: 身長: 性別: 名前:hoge 年齢:32 身長:168 性別:男 送信 男 女 送信フォーム 結果画面
  21. 21.  パラメータを取得しよう 第4章
  22. 22. <<app.js>> app.get(“/user/:id”, function(req, res){ var id = req.param('id'); res.render(‘result3.ejs’, {id:id}); }); <<result3.ejs>> <body> <p>IDは<%= id %>です</p> </body> app.jsに以下を追記 localhost:3000/user/2にア クセスすると、 IDは2です と表示されるはずです。
  23. 23. 次回はデータベース(MySQL)を 使ったハンズオンを予定してい ます。 第3回の予定
  24. 24. ご清聴ありがとうございました。 以上です。

×