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>