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文件夹当成视图文件的位置
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()函数进行服务器端渲染(详细)相关推荐
- ReactDOM.render()函数、条件渲染、列表渲染
ReactDOM.render() 1.ReactDOM.render函数是整个 React 应用程序首次渲染的入口函数 2.ReactDOM.render是React的最基本方法用于将模板转为HTM ...
- 【手写 Vue2.x 源码】第十八篇 - 根据 render 函数,生成 vnode
一,前言 上篇,介绍了 render 函数的生成,主要涉及以下两点: 使用 with 对生成的 code 进行一次包装 将包装后的完整 code 字符串,通过 new Function 输出为 ren ...
- 06.render函数
1.render函数,称为渲染函数,render函数接收一个createElement方法作为第一个参数用来创建VNode,当我们在vue中使用此函数时,同个id下的其他的内容都会被render排挤掉 ...
- 关于 SAP UI5 对服务器端渲染 Server Sider Render 的支持问题
之前 Jerry 的公众号文章介绍过 SAP 产品的渲染模式: SAP UI渲染模式:客户端渲染 VS 服务器端渲染 关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine ...
- Render函数渲染页面
Render是使用js的完全编程能力来渲染页面,即用js来构建DOM. 说明:render是一个方法,自带一个形参createElement(还有context..),这个参数也是一个方法,是用来创建 ...
- iview使用render函数渲染嵌套表格
iview使用render函数渲染嵌套表格 最近做项目遇到iview表格渲染,通过render函数来实现循环嵌套渲染表格及单元格内容,返回文字提示包含icon按钮的图标,当鼠标移到"复制&q ...
- vue3 使用render函数渲染插槽,以Naive UI为例
Vue3使用render函数渲染插槽,以Naive UI为例 网上有好多解释rende函数和插槽原理的文章,不可否认他们的水平都比我高,只是我这篇文章更加注重"术\法\道"中的术, ...
- Vue 中的 Render 全面详解 (渲染函数 JSX)
相信大家都或多或少的在 code 中见过 或使用过 Render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它.附 Element 表格自定义全选示例. 文章目录 一.Render 的资料简介 ...
- SAP UI渲染模式:客户端渲染 VS 服务器端渲染
今年由于疫情原因,SAP一年一度的DKOM(Developer Kick-Off Meeting)切换成了线上模式,刚刚于昨天圆满落幕. 时间过得真快,去年的DKOM仿佛还历历在目:SAP成都研究院数 ...
最新文章
- 并行程序设计报告(MPI并行计算π,实现mandelbrot集)
- 合工大的计算机专业好不好,合肥工业大学计算机好,还是西电的好?差距有多大?...
- mysql中order by优化的那些事儿
- unity 脚本中 调用另一个脚本_Unity 2019.4 脚本生命周期
- 本地存储cookie和localStorage区别特点
- c语言均值滤波程序,均值滤波C语言代码实现的一种简单方式
- laravel常用响应操作
- pip install scikit-image on windows 失败 解决方案
- python接口自动化(一)--什么是接口、接口优势、类型(详解)
- java8 list 去重_Java8中的Stream,一行代码,让集合操作飞起来
- c++频繁读取数据会丢失_透析中会丢失什么营养?透析日的饮食需要注意什么?...
- ch340串口驱动_敏矽微电子Cortex-M0学习笔记07-串口通信详解
- 链接计算机 输入网络密码,联想电脑怎么连接无线网输入密码时怎么输入
- ios app真机测试到上架App Store详细教程-必看
- NVIDIA显卡型号有哪些?怎么知道自己电脑的型号?
- 【PaddlePaddle论文复现】U-GAT-IT: 基于GAN的新型无监督图像转换
- Golang验证身份证号码是否有效
- java实现会员充值功能
- windows7更换系统时间服务器,win7如何修改系统时间
- 自贸港有志青年,捂碳星球旧衣回收项目,成功引起团中央的重视