0

我正在尝试从 SQL 数据库中检索数据并在 Reactjs Web 应用程序上显示所述数据。但是，我对数据库的所有调用都会导致网页的 HTML 成为焦点。我已经设置了标头，并且尝试更改处理快速呼叫响应的方式。

这是我现在使用的 expressjs 脚本：

const express = require('express');
const sql = require('mssql/msnodesqlv8');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');
const db = require('./db.js');

var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use('/counselling/triageadmin/', express.static(path.join(__dirname, '/build')));
app.use(cors());

app.get('/getTable', function (req, res, next){
    var request = new sql.Request(db);
    request.query('select * from Counselling order by TicketID desc', (err, result) =>{
        if (err) { return next(err); }
        res.setHeader('Content-Type', 'application/json');
        res.send(JSON.stringify(result["recordset"]));
    });
});

从那里开始，我的 axios 调用如下所示：

componentWillMount(){
  let self = this;
  axios.get("/getTable")
  .then(function (response){
    console.log(response.data);
    self.setState({
      data: response.data,
    });
  })
  .catch(function (error){
      console.log(error);
  })
}

我添加了 console.log 来检查返回的内容，如前所述，它是当前焦点页面的 HTML 代码。

我做了一些更改以反映我为解决 500 问题所采取的步骤。但是，当前代码会导致 404。

4

3 回答 3

0

我也在学习 MEAN 堆栈，因为我遇到了相反的问题，所以我偶然发现了你的问题。我希望它以 HTML 而不是 JSON 响应

这行代码使它以 HTML 响应

res.send(JSON.stringify(result["recordset"]));

（我试过res.send("<h3 HTML T_T </h3>");了）它确实发送了 HTML

但是，如果您尝试

res.json(String(req.params.id));<= 注意 res.json 而不是 res.send

它以 JSON 响应 :) 我希望这会有所帮助

于 2020-05-18T04:05:29.607 回答
0

我认为您的路线可能相互冲突。来自快速文档：http ://expressjs.com/en/4x/api.html#app.use

// this middleware will not allow the request to go beyond it
app.use(function(req, res, next) {
  res.send('Hello World');
});

// requests will never reach this route
app.get('/', function (req, res) {
  res.send('Welcome');
});

因此，您的路线'/counselling/triageadmin/getTable'将永远无法到达，因为您的路线'/counselling/triageadmin/'正在拦截它，并使用静态资源进行响应。

要解决此问题，请尝试以将所有 API 请求放在不同的子文件夹（例如'/api'. 因此，您的getTable端点将位于：'/api/counselling/triageadmin/getTable/'或类似的位置。

于 2017-05-31T17:41:49.690 回答
0

如果您将 get 移到您的 put 上，它应该可以工作。问题似乎是静态子句在您的请求到达您的端点之前解决了您的请求，所以如果您这样做：

app.get('/counselling/triageadmin/getTable', function (req, res, next){
    var request = new sql.Request(db);
    request.query('select * from Counselling order by TicketID desc', (err, result) =>{
        if (err) { return next(err); }
        res.setHeader('Content-Type', 'application/json');
        res.send(JSON.stringify(result["recordset"]));
    });
});
app.use('/counselling/triageadmin/', express.static(path.join(__dirname, '/build')));

在您被路由到静态文件之前，get 的路径将尝试匹配。

理想情况下，您希望将其余端点置于不同的命名空间下，即，/api但如果您决定保留设置，这应该会有所帮助。

于 2017-05-31T16:22:02.230 回答