node 使用art-template（模版引擎）原文输出(可解析html)

最新推荐文章于 2024-04-06 11:09:13 发布
最新推荐文章于 2024-04-06 11:09:13 发布
阅读量685 收藏
点赞数
分类专栏： node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/103276797
版权

文章目录

安装

npm install art-template --save

导入art-template

var template = require('art-template')

查看文档 api

https://github.com/aui/art-template

完整代码 + 效果

模版引擎不关心你的字符串内容，只关心自己能识别的标记语法
template.js

// https://github.com/aui/art-template
// art-template 一种模版引擎
// art-template 不仅可以在浏览器使用，也可以在node使用
// 模版引擎最早就是诞生于服务器领域，后来才发展到了前端

// 1 安装 npm install art-template --save  
//      生成了 package-lock.json node_modules
// 2 在需要的文件模块中引用 art-template
// 3 查看文档 api

// 浏览器使用art-template template.html

// node使用模版引擎 
// 使用 require 方法加载
var template = require('art-template')
var path = require("path")
var http = require("http");
var fs = require("fs");

var server = http.createServer();
// 响应请求
server.on('request',(req,res)=>{
    var url = req.url;//请求路径
    res.setHeader("Content-type","text/plain;charset=utf-8");
    // 将模板源代码编译成函数
    // template.compile(source, options);

    // 将模板源代码编译成函数并立刻执行
    // 模版字符串 替换对象
    // template.render(source, data, options);
	
	// 默认读取的 data是二进制数据 要把二进制数据转为字符串
    fs.readFile('./tpl.html',function(err,data){
        if(err){  return res.end("读取失败") }

        var set = template.render(data.toString(),{
            title:'个人信息',
            name:"小明",
            age:18,
            pagehtml:data.toString()
        })
        res.setHeader("Content-type","text/html;charset=utf-8");
        res.end(set) 
        console.log(set)
    })   
     
	// 或者
	// template(模板路径[绝对路径],data)
	// 返回拼接好的字符串
  	var html = template(path.join(__dirname,'tpl.html'),{
        title:'个人信息',
        name:"小明",
        age:18
    })
    res.setHeader("Content-type","text/html;charset=utf-8");
    res.end(html) 
 

})
// 绑定端口
server.listen(3000,()=>{
    console.log("服务器启动成功，可以通过 http://127.0.0.1:3000 进行访问");
})

tpl.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{title}}</title>
</head>
<body>
    <h1>hello {{ name }} {{ age }}<h1>
    <p>{{pagehtml}}</p>
    <script>
        var foo = '{{title}}'
    </script>
</body>
</html>

效果

运行

node  template.js

在这里插入图片描述

原文输出

