Mysql 我想从数据存储所在的sql数据库连接react js注册应用程序
这是登记表代码。我想将此表单数据存储在mysql数据库中Mysql 我想从数据存储所在的sql数据库连接react js注册应用程序,mysql,reactjs,Mysql,Reactjs,这是登记表代码。我想将此表单数据存储在mysql数据库中 import React, { Component } from "react"; import './Form.css' import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import AppBar from 'material-ui/AppBar';
import React, { Component } from "react";
import './Form.css'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import TextField from 'material-ui/TextField';
import firebase from '../firebase';
class Form extends Component
{
constructor( props )
{
super( props );
this.state = {
firstName: '',
lastName: '',
emailId: '',
dob: '',
phoneNumber: '',
password: '',
confirm_password: '',
formErrors: {}
};
this.initialState = this.state;
}
handleFormValidation ()
{
const { firstName, lastName, emailId, dob, phoneNumber, password, confirm_password } = this.state;
let formErrors = {};
let formIsValid = true;
//first name
if( !firstName )
{
formIsValid = false;
formErrors[ "firstNameErr" ] = "Name is required.";
}
else if( !( /^[a-zA-Z]+$/.test( firstName ) ) )
{
formIsValid = false;
formErrors[ "firstNameErr" ] = "Invalid Name.";
}
//lastName
if( !lastName )
{
formIsValid = false;
formErrors[ "lastNameErr" ] = "Last Name is required.";
}
else if( !( /^[a-zA-Z]+$/.test( lastName ) ) )
{
formIsValid = false;
formErrors[ "lastNameErr" ] = "Invalid Name.";
}
//Email
if( !emailId )
{
formIsValid = false;
formErrors[ "emailIdErr" ] = "Email id is required.";
}
else if( !( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test( emailId ) ) )
{
formIsValid = false;
formErrors[ "emailIdErr" ] = "Invalid email id.";
}
//DOB
if( !dob )
{
formIsValid = false;
formErrors[ "dobErr" ] = "Date of birth is required.";
}
else
{
var pattern = /^(0[1-9]|1[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/([0-9]{4})$/;
if( !pattern.test( dob ) )
{
formIsValid = false;
formErrors[ "dobErr" ] = "Invalid date of birth";
}
}
//Phone number
if( !phoneNumber )
{
formIsValid = false;
formErrors[ "phoneNumberErr" ] = "Phone number is required.";
}
else
{
var mobPattern = /^(?:(?:\\+|0{0,2})91(\s*[\\-]\s*)?|[0]?)?[789]\d{9}$/;
if( !mobPattern.test( phoneNumber ) )
{
formIsValid = false;
formErrors[ "phoneNumberErr" ] = "Invalid phone number.";
}
}
//password
if( !password )
{
formIsValid = false;
formErrors[ "passwordErr" ] = "Password is required.";
}
else if( !/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,32}$/.test( password ) )
{
formIsValid = false;
formErrors[ "passwordErr" ] = " Password Must contain at least one uppercase and one number and lowercase letter,and at least 8 or more";
}
//confirm password
if( password !== confirm_password )
{
formIsValid = false;
formErrors[ "confirm_passwordErr" ] = "Password is not matched.";
}
this.setState( { formErrors: formErrors } );
return formIsValid;
}
handleChange = ( e ) =>
{
const { name, value } = e.target;
this.setState( { [ name ]: value } );
}
handleSubmit = ( e ) =>
{
e.preventDefault();
if( this.handleFormValidation() )
{
alert( 'You have been successfully registered.' )
this.setState( this.initialState )
}
}
render ()
{
const { firstNameErr, lastNameErr, emailIdErr, dobErr, phoneNumberErr, passwordErr, confirm_passwordErr } = this.state.formErrors;
return (
<center>
<div className="formDiv">
<form onSubmit={ this.handleSubmit }>
<MuiThemeProvider>
<AppBar title="Registerd" />
<div>
<div className="column">
<TextField type="text" name="firstName"
value={ this.state.firstName }
onChange={ this.handleChange }
hintText="Your name.."
floatingLabelText="Name"
className={ firstNameErr ? ' showError' : '' }
/>
{ firstNameErr &&
<div style={ { color: "red", Bottom: 5 } }>{ firstNameErr }</div>
}
</div>
<div className="column">
<TextField type="text" name="lastName"
value={ this.state.lastName }
onChange={ this.handleChange }
hintText="Your Last name.."
floatingLabelText="Last Name"
className={ lastNameErr ? ' showError' : '' } />
{ lastNameErr &&
<div style={ { color: "red", paddingBottom: 5 } }>{ lastNameErr }</div>
}
</div>
<div className="column">
<TextField type="text" name="emailId"
value={ this.state.emailId }
onChange={ this.handleChange }
hintText="Your email id.."
floatingLabelText="Email Id"
className={ emailIdErr ? ' showError' : '' } />
{ emailIdErr &&
<div style={ { color: "red", paddingBottom: 5 } }>{ emailIdErr }</div>
}
</div>
<div className="column">
<TextField type="text" name="dob"
value={ this.state.dob }
onChange={ this.handleChange }
hintText="DD/MM/YYYY.."
floatingLabelText="Birth Date"
className={ dobErr ? ' showError' : '' } />
{ dobErr &&
<div style={ { color: "red", paddingBottom: 5 } }>{ dobErr }</div>
}
</div>
<div className="column">
<TextField type="text" name="phoneNumber"
onChange={ this.handleChange }
value={ this.state.phoneNumber }
hintText="Your phone number.."
floatingLabelText="Phone Number"
className={ phoneNumberErr ? ' showError' : '' } />
{ phoneNumberErr &&
<div style={ { color: "red", paddingBottom: 5 } }>{ phoneNumberErr }</div>
}
</div>
<div className="column">
<TextField type="password" name="password"
onChange={ this.handleChange }
value={ this.state.password }
hintText="Your password.."
floatingLabelText="Password"
className={ passwordErr ? ' showError' : '' } />
{ passwordErr &&
<div style={ { color: "red", paddingBottom: 5 } }>{ passwordErr }</div>
}
</div>
<div className="column1">
<TextField type="password" name="confirm_password"
onChange={ this.handleChange }
value={ this.state.confirm_password }
hintText="Your confirm password.."
floatingLabelText="Confirm Password"
className={ confirm_passwordErr ? ' showError' : '' } />
{ confirm_passwordErr &&
<div style={ { color: "red", paddingBottom: 5 } }>{ confirm_passwordErr }</div>
}
</div>
<input type="submit" value="Submit" />
</div>
</MuiThemeProvider>
</form>
</div >
</center>
)
}
}
export default Form;
如何将我的reactjs连接到mysql？我已经安装了mysql，并按照通用指令连接它，但它不起作用。它得到一个错误“TypeError:mysql.createConnection不是函数”。您应该使用NodeJS连接到后端（）。如果您已经安装了NodeJS，您可以通过
npm install mysqlmysql包。请试着问一个小而具体的问题。请阅读stackoverflow指南，了解如何提问以及您能问些什么
//server.js
const express = require( 'express' );
const PORT = process.env.PORT || 3000;
const app = express();
const Mysql = require( 'mysql' );
const connection = Mysql.createConnection( {
host: 'root',
user: 'root',
password: 'root',
database: 'testdb'
} );
// api here
app.post( '/register', function ( req, res )
{
var post = {
firstName: req.body.firstName,
lastName: req.body.lastName,
emailId: req.body.emailId,
dob: req.body.dob,
phoneNumber: req.body.phoneNumber,
password: req.body.password,
confirm_password: req.body.confirm_password
};
connection.query( 'select * from register', post, function ( err, result )
{
// send response here
res.json( { msg: 'success' } );
} );
} );
connection.connect( function ( err )
{
( err ) ? console.log( err ) : console.log( connection );
} );
require( './components/Form' )( app );
app.listen( PORT, () =>
{
console.log( 'app running on port { PORT }' );
} );