前后端交互（三）| MongoDB+Express | （2）模板引擎artTemplate

最新推荐文章于 2021-05-14 20:59:13 发布
最新推荐文章于 2021-05-14 20:59:13 发布
阅读量228 收藏 2
点赞数
分类专栏： 前后端交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/better_xing/article/details/109169338
版权

模板引擎artTemplate

文章目录

1. 模板引擎的基础概念

1.1 模板引擎

模板引擎是第三方模块。

让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。

 // 未使用模板引擎的写法
 var ary = [{ name: '张三', age: 20 }];
 var str = '<ul>';
 for (var i = 0; i < ary.length; i++) { 
    str += '<li>\
        <span>'+ ary[i].name +'</span>\
        <span>'+ ary[i].age +'</span>\
    </li>';
 }
 str += '</ul>'; 

 <!-- 使用模板引擎的写法 --> 
 <ul>
    {{each ary}}
       <!-- 双花括号的作用是把内部的变量替换成真实的数据 -->
        <li>{{$value.name}}</li>
        <li>{{$value.age}}</li>
    {{/each}}
 </ul>

1.2 art-template模板引擎

使用步骤:

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

2.使用const template = require**(‘art-template’)**引入模板引擎

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

4.使用模板语法告诉模板引擎，模板与数据应该如何进行拼接 views默认模板文件夹

//app.js
//引入art-template模板引擎 拼接字符串path模块
const template = require('art-template');
const path = require('path');
//template方法是用来拼接字符串的,返回拼接好的字符串 template('模板路径', 数据);
//参数一:模板路径-->绝对路径  __dirname当前文件所在的路径(app.js所在的路径)
//参数二:要在模板中显示的数据-->对象类型
const views = path.join(__dirname, 'views', 'index.art')//index.art的路径
const html = template(views, {
  name: '张三',
  age: 20,
})
console.log(html);

//index.art
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  {{name}}
  {{age}}
</body>

</html>

在这里插入图片描述

2. 模板引擎语法

2.1 模板语法

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

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

输出

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

●标准语法：{{ 数据 }}

●原始语法：<%= 数据 %>

原文输出

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

●标准语法：{{@ 数据 }}

●原始语法：<%- 数据 %>

//01.输出语法.js
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '01.art')
const html = template(views, {
  name: '张三',
  age: 20,
  content: '<h1>我是标题</h1>'
})
console.log(html);

//01.art
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 标准语法 -->
  <p>{{name}}</p>
  <p>{{1+1}}</p>
  <p>{{1+1==2?'相等':'不相等'}}</p>
  <p>{{content}}</p>
  <p>{{@content}}</p>
  <!-- 原始语法 -->
  <p><%= name %></p>
  <p><%= 1+2 %></p>
  <p><%= 1+1==2?'相等':'不相等' %></p>
  <p><%= content %></p>
  <p><%- content %></p>
</body>
</body>

</html>

在这里插入图片描述

2.2 条件判断

语法模板

 <!-- 标准语法 --> 
 {{if 条件}} ... {{/if}}
 {{if v1}} ... {{else if v2}} ... {{/if}}
 <!-- 原始语法 -->
 <% if (value) { %> ... <% } %>
 <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

//02.条件判断.js
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '02.art')
const html = template(views, {
  name: '张三',
  age: 17,
})
console.log(html);

//02.art
<!-- 标准语法 -->
{{if age>18}}
年龄大于18
{{else if age <15 }}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}

<!-- 原始语法 -->
<% if (age>18) {%>
年龄大于18
<%} else if (age<15){%>
年龄小于15
<%} else {%>
年龄不符合要求
<%}%>

在这里插入图片描述

2.3 循环

●标准语法：{{each 数据}} {{/each}}

●原始语法：<% for() { %> <% } %>

语法模板

 <!-- 标准语法 -->
 {{each target}}
     {{$index}} {{$value}}  循环的索引   循环的这一项数据
 {{/each}}
  <!-- 原始语法 -->
 <% for(var i = 0; i < target.length; i++){ %>
     <%= i %> <%= target[i] %>
 <% } %>

//03.数据循环.js
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '03.art');
const html = template(views, {
  users: [{
    name: '张三',
    age: 20,
    sex: '男'
  }, {
    name: '李四',
    age: 30,
    sex: '男'
  }, {
    name: '玛丽',
    age: 15,
    sex: '女'
  }]
});

