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]")
});