Web前端必做笔记之一：Nunjucks基础使用（一）

Web前端必做笔记之一：Nunjucks基础使用

在上一节我们说到引入Nunjucks
现在我们用ctx来渲染模版
views下面的模版index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公共模版</title>
</head>
<body><h1>我的第一个模版文件</h1></body>
</html>

server.js中

const Koa = require('koa');
const router = require('koa-router')();
const views = require('koa-views');
const nunjucks = require('nunjucks');
const app = new Koa(); //创建应用app.use(views(__dirname + "/views",{    //项目放在views目录里，使用的模版引擎是nunjucksmap:{html:'nunjucks'}
}))  app.use(async (ctx ) => {await ctx.render("index")  //使用render替换body，这个render是个异步操作，所以前面要加个await, 等待这个异步操作完之后再继续})app.use(router.routes());
app.listen(3000, () => {console.log("server running")
})

再使用命令nodemon server.js 启动成功，就实现了Nunjucks来渲染
这个html文件
我们现在来加一些动态的数据，h1标签里修改为后台的数据，那要怎么修改呢？
server.js中

const Koa = require('koa');
const router = require('koa-router')();
const views = require('koa-views');
const nunjucks = require('nunjucks');
const app = new Koa(); //创建应用app.use(views(__dirname + "/views",{    //项目放在views目录里，使用的模版引擎是nunjucksmap:{html:'nunjucks'}
}))  app.use(async (ctx ) => {await ctx.render("index",{title:"hello nunjucks"})  //使用render替换body，这个render是个异步操作，所以前面要加个await, 等待这个异步操作完之后再继续})app.use(router.routes());
app.listen(3000, () => {console.log("server running")
})

index.html中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公共模版</title>
</head>
<body><h1>{{title}}</h1></body>
</html>

这样再重新启动服务器，就会看到，hello nunjucks.
通过render的第二个参数把一个数据传递给模版，这就是模版数据传递的方法

Web前端必做笔记之一：Nunjucks基础使用（一）相关推荐

Web前端必做笔记之一：let, var, const的区别
Web前端必做笔记之一:let, var, const的区别 <script>//var//没有块级作用域,只有函数作用域,支持变量提升console.log(a); var a = 10 ...
自学web前端的小笔记(入门JS基础部分)
22.JS前期学习三部分 1-ECMA5 语法规则标准 2-DOM 文档对象模型 3-BOM 浏览器对象模型 ECMA6有类的概念,可和面向对象语言区别还是很大,只能说是基于对象的语言 JS的用处 ...
每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
Web 前端必会的 PhotoShop 技能
Web 前端必会的 PhotoShop 技能 1.PhotoShop 的简介与安装 Adobe PhotoShop,简称"PS",是由 Adobe Systems 开发和发行的图像 ...
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
html5前端开发做什么,Web前端能做什么开发
对于想要学习HTML5大前端的人来说,从哪里开始入手是困扰他们的难题.前端开发工作已经变的越来越复杂,仅仅是想罗列一份前端开发的学习列表就已经是一件艰巨的工作.曾经只要会编写HTML, CSS和Jav ...
web前端必学功法之一：用户选择爱好
web前端必学功法之一:用户选择爱好案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
Web前端是做什么的？就业前景如何？
随着互联网的迅猛发展,各种互联网项目的不断兴起让身处其中的玩家对用户体验提出了更高的要求,前端开发也由此逐渐成为了一个不可缺少的专业研发角色.Web前端开发在国内开始被重视的时间不超过五年.从2014 ...
深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结弹性 ...

Web前端必做笔记之一：Nunjucks基础使用（一）

Web前端必做笔记之一：Nunjucks基础使用

Web前端必做笔记之一：Nunjucks基础使用（一）相关推荐

最新文章

热门文章