Nodejs基础之Express框架和art-template引擎(四)

最新推荐文章于 2024-07-22 20:58:11 发布
最新推荐文章于 2024-07-22 20:58:11 发布
阅读量1.2k 收藏 14
点赞数 5
分类专栏： # Node灬真仙 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Augenstern_QXL/article/details/119942262
版权

✍目录脑图

在这里插入图片描述

🔥Nodejs冲浪笔记地址
🔥Nodejs基础之JavaScript模块化(一)https://blog.csdn.net/Augenstern_QXL/article/details/119941988
🔥nodejs基础之包管理工具npm(二)https://blog.csdn.net/Augenstern_QXL/article/details/119990575
🔥Nodejs基础之常用模块(三)https://blog.csdn.net/Augenstern_QXL/article/details/119942024
🔥Nodejs基础之Express框架和art-template引擎(四)https://blog.csdn.net/Augenstern_QXL/article/details/119942262

1、Express框架

Express 是一个基于Node.js 平台，快速、开放、极简的web 开发框架，它提供一系列强大的特性，帮助你创建各种Web 和移动设备应用。

1.1、Express安装

  1. 安装 Expresss 框架，就是使用 npm 的命令
npm install express --save
  • –save 参数，表示自动修改 package.json 文件，自动添加依赖项目

1.2、Express简单使用

1.2.1、app.get

// 引入 express 框架
const express = require('express');
// 实例化 express 赋值给 app
const app = new express();
// 配置路由,匹配URI地址实现不同的功能
// app.get 主要用来显示数据
app.get('/', function(req, res) {
    res.send("Hello World!");
})

app.get('/article', function(req, res) {
    res.send("新闻页面");
})

app.get('/login', function(req, res) {
    res.send("登录页面");
})

app.get('/register', function(req, res) {
    res.send("注册页面");
})

/// 监听端口
app.listen(3000);

在这里插入图片描述

1.2.2、app.post

// 引入 express 框架
const express = require('express');
// 实例化 express 赋值给 app
const app = new express();
// 配置路由,匹配URI地址实现不同的功能
// app.post 主要用于增加数据
app.post('/doLogin', (req, res) => {
    res.send("执行登录");
})


/// 监听端口
app.listen(3000);

在这里插入图片描述

1.2.3、app.put

// 引入 express 框架
const express = require('express');
// 实例化 express 赋值给 app
const app = new express();
// 配置路由,匹配URI地址实现不同的功能
// app.put 主要用于修改数据
app.put('/editUser', (req, res) => {
    res.send("修改用户");
})


/// 监听端口
app.listen(3000);

在这里插入图片描述

1.2.4、app.delete

// 引入 express 框架
const express = require('express');
// 实例化 express 赋值给 app
const app = new express();
// 配置路由,匹配URI地址实现不同的功能
// app.delete 主要用于删除数据
app.delete('/deleteUser', (req, res) => {
    res.send("删除用户");
})


/// 监听端口
app.listen(3000);

在这里插入图片描述

1.2.5、路由配置多级目录

// 引入 express 框架
const express = require('express');
// 实例化 express 赋值给 app
const app = new express();
// 配置路由,匹配URI地址实现不同的功能
// 路由里面配置多级目录  http://localhost:3000/admin/user/edit
app.get("/admin/user/add", (req, res) => {
    res.send("admin user add")
})


/// 监听端口
app.listen(3000);

在这里插入图片描述

1.2.6、动态路由

// 引入 express 框架
const express = require('express');
// 实例化 express 赋值给 app
const app = new express();
// 配置路由,匹配URI地址实现不同的功能
// app.get 主要用来显示数据
app.get('/article', function(req, res) {
    res.send("新闻页面");
})
//动态路由  配置路由的时候也要注意顺序
app.get("/article/:id", (req, res) => {
    var id = req.params["id"]; //获取动态路由
    res.send("动态路由" + id);
})

app.get("/article/add", (req, res) => {
    res.send("article add");
})

/// 监听端口
app.listen(3000);

在这里插入图片描述

1.2.7、GET传值

// 引入 express 框架
const express = require('express');
// 实例化 express 赋值给 app
const app = new express();
// 配置路由,匹配URI地址实现不同的功能
//get 传值  http://localhost:3000/product?name=zhangsan&age=20
app.get("/product", (req, res) => {
    let query = req.query; //获取get传值
    console.log(query);
    console.log("name:" + query.name);
    console.log("age:" + query.age);
    res.send("name:" + query.name + "age:" + query.age);
})


