node + express实战开发——模板引擎配置使用、HTML的渲染、静态文件托管

上一篇地址:node + express实战开发——创建node实例

在上一篇文章中我们了解了如何创建一个应用实例,并且向页面发送一个消息;在这一章中我们将会学习模板引擎配置使用,静态文件托管。

在这里,小编我使用的模板引擎是ejs,大家可以使用npm或者cnpm工具去安装使用,在这里不再赘述如何使用npm去安装了

模板引擎

1、 首先,我们在app.js里面引用ejs

const ejs = require('ejs');

2、 配置模板引擎

app.engine('html', require('ejs').renderFile);
app.set('view engine','ejs')

3、 在页面中使用ejs语法进行渲染你的数据,举个栗子:假如后台给你传过来一个名为data的数据

<ul>
    <% data.forEach(function (data) { %>
      <li><% =data.name %></li>
    <% }) %>
</ul>

这样就完成了一个简单的数据循环输出
另外,在这里解释一下循环输出里面的“=”是什么意思,并且列举常用的写法:

<%...%>:包含js代码
<%=...%>:输出变量 变量若包含 '<' '>' '&'等字符 会被转义
<%-...%>:输出变量 不转义
<%- include('user/show') %>:引入其他模板 包含 ./user/show.ejs
<%# some comments %>:用来注释,不执行不输出
<%% 转义为 '<%'
<% ... -%>:删除新的空白行模式
<%_ ... _%>:删除空白符模式

HTML的渲染

  1. 在模板引擎配置好之后,接下来就是渲染html了(好像先渲染HTML再配置模板引擎,具体忘了,朋友们可以自己试试);首先我们新建一个名为views的文件夹,放置的就是我们写好的html,然后再把我们的views文件夹写个配置,目的就是为了HTML能够正常浏览:
app.set('views', './views');

这样就能够访问了吗?当然不,还需要写个路由,就像上一篇文章中响应一个数据给前台一样的,只不过不是用res.send,二是使用res.render:

app.get('/',function(req,res)){
    res.render('index.ejs');
}

之后你就可以在浏览器里面输入地址访问:localhost:5557,你会发现这个时候就是你的index.html的内容了;
页面是响应出来了,但是你会发现没有任何的css,js,img,这是为什么呢,接着往下看。

静态文件托管

  1. 当我们html页面渲染出来之后,页面上没有任何的css样式,没有js,没有img,那么这个时候就需要用到静态文件托管了;首先我们需要在Project项目里新建一个文件夹public(当然,随便你去什么名字都可以,只要你能记住它的作用是放置静态文件就好了);那么那些是静态文件呢,例如项目的css,js,img等,这些都属于静态文件
  2. 之后我们就在APP.js里面配置一下静态文件路径
app.use('/public',express.static(__dirname + '/public'));

或者你可以参考官方的写法:

app.use(express.static('public'));

当然,如果你的静态资源存放在多个目录下面,你可以多次调用 express.static 中间件:
更多的写法请参考利用 Express 托管静态文件
设置好之后我们就可以进行访问了,例如在浏览器输入:localhost:5557/public/css/main.css;这个时候你就会发现能够正常访问了;同理,使用node创建的项目,在访问robots.txt文件的时候,也可以写么写,因为你直接访问是访问不了的

app.use('/robots.txt',express.static(__dirname + '/robots.txt'));

在设置好静态文件路径之后你就要把你的html中引用的那些静态css,js,img就要重写一下相对路径了

/public/css/main.css
添加新评论

icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif