Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (17)
Similar a 第2回鹿児島node.jsの会資料＿内村
Similar a 第2回鹿児島node.jsの会資料＿内村 (16)
Más de Koichi Uchimura
第2回鹿児島node.jsの会資料＿内村
- 5. • Expressは入っている前提で、プロジェクトを作成。コマ ンドプロンプト（ターミナル）で以下を入力。 express -e kagonode これで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」にアクセ スしてみましょう。
- 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
- 13. POSTとGETの基本 POST GET URLには表示されない URLにhttp://○○.jp/?q=hoge といった形で表示される 文字数制限なし 文字数制限あり（数千バイト） req.body.○○で取り出し req.query.○○で取り出し
- 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も作成します。
- 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も作成します。
- 21. パラメータを取得しよう 第4章
- 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です と表示されるはずです。