使用axios从mysql db中删除行。React作为前端，node.js和express.js作为后端

我正在尝试使用axios和React.js作为前端，node.js和express.js作为后端，从mysql数据库中删除该行。当我点击删除按钮时，这两个请求被视为发送。一个不显示任何内容，另一个则将其放入DevTools

“无法删除/删除员工”

此外，它不会在终端中显示任何

console.log

语句

以下是存在删除路由问题的路由的代码

          const express = require("express");
      const app = express();
      const cors = require("cors");
      const bodyParser = require("body-parser");
      const logger = require("morgan");
      const port = process.env.PORT || 3301;
      var mysql = require("mysql");
      app.use(cors());
      const SELECT_ALL_USER_QUERY = 'SELECT * FROM employees';
      const DELETE_QUERY = 'Delete from employees where id =';
    app.use(logger('dev'));
    app.use(cors());
    app.use(bodyParser.urlencoded({extended : true}));
    app.use(bodyParser.json());
    var con = mysql.createConnection({
      host: 'localhost',
      user:'root',
      password:"password",
      database:'People'
    });
    con.connect(function (err){
      if(err) {
        console.log("Error Conneting To DB",err)
      } else {
        console.log("Connection Established");
      }
    });

    //get Requets

    app.get('/employees', (req, res) => {
        con.query(SELECT_ALL_USER_QUERY, (err, result) => {
            if(err) {
                res.send(err);
            } else {
              let obj ={
                data : result
              }
              console.log(obj);
              res.send(result);
            }
        })
    });

    //Post Request
    app.post('/employees',(req,resp)=>{

      let data = {name:req.body.name , surname:req.body.surname, id:req.body.id};
      let sql_query = "INSERT INTO employees SET ?"
      console.log("DAATA UPLOADED")
      let query = con.query(sql_query,data,(err,resp)=>{
        if(err) {
          console.log(err);
        }
    });
    });

    //Delete Request

    // app.delete('/employees',(req,resp)=>{
    //   // DEBUG:
    //   let data = {id:req.body.id};
    //   let sql_query = "Delete from employees where id = ?"
    //   let query = con.query(sql_query,data,(err,resp)=>{
    //     if(err){
    //       console.log(err);
    //     }
    //     else {
    //       console.log(resp);
    //     }
    //   })
    // })
    // app.delete('/employees', function(req, res){
    //   console.log(con.query('DELETE FROM employees WHERE id =' + req.body.id));
    //   //con.query('DELETE FROM employees WHERE id ='+req.body.id, function(err, results){
    //     // if(err) throw err;
    //   // });
    //
    //   // req.flash('success', 'Project Deleted');
    //   // res.location('/admin');
    //   // res.redirect('/admin');
    //  });

    app.delete("/employees/:id", (req, res) => {
      console.log("Request",req.params.id);
      let { ID } = req.params.id;
      let sql = `DELETE FROM employees WHERE ID = ${req.params.id}`;
      console.log("HI",sql);


      // delete a row with id = req.params.id
      conn.query(sql, (error, results, fields) => {
        if (error) return console.error("ERROR HI",error.message);
        res.status(200).send(results);
        console.log("Deleted Row(s):", results.affectedRows);
      });
    });


    app.listen(4000, () => {
        console.log('server running on port 4000')
    })
    module.exports = app;

对于ReactJs，有一个函数

deleteName

，其中使用axios编写了删除调用。代码如下：

      import React from 'react';
        import './App.css';
        import axios from 'axios';

        class App extends React.Component {
            constructor(props){
              super(props);
              this.onNameChange = this.onNameChange.bind(this);
              this.onSurnameChange = this.onSurnameChange.bind(this);
              this.onIdChange = this.onIdChange.bind(this);
              this.editName = this.editName.bind(this);
            this.state = {
              data:'',
              name:'',
              surname:'',
              id:''
            }
        }

        componentDidMount() {
          axios.get('http://localhost:4000/employees').then((response,err)=> {
            if(err) {
              console.log('err');
            }
            this.setState((prevstate) =>
              ({
              data: response.data
              })
            );
          })
        }
        handleSumbit(e){
        axios.post('http://localhost:4000/employees',{
            name: this.state.name,
            surname: this.state.surname,
            id:this.state.id,
          }).then((response,err)=>{
          if(err) {
            console.log("Error While Posting Data",err);
          }
        console.log("RESPONSE FROM POST",response);
        })
        }
        onNameChange(e){
          this.setState({
            name:e.target.value
          });
        }
        onSurnameChange(e) {

        this.setState({
          surname:e.target.value
        })

        }
        onIdChange(e){
          this.setState({
            id:e.target.value
          });
        }
        editName(e,firstname,lastname,id){
          this.setState({
            name:firstname,
            surname:lastname,
            id:id
          });
        }
        deleteName(e,value) {


         axios.delete('http://localhost:4000/delete/' + value).then((response) => {
      // this only runs on success
      console.log("RESPONSE FROM POST", response.data);
    }, (err) => {
      // this only runs on error
      console.log("Error While Posting Data", err);
    });

}
        }


        render() {
      const {data} = this.state;
      return (
    <div className="container">
      <div>
        <label className="">Name</label>
        <input type="text" name="" value={this.state.name} onChange={(e)=>this.onNameChange(e)}/>
      </div>
      <div>
        <label className="">Surname</label>
        <input type="text" name="" value={this.state.surname} onChange={(e)=>this.onSurnameChange(e)}/>
      </div>
      <div>
        <label className=""> YOUR ID </label>
        <input type="number" name="" value={this.state.id} onChange={(e)=>this.onIdChange(e)}/>
      </div>
      <div>
        <button type="button" onClick={(e)=> this.handleSumbit(e)}>Sumbit</button>
      </div>

        <div className="main-container">
        <h1>Name</h1>
        {
        data && data.map((data,key) => {
          return(
            <React.Fragment>
                <div className="child">
                    {data.name}
                    <button onClick={(e)=> this.editName(e,data.name,data.surname,data.id)}>Edit</button>
                    <button onClick={(e)=> this.deleteName(e,data.id)}>Delete</button>
                </div>
            </React.Fragment>
          )
        })
      }
      </div>
    </div>
    )

        }

      }

    export default App;

