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;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM