LINUX.ORG.RU
Форум — Web-development  

Допишите код, пожалуйста

 , ,


1

1

Если у кого есть опыт написания серверной стороны на expressjs сделайте так чтобы код внизу заработал. Уже задолбался читать про expressjs, не хватает примера 

node myapp.js
Этот код находится на кленте. Ввожу цифры, нажимаю кнопку, цифры уходят на сервер там обрабатываются 
<!DOCTYPE html>
<html>
<body>

  <input type="number" id="myNumber0">
  <input type="number" id="myNumber1">
  <input type="number" id="myNumber2">

<button onclick="calc()">Try it</button>

</body>
</html>

и вот сeрвер возвращает 

<!DOCTYPE html>
<html>
<body>

  <input type="string" id="myNumber3">
  <input type="string" id="myNumber4">
  <input type="string" id="myNumber5">
function calc() {
            const V0 = parseFloat(document.getElementById("myNumber0").value);
  const V1 = parseFloat(document.getElementById("myNumber1").value);
  const V2 = parseFloat(document.getElementById("myNumber2").value);
    for (let i of [V0,V1,V2]){
      if (isNaN(i)) {
       alert(`Oops, it is ${i}`);
      } else {
   document.getElementById("myNumber3").value = V0 + V1;
  document.getElementById("myNumber4").value = V1 + V2;
  document.getElementById("myNumber5").value = V2 + V0;
      }
    }
  };

</body>
</html>

← Не могу правильно вставить рекламный блок Yandex 220x300 (коряво в Firefox)
PHP. Зачем подготавливать запросы при выборке данных? →

Answer | GPT-4o Model

Для того чтобы ваш код заработал, нужно сделать несколько шагов:

Настроить сервер на Node.js с использованием Express.js.
Настроить клиентскую часть для отправки данных на сервер и получения ответа.
Обработать данные на сервере и вернуть результат клиенту.

Шаг 1: Настройка сервера на Node.js с использованием Express.js

Создайте файл myapp.js и добавьте в него следующий код:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use(express.static('public'));

app.post('/calculate', (req, res) => {
  const { V0, V1, V2 } = req.body;
  if (isNaN(V0) || isNaN(V1) || isNaN(V2)) {
    return res.status(400).send('Invalid input');
  }

  const result = {
    myNumber3: V0 + V1,
    myNumber4: V1 + V2,
    myNumber5: V2 + V0
  };

  res.json(result);
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Шаг 2: Настройка клиентской части

Создайте папку public и поместите в нее файл index.html с следующим содержимым:

<!DOCTYPE html>
<html>
<body>

  <input type="number" id="myNumber0">
  <input type="number" id="myNumber1">
  <input type="number" id="myNumber2">

  <button onclick="calc()">Try it</button>

  <input type="text" id="myNumber3">
  <input type="text" id="myNumber4">
  <input type="text" id="myNumber5">

  <script>
    function calc() {
      const V0 = parseFloat(document.getElementById("myNumber0").value);
      const V1 = parseFloat(document.getElementById("myNumber1").value);
      const V2 = parseFloat(document.getElementById("myNumber2").value);

      fetch('/calculate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ V0, V1, V2 })
      })
      .then(response => response.json())
      .then(data => {
        document.getElementById("myNumber3").value = data.myNumber3;
        document.getElementById("myNumber4").value = data.myNumber4;
        document.getElementById("myNumber5").value = data.myNumber5;
      })
      .catch(error => {
        console.error('Error:', error);
      });
    }
  </script>

</body>
</html>

Шаг 3: Запуск сервера

Установите необходимые зависимости:

npm install express body-parser

Запустите сервер:

node myapp.js

Теперь, когда вы откроете index.html в браузере и введете числа, они будут отправлены на сервер, обработаны, и результат будет возвращен и отображен на странице. Резюме

Мы настроили сервер на Node.js с использованием Express.js для обработки данных, отправленных с клиентской части. Клиентская часть отправляет данные на сервер с помощью fetch, сервер обрабатывает данные и возвращает результат, который затем отображается на странице.

goingUp ★★★★★
()
Ответ на: комментарий от saufesma

Кстати, вставь свой код в генератор картинок, получится не хуже.

https://imageup.ru/img2/4876690/code.jpg.html - в этих старых ИИ есть своя прелесть.

Irma ★★
()
Последнее исправление: Irma (всего исправлений: 1)
Ответ на: комментарий от saufesma

За тебя перевести текст ошибки?

Держи:

Запрос кросс-источника заблокирован: политика одного и того же источника запрещает чтение удаленного ресурса по адресу file:///calculate. (Причина: запрос CORS не http).
gruy ★★★★★
()
Ответ на: комментарий от saufesma

file:///calculate

Нужно открывать в браузере не как file: а http://localhost и т.д. Как я понимаю, чатгпт создал пример на 3000 порту, и по идее expressjs будет раздавать твой index.html из папки public, то есть нужно открыть http://localhost:3000/index.html

goingUp ★★★★★
()
Последнее исправление: goingUp (всего исправлений: 1)
Ответ на: комментарий от goingUp

Так у меня такого файла и нет. Переделал 

fetch('http://localhost:3000/calculate'....

app.post('http://localhost:3000/calculate',...


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/calculate. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
saufesma ★
() автор топика
Ответ на: комментарий от saufesma

Возьмешь впс, возьмешь домен, в веб-интерфейсе регистратора домена сделаешь днс А запись на айпи твоего впса, на впсе запустишь node myapp.js (через systemd или я не знаю как) и все будет открываться по домену. Вообще первый пост был намеком, что чтобы побыстрее раздуплится в новой теме chatGPT самое то. Если что, это был сервис https://www.phind.com/ Он платный.

goingUp ★★★★★
()
Ответ на: комментарий от goingUp

Не так всё просто. https://ru.wikipedia.org/wiki/ChatGPT 

Доступ к сервису ограничен в таких странах, как Китай, Россия[4], Белоруссия, Афганистан, Венесуэла, Туркменистан, Иран[5]. Также ранее сервис не был доступен для жителей Украины[6] и Италии[7].

https://chatgpt.com/ 

Unable to load site

saufesma ★
() автор топика
Последнее исправление: saufesma (всего исправлений: 1)
Ответ на: комментарий от saufesma

А когда все было просто) Ну ок, впс это виртуальный сервер, на нем можно например что-то захостить. Где его брать и какого выбрать регистратора домена можно спросить на лорчике отдельно. Я юзаю Hetzner, но там та же проблема, что и с чатгпт) Регистратора домена вообще посоветовать не могу, вечно пользовался какой-то рандомной фигней)

goingUp ★★★★★
()
← Не могу правильно вставить рекламный блок Yandex 220x300 (коряво в Firefox)
Web-development
PHP. Зачем подготавливать запросы при выборке данных? →