nodejs--express開發我的博客（-）

時間 2019-12-18

標籤 nodejs express 開發我的博客简体版

原文原文鏈接

寫完了入門筆記，開始進入開發階段吧。基於上一節的內容，如今着手開發我的博客系統。先劃分一下功能吧javascript

/:首頁css

/login:登錄html

/reg:註冊java

/post:發表文章數據庫

/logout:退出服務器

首先規劃一下路由控制，在如今的app.js中控制路由的語句是app

app.get('/', routes.index);
app.get('/users', user.list);//路由控制

每加一個路由控制就要接一句app.get()或者是app.post()，當路由不少時，app.js裏面的代碼就會不少，不便於維護和修改。因此換一種寫法，在index.js裏面寫路由控制：函數

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

同時把app.js裏面的路由控制語句換成：post

routes(app);ui

這是你如今看到的寫法，我們爲了簡化和便於修改，換成下面這種寫法：

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;
}

預覽下頁面：