express中使用art-template

最新推荐文章于 2022-10-13 23:01:55 发布
最新推荐文章于 2022-10-13 23:01:55 发布
阅读量1k 收藏
点赞数
文章标签： javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40526866/article/details/122788981
版权
art-template是一个高性能的JavaScript模板引擎，适用于NodeJS和浏览器。它通过预声明作用域提升渲染速度，支持模板继承、调试友好，且体积小巧。配置Express应用，结合art-template进行视图渲染，例如在res.render()中使用模板文件。同时，教程还介绍了如何配置Express托管静态资源，方便引用CSS等文件。
摘要由CSDN通过智能技术生成

介绍

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器

特性

  1. 拥有接近 JavaScript 渲染极限的的性能
  2. 调试友好：语法、运行时错误日志精确到模板所在行；
  3. 支持在模板文件上打断点（Webpack Loader）支持 Express、Koa、Webpack
  4. 支持模板继承与子模板
  5. 浏览器版本仅 6KB 大小

安装

npm install --save art-template
npm install --save express-art-template

配置

const express = require('express')
const path = require('path')
var app = express()

// 当渲染以 .art 结尾的资源文件的时候使用 express-art-template
app.engine('art', require('express-art-template'));
// art-template 模板引擎配置
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
})
// 模板文件的存储目录, 不配置默认就是views目录
app.set('views', path.join(__dirname, 'views'))
// 可以省略的模板文件后缀名
app.set('view engine', 'art')

const todos = [
  { id: 1, title: '吃饭' },
  { id: 2, title: '睡觉' },
  { id: 3, title: '健身' },
  { id: 4, title: '学习' },
  { id: 5, title: '读书' }
]

// routes
app.get('/', (req, res) => {
  res.render('index', {
    todos,
    foo: '我是foo'
  })
})

只要配置了模板引擎，就可以使用 res.render 方法渲染页面了

html页面

<!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>
  {{ foo }}
  <ul>
    {{ each todos }}
      <li> {{ $value.title }} </li>
    {{ /each }}
  </ul>
</body>
</html>

在这里插入图片描述

托管静态资源

Express 单独提供了一个内置中间件用来托管静态资源

const express = require('express')
const path = require('path')
const app = express()

// 访问时不加前缀
app.use(express.static(path.join(__dirname,'./public')))

// 访问时加前缀，这个前缀可以改任何名字，在使用的时候添加上就行
app.use('/public', express.static(path.join(__dirname,'./public')))

.html中直接这样引入css文件

<!-- 不加前缀 -->
<link rel="stylesheet" href="/css/main.css">
<!-- 加前缀 -->
<link rel="stylesheet" href="/public/css/main.css">

资源托管的配置项

app.use('/public', express.static(
  path.join(__dirname,'./public'),
  {
  	// 发送指定的目录索引文件。设置为false可禁用目录索引。
    index: ['index.html']
  }
))
qq_40526866
关注
nodejs篇 express(4) express + art-template创建网站基础
秋来九月八
04-06 716
为了适用越来越复杂的网站业务和用户交互，前后端分离已经好多年，但在web发展的最初，并没有什么vue、react之类的mvvm的框架，也没有所谓的单一页面响应（SPA），那网页的渲染是如何实现的呢？一个网站所需的资源统一由服务端直接在本地库中读取文件(以index.html为例)，然后，根据用户的不同，替换所读取文件index.html中的文本。当然除了html，服务端也会返回所有网站所需的静态资源，css，js，字体图标等等。
在express中配置使用art-template
流楚丶格念的博客
02-20 4290
文章目录安装配置使用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
node——17-在 Express 中配置使用 art-template
肖的博客
02-26 709
安装： 配置： 使用：
Node——express art-template
Zjaun的博客
02-14 747
安装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-art-template
XWen_ING的博客
10-21 398
在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-
在node和express中配置使用art-template
webchang的博客
05-02 794
在node和express中使用art-template
留言板-express+art-template.zip
02-20
在本项目中，我们利用了Express.js框架和Art-Template模板引擎来构建一个简单的留言板应用。Express是Node.js中最受欢迎的web开发框架，它提供了一系列强大的功能，使得创建web服务变得简单而高效。Art-Template则是...
node.js作为后台，express服务器，express-art-template作为前端模板的系统.zip
最新发布
03-07
在本项目实践中，我们主要关注的是使用Node.js作为后端开发平台，Express作为服务器框架，以及Express-Art-Template作为前端模板引擎构建一个信息管理系统。这个系统可能涉及到人工智能的应用，但核心是构建一个高效...
express以及art-template
_fan的博客
01-23 175
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');
art-template（二）：在Express中配置使用art-template
Jackie2008的专栏
05-24 935
安装 npm install --save art-template npm install --save express-art-template 虽然不需要直接require art-template，但是由于express-art-template需要art-template,因此也必须安装art-template 配置 在NodeJS中，使用engine函数来配置art-templa...
在Express中配置使用 art-template 模板引擎
qq_45830543的博客
01-24 370
一、安装 在 express 中安装 art-template 需要执行两个命令： npm install --save art0-template npm install --save express-art-template 二、配置 app.engine('art',require('express-art-template')) 三、使用 Express为response响应对象提供了一个方法：render render 方法默认是不可以使用的，只有配置了模板引擎就可以使用了。 r
Express系列之 express-art-template 模板引擎
老__L的博客
10-13 597
express-art-template模板引擎
Express框架知识——art-template模板、cookie、session
xiaotangyu7dong的博客
11-20 1018
Express框架 搭建一个服务器 const express = require('express') const app = express(); app.get('/',(request,respone)=>{ respone.end('hello express!!') }) app.listen(3000,() => { console.log('Express web server is listen at 3000 port!'); }) 获取post、ge
在 Express 中配置使用 art-template 模板引擎
cake_eat的博客
10-13 368
在 Express 中配置使用 art-template 模板引擎 art-template-GitHub仓库 art-template官方文档 安装 npm install --save art-template npm install --save express-art-template 配置： ·
Express 中使用art-template 模板引擎
lyxkgc的博客
07-03 298
在 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
Node.js - 在express中使用 art-template
ICanWin_lll的博客
01-07 585
1.安装 npm i art-template --save npm i express-art-template --save 2. 配置使用 art-template 模板引擎 app.engine('html',require('express-art-template')) 第一个参数表示当文件以 '.html'结果的时候，使用 art-template模板引擎 express-art-template是专门用来在express中把 art-template整合到 exp..
express-art-template模板引擎
qq_44277696的博客
04-05 231
模板引擎 为了使art-template模板引擎能够更好的与Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template 使用 npm install art-template express-art-template进行安装 // 当渲染后缀为art的模板时，使用express-art-template app.engine("art",require("express-art-template")) // 设置模板存放目录 app.s
Express中部署art-template模板引擎详解与配置
要在项目中使用Express，你需要先全局安装它。使用npm（Node Package Manager）运行以下命令： ```shell npm install --save express ``` 这将把Express添加到项目的`package.json`文件的dependencies中，确保项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值