Express-视图模版

2024-07-06 10:24:30 浏览数 (2)

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

代码语言:node.js复制
npm install -s art-template

npm install -s express-art-template

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

代码语言:node.js复制
app.set('view engine', 'html');

改成

代码语言:node.js复制
app.engine('.html',require('express-art-template'))
app.set('view engine', 'html'); // 页面模板引擎

接着到views 目下创建index.html 文件 按照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方法的第二个参数

代码语言:node.js复制
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

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

代码语言:jade复制
<h1>{{title}}</h1>

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

另外可还可以多一些参数

代码语言:node.js复制
res.render('index', { title: 'Express',name:'iwhao',age:18 });

条件渲染

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

代码语言:jade复制
  <h1>{{title}}</h1>
  {{if age < 30}}
  <p>我是小鲜肉</p>
  {{/if}}
  {{if age > 30}}
  <p>我是老司机</p>
  {{/if}}

嵌套条件渲染

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

if 里面嵌套if

代码语言:jade复制
<h1>{{title}}</h1> 
{{if age < 30}} 
<p>我是小鲜肉</p> 
    {{if age == 18}}
        <p>


	

0 人点赞