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 文件夹 ...
随机推荐
- js创建标签的方法--依赖于jquery
/** * 创建标签,传入一个对象,返回一个完整的标签 * @param {Object.attribute} tag 标签 * @param {Object.attribute} attribute ...
- 网站第三方登陆(一) QQ登陆
QQ 登陆是指,通过qq的用户名和密码,登录网站,不需要注册,网站的用户名和密码.如下图 一旦你授权了,就可以进入网站了,要实现这个效果 1.去qq互联平台(http://connect.qq.com ...
- hg0088新2网址
封装通俗的说,就是我有一些秘密不想让人知道,就通过私有化变量和私有化方法,这样外界就访问不到了.hg0088新2网址然后如果你有一些很想让大家知道的东西,你就可以通过this创建的属性看作是对象共有属 ...
- Process Explorer使用图文教程
这是一款由Sysinternals开发的Windows系统和应用程序监视工具,目前Sysinternals已经被微软收购,此款不仅结合了文件监视和注册表监视两个工具的功能,还增加了多项重要的增强功能, ...
- navicat快捷键
ctrl+R.N 运行窗口sql ctrl+shift+r 运行选择sql ctr+q 打开窗口 ctrl+/ |ctrl+shift+/ 注释 | 解除 ctrl+L 删除一行的内容 ctr ...
- Datafactory必须注意事项
- java selenium (九) 常见web UI 元素操作 及API使用
本篇介绍我们如何利用selenium 来操作各种页面元素 阅读目录 链接(link) <div> <p>链接 link</p> <a href=" ...
- Scala 并发编程
Runnable/Callable 线程 Executors/ExecutorService Futures 线程安全问题 例子:搜索引擎 解决方案 Runnable/Callable Runnabl ...
- ADO.NET学习
ADO.NET重要的类 在.NET访问MySql数据库时的几点经验! string connstr=Setting.Instance().GetConnectionString("MySql ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...