无法使用vue和express与axios一起发布

时间:2019-07-30 15:21:36

标签: vue.js post axios

使用Vue 3.8.3和Express 4.16.4

尝试使用Axios将POST请求发送到url / task

路由在task.js中设置

router.post("/task", (req, res) => {
  if (!req.body) {
    res.status(400)
    res.json({
      error: "Bad Data for POST"
    })
  } else {
    // console.log("req.body.Level: " + req.body.Level);
    Task.create(req.body)
      .then(() => {
        console.log("I am the then... not logging this");
        res.send("Task Added")
      })
      .catch(err => {
        console.log("I am the catch... is logging this");
        res.send("Error: " + err)
      })
  }
})

在task.js中,正在记录Task.create在.catch(...)中的console.log语句,但不在.then(...)中的console.log语句中。

我可以将其用于删除,获取和放置,但是发布不起作用

该组件具有方法,

addNewTask() {
      axios.post("/api/task", {
          Level: this.Levelname,
          Year: this.Yearname,
          Question: this.Questionname,
          Answer: this.Answername,
          Topic: this.Topicname,
          Sub_topic: this.Sub_topicname,
          Question_type: this.Question_typename,
          Marks: this.Marksname,
          Question_number: this.Question_numbername,
          Part: this.Partname,
          Sub_part: this.Sub_partname
        })
        .then((res) => {
          this.Levelname = ''
          this.Yearname = ''
          this.Questionname = ''
          this.Answername = ''
          this.Topicname = ''
          this.Sub_partname = ''
          this.Question_typename = ''
          this.Marksname = ''
          this.Question_numbername = ''
          this.Partname = ''
          this.Sub_part = ''
          this.getTasks()
        }).catch((err) => {
          console.log(error)
        })
    },

该项目使用一个明确的后端server.js

var express = require("express")
var bodyParser = require("body-parser")

var tasks = require("./routes/tasks")
var cors = require("cors")

var port = 3000

var app = express()
app.use(cors())

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: false
}))

app.use("/api", tasks)

app.listen(port, function() {
  console.log('Server started on port ' + port)
})

快递服务器在命令行中提供

 INSERT INTO `physics_tbls` (`id`,`Level`,`Year`,`Question`,`Answer`,`Topic`,`Sub_topic`,`Question_type`,`Marks`,`Question_number`,`Part`,`Sub_part`) VALUES (DEFAULT,?,?,?,?,?,?,?,?,?,?,?);

很明显,这些值没有达到目标。

我这里缺少什么吗?

用于更新数据库的put请求可以很好地工作。这是一个例子,

在tasks.js中

router.put("/task/:id", (req, res) => {
  if (!req.body) {
    res.status(400)
    res.json({
      error: "Bad Data....!"
    })
  } else {
    Task.update({
        Level: req.body.Level,
        Year: req.body.Year,
        Question: req.body.Question,
        Answer: req.body.Answer,
        Topic: req.body.Topic,
        Sub_topic: req.body.Sub_topic,
        Question_type: req.body.Question_type,
        Marks: req.body.Marks,
        Question_number: req.body.Question_number,
        Part: req.body.Part,
        Sub_part: req.body.Sub_part
      }, {
        where: {
          id: req.params.id
        }
      })
      .then(() => {
        res.send("Task Updated")
      })
      .error(err => res.send(err))
  }
})

以及组件中的

updateTask(id) {
      // axios.put(`/api/task/${this.id}`, {
      axios.put('/api/task/' + id, {
          Level: this.Levelname,
          Year: this.Yearname,
          Question: this.Questionname,
          Answer: this.Answername,
          Topic: this.Topicname,
          Sub_part: this.Sub_partname,
          Question_type: this.Question_typename,
          Marks: this.Marksname,
          Question_number: this.Question_numbername,
          Part: this.Partname,
          Sub_part: this.Sub_partname
        })
        .then((res) => {
          this.Levelname = ''
          this.Yearname = ''
          this.Questionname = ''
          this.Answername = ''
          this.Topicname = ''
          this.Sub_topicname = ''
          this.Question_typename = ''
          this.Marksname = ''
          this.Question_numbername = ''
          this.Partname = ''
          this.Sub_partname = ''
          this.isEdit = false
          this.getTasks()
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },

谢谢

0 个答案:

没有答案