nodejs之express框架三之板模引擎介绍

一、介绍一下express自带的发送html至浏览器方法

app.get('/form',function(req,res){
    res.sendFile(__dirname+'/form.html')
})

二、模板引擎(ejs.co):在html中嵌入动态数据

地址:http://ejs.co/

npm install ejs --save  //安装

三、新建form.ejs文件,里面插入模板

  <h1><%= person %></h1>

四、js中设置

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

五、request接收到请求之后,渲染出html文件以及模板数据

app.get('/form/:name',urlencodedParser,function(req,res){
    var person = req.params.name;
    res.render('form', { person: person });
})


//get请求接受到传进来的name数据,渲染到模板person上

六、request接受请求后,返回的是一个数组,则在模板中可以通过数组.属性名的方法获取传过来的数组值

//service.js

app.get('/form/:name',urlencodedParser,function(req,res){
    var data={
        name:"荒地为何",
        data:'12',
        age:5
    }
    res.render('form', { data: data });
})

//模板

<h1><%= data.name %></h1>

七、如果要渲染的是一个数组循环

<%= data.age %>
                <h2>hobbie</h2>
                <ul>
                    <% data.hobbie.forEach(function(item) { %>
                        <li>
                            <%= item %>
                        </li>
                        <% }) %>
                </ul>

八、模板公用

公用组件

//header.ejs

<nav>
    <ul>
        <li><a href="">home</a></li>
        <li><a href="">about</a></li>
    </ul>
</nav>

使用方式

// about.ejs
<body>
    <%- include('partials/header.ejs') -%>
        <p>about page</p>
</body>

service.js文件配置

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

猜你喜欢

转载自blog.csdn.net/weixin_39460408/article/details/81605047