1

Есть некий файл index.html в котором нет ничего особенного, но к нему подключен файл homePageHadnler.js.
В файле расположены несколько функций проверки ввода данных и когда все проверки будут успешно пройдены, должен быть вызван метод из другого файла содержащего функцию формирования SQL запроса.

Код homePageHadnler.js:

function handlerReg() {
    const login = document.forms.reg.login
    const password = document.forms.reg.password

    const args = [login, password]

    //..

    checkErrors(args)
}

async function checkErrors(args) {
    const errors = document.forms.reg.querySelectorAll('.error')

    if (errors.length === 0) {
        let response = await fetch('./database/sqlBilder', {
        method: 'POST',
        body: 'name=Vasya'
        })

        if (response.ok) {
            alert("Запрос выполнен: " + response.status);
        } else {
            alert("Ошибка HTTP: " + response.status);
        }
    }
}

Код подключаемого файла:

const pool = require('./database/pool')

function query (code, table, args){
    if (code === 1){
        let query = `INSERT INTO ${table} VALUES (${args})`
        console.log(query)
        return query
    }
}

По советам из комментариев, написал ajax-запрос. Он успешно говорит о том, что смог достучаться до нужной страницы (status = 200), но ничего не возвращает и не печатает в консоли.

Как тогда стоит изменить данный код, чтобы через запрос отправлялся весь набор аргументов (думаю сделать это как словарь, но не уверен, что так будет правильно) и самое главное, как получать данные на странице формирования SQL запроса?

PS: На данный момент если я ставлю вывод в консоле на сервере

console.log('Строка аргументов: ' + request.body)

возвращается undefined.

10
  • Походу вашу программу надо запускать прогой electron а не node. Верните require в изначальный вид
    – DiD
    10 янв 2021 в 8:22
  • Т.е. мне стоит подключить данный фреймворк, вернуть require и все будет работать? А есть иные методы решения данной проблемы, т.е. хотелось бы разобраться из-за чего она возникает и как её решали раньше и как сейчас? 10 янв 2021 в 8:53
  • вы пытаетесь с client-side (из браузера) сделать require модуля с пулом коннектов? 10 янв 2021 в 11:27
  • Я пытаюсь сделать форму регистрации/авторизации, где после проверки данных должен формироваться запрос к базе. Соответственно функционал проверки в одном файле, подключение базы в другом, формирование запроса в третьем. Мне требуется их связать. 10 янв 2021 в 11:31
  • Ничего подключать не нужно. Просто попробуйте выполнить команду electron index.html из папки со скриптами.
    – DiD
    10 янв 2021 в 11:53

1 ответ 1

2

На сервере

  • должен быть подключен body-parser

  • должен быть прописан соответствующий обработчик (в примере - app.post('/', ...))


const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.set('view engine', 'ejs');
app.set('views', path.join(process.cwd(), 'views'));


app.get('/', (req, res) => {
  res.render('index', {});
});

app.post('/', (req, res) => {
  res.json({
    query: req.query,
    body: req.body
  });
});


const port = 3000;
const hostname = 'localhost';
app.listen(port, hostname, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

Отправка данных с клиента submitFetch:

    <script type="text/javascript">
      function getFormData() {
        const formEl = document.getElementById('exampleForm');
        const formData = new FormData(formEl);
        return formData;
      }

      function getFormDataJSON() {
        const formData = getFormData();
        const plainFormData = Object.fromEntries(formData.entries());
        const formDataJsonString = JSON.stringify(plainFormData);
        return formDataJsonString;
      }

      async function submitFetch(ev) {
        const btn = ev.target;

        ev.preventDefault();
        btn.setAttribute('disabled', true);
        
        let json;
        try {
          const formData = getFormDataJSON();
          const response = await fetch(
            '/',
            {
              method: 'POST',
              body: formData,
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
              }
            }
          );

          if (!response.ok) {
            throw Error(response.statusText || 'Something wrong');
          }

          json = await response.json();
        } catch (err) {
          console.error(err);
        }

        btn.removeAttribute('disabled');

        document.getElementById('exampleConsole').innerText = JSON.stringify(json, null, 2);
      }
    </script>

Структура проекта:

Запуск npm run start

package.json

{
  "name": "http-server-for-static",
  "version": "0.0.1",
  "main": "src/index.js",
  "license": "MIT",
  "scripts": {
    "start": "nodemon --watch src ./src/index.js"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/body-parser": "^1.19.0",
    "@types/ejs": "^3.0.5",
    "@types/express": "^4.17.9",
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7"
  },
  "engines": {
    "node": ">=12.0.0"
  }
}

src/index.js

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.set('view engine', 'ejs');
app.set('views', path.join(process.cwd(), 'views'));


app.get('/', (req, res) => {
  res.render('index', {});
});

app.post('/', (req, res) => {
  res.json({
    query: req.query,
    body: req.body
  });
});


const port = 3000;
const hostname = 'localhost';
app.listen(port, hostname, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

views/index.ejs

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style type="text/css">
      html, body {
        height: 100%;
      }
    </style>

    <script type="text/javascript">
      function getFormData() {
        const formEl = document.getElementById('exampleForm');
        const formData = new FormData(formEl);
        return formData;
      }

      function getFormDataJSON() {
        const formData = getFormData();
        const plainFormData = Object.fromEntries(formData.entries());
        const formDataJsonString = JSON.stringify(plainFormData);
        return formDataJsonString;
      }

      async function submitFetch(ev) {
        const btn = ev.target;

        ev.preventDefault();
        btn.setAttribute('disabled', true);
        
        let json;
        try {
          const formData = getFormDataJSON();
          const response = await fetch(
            window.location.href || '/',
            {
              method: 'POST',
              body: formData,
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
              }
            }
          );

          if (!response.ok) {
            throw Error(response.statusText || 'Something wrong');
          }

          json = await response.json();
        } catch (err) {
          console.error(err);
        }

        btn.removeAttribute('disabled');

        document.getElementById('exampleConsole').innerText = JSON.stringify(json, null, 2);
      }
    </script>
  </head>
  <body>
    <div class="h-100">
      <div class="container h-100">
        <div class="d-flex align-items-center justify-content-center h-100">
          <div class="d-flex flex-column">
            <div class="text align-self-center p-2">

              <form method="post" enctype="multipart/form-data" id="exampleForm">
                <div class="mb-3">
                  <label for="exampleAccount" class="form-label">Account</label>
                  <input type="text" name="account" class="form-control" id="exampleAccount">
                </div>
                <div class="mb-3">
                  <label for="examplePassword" class="form-label">Password</label>
                  <input type="password" name="password" class="form-control" id="examplePassword">
                </div>
                <button type="button" class="btn btn-outline-primary" onclick="submitFetch(event)">Submit</button>
              </form>

            </div>
          </div>
          <div class="d-flex flex-column">
            <div class="text align-self-center p-2">
              <pre style="font-size: 10px" class="mt-3" id="exampleConsole"></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

8
  • Я проверю это решение в ближайшее время, но у меня есть вопрос можно ли вообще решить данную задачу без использования фреймворков и сторонних библиотек? Я имею ввиду либо полный отказ от них, либо их минимальное использование. Например, я сейчас в проекте пользовался mysql2, dotenv, nodemon и jest. 12 янв 2021 в 5:31
  • “есть вопрос можно ли вообще решить данную задачу без использования фреймворков” сформулируйте задачу о которой вы спрашиваете 12 янв 2021 в 5:38
  • Ну я имею ввиду реализацию механизма отправки информации на сервер через этот ajax запрос и соответственно получение этого запроса и ответ на него со стороны сервера. Другими словами можно ли сделать, то что вы написали только используя базовые возможности? Просто мне интересно понять как всё должно работать без тех упрощений, которые позволяют фреймворки. 12 янв 2021 в 5:54
  • 1) ajax - не фреймворк, а базовая браузерная технология (и fetch - уже второе её поколение) 2) вы пишете веб-приложение и если у вам есть база данных то вам никуда не уйти от клиент-серверной архитектуры. да, всю работу, даже сейчас, можно свести к подобию cgi-scriptов и использовать те же подходы, что использовались 15-20 лет назад в сайтах на perl (напр. HTML::Mason) и php 3/4, но это не рационально. 12 янв 2021 в 6:11
  • У меня тогда возникает вопрос: в интернете говорится о том, что желательно уметь работать с какими-то вещами на определённом низком уровне (не 20-летнем конечно). Я это понимаю так, что если я понимаю и могу написать сервер используя node из коробки, то в целом у меня не будет проблем, чтобы поднять сервер используя экспресс. Я согласен с тем, что изобретать велосипед и использовать его в проектах для продажи нет смысла. Стоит ли тогда вообще пытаться писать в начале на простых технологиях? Да и вообще есть ли смысл их изучать? 12 янв 2021 в 6:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.