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

报错cannot get/ 原因没有设置静态资源目录 管线

就是加入管线 app.use(express.static('public'));

为什么能找到public文件夹?

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

index.html

我是主页

百度

用户

订单列表

产品列表

产品列表

---

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

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

订单列表

<%= title %>

---

<%- content %>

---

姓名：<%= person.name %>

年龄：<%= person.age %>

姓别：<%= person.sex?“男”:“女” %>

姓别：<% if(person.sex){ %>

男

<% }else{ %>

女

<% } %>

---

爱好：

<% for(var i = 0; i < person.fav.length ;i++){%>

<%= person.fav[i]%>

<% }%>

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。

16T-1712953722673)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

[外链图片转存中…(img-fEtG5KI7-1712953722674)]

[外链图片转存中…(img-eFLHJax1-1712953722674)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。