/// 监听端口
app.listen(3000);

在这里插入图片描述

1.3、Express框架中EJS的使用

EJS 是后台模板，可以把我们数据库和文件读取的数据显示到 HTML页面上面。它是一个第三方模块，需要通过 npm 安装。Express 框架里面集成了 EJS 模板引擎，所以我们来看下两者结合的使用。

  1. 安装
npm install ejs --save
  1. 配置ejs app.set("view engine","ejs)
  2. 使用ejs（默认加载模板引擎的文件夹是views，所以 index 前面不需要加 views）
res.render("index",{

})

例如：

const express = require("express");
const app = express()
//配置模板引擎
app.set("view engine","ejs")

// 访问127.0.0.1:3000/  渲染的是index模板
app.get("/",(req,res)=>{
    
    res.render("index",{

    })
})


//监听端口  端口号建议写成3000以上
app.listen(3000);

之后我们在 views 文件夹下新建 index.ejs

<!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>
    <h2>我是一个ejs模板引擎</h2>
</body>
</html>

在这里插入图片描述

1.3.1、EJS常用标签

  • <% %> 流程控制标签
  • <%= %>输出标签(原文输出 HTML 标签)
  • <%- %>输出标签(HTML会被浏览器解析)

1.3.2、绑定数据

例如：

const express = require("express");
const app = express()
//配置模板引擎
app.set("view engine","ejs")

// 访问127.0.0.1:3000/  渲染的是index模板
app.get("/",(req,res)=>{
    let title = "你好ejs";			// 假如这个数据是从数据库获取到的
    res.render("index",{
		title: title,			 // 这样就绑定到 index.ejs 模板里面了
    })
})


//监听端口  端口号建议写成3000以上
app.listen(3000);

接下来我们去 index.ejs 里面输出这个数据

<!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>
    <h2>我是一个ejs模板引擎</h2>
    <p><%=title%></p>
</body>
</html>

在这里插入图片描述

1.3.3、绑定对象

我们也可以绑定对象中的数据并将其渲染到 html 页面。

例如：

const express = require("express");
const app = express()
//配置模板引擎
app.set("view engine", "ejs")

app.get("/news", (req, res) => {
    let userinfo = {
        username: "张三",
        age: 20
    };
    res.render("news", {
        userinfo: userinfo,			// 绑定 userinfo 对象数据
    })
})
app.listen(3000);

接下来我们去 views 文件夹下新建 news.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>绑定对象中的数据</h2>
    <p>
        <%=userinfo.username%>---<%=userinfo.age%>		
    </p>
</body>

</html>

在这里插入图片描述

1.3.4、输出 HTML标签

我们也可以输出 HTML标签，既可以原格式输出，又可以解析 HTML 标签输出。

  • <%= %>输出标签(原文输出 HTML 标签)
  • <%- %>输出标签(HTML会被浏览器解析)
const express = require("express");
const app = express()
    //配置模板引擎
app.set("view engine", "ejs")

app.get("/news", (req, res) => {
    let article = "<h3>我是一个h3</h3>"
    res.render("news", {
        article: article,
    })
})
app.listen(3000);

<body>
    <p>
        <%=article%>		<!-- 原格式输出 -->
    </p>

    <p>
        <%-article%>		<!-- 解析html标签输出 -->
    </p>
</body>

在这里插入图片描述

1.3.5、条件判断

/*
1、安装  cnpm install ejs --save

2、app.set("view engine","ejs")

3、使用  (默认加载模板引擎的文件夹是views)
    res.render("index",{

    })

*/

const express = require("express");
const app = express()
//配置模板引擎
app.set("view engine","ejs")

app.get("/",(req,res)=>{
    let title = "你好ejs";
    res.render("index",{
        title:title
    })
})

app.get("/news",(req,res)=>{

    res.render("news",{
        flag:true,
        score:60,

    })
})


//监听端口  端口号建议写成3000以上
app.listen(3000)

<h2>条件判断</h2>

<%if(flag==true){%>
    <strong>flag=true</strong>
<%}%>

<%if(score>=60){%>
    <p>及格</p>
<%}else{%>
   不及格
<%}%>

在这里插入图片描述

1.3.6、循环遍历

/*
1、安装  cnpm install ejs --save

2、app.set("view engine","ejs")

3、使用  (默认加载模板引擎的文件夹是views)
    res.render("index",{

    })

*/

const express = require("express");
const app = express()
    //配置模板引擎
app.set("view engine", "ejs")

app.get("/", (req, res) => {
    let title = "你好ejs";
    res.render("index", {
        title: title
    })
})

app.get("/news", (req, res) => {

    let list = ["1111", "22222", "3333333"]

    let newsList = [{
            title: "新闻1111",
        },
        {
            title: "新闻122222",
        },
        {
            title: "新闻33331",
        },
        {
            title: "新闻44444",
        }
    ]

    res.render("news", {
        list: list,
        newsList: newsList
    })
})


//监听端口  端口号建议写成3000以上
app.listen(3000)

<body>
    <h2>循环遍历</h2>

    <ul>
        <%for(let i=0;i<list.length;i++){%>
            <li>
                <%=list[i]%>
            </li>
            <%}%>
    </ul>
    <br>

    <ul>
        <%for(let i=0;i<newsList.length;i++){%>
            <li>
                <%=newsList[i].title%>
            </li>
            <%}%>
    </ul>

</body>

在这里插入图片描述

1.3.7、引入模板

<%- include('footer.ejs') %>

1.3.8、ejs后缀修改为html

这是一个小技巧，看着.ejs 的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。

  1. 在 app.js 的头上定义ejs
var ejs = require('ejs');
  1. 注册html 模板引擎代码如下
app.engine('html',ejs__express)
  1. 将模板引擎转换成 html 代码如下
app.set('view engine','html')
  1. 修改模板文件的后缀为 .html 即可

1.3.9、Express.static托管静态文件

我们的静态资源 img、css 等要如何引入呢？

  1. 调用 express.static 中间件
app.use(express.static('static'))

现在，static 目录下面的文件就可以访问了

  1. 在 ejs 里面正常引入css 即可

1.4、Express中间件

通俗的讲：中间件就是匹配路由之前或者匹配路由完成做的一系列的操作。中间件如果想往下匹配的话，那么需要写 next()

中间件可以用来做权限判断：没有登录 跳转到登录页面，登录以后就显示登录以后的页面

如果我的get、post 回调函数中，没有next 参数，那么就匹配上第一个路由，，就不会往下匹配了。如果想往下匹配的话，那么需要写 next()

Express 应用可使用如下几种中间件

  • 应用级中间件
  • 路由级中间件（用的少）
  • 错误处理中间件
  • 内置中间件
  • 第三方中间件

1.4.1、应用级中间件

const express = require("express");
const app = express()

//1、应用级中间件 (用于权限判断)
app.use((req,res,next)=>{			// 匹配任何路由
    console.log(new Date()); 
    next();							// 表示匹配完成这个中间件之后程序继续向下执行
})

app.get("/",(req,res)=>{
    res.send("首页")
})

app.get("/login",(req,res)=>{
    res.send("执行登录")
})

app.listen(3000);

1.4.2、路由中间件

const express = require("express");
const app = express()

//2、路由级中间件(用的比较少)
app.get("/news/add",(req,res,next)=>{
    // res.send("执行增加新闻")
    console.log("执行增加新闻")
    next()
})

app.get("/news/:id",(req,res)=>{
    res.send("新闻动态路由")
})

app.listen(3000);

1.4.3、错误处理中间件

const express = require("express");
const app = express()

//3、错误处理中间件  
app.use((req,res,next)=>{
   res.status(404).send("404")
})

app.listen(3000);

1.4.4、内置中间件

// 内置服务
app.use('/static',express.static('./static'))

内置中间件一般用于 css、img 等静态资源的加载访问。

1.4.5、第三方中间件

1.4.6、获取GET请求参数

  • GET 请求的参数在 URL 中，在原生 Node中，需要使用 url 模块来识别参数字符串。在 Express 中，不需要使用 url模块了，可以直接使用 req.query 对象
const express = require("express");

const app = express()

app.get("/", (req, res) => {
    // http://127.0.0.1:3000/?name=zhangsan&age=20
    let query = req.query;
    console.log(query);
    console.log(query.name);
    console.log(query.age);
    res.send(req.query);
})


app.listen(3000);

在这里插入图片描述

1.4.7、获取POST请求参数

获取 POST 请求参数需要加载第三方中间件 body-parser

  1. 首先下载 body-parse
npm install body-parser --save
  1. 引入中间件
var bodyParser = require('body-parser')
  1. 配置中间件
app.use(bodyParser.urlencoded({ extended: false }))

app.use(bodyParser.json())
  1. 接收 post 数据
req.body

const express = require("express");
const bodyParser = require('body-parser')
const app = express()

//配置第三方中间件
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post("/doLogin", (req, res) => {
    // req.body 获取post传值
    var body = req.body;

    res.send(body);
})

//监听端口  端口号建议写成3000以上
app.listen(3000)

在这里插入图片描述

1.5、Express Cookie

1.5.1、Cookie简介

  • cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。
  • HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。
  • Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行HTTP 报文中，命令浏览器存储一个字符串; 浏览器再访问同一个域的时候，将把这个字符串携带到上行HTTP 请求中。第一次访问一个服务器，不可能携带cookie。必须是服务器得到这次请求，在下行响应报头中，携带cookie 信息，此后每一次浏览器往这个服务器发出的请求，都会携带这个cookie。

1.5.2、Cookie的特点

  • cookie 保存在浏览器本地
  • 正常设置的cookie 是不加密的，用户可以自由看到
  • 用户可以删除cookie，或者禁用它
  • cookie 可以被篡改
  • cookie 可以用于攻击
  • cookie 存储量很小。未来实际上要被localStorage 替代，但是后者IE9 兼容。

1.5.3、Cookie的使用

Express 中要使用Cookie 的话，我们需要使用 cookie-parser 模块来实现

  1. 安装
npm install cookie-parser --save
  1. 引入
var cookieParser = require('cookie-parser')
  1. 设置中间件
app.use(cookieParser())
  1. 设置 cookie
res.cookie("username","zhangsan",{maxAge:1000*60*60})
  1. 获取 cookie
req.cookies.username

const express = require('express')
const cookieParser = require('cookie-parser')

const app=express()
//配置cookieParser中间件
app.use(cookieParser())


app.get("/",(req,res)=>{  
    // 设置cookie  如果cookie没有过期的话，关闭浏览器后重新打开,cookie不会销毁
    res.cookie("username","zhangsan",{maxAge:1000*60*60});
    res.send("你好 Cookie");
})


app.get("/article",(req,res)=>{
    //获取cookie
    let username=req.cookies.username;
    res.send("新闻页面--"+username)
})

app.get("/user",(req,res)=>{
    //获取cookie
    let username=req.cookies.username;   
    res.send("用户--"+username);
})

app.listen(3000);

设置Cookie

在这里插入图片描述

获取Cookie

在这里插入图片描述

1.5.4、Cookie属性说明

属性描述
domain🔥域名 name = value:，是键值对，可以设置要保存 key/Value，注意这里的 name 不能和其他属性项的名字一样
Expires过期时间（ 秒） ， 在设置的某个时间点后该Cookie 就会失效， 如 expires=Wednesday, 09-Nov-99 23:12:40 GMT
maxAge最大失效时间（毫秒），设置在多少后失效
secure当secure 值为true 时，cookie 在HTTP 中是无效，在HTTPS 中才有效
Path🔥表示cookie 影响到的路径，如path=/。如果路径不能匹配时，浏览器则不发送这个Cookie
httpOnly是微软对COOKIE 做的扩展。如果在COOKIE 中设置了“httpOnly”属性，则通过程序（JS 脚本、applet 等）将无法读取到COOKIE 信息，防止XSS 攻击产生
singed表示是否签名cookie, 设为true 会对这个cookie 签名， 这样就需要用res.signedCookies 而不是res.cookies 访问它。被篡改的签名cookie 会被服务器拒绝，并且cookie 值会重置为它的原始值
  • 多个域名共享 cookie：aaa.itying.com bbb.itying.com 下的二级域名都可以访问这个 cookie
// 多个域名共享cookie  aaa.itying.com   bbb.itying.com 
res.cookie("username","zhangsan1111",{maxAge:1000*60*60,domain:".itying.com"})
  • 中文 cookie
res.cookie("username","张三",{maxAge:1000*60*60})
  • 设置只有 /article 路由可以访问这个cookie
res.cookie("username","zhangsan",{maxAge:1000*60*60,path:"/article"})

1.5.5、Cookie的加密

  1. 配置中间件的时候需要传入加密的参数
app.use(cookieParser("itying"))
  1. 设置加密 Cookie
res.cookie("username","zhangsan",{maxAge:1000*60*60,signed:true})
  1. 获取加密的cookie
req.signedCookies

1.6、Express Session

1.6.1、Session简介

  • session 是另一种记录客户状态的机制，不同的是Cookie 保存在客户端浏览器中，而session 保存在服务器上。

  • Cookie 数据存放在客户的浏览器上，Session 数据放在服务器上。Session 相比Cookie 要更安全一些

  • 由于Session 保存到服务器上，所以当访问量增多的时候，会比较占用服务器的性能。

  • 单个cookie 保存的数据大小不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。Session 没有这方面的限制。Session 是基于Cookie 进行工作的。

1.6.2、Session的工作流程

当浏览器访问服务器并发送第一次请求时，服务器端会创建一个session 对象，生成一个类似于key,value

的键值对， 然后将key(cookie)返回到浏览器(客户)端，浏览器下次再访问时，携带key(cookie)，找到对应

的session(value)。

1.6.3、express-session

  1. 安装
npm install express-session --save
  1. 引入
var session = require('express-session')
  1. 设置官方文档提供的中间件
app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}))
  1. 使用
