使用nodejs express时将表单数据插入mysql数据库

pqwbnv8z  于 2021-06-20  发布在  Mysql
关注(0)|答案(3)|浏览(469)

对于一个学校项目,我需要将数据从一个html表单插入到我的数据库中。问题是,我以前从未使用过nodejs、express、handlebars或javascript,而且我似乎不知道它是如何工作的,我目前在.hbs文件中有这个表单

  1. <div class="row">
  2. <form action="" method="post" class="col s12">
  3. <div class="row">
  4. <div class="col s3 offset-s1">
  5. <label>Sensor Type</label><br>
  6. <label>
  7. <input id="combo" class="with-gap" name="sensorType" type="radio"/>
  8. <span>Temperature & Humidity</span>
  9. </label><br>
  10. <label>
  11. <input id="temp" class="with-gap" name="sensorType" type="radio"/>
  12. <span>Temperature</span>
  13. </label><br>
  14. <label>
  15. <input id="humid" class="with-gap" name="sensorType" type="radio"/>
  16. <span>Humidity</span>
  17. </label>
  18. </div>
  19. </div>
  20. <div class="row">
  21. <div class="input-field col s3 offset-s1">
  22. <select id="sensorForest">
  23. <option value="" disabled selected>Choose your forest</option>
  24. <optgroup label="The Netherlands">
  25. <option value="streekbos">Streekbos Bovenkarspel</option>
  26. </optgroup>
  27. <optgroup label="United States of America">
  28. <option value="losAngeles">Los Angeles National Forest</option>
  29. </optgroup>
  30. </select>
  31. <label>Forest</label>
  32. </div>
  33. <div class="input-field col s3">
  34. <textarea id="textarea2" class="materialize-textarea" data-length="50"></textarea>
  35. <label for="textarea2">Enter sensor Location</label>
  36. </div>
  37. </div>
  38. <div class="row">
  39. <div class="input-field col s6 offset-s1">
  40. <div class="input-field col s6">
  41. <input id="latitude" type="text" class="validate">
  42. <label for="latitude">Latitude</label>
  43. </div>
  44. <div class="input-field col s6">
  45. <input id="longitude" type="text" class="validate">
  46. <label for="longitude">Longitude</label>
  47. </div>
  48. </div>
  49. </div>
  50. <div>
  51. <div class="row">
  52. <div class="col s12 offset-s1">
  53. <button class="btn waves-effect waves-light" id="submit">Submit
  54. <i class="material-icons right">send</i>
  55. </button>
  56. </div>
  57. </div>
  58. </div>
  59. </form>
  60. </div>

我还使用下面的脚本提取了表单中字段的值,但是我不认为我可以使用它,因为我必须使用nodejs

  1. <script>
  2. var submit = document.getElementById("submit");
  3. submit.onclick = function () {
  4. //var sensorType = document.getElementById("sensorType").value;
  5. var sensorForest = document.getElementById("sensorForest").value;
  6. var sensorLocation = document.getElementById("textarea2").value;
  7. var latitude = document.getElementById("latitude").value;
  8. var longitude = document.getElementById("longitude").value;
  9. console.log(sensorForest, sensorLocation, latitude, longitude);
  10. };
  11. </script>

有没有人知道我应该如何将数据发送到我的数据库,或者知道一个好的教程来解释我如何做?
谢谢您

blpfk2vs

blpfk2vs1#

要将nodejs/expressjs应用程序连接到数据库(mongodb、mysql等),您需要一个orm库。对于你的情况,我建议续写。所有信息http://docs.sequelizejs.com/

7kjnsjlb

7kjnsjlb2#

在将任何内容保存到数据库之前,必须先将其保存到服务器上。我建议使用内置 fetch 或者如果你想要更好的浏览器支持,请使用 axios , request-promise 或者 superagent . 所有这些软件包都可以在npm上找到

客户

在你的点击处理器下面

  1. fetch('http://localhost:3000/sensors', {
  2. method: 'POST',
  3. headers: {
  4. 'content-type': 'application/json'
  5. },
  6. body: JSON.stringify({
  7. sensorForest,
  8. sensorLocation,
  9. latitude,
  10. longitude,
  11. })
  12. })
  13. .then(function (results) {
  14. return results.json()
  15. })
  16. .then(function (results) {
  17. console.log('got results', results)
  18. })
  19. .catch(function (ex) {
  20. console.error(ex)
  21. })

依赖项

  1. npm init -y && npm i --save express body-parser

服务器

  1. const express = require('express')
  2. const { json } = require('body-parser')
  3. const app = express()
  4. const PORT = process.env.PORT || 3000
  5. app.post('/sensors', json(), (req, res, next) => {
  6. const body = req.body
  7. // ...save `body` to database
  8. // use mysql, sequelize, or knex
  9. res.send(body)
  10. })
  11. app.listen(PORT, () => console.info(`Server listening on port "${PORT}"`))
展开查看全部
bogh5gae

bogh5gae3#

不,你不需要orm库。你可以使用npm的mysql包

相关问题