day04-artTemplate学生档案系统routerserveStatic

2024-01-12 01:32

本文主要是介绍day04-artTemplate学生档案系统routerserveStatic,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

模板引擎

目标

  • 能够使用模板引擎渲染数据
  • 能够使用模板引擎进行原文输出
  • 能够使用循环输出数据
  • 能够知道如何引用子模板
  • 能够知道如何如何进行模板继承

基本概念(★★★)

模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串,使项目代码更加清晰更加易于维护

[外链图片转存失败(img-e5YrlUW6-1568473328611)(images/artTemplate.png)]

art-template模板引擎

入门使用(★★★)

  • 利用npm命令下载 art-templatenpm install art-template

  • 创建js文件,引入 art-template

    const trempalte = require('art-template');
    
  • 引入拼接的数据源

    //引入path库
    const path = require('path');
    //拼接路径,这里最好用绝对路径
    const views = path.join(_dirName,'views','index.art');
    //关联到 template里面
    const html = template(views,{name: '德玛西亚'
    });
    
  • 创建.art 渲染模板

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Document</title>
    </head>
    <body><!--标准语法--><p>{{ name }}</p><!--原生语法--><p><%= age%></p>
    </body>
    </html>
    

输出语句

标准语法用 {{}}(★★★)

在大括号里面可以进行逻辑运算

<p>{{ 1 + 1 }}</p>
<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
<p>{{ content }}</p>

如果说需要解析html标签,需要在变量前面加 @ 符号

<p>{{@ content }}</p>
原生语法 <%= %>

可以进行逻辑运算

<p><%= 1 + 2%></p>
<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
<p><%= content%></p>

如果说需要解析html标签,需要在变量前面加 - 符号

<p><%- content%></p>

条件判断

标准语法 {{if 条件}} … {{/if}} (★★★)
{{if age > 18}}年龄大于18
{{else if age < 15 }}年龄小于15
{{else}}年龄不符合要求
{{/if}}
原生语法 <% if (value) { %> … <% } %>
<% if (age > 18) { %>年龄大于18
<% } else if (age < 15) { %>年龄小于15
<% } else { %>年龄不符合要求
<% } %>

循环

标准语法 {{each 数据}} {{/each}}(★★★)
<ul

这篇关于day04-artTemplate学生档案系统routerserveStatic的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/596363

相关文章

linux重启命令有哪些? 7个实用的Linux系统重启命令汇总

《linux重启命令有哪些?7个实用的Linux系统重启命令汇总》Linux系统提供了多种重启命令,常用的包括shutdown-r、reboot、init6等,不同命令适用于不同场景,本文将详细... 在管理和维护 linux 服务器时,完成系统更新、故障排查或日常维护后,重启系统往往是必不可少的步骤。本文

Mac系统下卸载JAVA和JDK的步骤

《Mac系统下卸载JAVA和JDK的步骤》JDK是Java语言的软件开发工具包,它提供了开发和运行Java应用程序所需的工具、库和资源,:本文主要介绍Mac系统下卸载JAVA和JDK的相关资料,需... 目录1. 卸载系统自带的 Java 版本检查当前 Java 版本通过命令卸载系统 Java2. 卸载自定

基于Python实现一个简单的题库与在线考试系统

《基于Python实现一个简单的题库与在线考试系统》在当今信息化教育时代,在线学习与考试系统已成为教育技术领域的重要组成部分,本文就来介绍一下如何使用Python和PyQt5框架开发一个名为白泽题库系... 目录概述功能特点界面展示系统架构设计类结构图Excel题库填写格式模板题库题目填写格式表核心数据结构

Linux系统中的firewall-offline-cmd详解(收藏版)

《Linux系统中的firewall-offline-cmd详解(收藏版)》firewall-offline-cmd是firewalld的一个命令行工具,专门设计用于在没有运行firewalld服务的... 目录主要用途基本语法选项1. 状态管理2. 区域管理3. 服务管理4. 端口管理5. ICMP 阻断

Windows 系统下 Nginx 的配置步骤详解

《Windows系统下Nginx的配置步骤详解》Nginx是一款功能强大的软件,在互联网领域有广泛应用,简单来说,它就像一个聪明的交通指挥员,能让网站运行得更高效、更稳定,:本文主要介绍W... 目录一、为什么要用 Nginx二、Windows 系统下 Nginx 的配置步骤1. 下载 Nginx2. 解压

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹

windows系统上如何进行maven安装和配置方式

《windows系统上如何进行maven安装和配置方式》:本文主要介绍windows系统上如何进行maven安装和配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录1. Maven 简介2. maven的下载与安装2.1 下载 Maven2.2 Maven安装2.

使用Python实现Windows系统垃圾清理

《使用Python实现Windows系统垃圾清理》Windows自带的磁盘清理工具功能有限,无法深度清理各类垃圾文件,所以本文为大家介绍了如何使用Python+PyQt5开发一个Windows系统垃圾... 目录一、开发背景与工具概述1.1 为什么需要专业清理工具1.2 工具设计理念二、工具核心功能解析2.

Linux系统之stress-ng测压工具的使用

《Linux系统之stress-ng测压工具的使用》:本文主要介绍Linux系统之stress-ng测压工具的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、理论1.stress工具简介与安装2.语法及参数3.具体安装二、实验1.运行8 cpu, 4 fo

ubuntu20.0.4系统中安装Anaconda的超详细图文教程

《ubuntu20.0.4系统中安装Anaconda的超详细图文教程》:本文主要介绍了在Ubuntu系统中如何下载和安装Anaconda,提供了两种方法,详细内容请阅读本文,希望能对你有所帮助... 本文介绍了在Ubuntu系统中如何下载和安装Anaconda。提供了两种方法,包括通过网页手动下载和使用wg