// 设置值
req.session.username = "张三"
// 获取值
req.session.username

1.6.4、express-session的常用参数

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: true }
}))
参数作用
secret一个String 类型的字符串，作为服务器端生成session 的签名
name返回客户端的key 的名称，默认为connect.sid,也可以自己设置。
resave强制保存session 即使它并没有变化, 。默认为false 。don’t save session if unmodified
saveUninitialized强制将未初始化的session 存储。当新建了一个session 且未设定属性或值时，它就处于未初始化状态。在设定一个cookie 前，这对于登陆验证，减轻服务端存储压力，权限控制是有帮助的。（默认：true）。建议手动添加。
cookie设置返回到前端key 的属性，默认值为{ path: ‘/’, httpOnly: true, secure: false,maxAge: null }。
rolling在每次请求时强行设置cookie，这将重置cookie 过期时间（默认：false）
const express = require('express')
const session = require('express-session')
const app = express()

//配置session的中间件
app.use(session({
    secret: 'this is session', //服务器端生成 session 的签名
    name: "itying", //修改session对应cookie的名称
    resave: false, //强制保存 session 即使它并没有变化
    saveUninitialized: true, //强制将未初始化的 session 存储
    cookie: {
        maxAge: 1000 * 60 * 30,
        secure: false // true 表示只有https协议才能访问cookie  
    },
    rolling: true //在每次请求时强行设置 cookie，这将重置 cookie 过期时间（默认：false）
}))

app.get("/", (req, res) => {
    //获取seesion
    if (req.session.username || req.session.age) {
        res.send(req.session.username + "--" + req.session.age + "-已登录")
    } else {
        res.send("没有登录")
    }
})

app.get("/login", (req, res) => {
    //设置seesion
    req.session.username = "张三";
    req.session.age = 20;
    res.send("执行登录");
})


app.listen(3000)

在这里插入图片描述

1.6.5、express-session的常用方法

  1. 设置session的过期时间为 0(它会把所有的session都销毁)
req.session.cookie.maxAge=0
  1. 销毁指定session
req.session.username=""
  1. 销毁session
req.session.destroy()

app.get("/loginOut",(req,res)=>{  
    //1、设置session的过期时间为0  (它会把所有的session都销毁)
    // req.session.cookie.maxAge=0

    //2、销毁指定session
    // req.session.username=""

    //3、销毁session  destroy

    req.session.destroy();

    res.send("退出登录")
})

2、art-template模板

模板引擎是第三方模块,art-template模板引擎官方网址：https://aui.github.io/art-template/zh-cn/index.html

  1. 下载
npm install art-template --save
  1. 引入
const template = require('art-template');
  1. 告诉模板引擎要拼接的数据和模板在哪
const html = template(‘模板路径’, 数据);
  1. 使用

