Question

我知道在如何用％20替换“”（空格）的问题已在SO上提出，但我需要知道可以在哪里实现-我正在使用 React本机作为我的前端，而 NodeJS（ExpressJS）作为我的后端连接到 PostgreSQL数据库。

是否可以使用bodyparser urlencoded实现这一目标？我只需要1或2个查询中的全部内容就可以了。

我的前端部分：（在componentDidMount上调用）

  getData("username")
  .then(data => data)
  .then(value => {
    this.setState({username: value})
  fetch(`http://xxx.xxx.xx.xx:6969/api/hours/unlock/'${value}'`)    // replace " " mit %20 ?!?!?! 
  .then(res => res.json())
  .then(result => {
    console.log("** UuNamMe **" + this.state.username)
    console.log("Res from  UnlockTabelle : " + result)
    console.log("Res from  UnlockTabelle[0] : " + result[0])
  })
  .catch(err => console.log("ErrorLog: @unlock : " + err))
  })
  .catch(err => console.log(err))

我的后端部分：

  static unlockUser(username, callback) {
    db.query(`SELECT * FROM unlock WHERE name = '${username}'`, (err, res) => {
      if (err.error) {
        callback(err);
      }
      callback(res);
    });
  }

  static lockUser(username, callback) {
    db.query(`DELETE FROM unlock WHERE name = '${username}'`, (err, res) => {
      if (err.error) {
        callback(err);
      }
      callback(res);
    });
  }

router.get("/unlock/:username", (req,res) => {
  const username = req.params.username
  Hours.unlockUser(username, (err, result) => {
    if(err) {
      return res.json(err)
    }
    return res.json(result)
  })
})

router.delete("/lock/:username" , (req, res) => {
  const username = req.params.username
  Hours.lockUser(username, (err, result) => {
    if(err) {
      return res.json(err)
    }
    return res.json(result)
  })
})

如果我想对URL进行编码，以用％20 替换“” ，那会发生什么？在我的bodyparser后端或前端（如果有）是什么样子？

Answer 1

您可以使用encodeURIComponent在前端进行操作：

fetch(`http://xxx.xxx.xx.xx:6969/api/hours/unlock/'${encodeURIComponent(value)}'`)

Answer 2

或者，您可以将相关的headers添加到您的fetch语句中，如下所示，

fetch(`http://xxx.xxx.xx.xx:6969/api/hours/unlock/'${value}'`, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})

希望这会有所帮助！

Answer 3

好吧，我刚刚注意到，如果我从' '中删除'${value}'，它确实可以工作-检查空格并替换它们还是更好，因为这似乎是自动发生的。

在fetchcall中将“”替换为％20

3 个答案: