SQL Express React节点(SERN堆栈) - 处理大型数据有效负载的最佳方式?

时间:2017-10-03 15:12:29

标签: sql node.js reactjs express webpack

我为一家客户是其他公司的公司工作。数据库中的公司记录集有40多个字段,有一万多个公司(包括一个字段,在大多数情况下保存一个可笑的长字符串。)通过express和通配符SQL调用返回的JSON数据有效负载超过400万行在邮递员。

背景:

我们在VB.NET中使用ASMX Web服务进行了此设置,但是当必须序列化JSON时,对客户端的响应平均接近30秒。合作很麻烦,很痛苦。

回到.NET MVC中的旧版本,有时需要花费十到十五秒的时间来填充公司名称的简单选择输入,而不是渲染UI。

新环境:

我目前使用带有webpack 3+的SERN环境构建了第4代系统。我已经启用了API在我的应用程序端口(8080)的单独端口(5000)上运行CORS并测试了有效负载。现在还是8秒。更好但不是最佳。

问题:

如何加快有效载荷?我听说过React能够从Node API中分离有效负载,但却无法知道如何完成这些工作。任何人都可以使用下面的代码,或者告诉我在哪里可以改进或指向一些库或某些可以加快SQL调用或数据传输性能的东西?

目前的POSTMAN效果统计: SQL:2.679秒 快递:1.331秒 客户API:3.976秒

的package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "desc",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "concurrently \"webpack-dev-server\" \" node ./server/core/server.js\"",
    "dev": "webpack-dev-server",
    "server": "node ./server/core/server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/djErock/EMR4.git"
  },
  "author": "Erik Grosskurth",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/djErock/EMR4/issues"
  },
  "homepage": "https://github.com/djErock/EMR4#readme",
  "dependencies": {
    "axios": "^0.16.2",
    "cors": "^2.8.4",
    "jquery": "^3.2.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "concurrently": "^3.5.0",
    "css-loader": "^0.28.4",
    "express": "^4.16.0",
    "file-loader": "^0.11.2",
    "mssql": "^4.1.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "^2.9.1"
  }
}

Webpack.config:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ],
  },
  devServer: {
    historyApiFallback: true,
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ]
};

Server.js

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('../../webpack.config.js');
const options = {
  contentBase: './dist',
  hot: true
};

var app = require('express')();
var cors = require('cors');

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  // Pass to next layer of middleware
  next();
});

const companies = require("../controllers/company.js");
app.get('/api/companies', function (req, res) {
  companies.getCompanyList(req, res);
});


webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

app.listen(5000, () => {
  console.log('dev server listening on port 5000');
});

comapny.js

var db = require("../core/db");

exports.getCompanyList = function(req, resp) {
    db.execSQL("SELECT * FROM tblCompany", function(data, err) {
        if (err) {
            resp.writeHead(500, "Internal Error Occurred",{"Content-Type": "application/json"});
            resp.write(JSON.stringify(err));
        }else {
            resp.writeHead(200, {"Content-Type": "application/json"});
            resp.write(JSON.stringify(data));
        }
        resp.end();
    });
}

DB.js

var sqlDB = require("mssql");
var settings = require("../settings.js");

exports.execSQL = function(sql, callback) {

    var conn = new sqlDB.ConnectionPool(settings.dbConfig);
    conn.connect().then(function() {

        var req = new sqlDB.Request(conn);
        req.query(sql).then(function(recordset) {
            callback(recordset);
        }).catch(function(err) {
            console.log(err);
            callback(null, err);
        });

    }).catch(function(err) {
        console.log(err);
        callback(null, err);
    });

};

与组件中的axios ajax调用进行反应:

  handleOnChange(e) {
    e.preventDefault();
    //Let's call the caduceus server
    axios.get(Constants.WS_PREFIX+'companies')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }

0 个答案:

没有答案