前回は追加処理をすることができました。
そうしたら続いて更新(U)をできるようにしたいかと思います。
後、新規と更新で共有部分に関してはひとまとめにしたら便利かなと思ってやることにしました。
今回の環境は以下のとおりです。
名前 | バージョン | 補足 |
---|---|---|
Ubuntu | 14.04 | OS |
node.js | v0.10.28 | サーバーサイドJavaScript |
express | v4.2.0 | Webフレームワーク |
ejs | v0.8.8 | テンプレートエンジン |
pg | v3.1.0 | データベース |
ファイルの状態は以下のとおりです。太くなっているのはいじったファイルです。
express01
┣ app.js
┣ bin
┣ node_modules
┣ package.json
┣ public
┃ ┣ images
┃ ┣ javascripts
┃ ┗ styleshetts
┣ routes
┃ ┣ index.js
┃ ┣ setting.js
┃ ┣ useredit.js ← 更新画面表示
┃ ┣ userinsert.js
┃ ┣ usernew.js ← 新規入力画面表示
┃ ┣ userupdate.js ← 更新処理
┃ ┗ users.js
┣ views
┃ ┣ footer.ejs ← 画面のフッター部
┃ ┣ header.ejs ← 画面のヘッダー部
┃ ┣ index.ejs ← 更新画面を表示する
┃ ┣ usernew.ejs ← 共有化のため変更
┗ ┗ error.ejs
今回は先に完成したイメージを紹介します。
前回とほぼ同じですが
画面上の[edit user]をクリックすると修正画面に遷移します。
[edit user]をクリックしたときに表示される画面です。
データを編集して[update]ボタンをクリックします。
と今回はこんなことをやりました。
まずはメインスクリプトファイル。長いので追加した部分だけ記載します。
// 新たに作成したjsファイルをつなぐ。今回は更新系処理 var useredit = require('./routes/useredit'); var userupdate = require('./routes/userupdate'); // ルーティング処理を設定 app.use('/useredit',useredit); app.use('/userupdate',userupdate);
今回も一応書いておきます。
ejsファイルは分離しておいてつなぐことができるみたいですね。
とりあえず、ヘッダー部とフッター部にファイルを分割しておきます。
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body>
</body> </html>
<% include header %> <h1><%= title %></h1> <a href="/usernew">new User</a> <p>User Count <%= data %></p> <% for(var i = 0; i < result.rows.length; i++) { %> <li> id=<%= result.rows[i].id %> name=<%= result.rows[i].name %> <a href="/useredit/<%= result.rows[i].id %>">edit User</a> </li> <% } %> <% include footer %>
includeを使うことによって別のファイルを読み込むことができます。
今回の修正で共有部分の読み込みと編集画面を表示するためのリンクを追加しました。
新規入力画面を表示する部分と更新入力部分を共有化するために新規入力側に変更を入れます。
var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res) { res.render('usernew', { title : "ユーザー新規登録" action : "userinsert", user_id : "", readonly : "", user_name : "", button_name : "insert", }); }); module.exports = router;
<% include header %> <h1><%= title %></h1> <form method="post" action="/<%= action %>"> id<input type="text" name="user_id" value="<%= user_id %>" <%= readonly %>> user_name<input type="text" name="user_name" value="<%= user_name %>"> <input type="submit" value="<%= button_name %>"> </form> <% include footer %>
せっかくだから画面表示もheaderとfooterを使い共有化しちゃいます。
このejsファイルは更新入力画面を表示するときに使います。
一覧画面で[edit user]ボタンが押されたときに実行される機能です。
var express = require('express'); var router = express.Router(); var pg = require('pg'); var settings = require('./settings'); var connectionString = settings.pgdb; // URLを/xxxx/100とかになる場合に以下のように書く router.get('/:id', function(req, res) { // :idと書くことで、以下のようにしてパラメーターを受け取る var user_id = req.params.id; pg.connect(connectionString, function(err, client){ client.query("SELECT name FROM test WHERE id = $1 ",[user_id], function(err, result){ res.render('usernew', { title : "ユーザー情報更新", action : "userupdate", user_id : user_id, disabled : "readonly", user_name : result.rows[0].name, button_name : "update", }); }); }); }); module.exports = router;
ejsはusernewを使います。置き換える値をデータベースから取得した値に変えています。
なんてことはない、更新処理です。
var express = require('express'); var router = express.Router(); var pg = require('pg'); var settings = require('./settings'); var connectionString = settings.pgdb; // postで受け取る(formのmethodがpostなので) router.post('/', function(req, res) { // 入力したデータを受け取る var user_id = req.body.user_id; var name = req.body.user_name; pg.connect(connectionString, function(err, client){ // UPDATE処理 client.query("UPDATE test SET name = $1 WHERE id = $2", [name, user_id], function(err, result){ // トップページにリダイレクト res.redirect('/'); }); }); }); module.exports = router;
日付 | 詳細 |
---|---|
2014/08/07 | 新規作成 |
Copyright (C) 2011 ほぷしぃ. All Rights Reserved.