res.render一条带有快递的余烬路线

时间：2017-07-19 19:47:30

标签： node.js express ember.js routing

我目前有一个使用Express，Node，Ember和Mongo的webapp。 Ember app位于node / express install根目录下的项目文件夹（./public/index.html）中。我已将express设置为从公共目录提供静态文件，并将index.html呈现给任何get请求，以便可以访问ember应用程序。

我的Ember应用程序中有一个路径/视图，其中包含一个接受文件上传的表单，此表单的操作是对快速路由的发布请求，该路由执行计算并查询具有更新的本地mysql数据库。该函数工作正常但在.post表达函数的末尾，当我res.json或res.send时，响应出现在浏览器窗口中并清除了我的余烬视图。

我认为处理此问题的正确方法是res.render（＆＃39; view＆＃39;，{data：＆＃39; Finished processing file＆＃39;}）;

然后在ember模板上显示数据值。问题是我如何用快递渲染一个余烬视图。我在项目中添加了快速手柄并正确设置了视图引擎，但我不知道如何将ember视图与express相关联，因此它知道如何使用响应数据呈现正确的视图。

ember视图的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);
    });

}

1 个答案:

答案 0 :(得分：0)

感谢Max在评论中提供的帮助。

我在表单提交上做了一个完整的帖子请求，而不是使用ajax来发出请求这就是为什么我被从我的ember应用程序中路由出来而express表示只会在浏览器中呈现对上传的响应。

我再次安装了ember-uploader，这最初给了我问题，因为我没有设置paramName选项来匹配我的文件输入名称。以下更新的代码，其他任何人都遇到了类似的问题。

Ember 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>

file-upload.js（ember-uploader组件）

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);
    });

}
相关问题
最新问题