res.render 一条 ember 快速路线
res.render an ember route with express
我目前有一个使用 Express、Node、Ember 和 Mongo 的网络应用程序。 Ember 应用程序位于 node/express 安装根目录中的项目文件夹 (./public/index.html) 中。我已快速设置为从 public 目录提供静态文件并将 index.html 呈现给任何获取请求,以便可以访问 ember 应用程序。
我的 Ember 应用程序中有一个 route/view,它有一个接受文件上传的表单,此表单的操作是 post 对执行计算和快速路由的请求查询具有更新的本地 mysql 数据库。该函数工作正常,但在 .post express 函数的末尾,当我 res.json 或 res.send 响应出现在浏览器中 window 并清除我的 ember 查看。
我认为处理此问题的正确方法是 res.render('view',{data:'Finished processing file'});
然后在 ember 模板上显示数据值。问题是如何使用 express 渲染 ember 视图。我在我的项目中添加了 express-handlebars 并正确设置了视图引擎,但我不知道如何将 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);
});
}
感谢 Max 在评论中的帮助,解决了这个问题。
我在表单提交上做了一个完整的 post 请求,而不是使用 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>
文件-upload.js(ember-上传器组件)
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);
});
}
我目前有一个使用 Express、Node、Ember 和 Mongo 的网络应用程序。 Ember 应用程序位于 node/express 安装根目录中的项目文件夹 (./public/index.html) 中。我已快速设置为从 public 目录提供静态文件并将 index.html 呈现给任何获取请求,以便可以访问 ember 应用程序。
我的 Ember 应用程序中有一个 route/view,它有一个接受文件上传的表单,此表单的操作是 post 对执行计算和快速路由的请求查询具有更新的本地 mysql 数据库。该函数工作正常,但在 .post express 函数的末尾,当我 res.json 或 res.send 响应出现在浏览器中 window 并清除我的 ember 查看。
我认为处理此问题的正确方法是 res.render('view',{data:'Finished processing file'});
然后在 ember 模板上显示数据值。问题是如何使用 express 渲染 ember 视图。我在我的项目中添加了 express-handlebars 并正确设置了视图引擎,但我不知道如何将 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);
});
}
感谢 Max 在评论中的帮助,解决了这个问题。
我在表单提交上做了一个完整的 post 请求,而不是使用 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>
文件-upload.js(ember-上传器组件)
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);
});
}