res.render與明確的餘燼路線

Question

我目前有一個web應用程序使用Express，Node，Ember和Mongo。 Ember應用程序駐留在節點/快速安裝的根目錄中的項目文件夾（./public/index.html）中。我有表達式設置爲從公共目錄提供靜態文件，並將index.html呈現給任何獲取請求，以便可以訪問該燼器應用程序。

我的Ember應用程序中有一個路徑/視圖，它具有接受文件上傳的窗體，此窗體的操作是對執行計算並向本地mysql數據庫查詢更新的高速路由的發佈請求。該函數可以正常工作，但在.post express函數結束時，當res.json或res.send響應出現在瀏覽器窗口中並清除我的餘燼視圖時。

我認爲正確的處理方法是res.render（'view'，{data：'Finished processing file'}）;

然後在餘燼模板上顯示數據值。問題是我如何使用express來渲染一個ember視圖。我將express-handlebars添加到了我的項目中，並正確設置了視圖引擎，但我不知道如何將明確的視圖與express相關聯，因此它知道如何使用響應數據呈現正確的視圖。爲灰燼視圖

HBS文件

<div class="col-md-8 col-md-offset-2 text-center"> 
    <h2 class="toolTitle">Reactivate SKUs</h2> 
    <p class="lead">CSV Should Contain 1 Column (SKU) Only</p> 
    <form action="/tools/sku/reactivate" method="POST" enctype="multipart/form-data"> 
    <input class="center-block" type="file" name="csvdata"> 
    <button type="submit" class="btn btn-md btn-danger">Submit</button> 
    </form> 
</div> 

router.js（快速路由器）

var quotes = require('../api/quote'); 
var cors = require('cors'); 
var sku = require('../api/tools/sku'); 
var multer = require('multer'); 
var upload = multer({ dest: 'uploads/' }); 
var util = require("util"); 
var fs = require("fs"); 

var corsOptions = { 
    origin: 'http://localhost:4200' 
} 

module.exports = function(router){ 
    router.route('/quotes').post(cors(corsOptions),function(req,res){ 
     console.log(req.body); 
     quotes.addQuote(req,res); 
    }).get(cors(corsOptions),function(req,res){ 
     quotes.getAllQuotes(req,res); 
    }); 
    router.route('*').get(cors(corsOptions), function(req,res){ 
     res.sendFile('public/index.html',{root:'./'}); 
    }); 
    router.route('/tools/sku/reactivate').post(upload.single('csvdata'),function(req,res){ 
     console.log('handing request over to sku.reactivate'); 
     sku.reactivate(req,res); 
    }); 
}; 

sku.js快遞功能

var mysql = require('mysql'); 
var csv = require('csv-parse'); 
var multer = require('multer'); 
var fs = require('fs'); 

//mysql setup 
const connection = mysql.createConnection(
    { 
     host  : 'localhost', 
     user  : 'rugs_remote2', 
     password : 'ofbiz', 
     database : 'rugs_prd2', 
     multipleStatements: true 
    } 
); 
connection.connect(); 


module.exports.reactivate = function(req,res){ 
    //define mysql query function for once readStream emits end event 
    function reactivationQuery(arr){ 
    console.log(arr); 

     const queryString = "UPDATE PRODUCT SET SALES_DISCONTINUATION_DATE = NULL WHERE PRODUCT_ID IN (?)"; 
     connection.query(queryString,arr,function(err,rows,fields){ 
      console.log(rows,fields); 
      if(err){ 
       console.log('Error running sku.reactivate module error is: '+err); 
      } 
      res.send('DONE'); 
     }); 
    } 

    //define array for holding csv data in this case skus 
    const skuArray = []; 
    //define filesystem readstream from uploaded file 
    let readStream = fs.createReadStream(req.file.path).pipe(csv()); 
    //push csv data to array ignoring headers to skuArray 
    readStream.on('data', function(chunk){ 
     if(chunk[0] !== 'SKU'){ 
      skuArray.push(chunk[0]); 
     } 
    }); 
    //error handling 
    readStream.on('error',function(err){ 
     console.log('Error while reading file stream [ERROR] '+ err); 
     res.send('Error while processing file'); 
    }); 
    //once read is finished map skuArray to usable string for IN Clause 
    readStream.on('end',function(){ 
     let stringifyArray = skuArray; 
     stringifyArray = [stringifyArray]; 
     reactivationQuery(stringifyArray); 
    }); 

} 

Answer 1

想通了這一點得益於Max「在評論中的幫助。