// name='<div>div</div>'
// 标准语法
{{@ name }} 
// 原始语法
<%- name %>
tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 的模板语法,art-template模板语法
weixin_28810315的博客
06-22 1272
art-template模板语法支持两种模板语法，分别是标准语法和原始语法。标准语法：标准语法可以让模板更容易读写，例如：{{ 数据 }}原始语法：原始语法具有强大的逻辑处理能力，例如：纯文本输出语法：输出语法表示将数据输出到模板中。 (ps：类似于Vue 中的 v-text 指令)标准语法示例：Title{{ name }}{{ value1 + value2 }}{{ a ? c : d ]}...
art-template 输出html标签时原样输出了。如何渲染html标签（富文本内容）。
PrimaryColor
12-12 2006
<div> {{#value}} </div> 在输出变量的前面加一个“#”号就可以了，新版也可以使用“@”。
在 Express 中配置使用 art-template 模板引擎
12-02
在 Express 中配置使用 art-template 模板引擎
Apache Velocity 模板语言 特殊字符${ $!{ 原样输出问题 转义符 # ! 无效
Dissolute_的博客
12-31 4332
Velocity版本比较古老，1.7的，没试用新的2.2，不太清除是不是版本导致的问题 先来说下问题，常规情况下需要原样输出这几个特殊字符的话，只要直接在模板中输入就行了，会原样显示，例如 接下来说特殊情况 花括号后面跟了字符此时就会识别为这是一个取值符，然后报错，生成时同样会报错 网上说的加转义符，加感叹号!,加#，都不可取（仅限1.7版本），虽然不会报错能够正常生成了，但是会把\ # !等额外字符同样输出出来 这是已经生成出来的文本，#和!一样的效果，原本需要得到的效果应该是这样的 .
模板引擎art-template的基本使用方法，最全知识总结
最新发布
2401_84092809的博客
04-06 1097
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载05)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
调用百度智能云OCR接口识别身份证和户口本
热门推荐
小伙伴的博客
05-12 48万+
一、百度智能云获取token类编写 package com.wy.gcserver.ocr.service; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.http.client.SimpleClientHttpRequestFactory; import org.springframework.stereotype.Service; import org.springframewo
art-template
m0_63300737的博客
05-08 388
文章目录art-template语法原文输出条件语句循环变量模板继承子模版过滤器调试模板变量 art-template https://aui.github.io/art-template/zh-cn/docs 如果渲染模板的时候,传递过来的数据集中又user数据 那么在页面中显示h2标签,h2标签里面用户的名字 <script id="demo01" type="text/html"> {{if user}} <h2>{{user.name}}&
c++学习笔记
Jeet173的博客
11-03 1070
c++学习笔记
arttemplate 显示html,前端模版引擎 - artTemplate 【上】
weixin_39909212的博客
06-16 872
前言因为工作的关系，我在接手项目的时候发现以前的同事都是用 artTemplate 进行模板渲染的。鉴于它方便用于 Ajax 请求数据并渲染的操作并在项目应用颇多，所以在我开发新的项目时，也把其作为一个主要的 library 插件，同时利用 gulp 进行 artTemplate 的预编译。下面就是我在新项目的使用过程中遇到的问题总结出来的经验以及 artTemplate 的使用方法，以供参考。1...
使用art-template模板如何输出html标签
weixin_44673034的博客
10-21 3697
使用art-template模板如何输出html标签 场景：查询数据库返回的 文本内容中，含有等html标签，输出到页面中时，被当成字符串输出，但这不是想要的结果。 原本的写法时 {{html}} 此时如果html中含有标签，则不能被解析出来 解决方法： //改成这种写法 {{#html}} //或者新版本写法 {{@html}} 此时就能达到效果！！！ ...
art-template渲染界面时，渲染内容中有标签无法编译
REfusing的博客
04-15 232
art-template渲染界面时，渲染内容中有标签无法编译 本文中主要提醒大家，在使用模板引擎时，遇到的一个小麻烦，虽然比较小，但是太恶心人了，你还没有办法，特此记录一下。 在使用时我在渲染界面时，数据中存在img标签，但是并没有编译img标签而实当作一个 ...
Node.js-demo-templatehtml的复用
08-10
html的复用形式基本是后端语言处理（如php 的 include），或者前端用nodejs处理，这里只介绍前端的做法。
nodejs中art-template模板语法的引入及冲突解决方案
12-23
没关系，这里我们使用art-template模板引擎，使用后可以直接使用html模板： 1、安装art-template npm install art-template 2、修改app.js文件，添加如下代码： // view engine setup app.set('views', path.join...
node-typescript-koa-template
04-02
实用的模板，可快速启动RESTful API项目。 你得到： Koa Web服务 Postgres数据库 Docker撰写 基于环境变量的配置 结构 入门 检出以获取可用的脚本，但是如果您想更快地进行操作，请执行以下操作： $ npm i $ npm ...
node.js作为后台，express服务器，express-art-template作为前端模板的系统.zip
03-07
人工智能-项目实践-信息管理系统
art-template:这是另一个艺术模板，可以使用自由标记语法并具有“ switch”语法
05-06
artTemplate-3.0 新一代 javascript 模板引擎 目录 特性 性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（） 支持运行时调试，可精确定位异常模板所在语句（） 对 NodeJS Express 友好支持 安全，默认对输出...
linux 关闭sflm服务,Linux on the Microsoft Xbox
weixin_30348133的博客
05-08 16万+
>> From: xbox-linux-devel-request@...> Date: 2005/11/17 Thu AM 01:32:02 EST> To: xbox-linux-devel@...> Subject: Xbox-linux-devel digest, Vol 1 #1243 - 1 msg>> Send Xbox-linux-deve...
upload漏洞专题
goddemon
12-08 11万+
①典型内容伪造假装是图片 GIF89a?
templae（数据类型）、vector定义变量、 priority_queue
weixin_44350170的博客
07-27 372
一、 templae<typename T>可以根据你所需要的类型就行匹配。 例如： #include<iostream> #include<vector> #include<algorithm> using namespace std; template <typename T> T mmax(T a,T b) { return...
node.js+mysql使用art-template模板引擎实现登录成功后页面的变化
09-05
### 回答1： 首先，你需要安装 `art-template` 和 `mysql` 模块，使用以下命令： ``` npm install art-template mysql ``` 接下来，你需要编写一个简单的登录页面。在这个页面中，你需要一个表单来输入用户名和密码，并且在提交表单时发送 POST 请求到后端。例如： ```html <form action="/login" method="POST"> <div> <label for="username">用户名</label> <input type="text" id="username" name="username"> </div> <div> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form> ``` 在后端，你需要使用 `express` 模块来处理路由和请求，使用 `mysql` 模块来连接和操作数据库，使用 `art-template` 模板引擎来渲染页面。以下是一个简单的后端代码示例： ```javascript const express = require('express'); const mysql = require('mysql'); const template = require('art-template'); const app = express(); // 创建 MySQL 连接池 const pool = mysql.createPool({ host: 'localhost', user: 'root', password: 'password', database: 'database_name' }); // 处理登录请求 app.post('/login', (req, res) => { const { username, password } = req.body; // 查询用户数据 pool.query('SELECT * FROM users WHERE username = ?', [username], (error, results) => { if (error) throw error; // 校验密码 if (results.length > 0 && results[0].password === password) { // 登录成功，渲染成功页面 const html = template(__dirname + '/success.html', { username }); res.send(html); } else { // 登录失败，渲染失败页面 const html = template(__dirname + '/failure.html'); res.send(html); } }); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在这个示例中，我们假设数据库中有一个名为 `users` 的表，包含 `id`、`username` 和 `password` 三个字段。当用户提交登录表单时，我们首先查询数据库中是否有匹配的用户名和密码，如果有则渲染登录成功的页面，否则渲染登录失败的页面。 在 `success.html` 页面中，你可以根据需要添加一些用户信息或操作，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录成功</title> </head> <body> <h1>欢迎，{{ username }}！</h1> <p>你已经成功登录。</p> <a href="/">返回首页</a> </body> </html> ``` 在 `failure.html` 页面中，你可以添加一些错误提示或重新登录的链接，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录失败</title> </head> <body> <h1>登录失败</h1> <p>用户名或密码错误，请重新登录。</p> <a href="/">返回首页</a> </body> </html> ``` 以上代码仅供参考，你可以根据实际情况进行调整和扩展。 ### 回答2： 要使用Node.js和MySQL来实现登录成功后页面的变化，可以按照以下步骤进行操作： 1. 首先，需要安装`node.js`、`mysql`和`art-template`模块。可以使用以下命令进行安装： ``` npm install node.js mysql art-template ``` 2. 在Node.js中，创建一个`server.js`文件，并在文件中引入必要的模块： ```javascript const http = require('http'); const mysql = require('mysql'); const template = require('art-template'); ``` 3. 连接到MySQL数据库： ```javascript const connection = mysql.createConnection({ host: 'localhost', //数据库服务器地址 user: 'root', //数据库用户名 password: 'password', //数据库密码 database: 'database_name' //数据库名称 }); connection.connect((err) => { if (err) { console.error('数据库连接失败！', err); } else { console.log('数据库连接成功！'); } }); ``` 4. 创建一个HTTP服务器： ```javascript const server = http.createServer((req, res) => { // 处理登录请求 if (req.url === '/login' && req.method === 'POST') { const body = []; req.on('data', (chunk) => { body.push(chunk); }); req.on('end', () => { const data = JSON.parse(body.toString()); // 查询数据库，验证用户名和密码是否正确 const sql = `SELECT * FROM users WHERE username = ? AND password = ?`; const values = [data.username, data.password]; connection.query(sql, values, (err, results, fields) => { if (err) { console.error('登录失败！', err); res.statusCode = 500; res.end(); } else if (results.length > 0) { // 使用art-template生成登录成功后的页面 const html = template.render('success.html', { username: data.username }); res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end(html); } else { // 登录失败 res.statusCode = 401; res.end(); } }); }); } else { // 返回登录页面 const html = template.render('login.html'); res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end(html); } }); server.listen(3000, () => { console.log('服务器已启动，监听端口3000'); }); ``` 5. 在项目根目录下创建`login.html`和`success.html`文件，并定义对应的登录和成功页面内容。 以上是一个简单的使用Node.js、MySQL和art-template模板引擎实现登录成功后页面的变化的示例。根据具体项目需求，你可能需要进一步完善和调整代码。 ### 回答3： 要使用Node.js和MySQL来实现登录成功后页面的变化，并结合art-template模板引擎，可以按照以下步骤进行： 1. 确保已安装Node.js和MySQL，并通过npm安装art-template和mysql模块。 2. 在MySQL中创建一个用户表，包含用户名和密码等字段。 3. 在Node.js中创建一个服务器，监听特定端口。 4. 创建路由来处理不同的请求，包括登录页面和登录请求。 5. 使用art-template模板引擎来渲染登录页面，包括表单和错误提示。 6. 当用户提交登录表单时，通过post请求来处理登录请求。 7. 在登录请求的处理函数中，通过向数据库查询匹配的用户名和密码来验证用户的凭据。 8. 如果验证成功，将用户信息保存在session或cookie中，以便在后续页面中使用。 9. 根据验证结果来渲染不同的页面，如登录成功后的主页或登录失败后的错误页面。 10. 在主页上，可以根据用户的登录状态，显示不同的内容。 以上是一个简单的示例，具体的实现过程会涉及更多细节和逻辑，例如密码加密、用户权限控制等。这样，当用户成功登录后，页面会根据登录状态和用户信息的变化而发生变化。使用art-template模板引擎能够方便地渲染页面，并通过与MySQL数据库进行交互来进行用户验证和数据查询操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值