javascript - 如何使用 node.js 将文本框数据(来自 react.js)存储到 mongoDB
问题描述
如何使用 node.js 将文本框数据(来自 react.js)存储到 mongoDB 中?
我想在人们单击按钮后立即存储文本(应该存储在 mongoDB 云中)。所有的连接都成功了。
这是我的代码
App.js(在服务器中)
const mongoose = require("mongoose");
const express = require("express");
const app = express();
// Connection URL
const url = "mongodb+srv://dbname:pass@cluster0.gkqcs.mongodb.net/myApp?etryWrites=true&w=majority";
// Use connect method to connect to the Server
mongoose.connect(url,).then(() =>
{
console.log("connection successful");
}).catch((err) => console.log("not connected"));
App.js(使用 react.js 的前端)
function App() {
return (
<div className="App">
<div className="container">
<div className="eleContainer">
<input type="text" className="txtAdd" placeholder="Type New Word"/>
<button className="addNew">Add to Dictionary</button>
<br />
<br />
<input type="text" className="searchWords" placeholder="Search here"/>
<br />
<br />
<ol className="vocabularyList">
<li>words</li>
</ol>
</div>
</div>
</div>
);
}
解决方案
前端
function App() {
const [textAddValue, updateInput] = useState("");
const addNewText = () =>{
//send form data to server.
//use library like axios.
if(!textAddValue){ alert('input empty'); return;}
fetch('http://localhost:5000/sendText', {
headers: {
'Cache-Control': 'no-cache',
"Content-Type": "application/json",
'Accept': "application/json",
},
method: "POST",
body: JSON.stringify({text: textAddValue})
})
.then(res=>res.json())
.then(result=>console.log(result))
.catch(err=>{console.log(err)})
}
return (
<div className="App">
<div className="container">
<div className="eleContainer">
<input type="text" className="txtAdd" placeholder="Type New Word" value={textAddValue} onChange={(e)=>updateInput(e.target.value)}/>
<button className="addNew" onClick={addNewText}>Add to Dictionary</button>
<br />
<br />
<input type="text" className="searchWords" placeholder="Search here"/>
<br />
<br />
<ol className="vocabularyList">
<li>words</li>
</ol>
</div>
</div>
</div>
);
}
后端
const mongoose = require("mongoose");
const express = require("express");
const app = express();
//configure app for incoming post data
const expressJson = express.json();
const bodyParser = express.urlencoded({extended: true});
app.use([expressJson, bodyParser])
// Connection URL
const url = "mongodb+srv://dbname:pass@cluster0.gkqcs.mongodb.net/myApp?etryWrites=true&w=majority";
// Use connect method to connect to the Server
mongoose.connect(url,).then(() =>
{
console.log("connection successful");
}).catch((err) => console.log("not connected"));
app.post('/sendText', (req, res)=>{
const text = req.body.text;
//you need to create mongoose schema to save. saveSchema here I'm asuming.
saveSchema.save({text: text})
.then(res=>{res.json("Saved")})
.catch(err=>{console.log(err); res.json("Error! cannot save")}
});
app.listen(5000, ()=>{console.log("Server running at port 5000")});
推荐阅读
- python - tensorflow python 3.7.2使用anaconda导入错误
- javascript - HTML表格中的highcharts没有获得x轴键
- c++ - 在下面的 C++ 代码行中使用 (n/8) 和 (n*7/8) 的目的是什么?
- android - 安装 Firebase 和地图后反应本机致命错误和应用程序崩溃
- java - 奇怪的情况:JcomboBox.getSelectedItem() 返回一个不可转换为 String 的对象
- python - 使用字符串中的十六进制字符附加字符串
- umbraco - 从 Umbraco 中的直接父级访问内容
- angular - Angular 库包依赖项
- excel - Excel VBA 在列中查找字符串,然后删除工作表中的所有剩余行
- python - 媒体文件路径中的双斜杠