express中使用art-template

最新推荐文章于 2023-04-06 17:33:47 发布

qq_40526866

最新推荐文章于 2023-04-06 17:33:47 发布

阅读量1k

点赞数

文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq_40526866/article/details/122788981

版权

介绍

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

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

特性

拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；
支持在模板文件上打断点（Webpack Loader）支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
express中使用art-template

介绍art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器特性拥有接近 JavaScript 渲染极限的的性能调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）支持 Express、Koa、Webpack支持模板继承与子模板浏览器版本仅 6KB 大小安装npm install --save art-te
复制链接

扫一扫