码迷,mamicode.com
首页 > Web开发 > 详细

Koa与Node.js开发实战(3)——Nunjucks模板在Koa中的应用(视频演示)

时间:2019-01-14 21:24:17      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:oca   指定   abap   splay   安装   oct   host   width   静态服务器   

技术架构:

技术分享图片技术分享图片?

 

在Koa中应用Nunjucks,需要先把Nunjucks集成为符合Koa规格的中间件(Middleware),从本质上来讲,集成后的中间件的作用是给上下文对象绑定一个render(view, model)方法,这样,后面的Controller就可以调用这个方法来渲染模板了。

NPM社区有很多开源爱好者提供的第三方中间件。开发者可以根据实际情况自由选择,也可以像iKcamp团队一样,自己实现集成Nunjucks。本示例中,选用了koa-nunjucks-2模块。

安装koa-nunjucks-2,命令如下:

npm install koa-nunjucks-2 --save

此处的示例代码将会在5.1.3节的基础上继续操作。修改app.js并引入koa-nunjucks-2中间件,同时指定存放视图文件的目录views。项目结构如下:

├── controller/
│     ├── home.js 
├── service/
│     ├── home.js
├── views/
├── app.js
├── router.js
修改app.js文件,部分代码已省略。代码如下:
01     const nunjucks = require(koa-nunjucks-2);       // 引入模板引擎

02     app.use(nunjucks({

03              ext: html,                                 // 指定视图文件默认后缀

04              path: path.join(__dirname, views),            // 指定视图目录

05              nunjucksConfig: {

06                        trimBlocks: true                                 // 开启转义,防止Xss漏洞

07              }

08     }));

 

在之前的项目中,视图内容被写在了controller/home.js里面,现在需要把视图部分的代码迁移到views中。新建view/home/login.html,代码如下:
01     <!DOCTYPE html>

02     <html lang="en">

03              <head>

04                        <title></title>

05                        <meta charset="UTF-8">

06                        <meta name="viewport" content="width=device-width, initial-scale=1">

07              </head>

08     <body>

09     <form action="/user/login" method="post">

10              <input name="name" type="text" placeholder="请输入用户名:ikcamp" />

11              <br/>

12              <input name="password" type="text" placeholder="请输入密码:123456" />

13              <br/>

14              <button>{{btnName}}</button>

15     </form>

16     </body>

17     </html>

重写controller/home.js中的login方法。代码如下:

login: async(ctx, next) => {

         await ctx.render(home/login,{

                   btnName: GoGoGo

         });

},

注意:函数中使用了await语句来异步读取文件,因为需要等待,所以在读取文件之后再进行请求的响应。

打开浏览器并访问地址http://localhost:3000/user,将会看到一个简易版的登录视图。

对Nunjucks模板引擎的引入给本项目增加了View层。实现更完善的视图功能还需要增加静态资源目录等,如果能直接使用静态服务器的话更好。后面章节中,将会介绍如何增加静态文件以及对项目的视图进行美化。

本节在线视频地址https://camp.qianduan.group/koa2/2/1/6,二维码

技术分享图片技术分享图片?

喜欢就和我一起学习这本书《Koa与Node.js开发实战》吧!

技术分享图片技术分享图片?

Koa与Node.js开发实战(3)——Nunjucks模板在Koa中的应用(视频演示)

标签:oca   指定   abap   splay   安装   oct   host   width   静态服务器   

原文地址:https://www.cnblogs.com/liqiang001/p/10268816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!