render()函数进行服务器端渲染(详细)

使用 Express 做服务端框架的时候，如果选择一种类似于 EJS这种模板引擎渲染前端页面的时候，经常服务端在响应 http 请求的时候调用 res.render({options}) 去向模板中渲染数据, 可以把视图响应给客户端.

框架
在这里插入图片描述
怎么来的？

安装package.json => npm init
新建app.js
安装express框架 => npm install express --save
模块什么时候用什么时候安装
node app
新建public文件夹/index.html(客户端渲染)
创建views文件夹/product.js order.js

app.js

const express = require('express');
const app = express();
app.use(express.static('public'));
app.listen(7000,function(){
    console.log('服务已经启动，请访问http://localhost:7000');
    // 访问http://localhost:7000 
})

报错cannot get/ 原因没有设置静态资源目录管线
就是加入管线 app.use(express.static('public'));

为什么能找到public文件夹?
把app.use看成管道，第一道网就是public,带进入这个文件夹，默认进入index.js

index.html

<body>
    <h1>我是主页</h1>
    <a href="http://www.baidu.com">百度</a>
    <a href="/user.html">用户</a>
    <!-- 跳转使用render函数 -路由 -->
    <a href="/order/list">订单列表</a>
    <a href="/product/list">产品列表</a>  
    <a href="/api/product/list">产品列表</a>  
</body>

1打通路
在这里插入图片描述
加入管线

效果：返回一个json

2.怎么让他返回一个HTML页面？

express约定的视图文件夹views
在这里插入图片描述
node app
效果：找不到文件

缺少一道网 -->视图模板必须用它来找views/.html并且可以解析它->安装ejs

npm install ejs --save

引入 const ejs = require('ejs');
加入管线（设置视图引擎） app.engine('ejs',ejs.renderFile);
在这里插入图片描述
3.怎么让他去找到views文件夹？ app.set('views','views'); set和use功能一样
// 第一个参数是视图模板（固定），第二个参数是视图模板所在的位置，默认express框架把views文件夹当成视图文件的位置

扫描二维码关注公众号，回复： 3646632 查看本文章

app.engine('ejs',require('ejs').renderFile);//优化

查文档 http://www.expressjs.com.cn/4x/api.html#app.engine

如果想让他解析jsp文件(安全性高)
app.engine(‘jsp’,require(‘ejs’).renderFile);//优化
views/ order.jsp
router/order.js ->res.render(‘order.jsp’)//ejs后缀可以省略
在这里插入图片描述
改成ejs
app.engine(‘ejs’,require(‘ejs’).renderFile);
views/ order.ejs
router/order.js ->res.render(‘order’)

错误表示没有解析器，设置一个解析器
app.set(‘view engine’,‘ejs’);

相当于

解析HTML，js

app.engine('ejs',require('ejs').renderFile);

解析ejs

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

两个作用一样
4.怎么让视图动态化？

原来：视图模板里面发起ajax请求，脚本，jQuery $.get 获取数据，绑定到视图上（dom绑定）

现在：要动态渲染，需要数据

数据从哪里来？

回到render函数

res.render('order',[option]);

// 第一个参数是视图的名称，如果是.ejs文件，必须省略后缀名，如果是.html,.jsp,.abc,.def等自己定义的后缀名时，必须加后缀。
 // 第二个参数是视图需要的数据

数据传过去了如何使用？

ejs语法

<%= title %>

app.js

app.set('views','views');//可以省略。默认
app.set('view engine','ejs');//与下两行等效  如果是.ejs文件，可省略后缀名，
// 需要使用视图模板引擎，让他解析views文件中的.html文件
// 需要安装视图模板引擎：npm install ejs --save
	//      const ejs = require('ejs');
	//      app.engine('ejs',ejs.renderFile);
	// 设置视图引擎
	// 加（）立即执行了，没有加（）相当于绑定到前面
	// app.engine('ejs',require('ejs').renderFile);//要在order.js里加 res.render('order.ejs')  如果是.ejs文件，必须加上后缀名，
//------------------------------------------------------
app.use(require('./router/order.js'));
app.use(require('./router/product.js'));
// 理解在接口前多加一个前缀
app.use('/api',require('./router/product.js'));

router/order.js

const express = require('express');
const route = express.Router(); 

// 方盒子-属性，不加括号、 立方体-方法加括号
// a标签发起的是get请求，如果要让他发起post请求，要设置监听事件
route.get('/order/list',function(req,res,next){
    // res.json({code:200});
  
    res.render('order',{
        title:'我是订单列表页',
        content:'<h2>我是标题2</h2>',
        person:{
            name:'张三',
            age:20,
            sex:true,
            fav:['读书','听音乐','唱歌']
        }
    });
});

module.exports = route;

模板用ejs渲染
views/order.ejs

<body>
    订单列表
    <!-- 带=的不会解析HTML标签，
        带-的会解析HTML标签 
        判断语句注意：1.不能加=号 2.闭合{}-->
    <%= title %>
    <hr>
    <%- content %>
    <hr>
    姓名：<%= person.name %><br />
    年龄：<%= person.age %><br />
    姓别：<%= person.sex?"男":"女" %><br />
    姓别：<% if(person.sex){ %>
                <span style="color: red">男</span>
          <% }else{     %>
                女
          <% } %>
    <hr>
    爱好：
    <% for(var i = 0; i < person.fav.length ;i++){%>
    <%=     person.fav[i]%>
    <%  }%>
</body>

在这里插入图片描述

router/product.js

const express = require('express');

const route = express.Router();

route.get("/product/list",function(req,res,next){
    res.render('product',{
        id:1,
        name:'华为',
        price:2000,
        amount:309,
        products:[
            {id:2,name:'华为1',price:200, amount:309},
            {id:3,name:'华为2',price:20, amount:309}
        ]
    });
});

module.exports = route;

product.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            /* 为表格设置合并边框模型 */
            border-collapse: collapse;
            width: 600px;
        }
        th,td{
            border:1px solid #ccc;
            height:40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>产品列表</h2>
    <table>
        <tr>
            <td>编号</td>
            <th>产品名称</th>
            <th>单价</th>
            <th>库存量</th>
        </tr>
        <tr>
            <td><%=id%></td>
            <td><%=name%></td>
            <td><%=price%></td>
            <td><%=amount%></td>
        </tr>
        <% for(var i = 0;i < products.length;i++ ){ %>
        <tr>
            <td><%= products[i].id %></td>
            <td><%= products[i].name %></td>
            <td><%= products[i].price %></td>
            <td><%= products[i].amount %></td>
        </tr>   
        <% } %>
    </table>
</body>
</html>

在这里插入图片描述

render()函数进行服务器端渲染(详细)

猜你喜欢