- 為什么要用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;