mysql - 我想从我的数据存储的 sql 数据库连接反应 js 注册应用程序
问题描述
它是注册表单代码。我想将此表单数据存储在 mysql 数据库中
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;
是数据库连接文件代码
//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 }' );
} );
1
如何将我的 reactjs 连接到 mysql?我已经安装了 mysql 并按照通用说明进行连接,但它不起作用。它收到错误“TypeError:mysql.createConnection 不是函数”。
解决方案
您应该使用 NodeJS 连接到您的后端 ( https://nodejs.org/en/download/ )。如果你已经安装了 NodeJS,你可以安装mysql package
vianpm install mysql
推荐阅读
- python - 在 Python 中,我将如何更改文本文件中的时间列表?
- python - 为什么基于 iLocation 的布尔索引不起作用?
- unity3d - 我有两个场景,但是当添加新的 ui 时,它一直将它添加到第一个场景中,而从来没有添加到新的场景中,这是为什么呢?
- python - 返回无的 Python 函数
- node.js - vscode“去定义”可以在node_modules中显示实际的js代码而不是打字稿版本吗?
- android - 从 Flutter 的方法通道访问 Kotlin 中的参数数据
- kubernetes - kubeadmin 用户可以创建超过 ClusterResourceQuota 硬限制的资源吗?
- tensorflow - TensorFlow:整个训练过程中的 CosineDifference ObjFunc 常量
- reactjs - 固定表布局与更新的值不匹配 - reactjs
- c - 如何在c中解析tcp数据包有效负载