Downloaded 10 times
More Related Content
Similar to 第2回鹿児島node.jsの会資料＿内村
第2回鹿児島node.jsの会資料＿内村
- 1.
- 2.
- 3.
- 4.
- 5. • Expressは入っている前提で、プロジェクトを作成。コマ ンドプロンプト（ターミナル）で以下を入力。 express -ekagonode これでejsテンプレートを使ったExpressプロジェクトが 作成されます。kagonodeフォルダができたのがわかると 思います。 何はともあれExpress
- 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. 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.
- 9. タイトル表示を変えたいときは <app.js> app.get('/', function(req, res){ res.render('index.ejs',{title:“hogehoge"}); }); タイトル表示を変えたいときは ここを変えればOK！
- 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. 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.
- 13.
- 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. <<result.ejs>> <body> <p>名前：<%= name %></p> <p>年齢：<%=age %></p> <p>身長：<%= height %></p> <p>性別：<%= sex %></p> </body> 結果表示用のresult.ejsも作成します。
- 16.
- 17.
- 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. <<result2.ejs>> <body> <p>名前：<%= name %></p> <p>年齢：<%=age %></p> <p>身長：<%= height %></p> <p>性別：<%= sex %></p> </body> 結果表示用のresult2.ejsも作成します。
- 20.
- 21.
- 22. <<app.js>> app.get(“/user/:id”, function(req, res){ varid = 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.
- 24.