Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/467.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 正在尝试使用axios从Reactjs组件向express应用程序发送数据_Javascript_Node.js_Reactjs_Express_Axios - Fatal编程技术网

Javascript 正在尝试使用axios从Reactjs组件向express应用程序发送数据

Javascript 正在尝试使用axios从Reactjs组件向express应用程序发送数据,javascript,node.js,reactjs,express,axios,Javascript,Node.js,Reactjs,Express,Axios,我正在做一个项目,前端使用ReactJS typescript,后端使用express,数据库使用MongoDB。 我遇到的主要问题是,我希望以某种方式将数据从我的React组件发送到express应用程序,以便它可以查询并向数据库添加内容。 目前,我有运行的express server和运行的React应用程序,我可以使用路由连接它们 我的express应用程序如下所示: var express = require('express'); var path = require('path');

我正在做一个项目,前端使用ReactJS typescript,后端使用express,数据库使用MongoDB。 我遇到的主要问题是,我希望以某种方式将数据从我的React组件发送到express应用程序,以便它可以查询并向数据库添加内容。 目前,我有运行的express server和运行的React应用程序,我可以使用路由连接它们

我的express应用程序如下所示:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var testAPIRouter = require('./routes/testAPI');
var testAddUser = require('./routes/addUser');
const MongoClient = require('mongodb').MongoClient;
const mongoose = require('mongoose');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(cors());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use("/testAPI", testAPIRouter);
app.use("/addUser", testAddUser);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


const dbRoute = 'mongodb+srv://AdminAlex:Et11tonitrua1dei@pawornaw-b4vzg.gcp.mongodb.net/test?retryWrites=true&w=majority';
mongoose.connect(dbRoute,
    {useNewUrlParser: true})
    .then(() => console.log("Connected to MongoDB"))
    .catch(err => console.error("Could not connected to Mongo"));

module.exports = app;
我的React组件是这个,减去import语句。渲染函数仅包含一个按钮,该按钮具有执行点处理()的onclick功能。

最后,testAPI.js如下所示

const router = express.Router();
const axios = require('axios');

router.get('/', function(req, res, next) {
//res.send('API is working properly');
    axios.get('http://localhost:3000')
        .then(res => console.log("got it"))
        .catch(err => err);
});

module.exports = router;
我希望能够访问和使用从react组件发送的数据,以便将来可以使用用户输入查询数据库。API确实与我的React代码连接,当testAPI函数仅包含以下行时:

const router = express.Router();
const axios = require('axios');

router.get('/', function(req, res, next) {
res.send('API is working properly');
});

module.exports = router;
消息可以通过状态显示在浏览器中的my react应用程序上

如果有人能帮我发现我做错了什么,或者给我一个线索,告诉我还有什么其他的选择可以尝试,请让我知道


多谢各位

当您从客户端发送post请求时,它将位于req对象的body属性中

const router = express.Router();
 // you shoud listen post request
router.post('/', function(req, res) {
  const { body } = req;
  // do somethin with data which you recieved in body, save to database for example
  // and send response to the client
  res.json({ message: 'your data was saved'});
});

module.exports = router;

要向客户端发送数据,请使用:

router.get('/', function(req, res) {
  res.json({ data: 'Some data'}); // or res.send('some text') to send plain text
});

当您从客户端发送post请求时,它将位于req对象的body属性中

const router = express.Router();
 // you shoud listen post request
router.post('/', function(req, res) {
  const { body } = req;
  // do somethin with data which you recieved in body, save to database for example
  // and send response to the client
  res.json({ message: 'your data was saved'});
});

module.exports = router;

要向客户端发送数据,请使用:

router.get('/', function(req, res) {
  res.json({ data: 'Some data'}); // or res.send('some text') to send plain text
});

我还会像在react组件中那样使用Axios吗?您可以使用Axios或fetch向服务器发送请求。我会像在react组件中一样使用Axios吗?您可以使用Axios或fetch向服务器发送请求