Express 需要关于使用react js、node js、MySQL和webpack存储和检索数据的帮助吗
以下是用于创建UI的react代码。我添加了将数据存储到MySQL的代码。这部分不起作用 ContactUsClass.jsExpress 需要关于使用react js、node js、MySQL和webpack存储和检索数据的帮助吗,express,reactjs,react-router,webpack-dev-server,node-mysql,Express,Reactjs,React Router,Webpack Dev Server,Node Mysql,以下是用于创建UI的react代码。我添加了将数据存储到MySQL的代码。这部分不起作用 ContactUsClass.js import React from 'react'; require('./styles.css'); //my SQL code (not working) - start require('node-mysql'); var mysql = require('mysql'); //my SQL part - end class ContactUsClass exten
import React from 'react';
require('./styles.css');
//my SQL code (not working) - start
require('node-mysql');
var mysql = require('mysql');
//my SQL part - end
class ContactUsClass extends React.Component
{
constructor(props)
{
super(props);
this.state = {
text: {
n: '',
m: '',
p: '',
msg:''
}
};
this.handleSubmit = this
.handleSubmit
.bind(this);
}
handleChange(pty, event)
{
const text = this.state.text;
text[pty] = event.target.value;
this.setState({text: text});
}
handleSubmit(event)
{
alert('Text field value is: ' + this.state.text.e + '\nExtra:' + this.state.text.c + '\nTA:' + this.state.text.msg);
//mysql code (not working) - start
var connection = mysql.createConnection({host: '127.0.0.2', user: 'root', password: 'admin', database: 'dbcontactus'});
connection.connect(function (err) {
if (!err) {
alert("Database is connected ... ");
} else {
alert("Error connecting database ... ", err);
}
});
var user = {
'clientname': 'CH Yamini Sankar',
'email': 'mail@mail.com',
'phonenumber': '9999454551',
'message': 'hello world'
};
connection.query('Insert into tbcontactus SET ?', user, function (err, res) {
connection.end();
if (!err)
alert('The solution is: ', res);
else
alert('Error while performing Query.', err);
}
);
//mysql code (not working) - end
}
render()
{
return (
<div className="mainbox">
<div className="heading">
Contact Us</div>
<div><br/></div>
<div>
<input
className="tbox"
type="text"
placeholder="Name"
value={this.state.text.e}
onChange={this
.handleChange
.bind(this, 'e')}/>
<input
className="tbox"
type="text"
placeholder="E-mail ID"
value={this.state.text.c}
onChange={this
.handleChange
.bind(this, 'c')}/>
</div>
<div>
<input
className="tpbox"
type="text"
placeholder="Mobile/Phone no: +1"
value={this.state.text.p}
onChange={this
.handleChange
.bind(this, 'p')}/>
</div>
<div>
<textarea
className="mbox"
type="text"
placeholder="Message"
value={this.state.text.msg}
onChange={this
.handleChange
.bind(this, 'msg')}/>
</div>
<div>
<button className="btn" onClick={this.handleSubmit}>Submit</button>
</div>
</div>
);
}
}
export default ContactUsClass;
{
"name": "hrportal",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot",
"test": "node ContactUsConn.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.0",
"mysql": "github:mysqljs/mysql",
"node-mysql": "^0.4.2",
"popup": "0.0.3",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
.mainbox {
width: 40%;
margin: 0 auto;
height: 500px;
background-color: white;
}
.lbox {
width: 50px;
float: left;
height: 100px;
background-color: maroon;
}
.rbox {
width: 50px;
float: right;
height: 100px;
background-color: maroon;
}
.heading {
width: 25%;
padding: 15px;
border-bottom-style: solid;
border-radius: 5px;
border-bottom-color: gray;
margin: 0 auto;
font-size: 24px;
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
color: gray;
}
.tbox {
width: 48%;
height: 35px;
padding: 4px;
margin: 1%;
margin-bottom: 10px;
box-sizing: border-box;
}
.tpbox {
width: 98%;
height: 35px;
padding: 4px;
margin: 1%;
margin-bottom: 10px;
box-sizing: border-box;
}
.mbox {
width: 98%;
padding: 4px;
height: 125px;
margin: 1%;
margin-bottom: 10px;
box-sizing: border-box;
}
.btn {
width: 100px;
height: 35px;
padding: 4px;
margin: 0 auto;
}
body {
background-color: #F0EDED;
}
使用上述五个文件，我希望将数据从网页存储到数据库，反之亦然 您正试图通过客户端代码直接访问MySQL数据库，但这应该在您的服务器上完成。有关这方面的更多信息，请参阅 在客户端，您应该通过ajax调用提交数据。然后，在服务器上解析请求并将数据插入数据库 例子 在您的
ContactUs您正试图通过客户端代码直接访问MySQL数据库，但这应该在您的服务器上完成。有关这方面的更多信息，请参阅 在客户端，您应该通过ajax调用提交数据。然后，在服务器上解析请求并将数据插入数据库 例子 在您的
ContactUs你在做服务器渲染吗？不。我没有做任何服务器渲染。我只想把用户输入的数据存储在MySQL数据库中。你在做服务器渲染吗？不，我没有做任何服务器渲染。我只想把用户输入的数据存储在MySQL数据库中，谢谢。有没有其他不使用ajax的方法呢。我添加了一个例子和一个指向另一个SO问题的链接，这应该可以解释为什么你不能通过客户端访问数据库。您不必使用AJAX，只需定期提交表单，但这显然会重新加载您的应用程序，您可能不希望这样做；app.post（'/api/contact-us'，（req，res）=>{var-connection=mysql.createConnection（{host:'127.0.0.2'，user:'root'，password:'admin'，database:'dbcontactus'}）；connection.connect（函数（err）{if（！err）{alert（“connected…”；}）；connection.query（'Insert into tbcontactus SET？'，用户，函数（err，res）{connection.end（）；if（err）alert（'Error'，err）；}）.Still数据未存储在数据库中。在何处以及如何调用server.js？我所写的不是一个完整的解决方案，您必须自己填补空白。server.js文件应该在您的服务器上运行。它不是一个完整的解决方案，只是一个显示从何处接收用户提交的片段。您需要了解服务器端如果您不确定如何执行此操作，请编写脚本。谢谢Paul。有没有其他不使用ajax的方法来执行此操作。请提供示例。我添加了一个示例和指向另一个SO问题的链接，该问题应该解释为什么您无法通过客户端访问数据库。您不必使用ajax，您可以定期提交表单，但是这显然会重新加载你的应用程序，你可能不希望这样。在server.js中添加了如下代码：app.use（express.bodyParser（））；app.post（'/api/contact-us'，（req，res）=>{var-connection=mysql.createConnection（{host:'127.0.0.2'，user:'root'，password:'admin'，database:'dbcontactus'}）；connection.connection（函数（err）{if（！err）{alert（“connected…”）；}}}）；connection.query（'Insert into tbcontactus SET？'），用户，函数（err，res）{connection.end（）；if（err）alert（'Error'，err）；}）.Still数据未存储在数据库中。在何处以及如何调用server.js？我所写的不是一个完整的解决方案，您必须自己填补空白。server.js文件应该在您的服务器上运行。它不是一个完整的解决方案，只是一个显示从何处接收用户提交的片段。您需要了解服务器端如果您不确定如何执行此操作，请编写脚本。
var config = {
entry: './ContactUsMain.js',
output: {
path: './',
filename: 'BundleContactUs.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['latest', 'react']
}
}, {
test: /\.css?$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader'
}
]
},
node: {
net: 'empty',
tls: 'empty',
dns: 'empty',
fs: 'empty'
}
}
module.exports = config;
{
"name": "hrportal",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot",
"test": "node ContactUsConn.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.0",
"mysql": "github:mysqljs/mysql",
"node-mysql": "^0.4.2",
"popup": "0.0.3",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
.mainbox {
width: 40%;
margin: 0 auto;
height: 500px;
background-color: white;
}
.lbox {
width: 50px;
float: left;
height: 100px;
background-color: maroon;
}
.rbox {
width: 50px;
float: right;
height: 100px;
background-color: maroon;
}
.heading {
width: 25%;
padding: 15px;
border-bottom-style: solid;
border-radius: 5px;
border-bottom-color: gray;
margin: 0 auto;
font-size: 24px;
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
color: gray;
}
.tbox {
width: 48%;
height: 35px;
padding: 4px;
margin: 1%;
margin-bottom: 10px;
box-sizing: border-box;
}
.tpbox {
width: 98%;
height: 35px;
padding: 4px;
margin: 1%;
margin-bottom: 10px;
box-sizing: border-box;
}
.mbox {
width: 98%;
padding: 4px;
height: 125px;
margin: 1%;
margin-bottom: 10px;
box-sizing: border-box;
}
.btn {
width: 100px;
height: 35px;
padding: 4px;
margin: 0 auto;
}
body {
background-color: #F0EDED;
}
class ContactUs extends React.Component {
handleSubmit(event) {
var user = {
'clientname': 'CH Yamini Sankar',
'email': 'mail@mail.com',
'phonenumber': '9490430491',
'message': 'hello world'
};
fetch('/api/contact-us', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
}
render() {
// ...
}
}
app.use(express.bodyParser());
app.post('/api/contact-us', (req, res) => {
// connect to your MySQL database and insert the data
})