Hatena::ブログ(Diary)

すにぺっと

2010-10-16

expressでejsつかってログインしてみよう

| 13:17 | expressでejsつかってログインしてみようを含むブックマーク

さて、expressもうごいたので、次は簡単なログイン機能を実装してみる。

expressはテンプレートエンジンとしてJade、Haml、EJSをサポートしている。

EJSはjspjavascript版みたいな感じで、スクリプトレットっぽいやつを書いたりとかできる。

ということで、まずはejsを使う準備。

今度はnpmつかった。

なんかバージョン指定すればうまくいくのか?

じゃあnode.jsもexpressもバージョン指定すればうまくいったかも。。

$ npm install ejs@0.2.1

opt/local/bin/nodeの中にejsができてる。

ではアプリ作成。

http://utahjs.com/2010/09/25/nodejs-express-and-ejs-templates/

をベースにほぼそのまま作成。

1.サーバーサイドjsを作成(app.js

var PORT = 9000;
var express = require("express");
var app = express.createServer();

app.set('view options', { layout: false });
app.set('view engine', 'ejs');

//ログイン初期処理
app.get("/", function(req, res){
    res.render('login', {
        locals: { 
	    message: ''
	}
   });
});

//ログインサブミット処理
app.get("/login", function(req, res){

    var name = req.param("name");
    var pass = req.param("pass");
  
    //user= admin,pass=passwordならOK.
    if((name === "admin") && (pass === "password")) {
	res.render('success', {
		       locals: { 
			   message: 'Login OK:', 
			   name: name,
			   pass: pass
		       }
		   });
    } else {
	res.render('login', {
		       locals: { 
			   message: "Error: name or password wrong."
		       }
		   });
    }
});

// startup this server

app.listen(PORT);

console.log("Server on port %s", app.address().port);

2.ログイン初期画面作成(views/login.ejs)

<html>
<body style="background-color:#cccc77">

<h1>Login</h1>
<h3 style="color:red">
    <% if (message) { %>
       <%= message %><br>
    <% } %>
</h3>

<table>
<form method="GET" action="/login">
  <tr><td>Username:</td><td><input type="text" name="name"></td></tr>
  <tr><td>Password:</td><td><input type="password" name="pass"></td></tr>
  <tr><td></td><td><input type="submit" name="submit" value="Login"></td></tr>
</form>
</table>
</body>
</html>

<% %>でjsの構文が記述可能。

<%= %>は、app.jsで定義したローカル変数を評価できる。


3.ログイン完了画面(views/success.ejs)

<html>
<body style="background-color:#cccc77">

<h1>Login Success</h1>

<%= message %><br>
name:<%= name %> <br>
pass:<%= pass %> <br>


</body>
</html>

http://localhost:9000にアクセスするとログインフォームが表示される。

ログイン失敗すればエラーメッセージ表示。

admin/passwordを入力してログインすると、ログイン成功画面へ遷移する。