首页 > 解决方案 > 根据用户输入向 SQL 表添加“x”行

问题描述

我有一个应用程序,它通过 Vue 具有可编辑的表行,这些表行从数据库中显示。截至目前,有一个按钮(添加行),单击该按钮会调用查询以将行插入数据库。有没有办法让用户输入自动添加 x 行,而无需多次单击(添加行)按钮?

这是前端按钮:

input(style="margin-right: 50px;" type="submit" value="Add Line  " @click="addLine(query_number)")

这是调用后端查询的 Vue 函数

addLine(query_number) {
  let line = {
    "quote_number": this.query_number
  }

  this.$http.post(`/api/quote/line/?quote_number=${query_number}`, line).then(res => {
    if(res.data.error) {
      this.$root.updateError(res.data.error)
    } else {
      this.$router.go(`/quote/line/?quote_number=${query_number}`), this.$root.updateSuccess(res.data.message)
    }
  }).catch(error => {
    this.$root.updateError(error)
  })
},

最后是邮政电话:

.post(checkAuthentication, (req, res) => {
  let request = new sql.Request(pool)
  let add_newLine = `
  insert into quote_line (
    quote_number,
    line_number,
    item_id,
    created_at
  )
  output Inserted.*
  Values (
    ${req.query.quote_number},
    ((select count(quote_number) as [count]
      from quote_line
      where quote_number = ${req.query.quote_number || ''}) + 1),
    'new item line',
    getDate()
  )`

  request.query(add_newLine, (error, result) => {
    if(error) {
      throw new Error(error)
      res.json({"error": `${error}`})
    }
    res.json({"message": `Successfully added a new line to ${req.query.quote_number}`})
  })
})

标签: sql-servervue.js

解决方案


创建一个 UI 元素,用户可以在其中输入要添加的行数,并根据该输入修改当前添加行的函数以添加多个,或者在循环中调用它。

正如 Dale 所说,我们可能需要查看代码以进一步提供帮助。


推荐阅读