console.log(html);

//03.art
<!-- 标准语法 -->
<ul>
  {{each users}}
  <li>
    {{$value.name}}
    {{$value.age}}
    {{$value.sex}}
  </li>
  {{/each}}
</ul>
<!-- 原始语法 -->
<ul>
  <% for (var i = 0; i<users.length;i++) { %>
  <li>
    <%= users[i].name %>
    <%= users[i].age %>
    <%= users[i].sex %>
  </li>
  <% } %>
</ul>

在这里插入图片描述

2.4 子模板

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

●标准语法：{{include ‘模板’}}

●原始语法：<%include(‘模板’) %>

语法模板

  <!-- 标准语法 -->
 {{include './header.art'}}
  <!-- 原始语法 -->
 <% include('./header.art') %>

//04.子模板
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '04.art');
const html = template(views, {
  msg: '我是首页'
});
console.log(html);

//header.art
我是头部

//footer.art
我是底部

//04.art
<!-- 标准语法 -->
{{include './common/header.art'}}
<div>{{msg}}</div>
{{include './common/footer.art'}}
<!-- 原始语法 -->
<% include('./common/header.art')%>
<div>{{msg}}</div>
<% include('./common/header.art')%>

在这里插入图片描述

2.5 模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。

在这里插入图片描述
在这里插入图片描述

//05.模板继承.js
const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', '05.art');

const html = template(views, {
  msg: '首页模板'
});

console.log(html);

//05.art
{{extend './common/layout.art'}} //extend继承模板
{{block 'content'}}
<p>{{msg}}</p> //要填充的内容
{{/block}}
{{block 'link'}}
<link rel="stylesheet" href="./main.css">
{{/block}}

//layout.art  html骨架模板
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML骨架模板</title>
  {{block 'link'}}{{/block}}  //block预留位置
</head>

<body>
  {{block 'content'}}{{/block}}
</body>

</html>

在这里插入图片描述

2.6 模板配置

1.向模板中导入变量 template.defaults.imports.变量名 = 变量值;

2.设置模板根目录 template.defaults.root = 模板目录

3.设置模板默认后缀 template.defaults.extname = ‘.art’

//06.模板配置.js
const template = require("art-template");
const path = require("path");
//导入处理日期格式的模块
const dateFormat = require("dateformat");
//设置模板的根目录
template.defaults.root = path.join(__dirname, "views");
//导入模板变量
template.defaults.imports.dateFormat = dateFormat;
//配置模板的默认后缀
template.defaults.extname = '.html' //若写成.art 则后面的06.art可以省略.art
const html = template("06.art", { //前面只需写模板的名字,路径自动拼接好,省略路径拼接
  time: new Date(),
});
console.log(template('07', {}));
console.log(html);

//06.art
{{dateFormat(time,'yyyy-mm-dd')}}

//07.html
我是07.html模板

在这里插入图片描述

3. 案例

3.1 案例介绍 – 学生档案管理

目标：模板引擎应用，强化node.js项目制作流程。

知识点：http请求响应、数据库、模板引擎、静态资源访问。

在这里插入图片描述

3.2 制作流程

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

npm init –y 生成package.json

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

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

​ 连接数据库需要用到第三方模块mongoose npm i mongoose

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

5.实现静态资源访问

6.实现学生信息添加功能

7.实现学生信息展示功能

3.3 第三方模块 router

功能：实现路由

使用步骤：

1.获取路由对象

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

3.启用路由，使路由生效

语法模板

//引入实现路由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)
})

3.4 第三方模块 serve-static

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

步骤：

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

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

3.启用静态资源服务功能

语法模板

//引入静态资源访问serve-static模块
const serveStatic = require('serve-static')
//调用方法创建静态资源服务并指定静态资源服务目录
const serve = serveStatic('public')
//启动静态资源访问服务功能
server.on('request', () => { 
    serve(req, res)
})
server.listen(3000)

3.5 添加学生信息功能步骤分析

1.在模板的表单中指定请求地址与请求方式

2.为每一个表单项添加name属性 没有该属性服务器端接收不到请求参数

3.添加实现学生信息功能路由

4.接收客户端传递过来的学生信息

5.将学生信息添加到数据库中

6.将页面重定向到学生信息列表页面

3.6 学生信息列表页面分析

1.从数据库中将所有的学生信息查询出来

2.通过模板引擎将学生信息和HTML模板进行拼接

