iKcamp|基于Koa2搭建Node.js实战(含视频)? 视图Nunjucks

视频地址:https://www.cctalk.com/v/15114923888328

视图 Nunjucks

彩虹是上帝和人类立的约,上帝不会再用洪水灭人。

客户端和服务端之间相互通信,传递的数据最终都会展示在视图中,这时候就需要用到『模板引擎』。

什么是模板引擎?

模板引擎是为了使用户界面与业务数据分离而产生的,可以生成特定格式的文档。例如,用于网站的模板引擎会生成一个标准的 HTML 文档。

市面上常见的模板引擎很多,例如:SmartyJadeEjsNunjucks 等,可以根据个人喜好进行选择。koa-viewskoa-nunjucks-2 等支持 Koa 的第三方中间件也可以自行选择。

本项目中,我们使用 koa-nunjucks-2 作为模板引擎。NunjucksMozilla 开发的,纯 js 编写的模板引擎,既可以用在 Node 环境下,也可以运行在浏览器端。koa-nunjucks-2 是基于 Nunjucks 封装出来的第三方中间件,完美支持 Koa2

Nunjucks 介绍

首先我们需要了解 Nunjucks 的几个特性

简单语法

变量

  {{ username }}

  {{ foo.bar }}
  {{ foo["bar"] }}

如果变量的值为 undefinednull ,将不予显示。

过滤器

  {{ foo | title }}
  {{ foo | join(",") }}
  {{ foo | replace("foo", "bar") | capitalize }}

if 判断

  {% if variable %}
    It is true
  {% endif %}

  {% if hungry %}
    I am hungry
  {% elif tired %}
    I am tired
  {% else %}
    I am good!
  {% endif %}

for 循环

  var items = [{ title: "foo", id: 1 }, { title: "bar", id: 2}]
  <h1>Posts</h1>
  <ul>
  {% for item in items %}
    <li>{{ item.title }}</li>
  {% else %}
    <li>This would display if the ‘item‘ collection were empty</li>
  {% endfor %}
  </ul>

macro

宏:定义可复用的内容,类似于编程语言中的函数

  {% macro field(name, value=‘‘, type=‘text‘) %}
  <div class="field">
    <input type="{{ type }}" name="{{ name }}"
          value="{{ value | escape }}" />
  </div>
  {% endmacro %}

接下来就可以把 field 当作函数一样使用:

  {{ field(‘user‘) }}
  {{ field(‘pass‘, type=‘password‘) }}

更多语法内容请查阅官方文档

继承功能

网页常见的结构大多是头部、中间体加尾部,同一个网站下的多个网页,头部和尾部内容通常来说基本一致。于是我们可以采用继承功能来进行编写。

先定义一个 layout.html

  <html>
    <head>
      {% block head %}
      <link rel="stylesheet">
      {% endblock %}
    </head>
    <body>
      {% block header %}
      <h1>this is header</h1>
      {% endblock %}

      {% block body %}
      <h1>this is body</h1>
      {% endblock %}

      {% block footer %}
      <h1>this is footer</h1>
      {% endblock %}

      {% block content %}
      <script>
        //this is place for javascript
      </script>
      {% endblock %}
    </body>
  </html>

layout 定义了五个模块,分别命名为:headheaderbodyfootercontentheaderfooter 是公用的,因此基本不动。业务代码的修改只需要在 body 内容体中进行、业务样式表和业务脚本分别在头部 head 和底部 content 中引入。

接下来我们再定义一个业务级别的视图页面:home.html

  {% extends ‘layout.html‘ %}

  {% block head %}
  <link href="home.css">
  {% endblock %}

  {% block body %}
  <h1>home 页面内容</h1>
  {% endblock %}

  {% block content %}
  <script src="home.js"></script>
  {% endblock%}

最终的 home.html 输出后如下所示:

  <html>
    <head>
      <link href="home.css">
    </head>
    <body>
      <h1>this is header</h1>

      <h1>home 页面内容</h1>

      <h1>this is footer</h1>  

      <script src="home.js"></script>
    </body>
  </html>

