art-template模板引擎:

在命令行工具中使用 npm install art-template 命令进行下载

使用const template = require('art-template')引入模板引擎

告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);

使用模板语法告诉模板引擎,模板与数据应该如何进行拼接

art-template代码示例:

// 导入模板引擎模块

const template = require('art-template');

// 将特定模板与特定数据进行拼接

const html = template('./views/index.art',{

data: {

name: '张三',

age: 20

}

});

模板引擎的使用

{{data.name}}

{{data.age}}

模板语法:

art-template同时支持两种模板语法:标准语法和原始语法。

标准语法可以让模板更容易读写,原始语法具有强大的逻辑处理能力。

标准语法: {{ 数据 }} 原始语法:

输出

将某项数据输出在模板中,标准语法和原始语法如下:

标准语法:{{ 数据 }}

原始语法:

{{value}}

{{a ? b : c}}

{{a + b}}

原文输出:

如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出。

标准语法:{{@ 数据 }}

原始语法:

{{@ value }}

条件判断:

{{if 条件}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

...

... ...

循环:

标准语法:{{each 数据}} {{/each}}

原始语法:

{{each target}}

{{$index}} {{$value}}

{{/each}}

子模版:

使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。

标准语法:{{include '模板'}}

原始语法:

{{include './header.art'}}

模板继承示例:

HTML骨架模板

{{block 'head'}}{{/block}}

{{block 'content'}}{{/block}}

{{extend './layout.art'}}

{{block 'head'}} {{/block}}

{{block 'content'}}

This is just an awesome page.

{{/block}}

模板配置:

// 设置模板的根目录

template.defaults.root = path.join(__dirname, 'views');

// 导入模板变量

template.defaults.imports.dateFormat = dateFormat;

// 配置模板的默认后缀

template.defaults.extname = '.html';

const html = template('06.art', {

time: new Date()

});

console.log(template('07', {}));

console.log(html);

案例介绍 – 学生档案管理

建立项目文件夹并生成项目描述文件

创建网站服务器实现客户端和服务器端通信

连接数据库并根据需求设计学员信息表

创建路由并实现页面模板呈递

实现静态资源访问

实现学生信息添加功能

实现学生信息展示功能

第三方模块 router

功能:实现路由

使用步骤:

获取路由对象

调用路由对象提供的方法创建路由

启用路由,使路由生效

const getRouter = require('router')

const router = getRouter();

router.get('/add', (req, res) => {

res.end('Hello World!')

})

server.on('request', (req, res) => {

router(req, res)

})

第三方模块 serve-static

功能:实现静态资源访问服务

步骤:

引入serve-static模块获取创建静态资源服务功能的方法

调用方法创建静态资源服务并指定静态资源服务目录

启用静态资源服务功能

const serveStatic = require('serve-static')

const serve = serveStatic('public')

server.on('request', () => {

serve(req, res)

})

server.listen(3000)

地址:

html页面增删改查模板,模板引擎+(实现数据增删改查小项目)相关推荐

  1. mysql 插入前查重_插入新数据是直接查重,如果有重复则不插入数据

    mabatis的XML文件写法 INSERT INTO t_cluster_server (id,cluster_id,server_id) SELECT #{id}, #{clusterId}, # ...

  2. 【工大SCIR笔记】自然语言处理领域的数据增广方法

    点击上方,选择星标或置顶,每天给你送干货! 作者:李博涵 来自:哈工大SCIR 1.摘要 本文介绍自然语言处理领域的数据增广方法.数据增广(Data Augmentation,也有人将Data Aug ...

  3. 自然语言处理领域的数据增广方法

    1.摘要 本文介绍自然语言处理领域的数据增广方法.数据增广(Data Augmentation,也有人将Data Augmentation翻译为"数据增强",然而"数据增 ...

  4. 图数据增广(Graph Data Augmentation)近期进展

    本文旨在简要总结近期在 graph 领域新提出的数据增广方法,带领读者了解图数据增广的基本定义和最新进展. 1 简介 近年来,以数据为驱动的推理在数据增广技术的引进后,泛化能力和模型性能方面得到了显着 ...

  5. 数据增广albumentations用法 -借例 hw3 食物分类-

    previous work: 开启第三个作业 食物分类 , 有的人找不到数据集地址 放一个 :ml2021spring-hw3 | Kaggle 前言: 这个作业 每类带标签的数据很少, 然后又是可以 ...

  6. 深度学习图像数据增广方法总结

    参考:Data Augmentation | How to use Deep Learning when you have Limited Data-Part 2 文章目录 1. 数据增广(Data ...

  7. 一文盘点图数据增广 (Graph Data Augmentation) 近期进展

    ©作者 | 刘纪玺 单位 | 北邮GAMMA Lab 来源 | 北邮GAMMA Lab 本文旨在简要总结近期在 graph 领域新提出的数据增广方法,带领读者了解图数据增广的基本定义和最新进展. 简介 ...

  8. antlr4权威指南中文pdf_Python 数据科学速查表中文版(全套下载)

    向AI转型的程序员都关注了这个号??? 机器学习AI算法工程   公众号:datayx Python 数据科学速查表中文版(全套下载) 关注微信公众号 datayx  然后回复  数据科学  即可获取 ...

  9. 【Axure高保真原型】能增删改的柱状图模板

    今天和大家分享能增删改的柱状图模板,该原型模板用中继器制作的,通过js调用echarts的饼图,使用时只需在中继器表格里填入数据,即可自动生成柱状图并包含增删改的交互效果. [原型效果] [Axure ...

  10. 微信小程序小案例——简单数据增删改查模拟

    微信小程序小案例--简单数据增删改查模拟 应同学导师之邀,要做一个微信小程序,虽然没接触过,本着不会就学的态度就接了.这里就简单记录下制作过程,方便以后自己查找.(此处是粗糙版本,练习用的数据模拟)也 ...

最新文章

  1. c#.net URL参数传递及在js中引用
  2. 阻塞队列BlockingQueue 学习
  3. Java 代码细节与优化(一)
  4. Opendaylight将自己写的feature添加到控制器当中
  5. 第25月第2天 Django-By-Example项目记录01
  6. 【APICloud系列|37】百度开放平台应用+,提升用户下载量操作步骤
  7. Bootstrap模态框显示时有阴影遮罩层
  8. 计算机教学学生创新能力,职业技术学校创新能力计算机教学论文
  9. 2017.08.15【NOIP提高组】模拟赛B组 生日聚餐
  10. aboutsqlserver.com:mvp
  11. armv8 linux 禁止缓存,禁用CPU高速緩存上ARMv8-A的Linux
  12. 计算机键盘中复制粘贴快捷键,电脑复制粘贴快捷键,教您电脑怎么用键盘复制粘贴...
  13. 商迪3D三维虚拟现实VR景区全景漫游展示
  14. 施密特正交化过程编程c语言,利用C程序编写格拉姆-施密特正交化的过程..docx
  15. ping www.baidu.com时出现正在ping www.a.shifen.com
  16. SAP PO IDOC开发上(SAP PO 开发十一)
  17. Codeforces118D Caesar's Legions(DP)
  18. csr867x入门之串口数据收发(二)
  19. union用法 oracle,Oracle、Sql、MySql的union和union all用法
  20. 如何应对GMP、GSP飞行检查?

热门文章

  1. jest使用es6语法
  2. 汽车产业链SCP分析框架-湖北
  3. mysql 删除表中某一列的数据及删除某一列的方法
  4. 秒杀项目之商品展示及商品秒杀
  5. css3暗黑主题,整个纯 CSS 实现暗黑模式方案
  6. 数据库的统计数据——sysstat
  7. spaceclaim简单建模4
  8. IC垂直领域公众号推荐
  9. 魔兽争霸三加密地图修改工具
  10. wayos维盟JMV7500河南维盟一级代理商专供四WAN全千M智能流控路由器