2.1、示例

// 导入模板引擎
const template = require('art-template');
const path = require('path');

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

// template方法是用来拼接字符串的
// 1. 模板路径 绝对路径
// 2. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(views, {
    name: '张三',
    age: 20
})

console.log(html);

用模板引擎在 index.art 中接收

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

在这里插入图片描述

2.2、模板语法

  • art-template同时支持两种模板语法：标准语法和原始语法
  • 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力

2.2.1、输出

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

  • 标准语法：{{ 数据 }}
  • 原始语法：<%=数据 %>
<!-- 标准语法 -->
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>

<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>

2.2.2、原文输出

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

  • 标准语法：{{@} value}
  • 原始语法：<%- 数据%>
<!-- 标准语法 -->
<h2>{{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>

例如我们在 app.js 中放入数据：

// 导入模板引擎
const template = require('art-template');
const path = require('path');

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

// template方法是用来拼接字符串的
// 1. 模板路径 绝对路径
// 2. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(views, {
    name: '张三',
    age: 20,
    content: '<h1>我是标题</h1>'
})

console.log(html);

使用模板语法在 index.art 中接收

<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>

在这里插入图片描述

2.2.3、条件判断

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

例如：

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

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

2.2.4、循环

  • 标准语法：{{each 数据}}{{/each}}
  • 原始语法：<% for() {%><%} %>
