如何根据后台的数据动态地改变前端的页面？
很多时候前端的界面需要根据数据库的内容对一些内容进行动态的增减，比如列表，那么就需要在前端的html界面能够识别循环和分支等”语法“。
1.nunjucks进阶——循环语句和分支语句
nunjucks 语法：
使用{%%}可以识别逻辑语句
以{%%}content{%%}为例子
content将视逻辑类型
重复*次（循环）
或者
显示/隐藏（分支）
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>Nunjucks</title>
</head>
<body>
<!-- nunjucks语法——分支语句 -->
{% if isLogin%}
<h1>hello! {
{username}}</h1>
{% else %}
<h1>hello! 请登录 </h1>
{% endif %}
<!-- nunjucks语法——循环语句 -->
<ul>
{% for fruit in fruits %}
<li>{
{fruit}}</li>
{% endfor %}
</ul>
</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",{
map:{
html:"nunjucks"}
}));
router.get('/',async (ctx)=>{
//模拟数据库的数据
let fruitsList = ["apple","banana","peach","orange"];
await ctx.render("index.html",{
fruits:fruitsList,
isLogin:ture,//模拟用户登录状态
username:"cmy"
});
})
app.use(router.routes());
app.listen(3000,()=>{
console.log("server is running")
})
2.模板继承
这部分解决组件共用的问题
根据Don’t Repeat Youself 原则，不要重复写冗余的代码，部分可以共用的组件，我们希望只用写一次，比如说，导航栏，页脚等页面共有元素，为了更加优雅，这里涉及模板继承的问题
效果：
项目目录结构
准备模板文件
该文件包含了公共部分（导航栏）
tmpl.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>Nunjucks Grammar</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header>
<ul>
<li><a href="/">首页</a> </li>
<li><a href="/learn">学习</a> </li>
</ul>
</header>
<!-- 根据不同网页，嵌入内容 -->
{% block content %} {% endblock %}
</body>
</html>
注意
- 要外部引入css需要配置静态路由
- 模板一般具备完整的html结构，具体页面的填充内容利用
{% block content %} {% endblock %}
具体界面（嵌入的内容）
index.html
<!-- 继承模板 -->
{% extends "./views/tmpl.html" %}
{% block content %}
<!-- nunjucks语法——分支语句 -->
{% if isLogin%}
<h1>hello! {
{username}}</h1>
{% else %}
<h1>hello! 请登录 </h1>
{% endif %}
<!-- nunjucks语法——循环语句 -->
<ul>
{% for fruit in fruits %}
<li>{
{fruit}}</li>
{% endfor %}
</ul>
{% endblock %}
learn.html
<!-- 继承模板 -->
{% extends "./views/tmpl.html"%}
{% block content%}
<h1>this is learn page</h1>
{% endblock %}
服务器端
server.js
const Koa = require('koa');
const router = require('koa-router')();
const views = require("koa-views");
const nunjucks = require("nunjucks");
const static = require("koa-static");
const app = new Koa();
//为了引入外部样式，这里使用静态路由
app.use(static(__dirname+"/public"));
app.use(views(__dirname+"/views",{
map:{
html:"nunjucks"}
}));
router.get('/',async (ctx)=>{
//模拟数据库的数据
let fruitsList = ["apple","banana","peach","orange"];
await ctx.render("index.html",{
fruits:fruitsList,
isLogin:true,//模拟用户登录状态
username:"cmy"
});
})
router.get("/learn",async ctx=>{
await ctx.render("learn.html");
})
app.use(router.routes());
app.listen(3000,()=>{
console.log("server is running")
})
3.include
一些组件可能仅有部分页面有，所以利用include,可以更加灵活地处理这些共用组件，尽可能地降低网页的耦合程度
在上例index.html中，添加页脚
<!-- 继承模板 -->
{% extends "./views/tmpl.html" %}
{% block content %}
<!-- nunjucks语法——分支语句 -->
{% if isLogin%}
<h1>hello! {
{username}}</h1>
{% else %}
<h1>hello! 请登录 </h1>
{% endif %}
<!-- nunjucks语法——循环语句 -->
<ul>
{% for fruit in fruits %}
<li>{
{fruit}}</li>
{% endfor %}
</ul>
<!--页脚组件-->
{% include "./views/footer.html" %}
{% endblock %}
