nodejs渲染模板
- 为什么要用nodejs来渲染?
之前前端的任务就是用HTML+CSS 来高保真的还原UI所设计原图,偶尔会使用少量的jq来对页面添加一些特效,页面还要交付给后端开发人员进行数据填充(php jsp)等模板语言,前后端依赖严重,几乎出现任何问题是只有前后端配合才能解决,后来的前后端分离,也就是前后端只用json来交流,前端通过使用ajax来进行数据填充,但是ajax的使用不利于SEO优化和首屏渲染,会造成额外的流量开销(主要在移动端)。
我所设想的是nodejs只负责渲染页面,数据和后台逻辑还是由JAVA后台实现,nodejs使用JAVA提供的数据接口来对页面进行渲染。
以下是代码部分略丑:
var express = require('express');
var router = express.Router();
var http = require('http');
// var getdata = require('../http');
/* GET home page. */
//主页
router.get('/', function(req, res, next) {
//创建请求
var xml = http.request({
host:"localhost",
port:3000,
method:"GET",
path:"/data/",
agent:false,
header:{
'Content-Type': 'application/json'
}
},function (resouce) {
resouce.setEncoding('utf-8');
resouce.on('data',function (progress) {
//此处是对接受的数据进行处理
res.render('index',JSON.parse(progress) );
});
resouce.on('end',function (data) {
});
xml.on('error',function (err) {
console.log('-----error------',err);
})
});
xml.end(); //告诉服务器此次请求结束
});
//模拟JAVA接口
router.get('/data',function (req, res, next) {
res.send({
"id":"单号",
"status":"流转单状态",
"data":"审批通过日期",
"business_data":"业务日期",
"company":"委托单位",
"bussiness_company":"业务分公司",
"bus_person":"业务员",
"provide_person":"运价提供人",
"handle_person":"操作分公司",
"handle_cus":"操作方客服",
"search":"查询",
"num":"序号",
"bus_id":"业务流转单号",
"work_num":"工作号",
"odd_id":"流转单类型",
"pass_date":"审批通过日期",
"company_client":"委托单位",
"bus_class":"业务类型",
"haulier":"承运人"
});
});
module.exports = router;
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var exphbs = require('express-handlebars');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
//设置模板引擎
app.engine('hbs', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.hbs'
}));
app.set('view engine', 'hbs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static('public'));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
nodejs渲染模板的更多相关文章
- HTML5触屏版多线程渲染模板技术分享
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...
- JsRender 前端渲染模板常用API学习
JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板 获取使用script标签声 ...
- JsRender 前端渲染模板基础学习
JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...
- flask渲染模板时报错TypeError: 'UnboundField' object is not callable
渲染模板时,访问页面提示TypeError: 'UnboundField' object is not callable 检查代码,发现实例化表单类是,没有加括号:form = NewNoteForm ...
- flask模板的基本用法(定界符、模板语法、渲染模板),模板辅助工具(上下文、全局对象、过滤器、测试器、模板环境对象)
flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTM ...
- 云平台项目--学习经验--jsrender前端渲染模板
jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...
- thinkphp3.2笔记(3)视图渲染 模板的赋值与显示 系统变量
一 视图 1 视图渲染 渲染模板输出最常用的是使用display方法,调用格式:display('[模板文件]'[,'字符编码'][,'输出类型'])模板文件的写法支持下面几种:用法 描述不带任何 ...
- 前端渲染模板(一):Thymeleaf
一.使用 本篇文章将以SpringBoot为框架来介绍Thymeleaf的用法. 1 资源文件的约定目录结构 Maven的资源文件目录:/src/java/resources spring-boot ...
- flask渲染模板
Flask自身使用了jinja2模板,可以使用render_template()方法来渲染模板,只需要将模板名和关键字的参数传入. 该渲染模板的模块(views.py)会在 templates 文件夹 ...
随机推荐
- selenium移动div里面的滚动条,操作弹出对话框
还是使用js来移动 首先要定位到这个元素 倾向于使用js来定位元素,输入下面的脚本,按下回车键,即可在调试页面看到对应的div块$("div.table-responsive") ...
- Java中用ClassLoader载入各种资源(类、文件、web资源)的方法
lassLoader主要对类的请求提供服务,当JVM需要某类时,它根据名称向ClassLoader要求这个类,然后由ClassLoader返回这个类的class对象. ClassLoader负责载入系 ...
- Jquery动态操作checkbox
问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...
- .net乱码问题
最近在给一个客户做framwwork版本升级,从1.0版本升级到4.0版本,发现最大的问题就是乱码. 在1.0版本下,gb2312编码能够运行得很好,可是升级到4.0后就都是乱码. 随后将webcon ...
- spring.net 配置文件需要注意换行问题
今天在做Spring.NET Demo时写配置文件写ObjectNames 节点的Value成这样 <object id="ProxyCreator" type=" ...
- ThinkPHP 3.2.3(二)配置
一.配置格式 1.PHP数组定义 默认所有配置文件的定义格式均采用返回PHP数组的方式,配置参数不区分大小写. 如果使用二维数组来配置更多的信息,则二级参数配置区分大小写.格式为: //项目配置文件r ...
- 运行DbVisualizer报the java_home environment viariable does not point to a working 32-bit JDK OR JRE错误
报这个错误的根本原因就是DbVisualizer和JDK的版本不一致,那么知道原因,修改起来就方便了,要么修改DbVisualizer的版本,要么修改JDK的版本. 1.JDK7 64位 那么就在Db ...
- swift-分支语句
// switch的基本用法 // 1>switch后面的()可以省略 // 2>case中语句结束后不需要跟break // 3>在case中定义局部变量不需要跟{} // 4&g ...
- String的方法
String str = "djsfkskfjs" . str.indexof():括号里面写你查找的字符,从strd的第一个开始找,找到第一个相同的字符,得到该字符的数组下标. ...
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试一.下载相关安装包 1.下载nginx最新版本(nginx1.3.13版之后才支持websocket协议) 下载地址 ...