Express-视图模版

原创

iwhao

发布于 2024-07-06 10:24:30

6040

Express 页面

express 目录

├── app.js // 应用主文件
├── bin // 服务器脚本默认目录
│   └── www // 服务器默认脚本
├── node_modules // 依赖包
│   └──...
├── package.json // 项目配置文件
├── package-lock.json // 锁定的项目配置文件
├── public //静态资源目录
│   ├── images // 图片资源
│   ├── javascripts // 存放js
│   └── stylesheets // 存放样式文件
├── routes // 路由目录
│   ├── index.js // 首页路由
│   └── users.js // 用户路由
└── views // 页面目录
    ├── error.jade // 错误页面
    ├── index.jade // 首页
    └── layout.jade // 公共页面

模板jade

上文中可以看到，页面目录下views下有3个页面文件，index.jade、error.jade 、layout.jade. 初次接触jade这样的拓展名文件不太熟悉，为了使用大家熟悉的html结构，通常在项目实际开发过程中会将其更换成便于理解的模板引擎，比如 art-template

jade 语法不做过多讲解，详细请看文档

更换模板引擎 art-template

语法

Express 默认的模板引擎是jade，为了便于新用户上手开发替换成更高效的 art-template

安装 art-tempate

npm install -s art-template

npm install -s express-art-template

安装完成后，修改项根目录下的app.js文件，将其中的

app.set('view engine', 'html');

改成

app.engine('.html',require('express-art-template'))
app.set('view engine', 'html'); // 页面模板引擎

接着到views 目下创建index.html 文件按照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>
  <h1>哈哈哈哈哈哈来了</h1>
</body>
</html>

渲染数据到页面上

在开发网页中，网页上的内荣一般都是根据后台返回的数据动态变化的，这就需要将数据渲染到页面上

在Express 中将数据渲染到页面上的方法是 response对象的render方法的第二个参数

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

这段代码就是在页面渲染的的时候向 index.html 页面中传入一个值为Express 的 title字段，页面上可以直接使用这个字段替换掉原来的显示内容

<h1>{{title}}</h1>

看是不是有点像 vue 中页面数据展示的写法

另外可还可以多一些参数

如

res.render('index', { title: 'Express',name:'iwhao',age:18 });

条件渲染

这里的条件渲染无非也就是 if 判断，和vue 语法不同的是这里不能写到标签内，还是需要写到 {{if}}内，并且需要{{/if}}与之对应标记结束点，类似 html标签对如下

  <h1>{{title}}</h1>
  {{if age < 30}}
  <p>我是小鲜肉</p>
  {{/if}}
  {{if age > 30}}
  <p>我是老司机</p>
  {{/if}}

嵌套条件渲染

有的时候业务需要条件里面还需要嵌套条件判断，这里也支持多层嵌套渲染

if 里面嵌套if

<h1>{{title}}</h1> 
{{if age < 30}} 
<p>我是小鲜肉</p> 
    {{if age == 18}}
        <p>😍人家正青春😍😍😍😍😍</p>
    {{/if}}
{{/if}}

循环渲染

除了上面的条件渲染，循环渲染也是一种常用的方式，譬如列表等等

更改路由参数条件这里用 each as 语句如下

res.render('index', { title: 'Express',name:'iwhao',age:18,list:[1,2,3,4] });

index.html中写法

<h1>title</h1>
{{each list as item}}
<p>数字：{{item}}</p>
{{/each}}

循环渲染结合条件渲染

通常在实际业务中都会存在，在渲染列表时，要根据列表中每条数据的不同状态展示不同内容，这里就用到了再循环中判断渲染条件

<h1>title</h1>
{{each list as item}}
    {{if item>2}}
    <p>大于2的数字：{{item}}</p>
    {{/if}}
{{/each}}

关于art-template 更多语法介绍

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。

标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

输出

标准语法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
```jade

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

模板一级特殊变量可以使用 $data 加下标的方式访问：

{{$data['user list']}}

原文输出

标准语法

{{@ value }}

原始语法

<%- value %>

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

条件

标准语法

{{if value}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

<% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环

标准语法

{{each target}}     {{$index}} {{$value}} {{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>     <%= i %> <%= target[i] %> <% } %>

target 支持 array 与 object 的迭代，其默认值为 $data。
$value 与 $index 可以自定义：{{each target val key}}。

变量

标准语法

{{set temp = data.sub.content}}

原始语法

<% var temp = data.sub.content; %>

模板继承

标准语法

{{extend './layout.art'}} {{block 'head'}} ... {{/block}}

原始语法

<% extend('./layout.art') %> <% block('head', function(){ %> ... <% }) %>

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例：

<!--layout.art--> 
<!doctype html> 
<html> 
    <head>     
        <meta charset="utf-8">     
        <title>{{block 'title'}}My Site{{/block}}</title>      
        {{block 'head'}}     
            <link rel="stylesheet" href="main.css">    
        {{/block}} 
    </head> 
    <body>     
        {{block 'content'}}{{/block}} 
    </body> 
</html>

<!--index.art-->
 {{extend './layout.art'}}  
 {{block 'title'}}{{title}}{{/block}}  {{block 'head'}}     
    <link rel="stylesheet" href="custom.css"> 
 {{/block}}  
 {{block 'content'}} 
    <p>This is just an awesome page.</p> 
 {{/block}}

渲染 index.art 后，将自动应用布局骨架。

标准语法

{{include './header.art'}} {{include './header.art' data}}

原始语法

<% include('./header.art') %> <% include('./header.art', data) %>

data 数默认值为 $data；标准语法不支持声明 object 与 array，只支持引用变量，而原始语法不受限制。
art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。

注册过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/}; template.defaults.imports.timestamp = function(value){return value * 1000};

过滤器函数第一个参数接受目标值。

标准语法

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

原始语法

<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S7

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S7

登录后参与评论

0 条评论

热度