<!-- 标准语法 -->
{{each target}}
 {{$index}} {{$value}}
{{/each}}

<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
 <%= i %> <%= target[i] %>
<% } %>

例如我们在 app.js 中放入数据：

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

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

const html = template(views, {
    users: [{
        name: '张三',
        age: 20,
        sex: '男'
    }, {
        name: '李四',
        age: 30,
        sex: '男'
    }, {
        name: '玛丽',
        age: 15,
        sex: '女'
    }]
});

console.log(html);

使用模板语法在 index.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.3、子模版

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

  • 标准语法：{{include '模板'}}
  • 原始语法：<%include{'模板'}%>

2.4、模板继承

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

在这里插入图片描述

如下图，我们可以在左边 HTML骨架 中预留位置(挖坑)，比如分别需要填充 css 内容，填充 js 内容，填充页面主体内容

右边是页面模板，它继承了这个 HTML骨架模板，在继承的时候将骨架模板预留的位置都填充了

在这里插入图片描述

2.4.1、模板继承示例

如下代码是 HTML骨架模板代码，我们可以通过{{block '模板'}}{{/block}} 来预留位置

<!doctype html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>HTML骨架模板 layout.art</title>
         {{block 'head'}}{{/block}}
     </head>
     <body>
         {{block 'content'}}{{/block}}
     </body>
 </html>

首页模板继承 HTML骨架模板，我们可以通过 {{extend '模板路径/模板名字'}} 来继承骨架模板，

  • 再使用{{block 'head'}}内容{{/block}} 来填充骨架模板中的 head 位置

  • 再使用{{block 'content'}}内容{{/block}} 来填充骨架模板中的 content 位置

<!--index.art 首页模板-->
{{extend './layout.art'}}
{{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}}


{{block 'content'}} <p>This is just an awesome page.</p> {{/block}}

2.5、模板配置

在使用模板配置之前我们先看一个第三方时间处理模块 dateformat

  1. 使用 silly-datatime 第三方模块说明，首先下载，所有的第三方模块均在 npmjs.com 中搜索即可
npm install dateformat --save
  1. example
var dateFormat = require("dateformat");
var time = new Date();

// Basic usage
dateFormat(time, "dddd, mmmm dS, yyyy, h:MM:ss TT");
// Saturday, June 9th, 2007, 5:46:21 PM

2.5.1、配置第三方模块方法

接下来我们看个示例，代码如下：

我们在 app.js 中存放 time 时间：

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

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

const html = template(views, {
    // 原始时间格式
    time: new Date(),
});

console.log(html);

我们在 index.art 中接收 time

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    {{time}}
</body>

</html>

在这里插入图片描述

我们现在相对我们的时间格式进行处理，默认情况下是不能在模板当中直接调用 dateFormat 方法的，我们需要将这个方法作为模板的变量导入到模板当中

  1. 向模板中导入变量 template.defaults.imports.变量名 = 变量值
const template = require('art-template');
const path = require('path');
const dateFormat = require("dateformat");

const views = path.join(__dirname, 'views', 'index.art');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;

const html = template(views, {
    // 原始时间格式
    time: new Date(),
});

console.log(html);
  1. 在 index.art 中调用 dateFormat 方法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
     {{dateFormat(time, 'yyyy-mm-dd')}}
</body>

</html>

在这里插入图片描述

