0
点赞
收藏
分享

微信扫一扫

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

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

我是主页

百度

用户

订单列表

产品列表

产品列表


1打通路

在这里插入图片描述

加入管线

在这里插入图片描述

效果:返回一个json

在这里插入图片描述

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

express约定的视图文件夹views

![在这里插入图片描述](https://img-blog.csdn.net/201810121437 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 39555?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Zlbmd0aW5nWWFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

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文件夹当成视图文件的位置

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:‘

我是标题2

’,

person:{

name:‘张三’,

age:20,

sex:true,

fav:[‘读书’,‘听音乐’,‘唱歌’]

}

});

});

module.exports = route;

模板用ejs渲染

views/order.ejs

举报

相关推荐

0 条评论