1. 为什么要用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渲染模板的更多相关文章

  1. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  2. JsRender 前端渲染模板常用API学习

    JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板 获取使用script标签声 ...

  3. JsRender 前端渲染模板基础学习

    JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...

  4. flask渲染模板时报错TypeError: 'UnboundField' object is not callable

    渲染模板时,访问页面提示TypeError: 'UnboundField' object is not callable 检查代码,发现实例化表单类是,没有加括号:form = NewNoteForm ...

  5. flask模板的基本用法(定界符、模板语法、渲染模板),模板辅助工具(上下文、全局对象、过滤器、测试器、模板环境对象)

    flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTM ...

  6. 云平台项目--学习经验--jsrender前端渲染模板

    jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...

  7. thinkphp3.2笔记(3)视图渲染 模板的赋值与显示 系统变量

    一  视图 1  视图渲染 渲染模板输出最常用的是使用display方法,调用格式:display('[模板文件]'[,'字符编码'][,'输出类型'])模板文件的写法支持下面几种:用法 描述不带任何 ...

  8. 前端渲染模板(一):Thymeleaf

    一.使用 本篇文章将以SpringBoot为框架来介绍Thymeleaf的用法. 1 资源文件的约定目录结构  Maven的资源文件目录:/src/java/resources spring-boot ...

  9. flask渲染模板

    Flask自身使用了jinja2模板,可以使用render_template()方法来渲染模板,只需要将模板名和关键字的参数传入. 该渲染模板的模块(views.py)会在 templates 文件夹 ...

随机推荐

  1. Unity3D Layout 快捷键

    我的需求是开发的时候一种布局,运行的时候一种布局,Unity3D 选项中的自定义快捷键的太少,只能另想办法.Google 之后,找到解决方法:Editor layout hotkeys? 1.创建菜单 ...

  2. Win8开虚拟wifi ‘无法启动承载网络 组或资源的状态不是执行请求操作的正确状态“

    第一步,首先我们点开开始按钮菜单,要右键以“管理员身份”打开CMD“命令提示符”并键入或者复制(粘贴)命令:netsh wlan show drivers 查看本机无线网卡是否支持此项Wifi热点共享 ...

  3. MySQL exists的用法介绍

    有一个查询如下: 1 SELECT c.CustomerId, CompanyName   2 FROM Customers c   3 WHERE EXISTS(   4     SELECT Or ...

  4. YY前端课程-自习

    1. 默认的浏览器字体 100% = 1em  =1rem =16px  =12pt em继承父元素,rem只继承html根元素 2. text-align水平对齐影响一个元素中文本的水平对齐方式,控 ...

  5. PLSQL大数据生成规则

    数据定义 数据定义决定了被生成的数据.如果要创建简单的字符,可以在两个方括号之间输入字符定义:[数据] 数据可以是下列预先确定的集的混合体:           •  a: a..z (小写字符)   ...

  6. [转载]tslib1.4与Qt4.8.6的交叉编译与移植

    原文:http://www.cnblogs.com/Jasonsblog/p/3757985.html http://blog.csdn.net/sno_guo/article/details/168 ...

  7. sed 使用

    Sed简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space),接着用sed命令处理缓冲区中的内 ...

  8. 部署私有的Nuget服务器

    1.查看官方的部署文档:http://docs.nuget.org/Create/Hosting-Your-Own-NuGet-Feeds 2.使用开源的项目:https://github.com/h ...

  9. 算法练习之leetcode系列1-3

    1.Reverse Words in a String public class Solution { public String reverseWords(String s) { String re ...

  10. 第一篇:Retrofit主要类UML图

    2016-05-06 16:07:09 1.先上一张Retrofit的代码结构图: 可以看到,Retrofit自身的结构很简单,代码量也不是很大.红色框部分是一些注解类,就是一些标记. 简单的看一下客 ...