要求未在控制台中定义。 node.js js mysql

Question

I am trying to pass some coordinates from mysql database to be marked on a map but am having trouble getting them. i have looked at a number of similar questions on stackoverflow and have not been able to find an answer. Would appreciate if someone could please point out where i have gone wrong.

getListings.js

var mysql = require('mysql');

config = {
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'xx',
  port: 'xxxx',
};

var connection = mysql.createConnection(config); 
connection.connect(function (err) {
  if (err) {
    console.log('error connecting:' + err.stack);
  }
  console.log('connected successfully to DB.');

  connection.query('SELECT listing_coords FROM listings', (err, rows) => {
    if (err) throw err;

    console.log('Data received from Db:\n');
    var results = JSON.parse(JSON.stringify(rows));
    module.exports = { results };
    console.log(results);
  });
});

Then in my script.js file i have

var { results } = require('./getListings');
      console.log(results);

I am getting an error in the browser console saying "require is not defined"

I will need to figure out how to pull the coordinates from mysql in order to plot them, there has to be a way? Do i have to build an api and use ajax? Thanks in advance for any help.

have updated my getListings.js file - it now displays in the string of data i need in the browser as a raw data packet

var mysql = require('mysql');
const express = require('express');
var app = express();
const bodyparser = require('body-parser');

app.use(bodyparser.json());

config = {
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'xx',
  port: 'xxxx',
};

var connection = mysql.createConnection(config); //added the line
connection.connect(function (err) {
  if (err) {
    console.log('error connecting:' + err.stack);
  }
  console.log('connected successfully to DB.');

  app.listen(5000, () => console.log('express server is running at 5000'));

  app.get('/listings', (req, res) => {
    connection.query(
      'SELECT listing_coords FROM listings',
      (err, rows, fields) => {
        if (!err) res.send(rows);
        else console.log(err);
      }
    );
  });

I have been unsuccessful to get the output to run in script.js. I will post the working code when its working.

Answer 1

I am getting an error in the browser console saying "require is not defined"

It is because require is not an API for frontend. It should be the syntax of backend(eg. nodeJS).

Do i have to build an api and use ajax?

If you wanna to send data from frontend to backend. Using ajax is possible but the main point is you need to have a backend server(eg. using Express module for nodeJS) to connect with the database(eg. mysql, postgresSQL).

---

Update on 14 Feb, 2021

My practise for doing this is to use ajax to send a request to the backend server from frontend.

//frontend
$.ajax
  ({
    url: "yourBackendServerUrl", //eg. localhost:8001/listing. Need modification based on your backend setting.
  })
  .done(function(data) {
     console.log(data)  //data should be the result from backend, then you can retrieve the data for frontend usage
});

For the CORS problem, you can install cors package. If you have a middleware in the global scope(aka app.use(cors()) ). Every time there are request, this middleware will run.

var express = require('express')
var cors = require('cors')
var app = express()
 
app.use(cors()) // pay attention to this line of code. 
 
app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Answer 2

The solution that I got to work is as follows:

getListings.js (this was nodeJS)

var mysql = require('mysql');
const express = require('express');
const bodyparser = require('body-parser');
var app = express();

app.use(bodyparser.json());

**app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  next();
});**// I believe this is a middleware function

config = {
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'xx',
  port: 'xxxx',
};

var connection = mysql.createConnection(config); //added the line
connection.connect(function (err) {
  if (err) {
    console.log('error connecting:' + err.stack);
  }
  console.log('connected successfully to DB.');
});

app.listen(5000, () => console.log('express server is running at 5000'));// this can be any port that isnt currently in use

app.get('/listings', (req, res) => {
  connection.query(
    'SELECT listing_coords FROM listings',
    (err, rows, fields) => {
      if (!err) res.send(rows);
      else console.log(err);
    }
  );
});

in my script.js file i was missing the following

      $.get('http://localhost:5000/listings', function (data, status) {
        console.log('Cords Data', data);

I believe that is the jQuery ajax

Then in the heading of my html I needed the following

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script type = "module" defer src="script.js"></script>

thanks to everyone that helped me with this. especially @tsecheukfung01.

I dont fully understand all of the pieces so it will take me a while to fully understand this and be able to recreate this on my own. All part of the journey!