写在前面
这次做一个小小的登陆&注销登陆功能练习下所学的知识，并扩充些新知识。
image.png
image.png
image.png
目录
- 新建 login 项目
- 下载&导入Bootstrap、jQuery
- 业务需求实现
新建 login 项目
express -e login //新建 login 项目，-e 指使用 Ejs 模版引擎
cd login //切换到 login 目录
npm i //安装项目依赖
npm start //启动项目，跑起来看看
下载&导入Bootstrap
Bootstrap下载传送门
jQuery下载传送门
将bootstrap.min.js jquery-3.2.1.min.js和bootstrap.min.css分别复制到 public 下对应的文件夹
image.png
业务需求实现
分析
访问路径：/，展示页面：index.ejs，不需要登陆，可以直接访问
访问路径：/login，展示页面：login.ejs，登陆页面，输入正确的用户名密码，跳转到 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)
到这里半成品已经ok了，可以构建项目试试看了～
加入 Session 再完善下
安装 express-session 依赖库
npm install express-session //在工程目录下执行
设置 session
//在 app.js 中设置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)
到此，这个小练习就完成了
网友评论