从“React”导入React；
导入“/App.css”；
从“axios”导入axios；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onNameChange=this.onNameChange.bind（this）；
this.onSurnameChange=this.onSurnameChange.bind（this）；
this.onIdChange=this.onIdChange.bind（this）；
this.editName=this.editName.bind（this）；
此.state={
数据：“”，
名称：“”，
姓：''，
id:“”
}
}
componentDidMount（）{
axios.get（）http://localhost:4000/employees）。然后（（响应，错误）=>{
如果（错误）{
console.log（'err'）；
}
this.setState（（prevstate）=>
({
数据：response.data
})
);
})
}
handleSumbit（e）{
轴心柱http://localhost:4000/employees',{
名称：this.state.name，
姓：this.state.姓氏，
id:this.state.id，
}).然后（（响应，错误）=>{
如果（错误）{
日志（“发布数据时出错”，err）；
}
日志（“来自POST的响应”，响应）；
})
}
onNameChange（e）{
这是我的国家({
名称：e.target.value
});
}
onSurnameChange（e）{
这是我的国家({
姓氏：e.target.value
})
}
onIdChange（e）{
这是我的国家({
id:e.target.value
});
}
editName（e，firstname，lastname，id）{
这是我的国家({
姓名：名字，
姓:姓,，
id:id
});
}
deleteName（e，值）{
axios.delete（'http://localhost:4000/delete/“+值）。然后（（响应）=>{
//这只取决于成功
日志（“来自POST的响应”，RESPONSE.data）；
}，（错误）=>{
//这只在出错时运行
日志（“发布数据时出错”，err）；
});
}
}
render（）{
const{data}=this.state；
返回(
名称
this.onNameChange（e）}/>
姓
this.onSurnameChange（e）}/>
你的身份证
this.onIdChange（e）}/>
this.handleSumbit（e）}>Sumbit
名称
{
data&&data.map（（数据，键）=>{
返回(
{data.name}
this.editName（e，data.name，data.姓氏，data.id）}>Edit
this.deleteName（e，data.id）}>Delete
)
})
}
)
}
}
导出默认应用程序；

错误“无法删除/employees”表示名为

/employees

的路由不存在。您需要调用路由

/delete/：id

另一方面，我注意到您在axios中没有正确处理错误。

。然后

函数接受两次回调，第一次在成功时执行，另一次在出错时执行

总之，这两件事结合起来，试着这样做：

axios.delete('http://localhost:4000/delete/' + value).then((response) => {
  // this only runs on success
  console.log("RESPONSE FROM POST", response.data);
}, (err) => {
  // this only runs on error
  console.log("Error While Posting Data", err);
});

---

您正在向名为

/employees

的路由发送请求，但后端正在处理名为

/delete/：id

的路由。你需要在其中一个地方更改路线当我打电话到

/delete/：id

时，它说“cannotelete/employees/678`@SAMAR，这没有任何意义。如果您请求

/delete/678

，则不可能得到该错误。您可能没有向我们展示其他一些重要的代码。@请编辑您的问题并将其放入其中，代码在注释中的格式不正确。从这里我可以看到，虽然路线名称很好。前端必须仍然以某种方式向

/employees

发送请求。错误

无法删除/employees/678

字面意思是“您试图调用路由/employees/678，但它不存在”。因此前端仍在调用错误的URL。更新了有问题的我的代码。请您看一看。@SAMAR实际上，从更深一层阅读React代码后，看起来您正在调用

GET/employees

路径，而这实际上是引发错误的地方。不允许删除。是否存在名为

/employees

的路由？