从反应中获取快递数据

Question

我正在尝试通过在后端准备数据并将我的反应表单中的数据插入 mysql 数据库来创建一个简单的注册表单。我知道有很多关于如何做到这一点的教程，但是我正在尝试以自己的方式自己做。

因此，当我尝试从后端获取数据时，它会抛出一个错误。说找不到资源。在我的服务器上，当我输入路径以查看数据时，它会通知我即使我需要它也找不到该路径？

另外，我相信我对如何通过相对路径获取数据的过程有些困惑。如果 React 使用的端口与服务器使用的端口不同，这怎么可能？获取相对路径是否完全基于您尝试获取的数据的文件夹位置？

为了反应，我使用的端口是 3000 对于我正在使用的服务器 5000

这是我的代码：

型号：

var db = require('../dbconnection');

var register = {
	registerAuth: function(data, callback){
		db.query("insert sanames (id, fullName, email, confirmEmail, password, confirmPassword) values(newid(), '"+data.fullName+"', '"+data.email+"', '"+data.confirmEmail+"', '"+data.password+"', '"+data.confirmPassword+"')")
	}
}

// db.query('insert sanames (id, fullName, email, confirmEmail, password, confirmPassword, dateAdded) values(newid(), "'data.fullName'", "'data.email'", "'data.confirmEmail'", "'data.password'", "'data.confirmPassword')")',callback)

module.exports = register;

路线：

var express = require('express');
var router = express.Router();
var register = require('../models/register');

router.post('/:registerAuth', function(req, res, next) {
    register.registerAuth(req.body,function(err, rows) {
        if (err) {
            res.json(err);
        } else { 
         	res.json(rows);
         }
    });     
});

module.exports = router;

应用（服务器）：

var express = require('express');
var bodyParser = require('body-parser');
var mysql = require('mysql');
var path = require('path');

var port = 5000;
var app = express();

//app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.use('/public', express.static(__dirname + "/public"));

var Register=require('./routes/register');
app.use('/register', Register);

app.listen(port, () => {
	console.log(`Server is listening on ${port}`);
});

// app.get('/test', (req, res) => {
// 	res.send('Test');
// })		

查看：

import React from 'react';
import ReactDOM from 'react-dom';

import Header from '../../common/header';

class Register extends React.Component {

	constructor(props){
		super(props);
		this.state = {
			fullName: "",
			email: "",
			confirmEmail: "",
			password: "",
			confirmPassword: "",
			formErrors: "",
			success: ""
		}
	}

	onChange(e){
		this.setState({
			[e.target.name]: e.target.value
		});
	};

	onSubmit(e) {
		// if(this.state.fullName !== '' || this.state.email || '' || this.state.confirmEmail !== '' || this.state.password !== '' || this.state.confirmPassword !== ''){
		// 	if(this.state.password !== this.state.confirmPassword) {
		// 		//console.log('passwords do not match');
		// 		this.setState({
		// 			formErrors: 'passwords do not match'
		// 		});
		// 		e.preventDefault();
		// 	}
		// 	if(this.state.email !== this.state.confirmEmail) {
		// 		//console.log('email address must match');
		// 		this.setState({
		// 			formErrors: 'both email address must match'
		// 		});
		// 		e.preventDefault();
		// 	}
		// } else {
		// 	//console.log('please fill out all fields');
		// 	this.setState({
		// 		formErrors: 'please fill out all fields'
		// 	});
		// 	e.preventDefault();
		// }
		e.preventDefault();

		var data = {
			fullName: this.state.name,
			email: this.state.email,
			confirmEmail: this.state.confirmEmail,
			password: this.state.password,
			confirmPassword: this.state.confirmPassword
		}
		fetch("/register", {
			method: 'POST',
			headers: {'Content-Type': 'application/json'},
			body: JSON.stringify(data)
		}).then(function(response){
			if(response.status >= 400) {
				throw new Error("Bad response from server");
			}
			return response.json();
		}).then(function(data){
			console.log(data);
			if(data == "success"){
				this.setState({sucess: 'User has been successfully registered'});
			}
		}).catch(function(err){
			console.log(err);
		});
	}	

	render(){
		return (
			<div className="background-video">
			<Header />

				<div className="login-container">
					<div className="login-wrapper">

						<div className="loginfields-wrap">
						{this.state.formErrors !== '' ? <div className="alert alert-danger" role="alert">{this.state.formErrors}</div> : ''}
					
							<form 
								onSubmit={e => this.onSubmit(e)}
								autoComplete="off"
								method="POST"
								action="/registeruser"
							>
								<input 
									type="text" 
									name="fullName" 
									className="form-control" 
									placeholder="First/Last Name"
									value={this.state.fullName}
									onChange={e => this.onChange(e)}
								/>
								<input 
									type="email" 
									name="email" 
									className="form-control" 
									placeholder="Email"
									value={this.state.email}
									onChange={e => this.onChange(e)}
								/>
								<input 
									type="email" 
									name="confirmEmail" 
									className="form-control" 
									placeholder="Confirm Email"
									value={this.state.confirmEmail}
									onChange={e => this.onChange(e)}
								/>
								<input 
									type="password" 
									name="password" 
									className="form-control" 
									placeholder="Password"
									value={this.state.password}
									onChange={e => this.onChange(e)} 
								/>
								<input 
									type="password" 
									name="confirmPassword" 
									className="form-control" 
									placeholder="Confirm Password"
									value={this.state.confirmPassword}
									onChange={e => this.onChange(e)}
								/>
								<button type="submit" className="btn btn">Register</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default Register;

Answer 1

希望我的回答有帮助，回答起来有点难。

我做的第一件事是将 fetch 更改为以下内容：

fetch("http://localhost:5000/register"

第一次尝试时遇到了 CORS 问题，所以我安装了 npm 包： https://www.npmjs.com/package/cors

你可以在你的包 JSON 文件中设置一个代理，这将有助于将你的 React 应用程序连接到快速服务器 - 这是应用程序连接到你的快速服务器的一种方式 - 并不是它们在同一个文件夹中，您可以在不同的文件夹中设置服务器并仍然连接到它，尝试一下 - 如果它有助于更​​清楚地理解它。

"proxy": "http://localhost:5000"

希望对你有帮助