Nunjucks模板入门

概述

安装nunjucks

代码实现
server.js

const Koa = require("koa");//引入koa构造函数
const app = new Koa();//创建应用
const views = require("koa-views");//引入koa-views
const nunjucks = require("nunjucks");//引入nunjucks引擎

app.use(views(__dirname + "/views",{//,前面是模板文件的路径,后面是使用的模板引擎
    map:{html:"nunjucks"}//模板文件为html格式，通过nunjucks渲染html文件
}))

app.use(async (ctx) => {
    await ctx.render("index",{title:"hello nunjuncks"});
    //render第一个值为模板文件，第二个是要传递的值
})

app.listen(3000,() => {
    console.log("server is running");
});//设置监听端口

index.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>{{title}}</h1><!--传递的内容用{{}}包裹-->
</body>
</html>

把路由加上

const Koa = require("koa");//引入koa构造函数
const app = new Koa();//创建应用
const views = require("koa-views");//引入koa-views
const nunjucks = require("nunjucks");//引入nunjucks引擎
const router = require("koa-router")();

router.get("/",async ctx => {
    await ctx.render("index",{title:"首页"});//index在views文件夹中
})
router.get("/video",async ctx => {
    await ctx.render("index",{title:"视频"});
})

app.use(views(__dirname + "/views",{
    map:{html:"nunjucks"}
}))

app.use(router.routes());//中间件路由在最后

app.listen(3000,() => {
    console.log("server is running");
});

处理表单数据

server.js

const Koa = require("koa");//引入koa构造函数
const app = new Koa();//创建应用
const views = require("koa-views");//引入koa-views
const nunjucks = require("nunjucks");//引入nunjucks引擎
const router = require("koa-router")();

router.get("/",async ctx => {
    await ctx.render("index",{title:"首页"});//响应的内容
})
router.get("/video",async ctx => {
    await ctx.render("index",{title:"视频"});
})
router.get("/login",async ctx => {
    let username = ctx.query.username;//query可以获取到get请求参数
    let password = ctx.query.password;
    await ctx.render("home",{
        username:username,
        password:password
    });
})

app.use(views(__dirname + "/views",{
    map:{html:"nunjucks"}
}))

app.use(router.routes());

app.listen(3000,() => {
    console.log("server is running");
});

index.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="/login">
        <!--action的路径是提交表单到哪的位置，method是提交表单的请求方法，默认是get，一般用post-->
        <!--name:定义表单的数据字段-->
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="submit" value="登录">
    </form>
</body>
</html>

home.html 在views目录下

<!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>
    <p>用户名：{{username}}</p>
    <p>密码：{{password}}</p>
</body>
</html>

post请求
server.js

const Koa = require("koa");//引入koa构造函数
const app = new Koa();//创建应用
const views = require("koa-views");//引入koa-views
const nunjucks = require("nunjucks");//引入nunjucks引擎
const router = require("koa-router")();
const parser = require("koa-parser");//解析post请求的模块
app.use(parser());
router.get("/",async ctx => {
    await ctx.render("index",{title:"首页"});//响应的内容
})
router.get("/video",async ctx => {
    await ctx.render("index",{title:"视频"});
})
router.get("/login",async ctx => {
    let username = ctx.query.username;//query可以获取到get请求参数
    let password = ctx.query.password;
    await ctx.render("home",{
        username:username,
        password:password
    });
})
router.post("/login",async ctx => {
    //post请求不能用query解析，要新下一个第三方模块parser
    let username = ctx.request.body.username;
    let password = ctx.request.body.password;
    await ctx.render("home",{
        username:username,
        password:password
    });
})

app.use(views(__dirname + "/views",{
    map:{html:"nunjucks"}
}))

app.use(router.routes());

app.listen(3000,() => {
    console.log("server is running");
});

index.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="/login" method="post">
        <!--action的路径是提交表单到哪的位置，method是提交表单的请求方法，默认是get，一般用post-->
        <!--name:定义表单的数据字段-->
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="submit" value="登录">
    </form>
</body>
</html>