使用nunjucks实现登录功能
1、server.js
const Koa = require("koa");
const nunjucks = require("nunjucks");
const views = require("koa-views");
const Router = require('koa-router');
const parser = require('koa-parser');const app = new Koa();
const router = new Router();// 解决post请求
app.use(parser());
// 配置模板引擎
app.use(views(__dirname + '/views', {//将使用nunjucks模板引擎渲染以html为后缀的文件。map: { html: 'nunjucks' }
}));
// 配置路由
app.use(router.routes());app.use(async ctx => {//render方法渲染模板，第二个参数可以给模板传递参数await ctx.render("index",{title:"我的第一个模板"})
})router.get('/', async (ctx, next) => {await ctx.render('index',{title:"这是我的第一个模板引擎页面"})
});router.get('/form', async (ctx, next) => {await ctx.render('form')
});router.post('/data', async ctx => {console.log('dsfasf', ctx.request.body);let username = ctx.request.body.username;let password = ctx.request.body.password;if (username === 'admin' && password === '123456') {await ctx.render('success', { username });} else {await ctx.render('err');}
});app.listen(3000, () => {console.log("server is running");
})
2、form.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form action="/data" method="POST"><label for="username">用户名：</label><input type="text" name="username"><label for="password">密码：</label><input type="password" name="password"><input type="submit" value="提交"></form>
</body></html>
3、success.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>欢迎回来{
{username}}</h1>
</body></html>
4、err.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>登录失败！</h1>
</body></html>