Nunjucks模板入门

最新推荐文章于 2024-07-08 22:56:50 发布

pro1822

最新推荐文章于 2024-07-08 22:56:50 发布

阅读量756

点赞数

分类专栏： Node基础文章标签： node.js

本文链接：https://blog.csdn.net/qq_41523175/article/details/124298292

版权

Node基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、为什么要用Nunjucks？

我们上节课设置页面内容时，是用模板字符串来写的，但是内容多的时候，这样就不好看，也不方便。

二、安装

1、koa-views：告诉计算机，要用哪个模板引擎

2、nunjucks：nunjucks模板引擎

三、使用

1、项目目录

views存放模板（即网页）。

2、编写代码

server.js文件：

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

// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

// index:网页名
// title:传递的参数
app.use(async (ctx) => {
    await ctx.render("index", {
        title: "hello nunjucks!"
    });
})

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

index.html文件：

<body>
    <!-- title是后台传过来的值  -->
    <h1>{{title}}</h1>
</body>

3、运行js

成功获取到后台传过来的数据。

四、配合Koa框架的路由使用

1、server.js

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

// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

// index:网页名
// title:传递的参数
router.get("/", async (ctx) => {
    await ctx.render("index", {
        title: "hello nunjucks!"
    });
})

app.use(router.routes());

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

显示如下：

五、传递前台表单数据

1、home.html

<body>
    <p>用户名:{{username}}</p>
    <p>密码:{{password}}</p>
</body>

2、index.html

<body>
    <!-- title是后台传过来的值  -->
    <h1>{{title}}</h1>

    <form action="/login" method="get">
        <input type="text" name="username">
        <input type="password" name="password">
        <!-- <input type="submit" value="提交"> -->
        <button>提交</button>
    </form>
</body>

3、server.js

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

// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

// index:网页名
// title:传递的参数
router.get("/", async (ctx) => {
    await ctx.render("index", {
        title: "hello nunjucks!"
    });
})

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

app.use(router.routes());

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

4、运行效果

上面写的是get方式的传输数据。

如果使用post，则需要再下载一个模块。

六、post方式

1、下载模块

2、修改server.js

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

// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

app.use(parser());

// index:网页名
// title:传递的参数
router.get("/", async (ctx) => {
    await ctx.render("index", {
        title: "hello nunjucks!"
    });
})

// get方式
router.get("/login", async (ctx) => {
    let username = ctx.query.username;
    let password = ctx.query.password;
    await ctx.render("home", {
        username: username,
        password: password
    })
})

// post方式
router.post("/login", async (ctx) => {
    let username = ctx.request.body.username;
    let password = ctx.request.body.password;
    await ctx.render("home", {
        username: username,
        password: password
    })
})

app.use(router.routes());

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

效果如下：