12.课时107-幼教平台：使用nunjuncks静态页面模块化

最新推荐文章于 2023-03-14 10:01:44 发布
最新推荐文章于 2023-03-14 10:01:44 发布
阅读量195 收藏
点赞数
分类专栏： NodeJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingleiming/article/details/106833828
版权

使用nunjuncks将后台界面可抽离出来的东西模块化，比如在页面中所有公众的使用的地方都可模块化，比如页头 页尾 左侧导航….如图，标红的区域均可模块化
在这里插入图片描述

  1. 首先我们需要有一个基础的模板，使用nunjuncks创建基础模板。中文文档可参考：https://mozilla.github.io/nunjucks/cn/api.html
    新建基础模板 base.html 这个名字可以随便取
    在这里插入图片描述
    基础模板的内容可以从index.html中拷贝。
    在这里插入图片描述
    {% block style%} {% block %} 这是保留的插槽，用于自定义样式 插槽的名字 style可任意。
    同样尾部也要留取插槽，放置js文件
    在这里插入图片描述
  2. 创建头部公共文件 header.html,里面存放头部信息，标红处
    在这里插入图片描述
    在这里插入图片描述
蓝色清晨_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node——Nunjucks模板入门
qq_63654439的博客
03-11 555
一、模板引擎概述 之前我们通过Koa创建了一个web服务器，并可以根据用户请求路径的不同响应不同的页面，但是每一个页面的内容都是通过字符串的方式给送给浏览器的，这样的开发方式并不友好，我们更希望直接发送html页面。 模板引擎可以解决这个问题，通过模板引擎，可以直接设置响应的html页面，并且可以把后台数据绑定到模板中，然后发送给客户端。 目前市面上有很多模板引擎，这里我们选择一个功能完善，又容易上手的模板引擎：nunjucks 二、安装nunjucks 在koa框架下安装nunjucks需要两个
koa --- > nunjucks在Koa中的使用、中间件的配置
栗子好好吃的博客
11-30 657
Nunjucks在Koa中的应用 app.js const koa = require('koa'); const app = new koa(); const router = require('./router') const nunjucks = require('koa-nunjuncks-2'); app.use(nunjucks({ ext: 'html', // 指定视图文...
Nunjucks简介&基本使用教程
Javachichi的博客
03-14 2069
Nunjucks 是一个功能丰富、强大的 JavaScript 专用模板引擎。Nunjucks 提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。重点要关注的是，Nunjucks 模板引擎的代码在沙箱环境中运行，任何全局对象都从环境中剥离出来，以限制可用于跳出沙箱并执行任意代码。因此我们测试{{root}}或{{global}}时并没有任何反应，所以说明代码在沙箱环境中运行，而root和global命令并没有跳出沙箱进行RCE。在 JavaScript 中，global是一个预定义的全局对象。
Web前端必做笔记之一：Nunjucks模版入门
qq_42302014的博客
12-03 199
Web前端必做笔记之一：Nunjucks模版入门 我们通过Koa创建了一个web服务器，并可以根据用户请求路径的不同响应不同的页面，但是么一个页面的内容都是通过字符串的方式发送给浏览器的，这样的开发方式并不友好，我们更希望发送HTML页面 模版引擎就可以解决这个问题，通过模版引擎，可以直接设置响应的html页面，并且可以把后台数据绑定到模版中，然后发送给客户端。 这里我们选择一个功能完善，容易上手的模版引擎：nunjucks 安装nunjucks 在koa框架下安装nunjucks需要两个第三方模块 koa
1.KOA + 2.nunjucks = 3.MVC
sharryling
07-01 206
koa的基础 转载于廖雪峰老师的博客：https://www.liaoxuefeng.com/wiki/1022910821149312/1099752344192192 1.基础代码 1.先导入koa 2.基础代码 // 导入koa，和koa 1.x不同，在koa2中，我们导入的是一个class，因此用大写的Koa表示: const Koa = require('koa'); // 创建一...
财务信息化 第一课时 XXXX-03-03.pptx
12-15
财务信息化是现代企业财务管理的重要组成部分，它通过信息技术的应用，实现财务数据的自动化处理、分析和决策支持。在第一课时中，主要讲解了以下几个关键知识点： 1. **用户管理**： - 用户（操作员）是能够登录...
第01课时.CC-Link系统概要及主站模块介绍
05-13
第01课时.CC-Link系统概要及主站模块介绍
三菱PLC现场总线CC-link网络应用第20课时.FX5U-CCL-MS介绍
05-13
三菱PLC现场总线CC-link网络应用第20课时.FX5U-CCL-MS介绍
阿里云云计算2023最新视频 ：课时12：VPC的规划和使用.mp4
07-29
课时12：VPC的规划和使用.mp4 课时13：VPC的管理.mp4 课时14：SLB的介绍.mp4 课时15：SLB中的概念.mp4 课时16：SLB的配置.mp4 课时17：AS的概念.mp4 课时18：AS的配置.mp4 课时19：对象存储的概念.mp4 课时20：对象...
三菱PLC现场总线CC-link网络应用第23课时.CC-Link结构
05-13
三菱PLC现场总线CC-link网络应用第23课时.CC-Link结构
grunt-nunjuckr:艰巨的任务将nunjucks模板呈现为静态html文件
05-19
咕unt咕un咕r 将您的nunjucks模板渲染为静态文件 入门 如果您以前从未使用过 ，请查看《指南》。 通过npm install --save-dev grunt-nunjuckr插件后， npm install --save-dev grunt-nunjuckr包含在您的Gruntfile.js grunt . loadNpmTasks ( 'grunt-nunjuckr' ) ; 选项 数据 类型： Object默认值： undefined 传递到模板的数据。 分机 类型： String默认值： .html 输出的文件扩展名。 搜索路径 类型： String默认值： . 可以在其中找到模板的路径。 标签 类型： Object默认值： undefined 配置nunjucks以使用不同的标签进行渲染 全球 类型： Object或Array默认值： undefine
05-nunjucks模板入门
前端萌新
08-23 279
nunjucks入门
nunjucks如何使用？
whyrookie的博客
08-11 955
基本的使用 const nunjucks = require('nunjucks') // nunjucks.configure({ autoescape: true }); // const result = nunjucks.renderString('Hello {{ username }}', { username: 'James' }); // console.log(result) // 这里的 views 相对路径是受 node 执行路径影响的 nunjucks.configur...
nodejs 模板引擎nunjucks使用
qq_34870529的博客
10-14 377
使用nunjucks实现登录功能 1、server.js const Koa = require("koa"); const nunjucks = require("nunjucks"); const views = require("koa-views"); const Router = require('koa-router'); const parser = require('koa-parser'); const app = new Koa(); const router = new R
基于卷积神经网络的食物识别及实现.pdf
07-22
在超市无人结算服务中，使用电子标签对部分货物如水果、蔬菜等进行结算的成本过高、便捷性不高，至今依然采用人工结算的方式。 针对这一问题，本文提出了基于卷积神经网络的食物识别方法。 通过自建水果数据集来训练卷积神经网络分类模型；基于训练后的模型构建可视化平台进行食物识别。 实验结果表明，利用卷积神经网络的食物识别的预测准确率 为 ９６．３４％。
使用 Javascript 编写的 ToDo List 应用程序及其源代码.zip
07-22
项目：使用 JavaScript 编写的 ToDo List 应用程序及其源代码 ToDo List App 是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。在这里，用户可以添加待办事项详细信息的数量，您可以看到以列表形式存储的详细信息，如便签。此外，如果用户想删除列表项，也可以删除它。   项目制作 ToDo List App 项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能，用户可以列出他们必须完成的日常工作并将其作为记录保存。您只需在文本字段中输入工作信息，然后按 Enter 键即可将信息添加到记录中。该项目包含大量 JavaScript，用于使项目正常运行。 如何运行该项目？ 要运行此项目，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要运行此系统，首先，通过单击 index.html 文件在浏览器中打开项目。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
MobaXterm-Installer-v24.2.zip（windows版本），41M
07-22
MobaXterm_Installer_v24.2解压之后，执行MobaXterm_installer_24.2.msi安装程序，无脑安装即可。 目前个人觉得最好用的一款远程连接工具，支持SSH、Telnet、Rsh、Xdmcp、RDP、VNC、FTP、SFTP、Serial、File、Shell、Browser、Mosh、Aws S3、WSL等多种连接，并且可以提供可视化linux的文件夹系统，可以直接点击查看、创建、删除、修改等可视化操作，十分方便，传输文件直接拖动到对应的文件夹即可快速传输！速度吊打scp命令传输！
毕业设计，基于Python+Django+Vue+MySql开发的前后端分离的足球青训俱乐部系统，内含完整源代码，视频教程
07-22
毕业设计，基于Python+Django+Vue+MySql开发的前后端分离的足球青训俱乐部系统，内含完整源代码，数据库脚本，视频教程 随着社会经济的快速发展，人们对足球俱乐部的需求日益增加，加快了足球健身俱乐部的发展，足球俱乐部管理工作日益繁忙，传统的管理方式已经无法满足足球俱乐部管理需求，因此，为了提高足球俱乐部管理效率，足球俱乐部管理后台系统应运而生。 本文重点阐述了足球青训俱乐部管理后台系统的开发过程，以实际运用为开发背景，基于Django框架，运用了Python技术和MySQL数据库进行开发设计，充分保证系统的安全性和稳定性。本系统界面良好，操作简单方便，通过系统概述、系统分析、系统设计、数据库设计、系统测试这几个部分，详细的说明了系统的开发过程，最后并对整个开发过程进行了总结，实现了俱乐部相关信息管理的重要功能。 本系统经过测试，运行效果稳定，操作方便、快捷，是一个功能全面、实用性好、安全性高，并具有良好的可扩展性、可维护性的足球青训俱乐部管理后台系统。 关键字：俱乐部管理；Django框架；Python技术；MySQL数据库 本基于Web的足球青训俱乐部管理后台
2020年POI数据集.txt
最新发布
07-22
2020年
MCS-51单片机全貌：24课时详解+硬件、指令与系统扩展
3. **第三章：MCS-51单片机的系统扩展及应用**（12课时） - 进阶至系统扩展，学员将学习如何扩展程序和数据存储器，运用定时计数器实现精确的时间控制，掌握串行口在通信中的应用，以及A/D和D/A转换器与单片机的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值