使用NodeJS Express时将表单数据插入MySQL数据库

Question

For a school project I need to insert data from a html form into my database. The problem is, I never worked with NodeJS, Express, Handlebars or JavaScript before and I cant seem to figure out how it works, I currently have this form in my .hbs file

<div class="row">
    <form action="" method="post" class="col s12">
    <div class="row">
        <div class="col s3 offset-s1">
            <label>Sensor Type</label><br>
            <label>
                <input id="combo" class="with-gap" name="sensorType" type="radio"/>
                <span>Temperature & Humidity</span>
            </label><br>
            <label>
                <input id="temp" class="with-gap" name="sensorType" type="radio"/>
                <span>Temperature</span>
            </label><br>
            <label>
                <input id="humid" class="with-gap" name="sensorType" type="radio"/>
                <span>Humidity</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s3 offset-s1">
            <select id="sensorForest">
                <option value="" disabled selected>Choose your forest</option>
                <optgroup label="The Netherlands">
                    <option value="streekbos">Streekbos Bovenkarspel</option>
                </optgroup>
                <optgroup label="United States of America">
                    <option value="losAngeles">Los Angeles National Forest</option>
                </optgroup>
            </select>
            <label>Forest</label>
        </div>
        <div class="input-field col s3">
            <textarea id="textarea2" class="materialize-textarea" data-length="50"></textarea>
            <label for="textarea2">Enter sensor Location</label>
        </div>
    </div>
    <div class="row">
        <div class="input-field col s6 offset-s1">
            <div class="input-field col s6">
                <input id="latitude" type="text" class="validate">
                <label for="latitude">Latitude</label>
            </div>
            <div class="input-field col s6">
                <input id="longitude" type="text" class="validate">
                <label for="longitude">Longitude</label>
            </div>
        </div>
    </div>
    <div>
        <div class="row">
            <div class="col s12 offset-s1">
                <button class="btn waves-effect waves-light" id="submit">Submit
                    <i class="material-icons right">send</i>
                </button>
            </div>
        </div>
    </div>
    </form>
</div>

Ive also managed to extract the values of the fields in the form using the following script, but I dont think I can use this since I have to use NodeJS

<script>
var submit = document.getElementById("submit");

submit.onclick = function () {
    //var sensorType = document.getElementById("sensorType").value;
    var sensorForest = document.getElementById("sensorForest").value;
    var sensorLocation = document.getElementById("textarea2").value;
    var latitude = document.getElementById("latitude").value;
    var longitude = document.getElementById("longitude").value;

    console.log(sensorForest, sensorLocation, latitude, longitude);
};
</script>

Does anyone know how I'm supposed to send the data to my database or know a good tutorial that explains me how to do it?

Thank you

Answer 1

To connect your NodeJS/ExpressJS application to a database (mongodb, mysql,...) you need an ORM library. For your case i suggest Sequelize. All infos at http://docs.sequelizejs.com/

Answer 2

no you don't need an ORM library. You can just use mysql package from npm

Answer 3

Well before you save anything to a database, you have to get it to your server. I recommend using built-in fetch or if you want better browser support use axios , request-promise or superagent . All of these packages can be found on npm

Client

Underneath your click handler

fetch('http://localhost:3000/sensors', {
  method: 'POST',
  headers: {
    'content-type': 'application/json'
  },
  body: JSON.stringify({
    sensorForest,
    sensorLocation,
    latitude,
    longitude,
  })
})
.then(function (results) {
  return results.json()
})
.then(function (results) {
  console.log('got results', results)
})
.catch(function (ex) {
  console.error(ex)
})

Dependencies

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

Server

const express = require('express')
const { json } = require('body-parser')

const app = express()

const PORT = process.env.PORT || 3000

app.post('/sensors', json(), (req, res, next) => {
  const body = req.body
  // ...save `body` to database
  // use mysql, sequelize, or knex
  res.send(body)
})

app.listen(PORT, () => console.info(`Server listening on port "${PORT}"`))