art-template 模板引擎

最新推荐文章于 2023-11-09 13:38:47 发布

棋炜的小宝贝

最新推荐文章于 2023-11-09 13:38:47 发布

阅读量165

点赞数

分类专栏： express art-template 文章标签： node

本文链接：https://blog.csdn.net/XWen_ING/article/details/109188962

版权

express 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

art-template

2 篇文章 0 订阅

订阅专栏

模板引擎

下载：npm install art-template
可以把我们的 js 里面的变量或者数据放置在外部的页面里面。
    底层实现：正则+替换
    具体：
    1. 我们外置的页面一般我们叫做模板，模板里面一般会放置很多的占位符。占位符值得是后面可以通过变量替换出来的。
    2. 使用模板引擎，把那些占位符通过变量替换出来。

标准语法使用：{{ kw }}形如这样的结构叫做占位符，也可以叫做插值表达式，后面在学习 vuejs的时候，到处都可以看到这个

渲染模板

template(filename, content)：根据模板名渲染模板；返回值为渲染后的 html 字符串
参数：
filename 需要渲染的 HTML 模板文件路径，或 HTML 代码段的 id
content 需要渲染的数据，其值为一个对象，用于给模板中的插值表达式传递数据；如果没有需要渲染的数据可以设置为一个空对象 {}

views/search.art文件代码：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>搜索表单</title>
</head>
<body>
<h1>xxx商城</h1>
<!--// 代表提交当前的url-->
<form action="" method="get">
    <input type="text" name="kw">
    <input type="submit" value="提交">
</form>

<p>把用户搜索的关键字：<b>{{ kw }}</b></p>
<hr>
<ul>
    <li>商品一</li>
    <li>商品一</li>
    <li>商品一</li>
    <li>商品一</li>
    <li>商品一</li>
    <li>商品一</li>
</ul>
</body>
</html>

app.js代码：

const express = require('express');
const url = require('url');// 专门负责处理url部分
const path = require('path');

var template = require('art-template');
const app = express();
const port = 3000;

app.get('/search', (req, res)=> {
    //console.log(req.query); // 第一次没有
    let kw = req.query.kw; // 用户输入的查询关键字、
    //path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
    //第一个参数：代表的是模板，模板里面存着很多的占位符
    // 第二个参数：给模板传递的数据，是一个对象格式 
    let absPath = path.resolve(__dirname, './views/search.art');
    let templateHtml = template(absPath, {kw});
    res.send(templateHtml);
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

棋炜的小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
art-template 模板引擎

模板引擎可以把我们的 js 里面的变量或者数据放置在外部的页面里面。    底层实现：正则+替换    具体：    1. 我们外置的页面一般我们叫做模板，模板里面一般会放置很多的占位符。占位符值得是后面可以通过变量替换出来的。    2. 使用模板引擎，把那些占位符通过变量替换出来。{{ kw }} 形如这样的结构叫做占位符，也可以叫做
复制链接

扫一扫