Как перенести основную логику приложения на сервер?

Question

Есть десктопное (electron) приложение - шифровальщик. Стоит задача переработать его в веб. Естественно, основная логика шифрования и дешифровки с ключами шифрования должна лежать и работать на сервере. Клиент должен вводить текст в textarea id="text" , нажимать button, фронтенд логика отправляет клиентский текст на сервер, сервер шифрует и отправляет на фронтенд, фронтенд получает зашифрованный текст и выводит его в textarea id="cryptedtext".

В качестве упрощенного примера: есть index.html, который app.get('/', fuction(req, res) { res.sendFile(__dirname + '/index.html'); }); Например такой:

<textarea> id="X" </textarea>
<p style="text">Введите второе число</p>
<textarea> id="y" </textarea>
<button id="summ" onclick="??????" > Сложить</button>

И функция на сервере:

function summData(x, y) {
var z = x+y;
return z
}
summData();

?????? ; //Как-то нужно отправить z на клиент в textarea id="summ"

Суть вопроса в коде обозначена "??????"

Answer 1

Для обращения к серверу нужно использовать ajax-запрос, сейчас это делают с помощью fetch.

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

сервер с роутом, отдающим index.html, и роутом, который вычисляет сумму
шаблон страницы

Сервер:

const express = require('express');
const cors = require('cors');
const path = require('path');

const app = express();
app.use(cors());
app.options('*', cors());
app.use(express.json());

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


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

app.post('/api/sum', (req, res) => {
  const values = Object.values(req.body || {});
  const sum = values.reduce((acc, val) => acc + val, 0);
  res.json({ data: sum });
});

const PORT = 3000;
const HOST = 'localhost';
app.listen(PORT, HOST, () => console.log('Server starting...'));

Шаблон страницы на ejs:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <script type="text/javascript">
      async function getSum() {
        const resEl = document.getElementById('result');
        resEl.innerHTML = '';
        
        try {
          const x = +(document.getElementById('x').value) || 0;
          const y = +(document.getElementById('y').value) || 0;
          let res = await fetch("http://localhost:3000/api/sum", {
            method: 'POST',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ x, y })
          });
          if (!res.ok) {
            console.log(res);
            throw new Error( res.statusText || res.status );
          }

          const { data } = await res.json();
          resEl.innerHTML = data;
        } catch (err) {
          console.error(err);
          alert('Произошла ошибка...');
        }
      }
    </script>
  </head>
  <body>
    <h1>Hello</h1>
    <div>
      <label>первое число: <input id='x' type="number" value="1" required /></label>
      <label>второе число: <input id='y' type="number" value="2" required /></label>
      <br />
      <button onclick="getSum()">сложить</button>
    </div>
    <div style="margin-top: 1em">Результат: <span id="result"></span></div>
  </body>
</html>

Пример работы:

БЛОГ НА HUSL

Как перенести основную логику приложения на сервер?

Ответы (1 шт):