3.将拼接好的HTML模板响应给客户端

前端More
关注
专栏目录
《web开发： Ajax art-template模板引擎》
yexiangCSDN的专栏
01-29 305
一、模板引擎 1 渲染UI结构时遇到的问题 var rows = [] $.each(res.data, function (i, item) { // 循环拼接字符串 rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person"
前端后端交互之MongoDB数据库+模板引擎
qq_38294099的博客
01-02 1004
MongoDB数据库数据库及坏境搭建使用数据库原因什么是数据库数据库相关概念开启mongodb数据库连接总结 数据库及坏境搭建 使用数据库原因 动态网站中的数据都是存储在数据库中 数据库可以持久存储客户端通过表单收集的用户信息； 数据库软件本身就可以对数据高效管理； 什么是数据库 存储数据的仓库，将数据有序分门别类的存储，通过API操作 常见数据库软件又：mysql mongoDB oracle MongoDB数据库下载安装 MongoDB菜鸟教程 MongoDB官方学习网站 安装MongoDB
ART-TEMPLATE高性能模块渲染引擎
Hemx的博客
06-02 824
ART-TEMPLATE 高性能 JavaScript 模板引擎 介绍 art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。在线速度测试 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader） 支持 Express、Koa、Webpack 支持模板继承与子模
模板引擎art-template
sdgfbx
07-17 249
模板引擎 模板引擎是第三方模块 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护 var ary = [{name: '张三', age: '20'}]; // 未使用模板引擎 var str = '<ul>'; for(var i =0;i < ary.length;i++){ str += `<li>\ <span>'+ ary[i].name +'</span>\ <span>'+ ary[i].age+'
node+express+mongodb+art-template
qq_37533863的博客
03-02 217
一 node环境使用express 1. 下载安装 npm i express --save 2. 配置服务器 var app = express(); app.listen(3000, function () { console.log('app is running, http://127.0.0.1:3000'); }) 3. express默认读取的目录是views文件夹，如果需要修改 第一个参数是修改目录的名字 第二个参数是目录路径 app.set('views',path.join
art-template官方文档
Charlie8915的博客
03-16 1230
http://aui.github.io/art-template/zh-cn/docs/ 转载于:https://www.cnblogs.com/Yanss/p/10543766.html
art-template+Express+MongoDB小项目
qq_36623798的博客
02-23 1421
前言 为了体验前后端交互的内容，我找了art-template+Express+MongoDB（代码Github）这个简单的小项目练练手，页面极其简陋，不喜勿喷。 本项目是使用前端引擎art-template+Express+MongoDB为主开发的项目，本文将对项目使用的技术和一些细节处进行讲解。 一、效果 二、功能 1.已经完成功能 2.待优化或实现 三、主要使用技术 四、快速上手art-te...
MCS是一个后台管理系统，由NodeJs + koa2 +Mongodb + Art-template模板组合开发完成
最新发布
08-03
Art-template是一个JavaScript模板引擎，主要用于前端页面动态渲染。它提供了简洁的语法和高效的性能，使得开发者可以将数据和HTML结构分离，提高代码可维护性。在MCS中，Art-template与后台数据相结合，动态生成...
Node学生管理系统（Express+MongoDB）
08-12
4. **查询学生信息**：系统提供多种查询方式，如按姓名、班级等条件筛选，Express根据查询条件从MongoDB中检索数据，并使用模板引擎渲染结果。 **六、项目结构** 一个典型的Node.js项目结构可能如下： - `bin`：...
Student-Express
08-09
【Student-Express】是一个使用Node.js的Express框架和art-template模板引擎开发的Web应用程序，主要功能是管理和操作“学生信息”，包括添加、删除、修改和查询等基础的CRUD（Create, Read, Update, Delete）操作。...
art-template(下载这个)
03-14
以asp.net作为后台，VS打开项目即可使用。
前后端分离编写简单注册登录案例，并实现session存储持久化
weixin_45463891的博客
11-28 1009
为加深对nodeJS服务端与客户端交互的理解，特写下这个案例，供以后查阅。 1. 编写mongoose连接模块（connect.js） const mongoose = require('mongoose'); function mongoConnect(openFn, errorFn) { //连接数据库 mongoose.connect('mongodb://localhost:27017/demo', { useNewUrlParser: true, .
art-template 模板引擎(服务器端)
王敬辉的博客
07-11 393
art-template 模板引擎 template 方法是用来拼接字符串的 template()参数一 模板路径 绝对路径 template()参数二 要在模板中显示的数据 对象类型 //js代码 const views=path.join(__dirname,'views','index.art'); const html=template(views,{ name:'张狗蛋', age:22 }); // 模板语法 {{name}} {{age}} 1.模板语法 art-tem
art-template
盏茶作酒的博客
10-11 835
art-template javascript 模板引擎，官网：https://github.com/aui/art-template 分为原生语法和简洁语法，本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一、引入art-template.js文件 <script src="template-debug.js">&...
art-template整理
yuan_xiao_long的博客
05-14 1307
官网介绍：art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。同时，它同时支持NodeJS和浏览器。在线速度测试。 理解 在使用js进行前端开放的时候，除了DOM节点的操作以外还有通过json数据的操作。而操作最麻烦的就是使用json生成dom对象，通常要写很多的for循环，if判断之类的代码来支持data向view的转化，十使用模块引擎，可以很大程度上简化这个过程。 作用 使用模板引擎提供的模块语法，可以将数据
art-template学习
lh334421的博客
08-29 1027
art-template javascript 模板引擎，官网：https://github.com/aui/art-template 分为原生语法和简洁语法，本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一、引入art-template.js文件 &lt;script src="template-debug.js...
artTemplate 学习网址和书籍
weixin_34015336的博客
03-14 130
1、arttemplate的github官网：https://github.com/aui/artTemplate 转载于:https://blog.51cto.com/happyyoung/1750933
art-template 模板引擎(客户端)
王敬辉的博客
08-10 370
art-template 作用:使用模板引擎提供的模板语法，可以将数据和HTML拼接起来 官方地址：https://aui.github.io/art-template/zh-cn/index.html 使用步骤： 下载art-template模板引擎文件并在HTML页面中引入库文件 <script src='./js/template-web.js'></script> 准备art-template模板 <script id=‘tp1’ type='text/htm
模板引擎
Ulrica_Amaris的博客
09-22 270
简介 模板引擎是第三方模块。 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。 art-template 介绍 artTemplate 是新一代 javascript 模板引擎 它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。 调试功能 除了性能优势外，调试功能也值得一提。 模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个
前后端分离mongodb+node.js+express实现登录注册的代码
05-09
首先，需要安装 MongoDB 数据库和 Node.js 运行环境。 然后，创建一个新的文件夹，命名为 myapp，进入该文件夹，打开终端窗口，输入以下命令，初始化项目： ``` npm init ``` 按照提示输入项目信息，初始化完成后，输入以下命令安装 Express 和 Mongoose 模块： ``` npm install express mongoose --save ``` 接下来，创建一个名为 server.js 的文件，输入以下代码： ```javascript const express = require('express'); const mongoose = require('mongoose'); const bodyParser = require('body-parser'); const app = express(); // 配置 bodyParser 解析 POST 请求的数据 app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); // 连接 MongoDB 数据库 mongoose.connect('mongodb://localhost/myapp', { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log('MongoDB Connected...')) .catch(err => console.log(err)); // 定义用户模型 const UserSchema = new mongoose.Schema({ email: String, password: String }); const User = mongoose.model('User', UserSchema); // 注册接口 app.post('/signup', (req, res) => { const { email, password } = req.body; // 检查是否已存在该用户 User.findOne({ email }) .then(user => { if (user) { return res.status(400).json({ msg: '该用户已存在' }); } // 创建新用户 const newUser = new User({ email, password }); newUser.save() .then(user => res.json(user)) .catch(err => console.log(err)); }); }); // 登录接口 app.post('/login', (req, res) => { const { email, password } = req.body; // 检查用户是否存在 User.findOne({ email }) .then(user => { if (!user) { return res.status(404).json({ msg: '该用户不存在' }); } // 验证密码是否正确 if (user.password !== password) { return res.status(400).json({ msg: '密码错误' }); } // 登录成功 res.json({ msg: '登录成功' }); }); }); const port = process.env.PORT || 5000; app.listen(port, () => console.log(`Server started on port ${port}`)); ``` 以上代码实现了一个简单的注册和登录接口，使用了 Express、Mongoose 和 BodyParser 模块。 最后，输入以下命令启动服务器： ``` node server.js ``` 访问 http://localhost:5000 就可以测试接口了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值