Question

我试图通过在后端准备数据并将反应形式的数据插入mysql数据库来创建一个简单的寄存器表单。我知道有很多关于如何做到这一点的教程，但是我试图按照自己的方式自己做。

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

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

对于反应，我使用的端口是3000 我和服务器使用5000

这是我的代码：

型号：

＆＃13;

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;

＆＃13;

路线：

＆＃13;

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');
// })

＆＃13;

App（服务器）：

＆＃13;

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;

＆＃13;

查看：

＆＃13;

{{1}}

＆＃13;

Answer 1

我希望我的答案有所帮助，有点难以回答。

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

SIGHUP

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

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

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

希望这有帮助

从反应中获取快速数据

1 个答案: