1.Nunjucks概述

在之前的例子中

直接在此处写html并不友好，这里需要使用模板引擎直接设置并响应整个html文件，并可以将后台数据绑定到模板中，在发送回客户端，本例选择Nunjucks模板引擎

2.在Koa框架下安装Nunjucks

安装koa-views(配置koa的模板引擎)

cnpm install --save koa-views

安装Nunjucks

cnpm install --save nunjucks

3.配置模板引擎

server.js

//导入koa模块
const Koa = require("koa");
//导入koa-router模块并执行
const router = require("koa-router")();
//导入koa-views 和 nunjucks
const views = require("koa-views");
const nunjucks = require("nunjucks");
//创建实例
const app = new Koa();/*配置模板引擎
views 有两个参数
- 指定模板引擎的存放目录（在项目中新建该目录）
- 指定哪一个模板引擎*/
app.use(views(__dirname+'/views',{map:{html:'nunjucks'}}));//将使用nunjucks模板引擎渲染以html为后缀的文件。router.get('/',async (ctx)=>{//render 是异步操作，需要await 来保证预期执行顺序，同时传递变量名为greetings的数据，接受位置见index.htmlawait ctx.render("index",{greetings:"hello my first model"});
})app.use(router.routes());app.listen(3000,()=>{console.log("server is 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>My WebSite</title>
</head>
<body><!-- 使用{{变量名}}，来接受服务器同变量名的数据 --><h1>{{greetings}}</h1>
</body>
</html>

4.实现登录表单

目录结构：

使用get方法效果：（注意url与post做对比）

使用post方法效果

可以看到浏览器搜索栏的url是不一样的，get方法将数据显示，而post隐藏了数据。

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>My WebSite</title><!-- 注意由于静态路由的使用，public是默认存在的对于koa框架下的web服务器，不要加/public--><link rel="stylesheet" href="/css/index.css">
</head>
<body><!-- 使用{{变量名}}，来接受服务器同变量名的数据 --><h1>{{greetings}}</h1><!-- 使用get方法提交表单 --><form action="/login"><!-- name:定义表单提交的数据字段 --><p><input type="text" name="username" placeholder="用户名:"></p><p><input type="password" name="password" placeholder="密码:"></p><p><input type="submit" value="get登录"></p></form><!-- 使用post方法提交表单 --><form action="/login" method="POST"><!-- name:定义表单提交的数据字段 --><p><input type="text" name="username" placeholder="用户名:"></p><p><input type="password" name="password" placeholder="密码:"></p><p><input type="submit" value="post登录"></p></form></body>
</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>Login Page</title>
</head>
<body><h1>hello this is the login page!</h1><p>用户名:{{userNameInLogin}}</p><p>密码:{{passWordInLogin}}</p>
</body>
</html>

server.js

//导入koa模块
const Koa = require("koa");
//导入koa-router模块并执行
const router = require("koa-router")();
//导入koa-views 和 nunjucks
const views = require("koa-views");
const nunjucks = require("nunjucks");
//导入koa-statics
const static = require("koa-static")
//导入koa-parser 解析post传递的数
const parser = require("koa-parser")//创建实例
const app = new Koa();//设置静态路由
app.use(static(__dirname+"/public"));//可以解析post请求的参数
app.use(parser());/*配置模板引擎
views 有两个参数
- 指定模板引擎的存放目录（在项目中新建该目录）
- 指定哪一个模板引擎*/
app.use(views(__dirname+'/views',{map:{html:'nunjucks'}}));//将使用nunjucks模板引擎渲染以html为后缀的文件。router.get('/',async (ctx)=>{//render 是异步操作，需要await 来保证预期执行顺序，同时传递变量名为greetings的数据，接受位置见index.htmlawait ctx.render("index.html",{greetings:"hello my first model"});
});//get方法实现表单——按下登录按钮后
router.get("/login",async (ctx,next)=>{// 接受数据let userName = ctx.query.username;let passWord = ctx.query.password;// console.log(userName,passWord);await ctx.render("login.html",{userNameInLogin:userName,passWordInLogin:passWord})
});//post方法实现表单——按下登录按钮后
/*
由于post方法在url 中隐藏了数据
所以需要导入koa-parser 模块进行解析
*/
router.post("/login",async (ctx,next)=>{// 接受数据，这里由于是post方法，所以不用query使用request.bodylet userName = ctx.request.body.username;let passWord = ctx.request.body.password;await ctx.render("login.html",{userNameInLogin:userName,passWordInLogin:passWord})
});app.use(router.routes());app.listen(3000,()=>{console.log("server is running");
})

Node-05Nunjucks模板引擎相关推荐

node+ejs模板引擎的应用
前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...
node中模板引擎、模块导出、package.json简介
在node.js中使用引擎模板: art-template不仅在浏览器可以使用,也可以在node中使用,并且模板引擎起早诞生于服务器领域,在node中使用模板引擎: 1.安装:在一个文件目录下执行命令 ...
Node.js模板引擎： Jade入门
Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近.并且,Jade也支持空格. 1.标签在Jade里,一行开头的任何文本都被默认解释成HTML标签.并且 ...
初识Node使用模板引擎实现Apach
原理: 1.使用fs.readdir得到 wwwDir 目录列表中的文件名和目录名 2.如何将得到的文件名和目录名替换到 template.html 中 2.1 在 template.html 中需要 ...
源于 Node.js的HTML 模板引擎Jade的一个hello world项目
Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用.其使用也是非常简单易学的. 我们现在看一下如何用Jade做一个最简单的nod ...
node --- 在express中配置使用模板引擎(art-template)
下载依赖: npm install --save art-template express-art-template 配置: // app.js const express = require(&qu ...
Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade -- 源于 Node.js 的 HTML 模板引擎开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
Node.js「四」—— 路由 / EJS 模板引擎 / GET 和 POST
本文为 Node.js 系列笔记第四篇.文章参考:nodejs 教程:<深入浅出 Node.js>:阮一峰 nodejs 博客: Node.js v16.13.0 文档文章目录一.路由 ...
Node 简介、模块、模板引擎、NPM、文件操作、缓冲区、文件流、网络操作、Express框架
一.Node简介 1.1 客户端的JavaScript是怎样的问题答什么是 JavaScript 脚本语言运行在浏览器中一般用来做客户端页面的交互(Interactive) JavaScri ...
Node.js 动手实现简单的模板引擎（列表渲染）
准备HTML模板文件index.html <!DOCTYPE html> <html lang="en"> <head><meta cha ...

Node-05Nunjucks模板引擎

1.Nunjucks概述

2.在Koa框架下安装Nunjucks

3.配置模板引擎

4.实现登录表单

使用get方法效果：（注意url与post做对比）

使用post方法效果

Node-05Nunjucks模板引擎相关推荐

最新文章

热门文章