Template engine: The template engine is a tool for dynamically generating html in web applications, responsible for combining data with templates;
installing Koa, Koa-router, Koa-views pug
npm i koa koa-router koa-views pug
node.js generates html This is the data
//引入
const Koa = require("koa"); //加载koa框架
const Router = require("koa-router"); //加载路由
const views = require("koa-views") // 加载视图控制
let app = new Koa();
let router = new Router();
//使用
app.use(views(__dirname + "/views", {
map: {
html: "pug"
}
}))
// app.use(views(__dirname + "/views", { //自动去views里面找
// map: {
// html: "pug"
// }
// }));
//实行异步机制
router.get("/", async ctx => {
// ctx.body = "hello";
await ctx.render("index.pug", {
data: "我是数据"
})
})
app.use(router.routes());
app.listen(3000);//这是端口
Create an index.pug equivalent to html, and write a template in it.
Style writing:
style.
.mtdiv{
width:200px;
height:200px;
background:red ;
}
- pug syntax: replace the previous html hierarchical containment relationship through indentation. For example, a simple static can be expressed as, pay attention to uniform use of tab or space indentation, and do not mix them.
body
h1 我是标签
div 我是div
div(class="mtdiv") 我是类名
#myid 我是有标签的div
//
//js结合使用
div
| hello
//加一个树干就是div标签 如果不加就是两个标签
//接收服务器返回的数据
p #{data}
//使用自身的数据
- let str = "你好啊"
p #{str}
This is a rendering, we can see the same as html
Use judgment, loop, function, mixin mode in pug
//cycle
//- ul
//- each item in users //遍历数据
//- li 姓名是：#{item.name};年龄事 #{item.age};身高事： #{item.height};
//-for循环
- for(let i =0;i<4;i++)
span 我是循环出来的数据 #{
i}
//judgment
- let num = "a";
case num
when 1
p num 是1
when 2
p num 是2
when 3
p num 是3
default
p num 是其他数
//Mixed mode
mixin mydiv
div 我是常用的div
+mydiv
mixin pet(name,sex)
p 这是一只#{
name},他的性别是#{
sex}
+pet("太帝","男")
+pet("太帝","男")
+pet("太帝","男")
+pet("太帝","男")
script(type="text/javascript").
console.log("hhh")
js combined use
-
script(type=“text/javascript”).
console.log(“hhh”) -
script(src=“onde.js”)
-
npm i pug-cli -g
-
pug index.pug
-
pug index.pug -w -P convert html to normal format
npm i koa-static
- const static = require("koa-static") //Load static files
- app.use(static(__dirname + “/static”))
Introduce external css style
link(rel="stylesheet", href="index.css")
nunjucks syntax
koa-nunjucks-2
Installation: npm i koa-nunjucks -2
use
const nunjucks = require("koa-nunjucks-2");
app.use(nunjucks({
ext: "html", //指定模板后缀 .njk
path: __dirname + '/views', //指定视图目录
nunjucksConfig: {
trimBlocks: true //开启转义，防止xss漏洞
}
}));
nunjucks syntax usage
变量 ：<p>用户名：{
{username}}</p>
if
<!-- if -->
{
% if num>3 %}
<p>num值大于3</p>
{
% elif num %}
<span>num值小于3</span> {
% else %}
<div>num值等于3</div>
{
% endif %}
Loop structure for
router.get("/", async ctx => {
await ctx.render("index", {
username: "hhh",
num: 2,
arr: [{ name: "张三", age: 20, height: "188cm" },
{ name: "李四", age: 10, height: "168" },
{ name: "王五", age: 28, height: "165" }
],
str: "hello world"
});
})
ul>
{
% for item in arr %}
<li>
姓名是{
{
item.name}} 年龄是{
{
item.age}} 身高是{
{
item.height}}
</li>
{
% endfor %}
<!-- 循环结束 -->
</ul>
{% endfor %} <!-- 循环结束 -->
<!-- 过滤器 --> {
{ str | replace("world", "bar") | capitalize }}
Note that nodemon cannot detect html, so after modifying the content in html, remember to restart
Template inheritance block/extends
- Define the parent template
<h1>我是公共模板</h1>
<div class="leftContent">
{
% block left %}
这边是左侧的内容
{
% endblock %}
{
% block right %}
这边是右侧的内容
{
% endblock %}
{
% block somevalue %}
我是一些数据
{
% endblock %}
</div>
Inherit the parent template
{
% extends "common.html" %}
{
% block left %}
我是左侧的内容1111
{
% endblock %}
{
% block right %}
我是右侧的内容11111
{
% endblock %}
{
% block somevalue %}
{
{
super() }}
{
% endblock %}