我正在做表單提交的完整發布請求，而不是使用ajax來發出請求，這就是爲什麼我被路由出我的應用程序的應用程序，並表示只會呈現在瀏覽器中上傳的響應。

我再次安裝了ember-uploader，最初給我的問題，因爲我沒有設置paramName選項匹配我的文件輸入名稱。更新下面的代碼以防其他人遇到類似的問題。

灰燼HBS模板：

<div class="col-md-8 col-md-offset-2 text-center"> 
    <h2 class="toolTitle">Reactivate SKUs</h2> 
    <p class="lead">CSV Should Contain 1 Column (SKU) Only</p> 
    <p class="lead flash-msg"></p> 
    {{file-upload id="upload" url="/tools/sku/reactivate" class="center-block" name="csvdata"}} 
</div> 

文件upload.js（餘燼的上傳成分）

import Ember from 'ember'; 
import EmberUploader from 'ember-uploader'; 

export default EmberUploader.FileField.extend({ 
    filesDidChange: function(files) { 
    const uploader = EmberUploader.Uploader.create({ 
     url: this.get('url'), 
     paramName: 'csvdata' 
    }); 

    if (!Ember.isEmpty(files)) { 
     alert(JSON.stringify(files)); 
     // this second argument is optional and can to be sent as extra data with the upload 
     uploader.upload(files[0]).then(data => { 
     $('#upload').fadeOut('slow', function(){ 
      $('.flash-msg').text(data); 
      $('.flash-msg').fadeIn('slow'); 
     }); 
     }, error => { 
      $('.flash-msg').text('Error uploading file please contact Jay: ' + error); 
      $('.flash-msg').fadeIn('slow'); 
     }); 
    } 
    } 
}); 

明示路由器

var quotes = require('../api/quote'); 
var cors = require('cors'); 
var sku = require('../api/tools/sku'); 
var multer = require('multer'); 
var upload = multer({ dest: 'uploads/' }); 
var util = require("util"); 
var fs = require("fs"); 

var corsOptions = { 
    origin: 'http://localhost:4200' 
} 

module.exports = function(router){ 
    router.route('/quotes').post(cors(corsOptions),function(req,res){ 
     console.log(req.body); 
     quotes.addQuote(req,res); 
    }).get(cors(corsOptions),function(req,res){ 
     quotes.getAllQuotes(req,res); 
    }); 
    router.route('*').get(cors(corsOptions), function(req,res){ 
     res.sendFile('public/index.html',{root:'./'}); 
    }); 
    router.route('/tools/sku/reactivate').post(upload.single('csvdata'),function(req,res){ 
     console.log('handing request over to sku.reactivate'); 
     sku.reactivate(req,res); 
    }); 
}; 

明示API函數模塊：

var mysql = require('mysql'); 
var csv = require('csv-parse'); 
var multer = require('multer'); 
var fs = require('fs'); 

//mysql setup 
const connection = mysql.createConnection(
    { 
     host  : 'localhost', 
     user  : 'rugs_remote2', 
     password : 'ofbiz', 
     database : 'rugs_prd2', 
     multipleStatements: true 
    } 
); 

connection.connect(); 

module.exports.reactivate = function(req,res){ 
    //define mysql query function for once readStream emits end event 
    function reactivationQuery(arr){ 
     const queryString = "UPDATE PRODUCT SET SALES_DISCONTINUATION_DATE = NULL WHERE PRODUCT_ID IN (?)"; 
     connection.query(queryString,arr,function(err,rows,fields){ 
      if(err){ 
       console.log('Error running sku.reactivate module error is: '+err); 
       res.json(err); 
      } 
      res.json('Successfully reactivated '+rows.changedRows+' SKUs'); 
     }); 
    } 

    //define array for holding csv data in this case skus 
    const skuArray = []; 
    //define filesystem readstream from uploaded file 
    let readStream = fs.createReadStream(req.file.path).pipe(csv()); 
    //push csv data to array ignoring headers to skuArray 
    readStream.on('data', function(chunk){ 
     if(chunk[0] !== 'SKU'){ 
      skuArray.push(chunk[0]); 
     } 
    }); 
    //error handling 
    readStream.on('error',function(err){ 
     console.log('Error while reading file stream [ERROR] '+ err); 
     res.json('Error while processing file'); 
    }); 
    //once read is finished map skuArray to usable string for IN Clause 
    readStream.on('end',function(){ 
     let stringifyArray = skuArray; 
     stringifyArray = [stringifyArray]; 
     reactivationQuery(stringifyArray); 
    }); 

}