文档章节

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

柯南和由美
 柯南和由美
发布于 01/14 20:15
字数 712
阅读 12
收藏 0

技术架构:

 

在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开发实战》吧!

© 著作权归作者所有

柯南和由美
粉丝 8
博文 45
码字总数 34822
作品 0
海淀
私信 提问
iKcamp新书上市《Koa与Node.js开发实战》

内容摘要 Node.js 10已经进入LTS时代!其应用场景已经从脚手架、辅助前端开发(如SSR、PWA等)扩展到API中间层、代理层及专业的后端开发。Node.js在企业Web开发领域也日渐成熟,无论是在API...

iKcamp
2018/12/27
0
0
iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 解析JSON

视频地址:https://www.cctalk.com/v/15114923886141 JSON 数据 我颠倒了整个世界,只为摆正你的倒影。 前面的文章中,我们已经完成了项目中常见的问题,比如 、、、等。那么, 呢? 格式数据...

iKcamp
2018/01/15
27
0
使用Koa.js,离不开这十个中间件

随着ES6的普及,async/await的语法受到更多JS开发者的青睐,Koa.js作为比较早支持使用该语法的Node框架越来越受到大家的喜爱,虽然Koa.js本身支持的功能很有限,但官方和社区提供了很多各种功...

fineen
2018/04/05
0
0
Node.js 应用故障排查手册 —— 利用 CPU 分析调优吞吐量

楔子 在我们想要新上线一个 Node.js 应用之前,尤其是技术栈切换的第一个 Node.js 应用,由于担心其在线上的吞吐量表现,肯定会想要进行性能压测,以便对其在当前的集群规模下能抗住多少流量...

奕钧
03/25
0
0
Node.js 框架对比之 Express VS Koa

背景 上图是一个典型的采用 Node.js 开发 web 应用的前后端结构,下面介绍一下 Node 服务层在其中的作用以及使用 Node.js 的一些优劣。 Node 服务层作用: 请求代理 传统做法是后端提供 api ...

大灰狼的小绵羊哥哥
2018/10/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
8
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
7
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
6
0
HTML5+CSS3从入门到精通 中文pdf版​

本文转载于:专业的前端网站➵HTML5+CSS3从入门到精通 中文pdf版 HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指...

前端老手
昨天
6
0
聊聊nacos client的ConfigFilterChainManager

序 本文主要研究一下nacos client的ConfigFilterChainManager IConfigFilterChain nacos-1.1.3/api/src/main/java/com/alibaba/nacos/api/config/filter/IConfigFilterChain.java public in......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部