05-nunjucks模板入门

通过模板引擎，我们可以直接设置响应的html页面，并且把后台数据绑定到模板张，发给客户端，而不是以字符串的方式发送出去，目前市面上有很多模板引擎，例如nunjucks。

安装

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

cnpm install --save koa-views  nunjucks

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

配置模板引擎

app.ues(views(两个参数) 第一个参数是指定模板引擎的存放在哪个目录，第二个是指定模板引擎

const Koa = require("koa"); // 引入koa 构造函数
const views = require("koa-views"); // 引入 koa-views
const nunjucks = require("nunjucks") // 引入nunjucks
const app = new Koa(); // 创建应用
app.use(views(__dirname+ "/views",{map:{html:"nunjucks"}
})) // 第一个是存放路径 第二个是个函数 指定模板引擎的类型

在存放模板的文件内创建html文件来实现模板

用ctx渲染模板 切记引入路由需要设置成立即执行函数

app.use一个async函数形参ctx上下文然后ctx.render （render是一个异步操作）在ctx前面加入一个await （等待），render（）第一个参数写模板的名字，会根据前面的设置自动取views目录内寻找，第二个参数可以指定一个数据用{}添加标题：{内容}可以将内容传递给index文件。

const Koa = require("koa"); // 引入koa 构造函数
const router = require("koa-router")(); // 引入路由
const views = require("koa-views"); // 引入 koa-views
const nunjucks = require("nunjucks"); // 引入nunjucks
const app = new Koa(); // 创建应用router.get("/",async ctx =>{await ctx.render("index",{title:"首页"})
});
router.get("/doc",async ctx =>{await ctx.render("index",{title:"视频页 "})
});
app.use(views(__dirname+ "/views",{map:{html:"nunjucks"}
}));
app.use(router.routes());app.listen(3000,()=>{console.log("response [200]")
});

处理表单数据

表单一般有两种方式来提交数据，常用的method=“”表示发送请求的时候用什么方法请求，（发送请求用get，提交数据用post）

ctx.query.username;（query可以获取到get请求的参数）.username（指定获取的参数）

get请求获取成功：

const Koa = require("koa"); // 引入koa 构造函数
const router = require("koa-router")(); // 引入路由
const views = require("koa-views"); // 引入 koa-views
const nunjucks = require("nunjucks"); // 引入nunjucks
const app = new Koa(); // 创建应用router.get("/",async ctx =>{await ctx.render("index",{title:"首页"})
});
router.get("/doc",async ctx =>{await ctx.render("index",{title:"视频页 "})
});
// 显示提交的账户密码
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(views(__dirname+ "/views",{map:{html:"nunjucks"}
}));
app.use(router.routes());app.listen(3000,()=>{console.log("response [200]")
});

接下来是post请求这里需要先下载koa-parser模块然后app.use(parser(()引入中间件(引入的写在上面use（）),这样就可以解析post请求的函数了，post请求不能用query来获取参数了，此处应该使用request.body.需要获取的信息来获取参数。

const Koa = require("koa"); // 引入koa 构造函数
const router = require("koa-router")(); // 引入路由
const parser = require("koa-parser");// 引入解析post请求的模块
const views = require("koa-views"); // 引入 koa-views
const nunjucks = require("nunjucks"); // 引入nunjucks
const app = new Koa(); // 创建应用
app.use(parser());
router.get("/",async ctx =>{await ctx.render("index",{title:"首页"})
});
router.get("/doc",async ctx =>{await ctx.render("index",{title:"视频页 "})
});
// 显示 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(views(__dirname+ "/views",{map:{html:"nunjucks"}
}));
app.use(router.routes());
app.listen(3000,()=>{console.log("response [200]")
});

05-nunjucks模板入门相关推荐

Nunjucks模板入门
一.为什么要用Nunjucks? 我们上节课设置页面内容时,是用模板字符串来写的,但是内容多的时候,这样就不好看,也不方便. 二.安装 1.koa-views:告诉计算机,要用哪个模板引擎 2.nun ...
Node——Nunjucks模板入门
一.模板引擎概述之前我们通过Koa创建了一个web服务器,并可以根据用户请求路径的不同响应不同的页面,但是每一个页面的内容都是通过字符串的方式给送给浏览器的,这样的开发方式并不友好,我们更希望直接发 ...
http+nunjucks模板引擎、koa+nunjucks模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...
（05）FPGA入门条件
(05)FPGA入门条件 1 文章目录 1)文章目录 2)FPGA入门与提升课程介绍 3)FPGA简介 4)FPGA入门条件 5)技术交流 6)参考资料 2 FPGA入门与提升课程介绍 1)FPGA入 ...
小试牛刀之NunJucks模板引擎
NunJucks模板引擎 NunJucks中文文档模板引擎有很多,我之前就曾用过ejs,都是对页面进行渲染.接下来带大家简单体验一下Nunjucks.真别说,插值语法有点vue的那股味道了. 初试N ...
易于学习的.NET 6.0和Angular——Angular模板入门——第1部分
目录介绍背景先决条件使用代码使用Angular模板创建ASP.NET Core 带有Startup.cs的Visual Studio 2019 Visual Studio 2022不需要St ...
Thymeleaf模板入门（三）
Thymeleaf基本语法 1. 往期 Thymeleaf模板入门(一) Thymeleaf模板入门(二) 2. 案例实体类User package top.infinxkj.thymeleaf.p ...
Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
八、Nunjucks模板语法
目录一.概述一.循环语句二.分支语句三.模板继承四.include 一.概述在上一节内容中,我们了解到通过`render`方法不仅可以指定渲染的模板,还可以向模板传递数据.本节我们继续讲解 ...
nunjucks 模板引擎常用语法学习总结
文章目录 nunjucks模板引擎 nunjucks模板注释 koa-nunjucks-2的使用 nunjucks 插值语法 nunjucks 的判断语句 nunjucks 的循环语句 nunjuck ...

05-nunjucks模板入门

05-nunjucks模板入门相关推荐

最新文章

热门文章