ПРИЛОЖЕНИЕ 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:
В передней части:
- Создайте Index.html и создайте необходимый макет
- Добавьте JQuery и скрипт для выполнения вызова Ajax на сервер.
- Обработка ответа на вызов Ajax.
В бэк-энде
- Создать образец серверной части
- Добавьте подключение к MongoDB с помощью пакета Mongoose.
- Тестирование соединения.
- Добавить 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…
Шаги:
- Создайте папку, назовите ее обратно и войдите внутрь.
- откройте командную строку внутри и запустите npm init -y (-y - да, на все вопросы). Это создаст package.json внутри папки со значениями по умолчанию.
- Установите 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