效果图
login.ejs代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cookie</title>
</head>
<body>
<form action="/loginsubmit" method="POST">
<input type="text" name="username" placeholder="用户名" /><br>
<input type="password" name="password" placeholder="密码" />
<input type="submit" value="提交">
</form>
<div><%=message%></div>
</body>
</html>
app.js代码：
const Koa = require('koa');
const Router = require('koa-router');
const Views = require('koa-views');
const BodyParser = require('koa-bodyparser');
const Static = require('koa-static');
const Session = require('koa-session');
// 实例化
const app = new Koa();
const router = new Router();
// 配置静态资源中间件
app.use(Static(__dirname + "/static"));
// 配置ejs模板 ：1、模板文件所见的目录 2、模板文件的后缀名 .ejs
app.use(Views('views', {
extension: 'ejs'
}));
// 配置bodyparset中间件
app.use(BodyParser());
//配置session的中间件
app.keys = ['secret-web-1CC4']; /**cookie的签名 默认*/
const CONFIG = {
key: 'koa:sess', /** 默认 */
maxAge: 10000, /** cookie的过期时间 */
overwrite: true, /** 默认 可以重写过期时间 */
httpOnly: true, /** true表示只有服务器端可以获取 cookie */
signed: true, /** 默认 签名 */
rolling: true, /** 在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默认：false） */
renew: false, /** 当用户进行浏览器操作时刷新 cookie 过期时间 */
};
app.use(Session(CONFIG, app));
//路由
router.get('/login', async ctx => {
await ctx.render('login', {message:''})
});
// 路由处理登录信息
router.post('/loginsubmit', async ctx => {
let username =ctx.request.body.username;
let password =ctx.request.body.password;
console.log(username+">>"+password);
if(username== "admin"&&password=='123'){
// 保存登录成功状态信息到session
ctx.session.userinfo = username;
// 重定向到主界面
ctx.redirect('/main')
}else(
await ctx.render('login',{message:"用户名或者密码出错"})
)
})
router.get('/main',async ctx=>{
let userinfo = ctx.session.userinfo || '';
console.log(userinfo);
if(userinfo == ''){
await ctx.render('login',{message:'未登录！不能访问'})
}else{
await ctx.render('index',{})
}
})
app.use(router.routes(), router.allowedMethods());
app.listen(3000, () => {
console.log('启动服务，监听3000端口');
})
文件目录结构
网友评论