ПРИЛОЖЕНИЕ MONEY EXPRESS С ИСПОЛЬЗОВАНИЕМ EXPRESS + AJAX

В этом уроке я собираюсь показать, как вы можете создать образец приложения, которое используется для отправки суммы от одного человека другому. Для этого мы собираемся использовать Express (с модулями Body Parser и CORS), а для внешнего интерфейса мы будем использовать Ajax для выполнения запроса.

Предположим, вы установили Live-Server для запуска нашего веб-приложения в браузере и nodemon. Если нет, перейдите на сайт и установите оба, используя следующее:

Для Live-сервера:

npm install -g live-server

И для Nodemon:

npm install -g nodemon

Это установит Live-Server и Nodemon на ваш компьютер глобально, что мы будем использовать позже.

Теперь давайте перечислим пункты как TODO:

В передней части:

  1. Создайте Index.html и создайте необходимый макет
  2. Добавьте JQuery и скрипт для выполнения вызова Ajax на сервер.
  3. Обработка ответа на вызов Ajax.

В бэк-энде

  1. Создать образец серверной части
  2. Добавьте подключение к MongoDB с помощью пакета Mongoose.
  3. Тестирование соединения.
  4. Добавить CORS для обработки совместного использования ресурсов между источниками

Давайте начнем. Создайте папку с именем front и войдите внутрь. Откройте папку в текстовом редакторе.

1. Создайте Index.html и создайте необходимый макет.

<!DOCTYPE html>
<html>
​
<head>
    <title>Money Transfer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
</head>
​
<body>
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <h1>Sending Money</h1>
            <hr>
​
            <div class="form-group">
                <label>Sender</label>
                <input type="text" id="sender" class="form-control" placeholder="Sender Name">
            </div>
​
            <div class="form-group">
                <label>Amount</label>
                <input type="number" id="amount" class="form-control" placeholder="Amount">
            </div>
​
            <div class="form-group">
                <label>Receiver</label>
                <input type="text" id="receiver" class="form-control" placeholder="Receiver Name">
            </div>
​
            <button class="btn btn-primary" onclick="onSendClicked()">Send</button>
        </div>
    </div>
</body>
​
</html>

Здесь я добавил Bootstrap, чтобы макет выглядел красиво. Это немного, я просто использовал классы форм и классы кнопок. Я также добавил идентификаторы для ввода, чтобы мы могли получить значение позже. Давайте добавим опцию прослушивания кликов.

2. Добавьте JQuery и скрипт для выполнения вызова Ajax на сервер.

  • Добавьте тег ‹script› ‹/script› прямо над тегом body.
  • Получите ссылку JQuery с сайта jQuery и получите ссылку на миниатюрный jquery 3.x.
  • Теперь продолжим.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  function onSendClicked() {
      const sender = $('#sender').val();
      const amount = $('#amount').val();
      const receiver = $('#receiver').val();
​
      console.log(sender, amount, receiver);
    }   
</script>

Здесь мы ссылались на поля ввода, используя $ ({ID OF INPUT FIELD}). Val (), чтобы получить значение поля ввода, а затем вошли в консоль.

  • Теперь о части вызова Ajax
  • После console.log (…)
const data = {
  sender: sender, 
  amount: amount, 
  receiver: receiver
};
​
$.ajax({
  url: 'http://localhost:3000/send',
  type: 'POST',
  data: JSON.stringify(userData),
  contentType: "application/json",
  success: function (res) {
    // Handle Response
  },
  error: function (err) {
    // Handle Error
  }
})

Здесь мы выполняем POST-запрос к бэкэнду. У нас есть сервер, работающий на PORT 3000, и / отправляем маршрут с данными в формате JSON. JSON.stringify конвертирует объект Javascript в JSON.

const data = {
  sender: sender, 
  amount: amount, 
  receiver: receiver
};
​
is converted to 
Eg: 
{
    sender: "Rubin",
    amount: 500,
    receiver: "Umesh"
}

Теперь перейдем к внутренней части:

