最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

axios删除方法

网站源码admin41浏览0评论

axios删除方法

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
操作。

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论