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

相关文章

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Linux系统之主机网络配置方式

《Linux系统之主机网络配置方式》:本文主要介绍Linux系统之主机网络配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、查看主机的网络参数1、查看主机名2、查看IP地址3、查看网关4、查看DNS二、配置网卡1、修改网卡配置文件2、nmcli工具【通用

Linux系统之dns域名解析全过程

《Linux系统之dns域名解析全过程》:本文主要介绍Linux系统之dns域名解析全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、dns域名解析介绍1、DNS核心概念1.1 区域 zone1.2 记录 record二、DNS服务的配置1、正向解析的配置

Linux系统中配置静态IP地址的详细步骤

《Linux系统中配置静态IP地址的详细步骤》本文详细介绍了在Linux系统中配置静态IP地址的五个步骤,包括打开终端、编辑网络配置文件、配置IP地址、保存并重启网络服务,这对于系统管理员和新手都极具... 目录步骤一:打开终端步骤二:编辑网络配置文件步骤三:配置静态IP地址步骤四:保存并关闭文件步骤五:重

Windows系统下如何查找JDK的安装路径

《Windows系统下如何查找JDK的安装路径》:本文主要介绍Windows系统下如何查找JDK的安装路径,文中介绍了三种方法,分别是通过命令行检查、使用verbose选项查找jre目录、以及查看... 目录一、确认是否安装了JDK二、查找路径三、另外一种方式如果很久之前安装了JDK,或者在别人的电脑上,想

Linux系统之authconfig命令的使用解读

《Linux系统之authconfig命令的使用解读》authconfig是一个用于配置Linux系统身份验证和账户管理设置的命令行工具,主要用于RedHat系列的Linux发行版,它提供了一系列选项... 目录linux authconfig命令的使用基本语法常用选项示例总结Linux authconfi

Nginx配置系统服务&设置环境变量方式

《Nginx配置系统服务&设置环境变量方式》本文介绍了如何将Nginx配置为系统服务并设置环境变量,以便更方便地对Nginx进行操作,通过配置系统服务,可以使用系统命令来启动、停止或重新加载Nginx... 目录1.Nginx操作问题2.配置系统服android务3.设置环境变量总结1.Nginx操作问题

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创