2.5.2、配置模板根目录

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

    我们设置模板根目录为 views 文件夹，之后只需要在 template 中传入我们模板的文件名全称，也是可以访问到静态资源 index.art 的

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;

const html = template('index.art', {
    // 原始时间格式
    time: new Date(),
});

console.log(html);

在这里插入图片描述

2.5.3、配置模板默认后缀

我们看 art 后缀是不是很不爽？一招直接使其成为 html 后缀

  1. 设置模板默认后缀 template.defaults.extname = '.html'

    这样我们只需在 template 中传入模板的名字即可，会自动去找 index.html 模板

const template = require('art-template');
const path = require('path');
const dateFormat = require("dateformat");

// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 设置模板的默认后缀
template.defaults.extname = '.html';
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;

const html = template('index', {
    // 原始时间格式
    time: new Date(),
});

console.log(html);

在这里插入图片描述

生命是有光的
关注
专栏目录
nodejs篇 express(4) express + art-template创建网站基础
秋来九月八
04-06 702
为了适用越来越复杂的网站业务和用户交互，前后端分离已经好多年，但在web发展的最初，并没有什么vue、react之类的mvvm的框架，也没有所谓的单一页面响应（SPA），那网页的渲染是如何实现的呢？一个网站所需的资源统一由服务端直接在本地库中读取文件(以index.html为例)，然后，根据用户的不同，替换所读取文件index.html中的文本。当然除了html，服务端也会返回所有网站所需的静态资源，css，js，字体图标等等。
在node和express中配置使用art-template
webchang的博客
05-02 785
在node和express中使用art-template
在express中配置使用art-template
流楚丶格念的博客
02-20 4278
文章目录安装配置使用render（'html模板名', {模板数据}） 官方文档：http://aui.github.io/art-template/zh-cn/express/index.html#Install 安装 npm install --save art-template npm install --save express-art-template 配置 // 配置使用 art-template 模板引擎 // 第一个参数，表示，当渲染以 .art 结尾的文件的时候，使用 art-te
Express配置模板引擎
AndreMao的博客
06-10 753
Express配置模板引擎 上代码const express = require('express'); const arttemplate = require('express-art-template'); const path = require('path'); const app = express(); // 使用arttemplate模板引擎解析art后缀的模板，可以有同时存在多种...
第8章 Express的模板引擎
最新发布
一名全栈开发工程师
07-22 774
在Express应用中，模板引擎是一个重要的工具，它允许你使用静态模板文件生成动态的HTML。模板文件通常包含占位符变量和表达式，这些变量和表达式在渲染时会被实际数据替换。使用模板引擎可以使得前端代码和后端逻辑分离，提升开发效率和代码维护性。本章节将详细介绍如何在Express中使用三种常见的模板引擎：EJS、Pug和Handlebars。
Node——express art-template
Zjaun的博客
02-14 730
安装express npm i -S express 安装 模版引擎 npm install --save art-template express-art-template 中间件 解析表单POST请求体 npm install --save body-parser 案例 留言板 app.js var express = require('express') var bodyParse...
Express框架（3）
Mia的博客
03-30 156
express-art-template模板引擎, app.locals对象
express-art-template
XWen_ING的博客
10-21 385
在Express中配置使用art-template 下载命令：npm install art-template express-art-template （npm install --save art-template、npm install --save express-art-template） 虽然不需要直接require art-template，但是由于express-art-template需要art-template,因此也必须安装art-template. engine函数：用来配置art-
Nodejs基础之Express框架和art-template引擎(四)，2024年最新阿里前端二面是什么
m0_63174529的博客
04-10 705
cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行HTTP 报文中，命令浏览器存储一个字符串;浏览器再访问同一个域的时候，将把这个字符串携带到上行HTTP 请求中。第一次访问一个服务器，不可能携带cookie。
Nodejs基础之Express框架和art-template引擎(四)，2024年前端面试题
wdsfgj的博客
03-30 917
cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行HTTP 报文中，命令浏览器存储一个字符串;浏览器再访问同一个域的时候，将把这个字符串携带到上行HTTP 请求中。第一次访问一个服务器，不可能携带cookie。
nodejs中art-template模板语法的引入及冲突解决方案
12-23
使用Webstorm创建nodejs express应用时，默认使用的是jade或者ejs模板，对于不习惯这两种模板语法的人来说确实不是很方便。没关系，这里我们使用art-template模板引擎，使用后可以直接使用html模板： 1、安装art-...
Express框架学习笔记-模板引擎
weixin_42349568的博客
08-20 175
第一步：下载模板引擎npm install express-art-template art-template const express=require('express') const path=require('path') const app=express() //1.第一步告诉express框架使用什么模板引擎渲染什么后缀的模板文件 //第一个参数是 模板后缀，第二个参数是使用的模板引擎 app.engine('art',require('express-art-template')) //.
Express系列之 express-art-template 模板引擎
老__L的博客
10-13 590
express-art-template模板引擎
express中使用art-template
qq_40526866的博客
02-05 1066
介绍 art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好：语法、运行时错误日志精确到模板所在行； 支持在模板文件上打断点（Webpack Loader）支持 Express、Koa、Webpack 支持模板继承与子模板 浏览器版本仅 6KB 大小 安装 npm install --save art-te
基于NodeJS的14款Web框架
03-26 505
发表于18小时前| 730次阅读| 来源CODECONDO| 3 条评论| 作者张红月编译 前端开发Node.jsJavaScriptKnockoutJSCompoundJS web框架 摘要：NodeJS是一个服务器端JavaScript解释器，它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个（只有一个）物理机的连接代码。 在
express以及art-template
_fan的博客
01-23 167
express快速入门 安装 npm install express --save 创建你的第一个hello world var express = require('express') var app = express(); //路由 app.get('/',(req,res)=>{ res.send('hello world') }) app.listen(3000,()=>{ console.log('app running at localhost:3000');
模板引擎artTemplate学习笔记
Lostdeer的博客
03-07 496
模板引擎artTemplate学习笔记1 模板引擎的基础概念1.1 模板引擎1.2 art-template模板引擎1.3 art-template代码示例2 模板引擎语法2.1 模板语法2.2 输出2.3 原文输出2.4 条件判断2.5 循环2.6 子模版2.7 模板继承2.8 模板继承示例2.9 模板配置 1 模板引擎的基础概念 1.1 模板引擎 模板引擎是第三方模块。 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。 // 未使用模板引擎的写法 var ary = [{ n
express art-template
shangsiqi1的博客
10-20 117
在express框架中可以使用模板引擎, 并且简化了模板引擎的使用 首先要安装art-template与express-art-template npm install -S art-template express-art-template 安装成功后要引入art-template var express=require('express'); var app=express(); app.e...
Express 中使用art-template 模板引擎
lyxkgc的博客
07-03 283
在 Exptess 中使用art-template 模板引擎 1. Install npm install --save art-template npm install --save express-art-template 两个都加载， 有相互依赖关系。 2. 配置使用 art-template 模板引擎 2.1 第一个参数表示，当渲染以.art结尾的文件的时候，使用art-template模板引擎 express-art-template 是专门用来在Express 中 把art-templ
Nodejs 加数据库art-template
05-04
要使用 Node.js 和数据库来渲染 art-template 模板，可以按照以下步骤操作： 1. 安装 Node.js 和相应的数据库驱动程序，比如 MySQL、MongoDB 或 PostgreSQL。 2. 在 Node.js 项目中安装 art-template 和数据库驱动程序的 Node.js 模块，可以使用 npm 命令安装，如下所示： ``` npm install art-template mysql --save ``` 3. 创建数据库连接，使用 Node.js 的数据库驱动程序连接数据库，如下所示： ```javascript const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'my_database' }); connection.connect(); ``` 4. 查询数据库，获取数据并将其传递给 art-template 进行渲染，如下所示： ```javascript const template = require('art-template'); connection.query('SELECT * FROM my_table', function (error, results, fields) { if (error) throw error; const html = template(__dirname + '/views/my_template.art', { data: results }); console.log(html); }); ``` 在此示例中，我们使用 `connection.query()` 方法查询数据库并获取结果。然后，我们将结果传递给 art-template 的 `template()` 方法进行渲染，同时也将模板文件的路径作为第一个参数传递给 `template()` 方法。 在渲染时，我们可以在模板中使用 `data` 变量来访问查询结果中的数据。 5. 关闭数据库连接，如下所示： ```javascript connection.end(); ``` 在 Node.js 中，数据库连接是异步的，因此在完成所有数据库操作后，应该关闭连接，以避免内存泄漏和其他问题。 这样就可以在 Node.js 中使用 art-template 和数据库渲染模板了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生命是有光的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值