安全性

请对特殊字符进行转义,防止 Xss 攻击。若在页面上写入 Hello World<script>alert(0)</script> 这类字符串变量,并且不进行转义,页面渲染时该脚本就会自动执行,弹出提示框。

安装并运行

安装 koa-nunjucks-2:

npm i koa-nunjucks-2 -S

修改 app.js,引入中间件,并指定存放视图文件的目录 views

  const Koa = require(‘koa‘)
  const path = require(‘path‘)
  const bodyParser = require(‘koa-bodyparser‘)
  const nunjucks = require(‘koa-nunjucks-2‘)

  const app = new Koa()
  const router = require(‘./router‘)

  app.use(nunjucks({
    ext: ‘html‘,
    path: path.join(__dirname, ‘views‘),// 指定视图目录
    nunjucksConfig: {
      trimBlocks: true // 开启转义 防Xss
    }
  }));

  app.use(bodyParser())
  router(app)
  app.listen(3000, () => {
    console.log(‘server is running at http://localhost:3000‘)
  })

在之前的项目中,视图被写在了 controller/home 里面,现在我们把它迁移到 views 中:

新建 views/home/login.html:

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <form action="/user/register" method="post">
      <input name="name" type="text" placeholder="请输入用户名:ikcamp" />
      <br/>
      <input name="password" type="text" placeholder="请输入密码:123456" />
      <br/>
      <button>{{btnName}}</button>
    </form>
  </body>

  </html>

重写 controller/home 中的 login 方法:

  login: async(ctx, next) => {
    await ctx.render(‘home/login‘,{
      btnName: ‘GoGoGo‘
    })
  },

注意: 这里我们使用了 await 来异步读取文件。因为需要等待,所以必须保证读取文件之后再进行请求的响应。

增加了 views 层之后,视图功能还不算完善,我们还需要增加静态资源目录。当然,如果能直接使用静态服务器的话更好。下一节中,我们将讲述下如何增加静态文件及美化项目视图。

下一篇:处理静态资源——指定静态文件目录,设定缓存

上一篇:iKcamp新课程推出啦~~~~~iKcamp|基于Koa2搭建Node.js实战(含视频)? 代码分层

推荐: 翻译项目Master的自述:

1. 干货|人人都是翻译项目的Master

2. iKcamp出品微信小程序教学共5章16小节汇总(含视频)

原文地址:https://www.cnblogs.com/ikcamp/p/8241969.html

时间: 2024-10-13 08:54:23

iKcamp|基于Koa2搭建Node.js实战(含视频)? 视图Nunjucks的相关文章

iKcamp|基于Koa2搭建Node.js实战(含视频)? 代码分层

视频地址:https://www.cctalk.com/v/15114923889408 文章 在前面几节中,我们已经实现了项目中的几个常见操作:启动服务器.路由中间件.Get 和 Post 形式的请求处理等.现在你已经迈出了走向成功的第一步. 目前,整个示例中所有的代码都写在 app.js 中.然而在业务代码持续增大,场景更加复杂的情况下,这种做法无论是对后期维护还是对患有强迫症的同学来说都不是好事.所以我们现在要做的就是:『分梨』. 分离 router 路由部分的代码可以分离成一个独立的文件

iKcamp|基于Koa2搭建Node.js实战(含视频)? 记录日志

沪江CCtalk视频地址:https://www.cctalk.com/v/15114923883523 log 日志中间件 最困难的事情就是认识自己. 在一个真实的项目中,开发只是整个投入的一小部分,版本迭代和后期维护占了极其重要的部分.项目上线运转起来之后,我们如何知道项目运转的状态呢?如何发现线上存在的问题,如何及时进行补救呢?记录日志就是解决困扰的关键方案.正如我们每天写日记一样,不仅能够记录项目每天都做了什么,便于日后回顾,也可以将做错的事情记录下来,进行自我反省.完善的日志记录不仅能

iKcamp|基于Koa2搭建Node.js实战(含视频)? 错误处理

沪江CCtalk视频地址:https://www.cctalk.com/v/15114923887518 处理错误请求 爱能遮掩一切过错. 当我们在访问一个站点的时候,如果访问的地址不存在(404),或服务器内部发生了错误(500),站点会展示出某个特定的页面,比如: 那么如何在 Koa 中实现这种功能呢?其实,一个简单的中间件即可实现,我们把它称为 http-error.实现过程并不复杂,拆分为三步来看: 第一步:确认需求 第二步:整理思路 第三步:代码实现 确认需求 打造一个事物前,需要先确

用node.js 搭建的博客程序心得(node.js实战读书笔记1)

学习node已经有一段时间了,之前把了不起的node.js看完了,基本算了解了一些node的基本的用法还有一些概念了,然后就开始看第二本node.js实战,第一章就是搭建一个博客程序.但是不得不吐槽一下node,发展得太块了,很多库已经和之前的用法不一样了,就要一直去百度google来查询最新的用法,其实我觉得这样并不见得是一件好事,因为不稳定,所以就不好学习,就要一直保持对于node的关注.不废话了,这篇文章就大概说一些在这章里面所学习到的一些东西,经验总结吧 1.express - 基于 N

SSH2+LigerUI+JBPM5+Node.js实战开发视频教程

基于SSH2+LigerUI+JBPM5+Node.js技术实现大型J2EE金融行业财务预算系统 (第三季适合二年以上的开发者)课程分类:Java框架适合人群:中级课时数量:51课时用到技术:SSH2.LigerUI.JBPM5.Node.js技术涉及项目:大型J2EE金融行业财务预算系统咨询qq:1840215592课程项目所采用的技术架构为:struts2+spring+hibernate+LigerUI+jbpm5+mysql+自定义表单+node.js+webservice+思维导图+j

腾讯云:搭建 Node.js 环境

搭建 Node.js 环境 安装 Node.js 环境 任务时间:5min ~ 10min Node.js 是运行在服务端的 JavaScript, 是基于 Chrome JavaScript V8 引擎建立的平台. 下载并安装 Node.js 下载最新的稳定版 v6.10.3 到本地 wget https://nodejs.org/dist/v6.10.3/node-v6.10.3-linux-x64.tar.xz 下载完成后, 将其解压 tar xvJf node-v6.10.3-linux

快速搭建 Node.js 开发环境以及加速 npm

在公交车上刷微博,还是有很多同学在咨询: 如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本, 或者想快速切换 node 版本, 那么在非 Windows(如 osx, linux) 环境下, 请使用 nvm 来安装你的 node 开发环境, 保持系统的干净. 如果你使用 Windows 做开发,

基于hapi的Node.js后端开发

基于hapi的Node.js后端开发 1.背景今年下半年公司线上程序频繁出现问题.不是内存跑满,就是CPU跑满就是程序自己挂掉了.严重影响了现有的小程序业务.目前线上主要架构是dubbo-x搭建的分布式.之前主要用来为app做数据服务.解决思路1:优化现有架构,找到问题(奈何本人虽然写了不少java代码.但是对java基本还是处于一窍不通的状态.)解决思路2:业务分离,为小程序从新搭建一套服务器系统.与原有的互不影响.这样既解决了小程序服务稳定性问题,也流出了时间来处理"思路1",不会

《Node.js实战》博客实例 express4.x

大致看了一阵子nodejs的书,对语法有初步的了解.但是还是写不出个实例来.最近学长给我的这本书感觉挺入门的<Node.js实战>电子工业出版社.毕竟图书馆借的,出版时间已经是两年前了.很多代码都更新了.特别是express 4.x相对与express 3.x有很多的修改.比如把中间件独立出来.好处是有.这样express的更新就不用受这些中间件的影响 坏处也许主要是对我这种新手吧.大部分教材都是express 3.x甚至是 2.x 的.这样学习起来就有困难.也许不会有人看到这个.即使解决不了