来源：未知 时间：2023-12-13 15:54 作者：小飞侠 阅读:次
[导读] 一、循环语句 1、js代码 const Koa = require(koa); // 引入Koa构造函数 const views = require(koa-views); const nunjucks = require(nunjucks); // post请求 const parser = require(koa-parser); const router = require(koa-router)();...
一、循环语句1、js代码const Koa = require("koa"); // 引入Koa构造函数
const views = require("koa-views");
const nunjucks = require("nunjucks");
// post请求
const parser = require("koa-parser");
const router = require("koa-router")();
const app = new Koa(); // 创建应用
// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
map: {
html: "nunjucks"
}
}))
let studentList = ["小明", "小红", "小亮"];
// index:网页名
// title:传递的参数
router.get("/", async (ctx) => {
await ctx.render("index", {
title: "hello nunjucks!",
studentList
});
})
app.use(router.routes());
// 设置监听端口
app.listen(3000, () => {
console.log("server is running");
})定义了一个studentList数组。 2、index.html页面代码<body>
<!-- title是后台传过来的值 -->
<h1>{{title}}</h1>
<ul>
{% for student in studentList %}
<li>{{student}}</li>
{% endfor %}
</ul>
</body>使用for循环，取studentList数组的值。 3、效果
二、条件判断1、js代码：router.get("/", async (ctx) => {
await ctx.render("index", {
title: "hello nunjucks!",
studentList,
isLogin: true,
username: "amdin"
});
})添加两个数据：isLogin，username。 2、index.html页面代码：<body>
{% if isLogin %}
<p>欢迎你：{{username}}</p>
{% else %}
<p>请登录...</p>
{% endif %}
</body>3、效果（1）如果值为true （2）如果值为false
三、模板继承让其它的页面，继承模板页面。（因为有些公共部份，可以单独提取出来。） 项目结构：
1、模板页面代码（公共页面）layout.html：<body>
<div>
<a href="/">首页</a>
<a href="/images">图片</a>
<a href="/videos">视频</a>
</div>
{% block content %} {% endblock %}
</body>2、js文件：const Koa = require("koa"); // 引入Koa构造函数
const views = require("koa-views");
const nunjucks = require("nunjucks");
// post请求
const parser = require("koa-parser");
const router = require("koa-router")();
const app = new Koa(); // 创建应用
// 设置路径，并且告知使用的模板引擎为：nunjucks
app.use(views(__dirname + "/views", {
map: {
html: "nunjucks"
}
}))
// 首页路由
router.get("/", async (ctx) => {
await ctx.render("index", {
});
})
// 图片路由
router.get("/images", async (ctx) => {
await ctx.render("images", {
})
})
// 视频路由
router.get("/videos", async (ctx) => {
await ctx.render("videos", {
})
})
app.use(router.routes());
// 设置监听端口
app.listen(3000, () => {
console.log("server is running");
})
3、首页 index.html：
{% extends "./views/layout.html" %}
{% block content %}
<h1>首页</h1>
{% endblock %}4、图片页 images.html：{% extends "./views/layout.html" %}
{% block content %}
<h1>图片页面</h1>
{% endblock %}
5、视频页 videos.html：
{% extends "./views/layout.html" %}
{% block content %}
<h1>视频页面</h1>
{% endblock %}6、效果：
四、include某些页面可能会包含相同的组件，例如轮播图，可以通过include引入 1、新建footer.html<div> power by XiaoSheng. </div> 2、首页新增footer：{% extends "./views/layout.html" %}
{% block content %}
<h1>首页</h1>
{% include "./views/footer.html" %}
{% endblock %} 3、效果：只有首页有页脚，其它页面没有页脚。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
