Question

我正在尝试从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。

Answer 1

如果你移动你的顶部，它应该工作。问题似乎是static子句在到达您的端点之前解析了您的请求，所以如果您这样做：

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，但如果您决定保留设置，则应该有所帮助。

Answer 2

我认为您的路线可能相互冲突。来自：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/'或类似的位置。

Answer 3

我也在学习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响应:) 希望对您有帮助

正在发送HTML而不是JSON数据

3 个答案: