方法"/>
axios删除方法
我试图通过点击删除 api(mysql+node) 来删除用户。但不知何故我收到了一个错误
说 BAD REQUEST.
错误:
删除 http://localhost:7003/api/remove/2 404(未找到)
请参考下面的 index.js 和 react(Home.js)
Home.js:
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
const Home = () => {
const [data, setData] = useState([]);
const loadData = async () => {
const response = await axios.get("http://localhost:7003/api/get");
setData(response.data);
};
const deleteUser = (id) => {
console.log("clicked");
axios.delete(`http://localhost:7003/api/remove/${id}`);
loadData();
};
useEffect(() => {
loadData();
}, []);
return (
<div className="table-container">
<Link to={"/add"}>
<button>ADD USER</button>
</Link>
<table className="styled-table">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Location</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => {
return (
<tr key={item.id}>
<th>{index + 1}</th>
<td>{item.name}</td>
<td>{item.location}</td>
<td>{item.amount}</td>
<td>
<Link to={`/update/${item.id}`}>
<button>Edit</button>
</Link>
<button
onClick={() => {
deleteUser(item.id);
}}
>
Delete
</button>
<Link to={`/view/${item.id}`}>
<button>Edit</button>
</Link>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
export default Home;
`
索引.js:
const express = require("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-parser");
const mysql = require("mysql2");
const db = mysql.createPool({
host: "localhost",
user: "root",
password: "root",
database: "crud_contact",
});
app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(7003, () => {
console.log("Server is up and running @7003");
});
// app.get("/api/get",(req,res)=>{
// const sqlQuery ="insert into customer (name,location,amount) values ('Aditya','USA',500000)";
// db.query(sqlQuery,(error,result)=>{
// if(error){
// console.log(error)
// }
// res.send(result)
// });
// })
app.get("/api/get", (req, res) => {
const sqlQuery = "select * from customer";
db.query(sqlQuery, (error, result) => {
if (error) {
console.log(error);
}
res.send(result);
});
});
app.post("api/post", (req, res) => {
const { name, location, amount } = req.body;
const sqlInsertQuery =
"insert into customer (name,location,amount) values (?,?,?)";
db.query(sqlInsertQuery, [name, location, amount], (error, result) => {
if (error) {
console.log(error);
}
});
});
app.delete("api/remove/:id", (req, res) => {
const { id } = req.params;
const deleteQuery = "delete from customer where id = ?";
db.query(deleteQuery, [id], (error, result) => {
if (error) {
console.log(error);
}
});
});`
如果你能帮我找到我到底错在哪里,那将是很大的帮助。
回答如下:但不知何故,我收到一条错误消息,说 BAD REQUEST。
不是根据您向我们展示的错误:
错误:删除 http://localhost:7003/api/remove/2 404(未找到)
“未找到”不是“错误请求”响应,而是“未找到”响应。这意味着该资源在服务器上不存在。一眼就看出这里不一样了:
// this is found:
app.get("/api/get", (req, res) => {
// this is not found:
app.delete("api/remove/:id", (req, res) => {
post
和 delete
操作似乎缺少 URL 中的初始 /
。因此正在创建端点,但不是在您期望的 URL 上。添加/
以匹配get
操作。
更多推荐
axios删除方法
发布评论