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 文件夹 ...
随机推荐
- jsexcel导出插件
ExcelTable.js /* * author:wenluanlai */ (function ($) { Date.prototype.Format = function (fmt) { var ...
- 查看Linux是32位还是64位
最直接简洁的办法: 在linux终端输入getconf LONG_BIT命令 如果是32位机器,则结果为32 [root@localhost ~]# getconf LONG_BIT 32 如果是64 ...
- db2命令
把远程的数据库信息加载到本地 第一步,catalog server端的node ,命令如下: db2 catalog tcpip node db2node remote hostname server ...
- cocoapods Analyzing dependencies 问题的解决方案
pod install --verbose --no-repo-update pod update --verbose --no-repo-update 修改就ok了
- Sql语句复习
1.两张表A,B 其中A表中字段1,字段2,字段3要迁移到B表中字段4,字段5,字段6,迁移后B表的字段7 全赋值为123: insert into B(字段4,字段5,字段6,字段7) select ...
- 运维之netstat
实用命令实例 1. 列出所有端口 (包括监听和未监听的) 列出所有端口 netstat -a # netstat -a | more Active Internet connections ( ...
- windows8.1下常用编辑器安装配置(emacs/vim/sublime text3)
一.下载:在emacs:http://mirrors.ustc.edu.cn/gnu/emacs/windows/里下载emacs-24.3-bin-i386.zip.解压到自定目录,双击bin文件夹 ...
- apache中虚拟主机的配置
一.两种方式:基于域名的虚拟主机和基于IP地址的的虚拟主机 (这里基于前者) 二.作用:实现在同一个web服务器下,同时运行很多个站点(项目) 三.虚拟主机的配置 1.在核心配置文件中加载虚拟主机配置 ...
- (转) jsp页面 URL传中文参数到Action里面出现乱码
jsp页面 URL传中文参数到Action里面出现乱码,方法如下: 第一种:在Action中用 new String(str.getBytes("ISO8859_1"), &quo ...
- 50个C/C++源代码网站
C/C++是最主要的编程语言.这里列出了50名优秀网站和网页清单,这些网站提供c/c++源代码 .这份清单提供了源代码的链接以及它们的小说明.我已尽力包括最佳的C/C++源代码的网站.这不是一个完整的 ...