nodejs渲染模板

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;