1. Создайте простой бэкэнд.

Здесь мы создадим простой бэкэнд с помощью Express. BodyParser, CORS, Mongoose…

Шаги:

  1. Создайте папку, назовите ее обратно и войдите внутрь.
  2. откройте командную строку внутри и запустите npm init -y (-y - да, на все вопросы). Это создаст package.json внутри папки со значениями по умолчанию.
  3. Установите Express, BodyParser, CORS и Mongoose, используя следующую команду.
npm install --save express body-parser cors mongoose

Модуль CORS предназначен для предотвращения ошибки совместного использования ресурсов между сайтами, которая отображается в консоли браузера.

После завершения создайте файл с именем app.js в корне папки и добавьте этот код внутрь.

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
​
const app = express();
​
// This is for parsing the json sent using body
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
​
app.get('/', function (req, res, next) {
    res.send('Welcome to Express');
});
​
app.listen(3000, function () {
    console.log('Server running on PORT 3000');
});

Теперь давайте запустим nodemon внутри задней папки с помощью команды.

nodemon app.js

Это будет служить серверной частью PORT 3000, которую мы можем увидеть, используя localhost: 3000 в вашем браузере. Мы это видим.

Этот запрос мы указали в маршруте «/».

Давайте создадим маршрут отправки сообщения. Добавьте следующий код.

app.post('/send', function (req, res, next) {
    const sender = req.body.sender;
    const amount = req.body.amount;
    const receiver = req.body.receiver;
​
    res.json({
        sender,
        amount,
        receiver
    });
});

Пост-запрос должен быть выполнен с помощью POSTMAN.

Здесь мы отвечаем той же стоимости, полученной от клиента.

Теперь давайте выполним запрос из внешнего интерфейса. Заполните все поля и нажмите кнопку отправки. Откройте консоль в браузере, и вы увидите проблему CORS.

Теперь для этого добавьте эту строку перед app.use (bodyParser.json ());

// Add this
app.use(cors());
​
app.use(bodyParser.json());

Теперь снова выполните запрос, мы ничего не видим в консоли.

Добавьте console.log (res) в функцию успеха.

success: function (res) {
    console.log(res);
},
error: function (err) {
    console.log(err);
}

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

Да ... Получили ответ с данными. Давайте продолжим в другой части. Проверьте код спереди и сзади.

Спереди (Index.html)

<!DOCTYPE html>
<html>
​
<head>
    <title>Money Transfer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
</head>
​
<body>
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <h1>Sending Money</h1>
            <hr>
​
            <div class="form-group">
                <label>Sender</label>
                <input type="text" id="sender" class="form-control" placeholder="Sender Name">
            </div>
​
            <div class="form-group">
                <label>Amount</label>
                <input type="number" id="amount" class="form-control" placeholder="Amount">
            </div>
​
            <div class="form-group">
                <label>Receiver</label>
                <input type="text" id="receiver" class="form-control" placeholder="Receiver Name">
            </div>
​
            <button class="btn btn-primary" onclick="onSendClicked()">Send</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function onSendClicked() {
​
            const sender = $('#sender').val();
            const amount = $('#amount').val();
            const receiver = $('#receiver').val();
​
            const userData = {
                sender: sender,
                amount: amount,
                receiver: receiver
            };
​
            $.ajax({
                url: 'http://localhost:3000/send',
                type: 'POST',
                data: JSON.stringify(userData),
                contentType: "application/json",
                success: function (res) {
                    console.log(res);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
    </script>
</body>
​
</html>

Назад (app.js)

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
​
const app = express();
​
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
​
app.get('/', function (req, res, next) {
    res.send('Welcome to Express');
});
​
app.post('/send', function (req, res, next) {
    const sender = req.body.sender;
    const amount = req.body.amount;
    const receiver = req.body.receiver;
​
    res.json({
        sender,
        amount,
        receiver
    })
});
​
app.listen(3000, function () {
    console.log('Server running on PORT 3000');
});

Мы будем использовать Mongoose и Mongo DB в другом POST