我如何能从输入值发布到数据库?

Question

我想从这里的输入发送post请求到数据库，我是初学者，并试图做到这一点，有人可以帮助我这里请我要做什么才能实现我的目标?

import { useState, useEffect } from "react";
import axios from "axios";
import Task from "./Task";
import "./App.scss";
function App() {
//Value of Input
const [val, setVal] = useState("");
const [todos, setTodos] = useState([]);
const [message, setMessage] = useState([]);
const addTodos = async (e) => {
if (val == "") return;
e.preventDefault();
const res = await axios
.post("http://localhost:8000/message")
.then((response) => console.log(response))
.catch((error) => console.log(error));
/** */
setTodos([...todos, val]);
setVal("");
/** */
};
useEffect(() => {
const fetchProducts = async () => {
const res = await axios.get("http://localhost:8000/message");
setMessage(res.data);
};
fetchProducts();
}, []);
const handleDelete = (id) => {
setTodos(todos.filter((_, key) => key !== id));
}; //#endregion
return (
<div className="App">
{/** On change values*/}
<form onSubmit={addTodos}>
<input
onChange={(e) => setVal(e.target.value)}
value={val}
type="text"
/>
<button type="submit">Add</button>
</form>
<ul>
{todos.map((todo, key) => (
<Task todo={todo} key={key} myKey={key} handleDelete={handleDelete} />
))}
</ul>
{message.map((e) => (
<div>{e.todo}</div>
))}
</div>
);
}
export default App;

//服务器js

const express = require("express");
const cors = require("cors");
const { Client } = require("pg");
const client = new Client({
user: "jj",
host: "localhost",
database: "dbname",
password: "rootuser",
port: 5432,
});
client.connect();
const app = express();
app.use(cors());
app.use(express.json());
app.get("/message", async (req, res) => {
const { rows } = await client.query(`SELECT * from todo`);
res.send(rows);
});
app.listen(8000, () => {
console.log(`Server is running on port 5174.`);
});

我是否也应该在node js中为同一服务器创建一个post请求的路径，然后在react中使用useEffect做同样的事情?

Answer 1

你想在你的server.js文件中添加一个新的路由，像这样:

app.get("/message", async (req, res) => {
const { rows } = await client.query(`SELECT * from todo`);
res.send(rows);
});
app.post("/message", async (req, res) => {
// run some logic in the database
});

这将使它在前端，当你调用GET请求/message，然后它将运行app.get("/message")代码，但当你调用POST请求/message，它将运行app.post代码。

希望对你有帮助。

注:您可能需要运行一些中间件来解析POST请求上的数据。本质上，POST请求的想法是客户端将发送一些数据，如JSON，到请求的主体，然后您将使用中间件将请求的主体解析为可编辑的JS对象，这些对象将用于与数据库做一些事情。