寫完了入門筆記，開始進入開發階段吧。基於上一節的內容，現在着手開發個人博客系統。先劃分一下功能吧
/:首頁
/login:登陸
/reg:註冊
/post:發表文章
/logout:退出
首先規劃一下路由控制，在現在的app.js中控制路由的語句是
app.get('/', routes.index);
app.get('/users', user.list);//路由控制
exports.index = function(req, res){
res.render('index', { title: 'Express' });
};routes(app);
這是你現在看到的寫法，咱們爲了簡化和便於修改，換成下面這種寫法：
module.exports = function(app){
app.get('/',function(req,res){}）；
}
博客系統中的index.js的雛形：
module.exports = function(app){
app.get('/',function(req,res){
res.render('index', { title: '主頁' });
});
app.get('/reg',function(req,res){
res.render('reg', { title: '註冊' });
});
app.post('/reg',function(req,res){
});
app.get('/login',function(req,res){
res.render('login', { title: '登錄' });
});
app.post('/login',function(req,res){
});
app.get('/logout',function(req,res){
});
app.get('/post',function(req,res){
res.render('post', { title: '發表' });
});
app.post('/post',function(req,res){
});
};你會發現reg、login和post都有get和post方法，我們可以這麼理解：get方法是實現當用戶試圖訪問這個網頁時要顯示些什麼，post方 法是當從這個網頁上發出數據（這裏時提交表單）時要幹些什麼，所以訪問/和/logout就不需要post方法了。render函數的意思是，當你要訪問 比如主頁時，服務器找到index.ejs文件並替換變量title的值爲字符串’主頁’路由控制的雛形出來了，下面寫視圖部分，在views下面新建幾個文件，index.ejs、login.ejs、reg.ejs、post.ejs，然後再給每個頁面添加統一的頭部導航（header.ejs）和底部說明(footer.ejs)，使用的時候把<% -include header%>和<% -include footer%>分別放在頭尾就行了。
header.ejs
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Blog</title><link rel="stylesheet" href="stylesheets/style.css"></head><body>
<header><h1><%= title %></h1></header>
<nav><span><a title="主頁" href="/">主頁</a></span><span><a title="登錄" href="/login">登錄</a></span><span><a title="註冊" href="/reg">註冊</a></span></nav><article>footer.ejs
</article></body></html>
index.ejs
<%- include header %>
這是主頁
<%- include footer %><%- include header %>
<form method="post" name="form" id="form">
<table>
<tbody>
<tr>
<td><label for="username">用戶名:</label></td>
<td><input type="text" id="username" name="username" placeholder="請輸入用戶名"/></td>
</tr>
<tr>
<td><label for="password">密碼:</label></td>
<td><input type="password" id="password" name="password" placeholder="請輸入密碼"/></td>
</tr>
<tr><td colspan="2" class="btn" ><input type="submit" value="登錄"/></td></tr>
</tbody>
</table>
</form>
<%- include footer %>reg.ejs
<%- include header %>
<form method="post" name="form" id="form">
<table>
<tbody>
<tr>
<td><label for="username">用戶名:</label></td>
<td><input type="text" id="username" name="username" placeholder="請輸入用戶名"/></td>
</tr>
<tr>
<td><label for="password">密碼:</label></td>
<td><input type="password" id="password" name="password" placeholder="請輸入密碼"/></td>
</tr>
<tr>
<td><label for="comfirm_pwd">再次輸入密碼:</label></td>
<td><input type="password" id="comfirm_pwd" name="comfirm_pwd" placeholder="請再次輸入密碼"/></td>
</tr>
<tr><td colspan="2" class="btn"><input type="submit" value="註冊"/></td></tr>
</tbody>
</table>
</form>
<%- include footer %>然後再修改下style.css：
nav a:hover{
background: #2ECC71;
}
tr:last-child{
text-align: center;
}
td{
height: 24px;
padding: 5px;
}
td:first-child{
text-align: right;
}
td:last-child{
text-align: left;
}
td input[type="password"],td input[type="text"]{
display: block;
padding: 5px;
border: 1px solid gray;
border-radius: 3px;
}
td.btn{
text-align: center;
}
td.btn input{
padding:0 10px;
font-size: 16px;
font-weight: bold;
margin-top: 5px;
}
現在只是實現了視圖，邏輯操作還沒寫，那涉及到數據庫了，下一節吧。