Nodejs使用Express构建Web项目,使用html文件代替jade模板

博主使用WebStrom开发工具,创建Node.js Express App项目,实际上就是web项目。

Nodejs使用Express构建Web项目,使用html文件代替jade模板_第1张图片

创建成功后,可以看下项目结构:

Nodejs使用Express构建Web项目,使用html文件代替jade模板_第2张图片

views目录下生成了3个.jade的模板文件,这个格式的模板是Express默认的模板引擎,至于优缺点,大家自行查阅,反正博主是不习惯这样的模板写法,还是html写惯了,那么如何把项目的模板引擎换掉,可以使用html模板呢?

解决方法是使用Express的另一个模板引擎,ejs,node ejs是一个express模版解析引擎,用于解析html模版生成对应的html的解析器。语法和php有些类似,语法比较直观。

1、打开app.js文件,找到模板引擎设置的地方


修改成:


这里面需要安装ejs模块,使用npm命令安装到项目目录即可。

2、views目录下模板文件使用.html文件替换

Nodejs使用Express构建Web项目,使用html文件代替jade模板_第3张图片

3、运行项目,访问项目地址。

Nodejs使用Express构建Web项目,使用html文件代替jade模板_第4张图片

最后介绍下ejs在模板展示数据方面的不同之处:

1、<% code %>用于执行其中javascript代码;

2、<%= code %>会对code进行html转义;

3、<%- code %>将不会进行转义;


下面是例子:

访问项目地址时会收到请求,请求返回数据,title,和用户数组。

Nodejs使用Express构建Web项目,使用html文件代替jade模板_第5张图片

前端显示:

Nodejs使用Express构建Web项目,使用html文件代替jade模板_第6张图片

前端模板处理数据方式:

Nodejs使用Express构建Web项目,使用html文件代替jade模板_第7张图片


你可能感兴趣的:(NodeJS,Web)