@timofy

Как создать взаимодействие между сайтом и mysql?

Всем привет.
Прошу совета. Подскажите в каком направлении двигаться

Делаю тестовое задание чтобы устроиться на работу и не могу установить связь между моими скриптами и базой MySQL.
Тестовое задание называется "Комментарии". В задании сказано, что данные, которые пользователь будет вводить в поля (в инпуты), должны вноситься в БД MySQL.
Установил MySQL. Из командной строки MySQL работает. Но связь между приложением и БД установить не получается.
Установил в проэкт модуль для работы с MySQL. В поисках решения проблемы пробовал устанавливать модуль тремя разными командами: npm install mysql, npm install mysql --save и npm install mysql --save-dev. Когда в файле gulpfile.js, который находится в корне приложения, создаю подключение вот таким образом:

var mysql = require('mysql');

var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '0707',
    database : 'mysql'
});

 connection.connect(function(err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }

    console.log('connected as id ' + connection.threadId);
});


то соединение вроде бы устанавливается, о чем свидетельствует строка "connected as id 19" в командной строке Вебшторма. В этом же файле(gulpfile.js), создаю запрос и в ту же командную строку Вебшторма данные из базы выводятся. Но создать соединение с базой в приложении не получается. Между базой и браузером соединения нет. Когда в файле main.js, который находится в директории src/js, создаю подключение вот такой строчкой:

var mysql = require('mysql');

то в консоли браузера выводится ошибка: require is not defined.
Я конечно понимаю, что "require" - это метод Node и ее определения нет в той области видимости (в файле main.js). Но как все таки создать соединение между базой и моими скриптами - не могу понять.
Создавать соединение нужно через ajax (или get, post запросы)?
Или соединение с базой нужно устанавливать в файле gulpfile.js, а обмен данными осуществлять через ajax (get, post запросы)?
Или как?
Для наглядности пришлю файл с заданием и скриншот структуры моего проэкта

P.S. По этой ссылке:

Как вытащить данные из запроса к БД функцией connection.query в node.js (кроме conslole.log)?

пользователь Evansive советует создавать запросы к базе вот так:

app.get('/page', function(req, res) {
    connection.query("SELECT * FROM `table`",  function(err, result) {
        res.render('index.html', { object: result });
    });
});


Но объект "connection" будет не опреден, если этот запрос будет находится в файле main.js

Я пробовал в корне проэкта создать файл mysql.js, в котором создается подключение с mysql вот так:

var mysql = require('mysql');

var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '0707',
    database : 'mysql'
});


а после подключения вставил такую строку:

//= src/js/main.js

С помощью этой строки сюда импортируется файл main.js (плагином gulp-rigger).
В файле gulpfile.js написал вот так:

var path = {
    build: {
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/'
    },
    src: {
        html: 'src/*.html',
        js: 'mysql.js',              // вместо 'src/js/main.js'     !!!!!
        style: 'src/style/main.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        style: 'src/style/**/*.*',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};


вместо 'src/js/main.js' указал файл 'mysql.js'
и в файле main.js написал вот так:

connection.connect(function(err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }

    console.log('connected as id ' + connection.threadId);
});


После этого, при запуске проэкта, браузер не пишет, что например: connection is not defined. Но и не выводит в консоль браузера строку "connected as id ...". Т.е. связь между приложением(браузером) и базой похоже не устанавливаеться.

Куда копать? В каком направлении двигаться?
239abe7f89f44b4ca8f0e937dbdc77c5.png29034685fe0940c4a91ec22ce60f11fe.png
  • Вопрос задан
  • 1752 просмотра
Решения вопроса 2
@n-fom
Вам надо из браузера клиента через js (см. ajax) отправить данные в Node.JS сервер и уже там сохранить в БД
Ответ написан
saboteur_kiev
@saboteur_kiev
software engineer
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '0707',
database : 'mysql'
});

Уже из этого момента интуиция вам должна была подсказать, что работа с Mysql должна происходить между пользователем(браузером) и mysql, а между серверным бэкендом, который находится на том же localhost, где и сервер mysql.
А пользователь - просто данные пересылает из фронтенда в бэкенд.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@entermix
Я, конечно, не работаю с Node JS, но зачем Вам соединение с mysql в браузере?

Браузер работает с сервером (GET/POST/etc.), сервер с БД.
Ответ написан
@emp1re
Тестовое уровня junior +/ middle - , не думаю что вам стоит пробоваться на такую позицию.
Ответ написан
@timofy Автор вопроса
Из ответов я теперь понял, что данные из браузера должны отправляться через AJAX (get, post запросами). Теперь вопрос в следующем: как организовать взаимодействие с БД MySQL? Так понимаю, что данные отправленные с браузера post-запросом должны на сервере обработаться определенным скриптом, который устанавливает связь с MySQL и отправляет запросы к базе, записывая значения в базу и извлекая из нее нужные данные. В каком месте этот скрипт должен находится?

Вот здесь: https://metanit.com/web/javascript/13.2.php есть пример get-запроса и пример скрипта, обрабатывающего запрос:

запрос:
var request = new XMLHttpRequest();
// строка с параметрами для отправки
var body = "name=" + user.name + "&age="+user.age;
request.open("GET", "http://localhost:8080/postdata.php?"+body);


обрабатывающий скрипт на php:
<?php
$name = "Не известно";
$age = "Не известно";
if(isset($_GET['name'])) $name = $_GET['name'];
if (isset($_GET['age'])) $age = $_GET['age'];
echo "Ваше имя: $name  <br> Ваш возраст: $age";
?>


где этот скрипт должен находится при такой структуре проекта:
f55d2126faff4c15be3be7c203b111e8.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы