寫在前面
這次做一個小小的登陸&注銷登陸功能練習(xí)下所學(xué)的知識飒货，并擴充些新知識谒撼。
image.png
image.png
image.png
目錄
- 新建 login 項目
- 下載&導(dǎo)入Bootstrap鱼鼓、jQuery
- 業(yè)務(wù)需求實現(xiàn)
新建 login 項目
express -e login //新建 login 項目，-e 指使用 Ejs 模版引擎
cd login //切換到 login 目錄
npm i //安裝項目依賴
npm start //啟動項目乍狐，跑起來看看
下載&導(dǎo)入Bootstrap
Bootstrap下載傳送門
jQuery下載傳送門
將bootstrap.min.js jquery-3.2.1.min.js和bootstrap.min.css分別復(fù)制到 public 下對應(yīng)的文件夾
image.png
業(yè)務(wù)需求實現(xiàn)
分析
訪問路徑：/弄企，展示頁面：index.ejs超燃，不需要登陸，可以直接訪問
訪問路徑：/login拘领，展示頁面：login.ejs意乓，登陸頁面，輸入正確的用戶名密碼院究，跳轉(zhuǎn)到 home.ejs
訪問路徑：/home洽瞬，頁面：home.ejs，用戶登陸后才可以訪問
訪問路徑：/logout业汰，頁面：home.ejs伙窃，注銷登陸后回到 index.ejs
先寫UI頁面
- 在 views 文件夾下新建文件 header.ejs 和 footer.ejs
<!--header.ejs-->
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
</head>
<body class="container">
<!--footer.ejs-->
<script src="/javascripts/jquery-3.2.1.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
</body>
</html>
- 寫 index.ejs
<!--index.ejs-->
<% include header.ejs %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<a class="btn btn-default" href="/login" role="button">登錄</a>
<% include footer.ejs %>
- 寫 login.ejs
<!--login.ejs-->
<% include header.ejs %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form class="form-inline" method="POST">
<div class="form-group">
<label class="sr-only" for="username">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="username" name="username">
</div>
<div class="form-group">
<label class="sr-only" for="password">password</label>
<input type="password" class="form-control" id="password" placeholder="password" name="password">
</div>
<button type="submit" class="btn btn-default">登陸</button>
</form>
<% include footer.ejs %>
- 寫 home.ejs
<!--home.ejs-->
<% include header.ejs %>
<h1><%= title %></h1>
<p>登陸成功：<%= user.username %></p>
<a class="btn btn-default" href="/logout" role="button">注銷登錄</a>
<% include footer.ejs %>
寫MCV中的c，controller
在 routes 下新建 controller.js 文件样漆，并增加如下方法
// controller.js
exports.index = function (req, res) {
res.render('index', { title: '登陸&注銷登陸實踐' })
}
exports.login = function (req, res) {
res.render('login', { title: '登陸頁面' })
}
exports.doLogin = function (req, res) {
var user = {
username: 'admin',
password: 'admin'
}
if (req.body.username === user.username && req.body.password === user.password) {
res.redirect('/home')
}
res.redirect('/login')
}
exports.logout = function (req, res) {
res.redirect('/')
}
exports.home = function (req, res) {
var user = {
username: 'admin',
password: 'admin'
}
res.render('home', { title: '主頁面', user: user })
}
在 app.js 中添加路由
// app.use('/', index);
// app.use('/users', users);
var controller = require('./routes/controller')
app.get('/', controller.index)
app.get('/login', controller.login)
app.post('/login', controller.doLogin)
app.get('/logout', controller.logout)
app.get('/home', controller.home)
到這里半成品已經(jīng)ok了为障，可以構(gòu)建項目試試看了～
加入 Session 再完善下
安裝 express-session 依賴庫
npm install express-session //在工程目錄下執(zhí)行
設(shè)置 session
//在 app.js 中設(shè)置session
var session = require('express-session')
app.use(session({
secret: 'login&logout',
cookie: { maxAge: 900000 },
resave: false,
saveUninitialized: false
}));
//注意要寫在路由的前面，app.js 有順序要求
app.use(function (req, res, next) {
res.locals.user = req.session.user;
var err = req.session.error;
delete req.session.error;
res.locals.message = '';
//用于錯誤提示
if (err) res.locals.message = '<div class="alert alert-danger" role="alert">' + err + '</div>';
next();
})
// app.use('/', index);
// app.use('/users', users);
修改下 controller.js 中的方法
exports.doLogin = function (req, res) {
var user = {
username: 'admin',
password: 'admin'
}
if (req.body.username === user.username && req.body.password === user.password) {
req.session.user = user;
res.redirect('/home')
}
res.redirect('/login')
}
exports.logout = function (req, res) {
req.session.user = null;
res.redirect('/')
}
exports.home = function (req, res) {
res.render('home', { title: '主頁面'})
}
增加登陸失敗提示
分別修改 login.ejs 和 controller.js 的 doLogin 方法
<!--login.ejs-->
<% include header.ejs %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form class="form-inline" method="POST">
<%- message %> <!--增加錯誤提示-->
<div class="form-group">
<label class="sr-only" for="username">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="username" name="username">
</div>
<div class="form-group">
<label class="sr-only" for="password">password</label>
<input type="password" class="form-control" id="password" placeholder="password" name="password">
</div>
<button type="submit" class="btn btn-default">登陸</button>
</form>
<% include footer.ejs %>
exports.doLogin = function (req, res) {
var user = {
username: 'admin',
password: 'admin'
}
if (req.body.username === user.username && req.body.password === user.password) {
req.session.user = user;
res.redirect('/home')
}else{
req.session.error = "用戶名或密碼錯誤"
res.redirect('/login')
}
}
輸錯誤的賬號放祟，看下如何
image.png
頁面訪問控制
在 app.js 中加兩個方法
function needAuth(req, res, next) {
if (!req.session.user) {
req.session.error = '請先登錄'
res.redirect('/login')
}
next();
}
function hasAuth(req, res, next) {
if (req.session.user) {
res.redirect('/home')
}
next();
}
并修改一下路由
app.all('/login', hasAuth) //all 方法攔截所有請求
app.get('/login', controller.login)
app.post('/login', controller.doLogin)
app.get('/logout', needAuth)
app.get('/logout', controller.logout)
app.get('/home', needAuth)
app.get('/home', controller.home)
到此鳍怨，這個小練習(xí)就完成了
