So I have a question.
This is my server.js program:
const express = require('express');
const mysql = require('mysql');
const app = express();
// Create a connection to the database
const db = mysql.createConnection({
host: 'localhost', // Your host
user: 'root', // Your database username
password: 'Ej28*abrt',// Your database password
database: 'my_p5js_db' // Your database name
});
// Connect to the database
db.connect((err) => {
if (err) throw err;
console.log('Connected to database');
});
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500'); // Allows all origins
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'content-type, Authorization');
if (req.method === 'OPTIONS') {
return res.sendStatus(200);
}
//res.header('Access-Control-Allow-Methods', 'GET, POST');
//res.sendStatus(200);
next();
});
app.use(express.json()); // To parse JSON bodies
let myFunc = function (req, res, next) {
console.log(`This is middleware ${req.method} ${req.originalUrl}` );
next();
}
app.use(myFunc);
//%req.(COLUMNNAME)
app.post('/postData', (req, res) => {
//delete postData
console.log("Received POST request with data:");
rankNo=req.body.rankNo;
noOfHours=req.body.noOfHours;
noOfMinutes=req.body.noOfMinutes;
noOfSeconds=req.body.noOfSeconds;
noOfMilliseconds=req.body.noOfMilliseconds;
const sqlQuery = `INSERT INTO recordsSW (rankNo, noOfHours, noOfMinutes, noOfSeconds, noOfMilliseconds) VALUES (${rankNo}, ${noOfHours}, ${noOfMinutes}, ${noOfSeconds}, ${noOfMilliseconds});`;
db.query(sqlQuery, (err, results) => {
if(err) throw err;
})
});
// Create an endpoint to serve the SQL data
app.get('/data', (req, res) => {
const sqlQuery = 'SELECT * FROM recordsSW;'; // Replace with your SQL query
db.query(sqlQuery, (err, results) => {
if (err) throw err;
res.json(results);
});
});
// Start the server
app.listen(3000, () => {
console.log('Server started on port 3000');
});
this is my myExample.js program:
console.log("Sending request...");
fetch('http://localhost:3000/postData', {
method: 'POST',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify({ //COMMENT OUT
rankNo:3,
noOfHours:5,
noOfMinutes:19,
noOfSeconds:54,
noOfMilliseconds:345
})
})
fetch('http://localhost:3000/data')
.then(response => response.json())
.then(data => console.log(data))
and this is my index.html program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript in VS Code</title>
</head>
<body>
<script src="myExample.js"></script>
</body>
</html>
So basically I want to update the table :
| id | rankNo | noOfHours | noOfMinutes | noOfSeconds | noOfMilliseconds |
+----+--------+-----------+-------------+-------------+------------------+
| 1 | 0 | 0 | 0 | 0 | 0 | |
+----+--------+-----------+-------------+-------------+------------------+
with the row:
| 2 | 3 | 5 | 19 | 54 | 345 |
where the id is auto-increment.
The first time I run the index.html I get the initial table with the row above attached, and so it shows in my sql terminal when I type in the query: SELECT * FROM table
Next, I reload the page and yet the same table shows up, but the one in mysql gets one more row attached, the same one except for the id which is 3. Then when I keep reloading, at every reload the table in the mysql terminal shows with TWO more rows attached per page reload.
This is the network output:
Screenshot
Is it because of the preflight response I’m getting? Thanks in advance!
2