Nunjucks模板入门

# 一、为什么使用模板引擎

在Koa创建服务器时[/pages/ce4ac3/],采用路由根据用户请求不同路径响应不同的页面，但是页面内容是直接通过模板字符串的方式返回给浏览器的，这样开发方式并不好，开发中更希望能够直接发送html页面。

可以通过模板引擎来解决这个问题，模板引擎可以直接设置响应的html页面，并且可以把后台数据绑定到模板中，然后返回给客户端，这里学习使用的是nunjucks。

# 二、安装nunjucks

在koa框架下安装nunjucks需要两个第三方模块：

koa-views：负责配置koa的模块引擎
nunjucks：下载模板引擎

npm install --save koa-views
npm install --save nunjucks

1
2

# 三、配置模板引擎

引入koa、koa-views、koa-router 和 nunjucks：

const Koa = require('koa');
const views = require('koa-views');
const router = require('koa-router')()
const nunjucks = require('nunjucks')

const app = new Koa();

1
2
3
4
5
6

通过use引用中间件，并通过koa-views指定使用的模板引擎以及模板引擎的文件路径：

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

1
2
3

然后新建views文件夹，在文件夹中新建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>

1
2
3
4
5
6
7
8
9
10
11
12

再通过app.use() 中的render来渲染模板文件

app.use(async ctx => {
    await ctx.render('index',{
        title: '模板'
    });
})

1
2
3
4
5

render的第一个参数是路径文件（(默认路径就是koa-views来设置的),第二个参数是可以传递给模板的变量（模板中需要用{{}}来获取）

也可以通过路由来实现页面的跳转：

router.get('/', async ctx => {
    await ctx.render('index',{title:'首页'})
})

router.get('/video', async ctx => {
    await ctx.render('index', {title:'视频'})
})

1
2
3
4
5
6
7

这样可以实现请求不同路径时，渲染的虽然是一个页面，但是绑定不同的数据。

# 四、处理表单数据

# GET 请求数据

GET请求表单数据时候，请求数据信息会暴露在浏览器的地址栏，一般不用于密码类表单，这里仅仅是为了练习使用。

首先修改views/index页面，添加表单元素：

<form action="/login">
        <input type="text" name="username" id="">
        <input type="password" name="password" id="">
        <input type="submit" value="登陆">
</form>

1
2
3
4
5

然后增加登陆路由：

router.get('/login', async ctx => {
    let username = ctx.query.username;
    let password = ctx.query.password;
    await ctx.render('login', {
        username,
        password
    })
})

1
2
3
4
5
6
7
8

同时需要在views文件下新建login.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>
    <p>用户名：{{username}}</p>
    <p>密码:{{password}}</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

# POST 请求

将views/index中表单改为post请求方法；

同时在服务端设置post路由,由于ctx.query只能获取get请求的参数，因此需要下载并引入koa-parser模块：

const parser = require('koa-parser')
app.use(parser());

1
2

再设置post对应路由：

router.post('/login', async ctx => {
    let username = ctx.request.body.username;
    let password = ctx.request.body.password;
    await ctx.render('login', {
        username,
        password
    })
})

1
2
3
4
5
6
7
8

编辑

上次更新: 2022/04/01, 21:54:01

← Koa框架基础 nunjucks模板语法→