1.設計路由
主頁：home.ejs 用戶登陸後進入的頁面 訪問路徑：/home
登陸頁面：login.ejs 用戶輸入用戶名密碼頁面 訪問路徑：/login
退出頁面：無 用戶點擊後回到登陸頁面 訪問路徑：/logout
2.新增頁面
我們上一節中已經知道了如何利用Express創建一個簡單的項目 。Express創建項目
項目創建好之後，打開views文件夾 創建home.ejs頁面和login.ejs頁面。
home.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Welcome <%= user.username %>, 歡迎登陸！！</h1>
<a claa="btn" href="/logout">退出</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form action="login" method="post">
用戶名：<input type="text" name="username">
密碼：<input type="password" name="pwd">
<input type="submit" value="登陸">
</form>
</body>
</html>
3.增加路由配置
我們打開routes/index.js 文件 在裏面增加如下方法 其中router.get是get請求 router.post是post請求
router.get('/login', function (req,res,next){
res.render('login', {title:'主頁' })
})
router.post('/login', function (req,res,next){
var user={
username:'admin',
pwd:123456
}
if(req.body.username==user.username && req.body.pwd==user.pwd){
res.redirect('home')
}
res.redirect('login');
})
router.get('/home', function (req,res,next){
var user={
username:'admin',
pwd:123456
}
res.render('home', { title: 'home',user: user })
})
router.get('/logout', function(req, res, next) {
res.redirect('login');
});4.啓動項目查看效果
我們的項目已經寫好了。快去試試吧。
5.頁面模塊化
我們在建立新的頁面的時候是不是發現頭部和底部的代碼是一樣的呢。所以我們可以把頁面的頭部和底部拿出來，使得我們以後更好的管理。
建立head.ejs,foot.ejs文件
head.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body> </body>
</html>
<% include head%>
<h1>Welcome <%= user.username %>, 歡迎登陸！！</h1>
<a claa="btn" href="/logout">退出</a>
<% include foot %>是不是簡潔很多恩！！！！