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

Пожалуйста, прочтите Часть 1 серии, прежде чем двигаться дальше.

Давай продолжим. Теперь мы будем использовать mongoose для выполнения необходимой операции вставки транзакции и получения всех сохраненных транзакций.

Я собираюсь использовать mLabs для подключения к базе данных Mongo. Сделайте следующее:

  • регистр
  • Войдите в систему, затем подтвердите учетную запись, нажав ссылку для подтверждения, отправленную по электронной почте.

Предполагая, что вы уже завершили вышеуказанные процессы.

Вы увидите что-то вроде этого.

Сначала создадим базу данных.

  1. Нажмите Создать новый.
  2. Затем выберите «Тип плана» «Песочница» для облачного провайдера Amazon и продолжите.

3. Выберите ближайший к вам регион. Я выбираю Европу (Ирландия) (eu-west-1) и продолжаю.

4. Дайте имя базе данных. Я выберу полный стек, затем продолжу и отправлю заказ.

Теперь, когда мы создали базу данных.

Давайте создадим пользователя. Выберите вкладку пользователя и нажмите Добавить пользователя базы данных.

дайте логин и пароль. Я также выберу admin для пользователя и admin для пароля. (это будет изменено или база данных будет удалена в целях безопасности). и нажмите создать. Теперь у нас есть пользователь с учетными данными: admin и admin для пароля. Теперь давайте возьмем необходимую ссылку на mongodb, которая

скопируйте выделенную строку. и сохраните его где-нибудь, скорее всего, в блокноте.

Теперь сосредоточимся на серверной части

Давайте перейдем к 2. Добавьте подключение к MongoDB с помощью пакета Mongoose.

  • Создайте файл с именем model.js и напишите следующий код.
const mongoose = require('mongoose');
mongoose.Promise = global.Promise;
​
const Schema = mongoose.Schema;
​
mongoose.connect('mongodb://admin:[email protected]:63016/fullstack', {
    useMongoClient: true
}, function (err) {
    if (err) {
        throw err;
        return;
    }
    console.log('Connected to Database');
});
​
const transctionScheme = new Schema({
    sender: {
        type: String
    },
    amount: {
        type: Number
    },
    receiver: {
        type: String
    }
});
​
const Transaction = mongoose.model('Transction', transctionScheme);
​
module.exports = {
    Transaction
}

Теперь здесь строка mongodb://admin:[email protected]:63016/fullstack — это тот же текст, который мы скопировали ранее, заменив ‹dbname› на имя пользователя и ‹dbpassword› на пароль. Также добавлен обратный вызов для проверки соединения.

Здесь мы создали схему (схему, показывающую, какие поля нам нужны в таблице транзакций). Создал таблицу транзакций, а затем, наконец, просто экспортировал ее для последующего использования в app.js.

3. Тестирование соединения.

запустите nodemon app.js, и мы увидим следующее в консоли или командной строке.

Хорошо. Теперь мы подключились к базе данных. Давайте двигаться вперед.

Добавьте ссылку на модель в app.js

const Model = require('./model');

Теперь мы можем использовать Transaction в нашем app.js через переменную Model.

Давайте изменим маршрут «/», чтобы вернуть все транзакции. Измените маршрут get(‘/’), чтобы получить все транзакции.

// Initially
app.get('/', function (req, res, next) {
    res.send('Welcome to Express');
});
​
// Converted to
app.get('/', function (req, res, next) {
    Model.Transaction.find({}, function (err, results) {
        if (err) throw err;
        res.send(results);
    });
});

Здесь у нас есть формат Collection (Table Name).find({}) для получения всех транзакций без условий. Если есть условие, мы добавляем его в фигурные скобки.

Давайте изменим /send и добавим транзакцию для операции вставки. Снова измените маршрут /send на

app.post('/send', function (req, res, next) {
    const sender = req.body.sender;
    const amount = req.body.amount;
    const receiver = req.body.receiver;
​
    const data = new Model.Transaction({
        sender: req.body.sender,
        amount: req.body.amount,
        receiver: req.body.receiver
    });
​
    data.save(function (err, result) {
        if (err) throw err;
        res.send(result);
    });
});

Теперь давайте выполним POST от POSTMAN, мы увидим следующее:

Хорошо, теперь у нас есть ответ от сервера. Давайте обработаем это во внешнем интерфейсе.

FrontEnd: 3. Обработка ответа на вызов Ajax.

Добавьте пустой div и укажите transaction_list в качестве идентификатора ниже тега кнопки. Давайте добавим ответ в div.

<button class="btn btn-primary" onclick="onSendClicked()">Send</button>
​
// Add this
<br><br>
<ul class="list-group" id="transaction_list"></ul>

А теперь ответ Ajax.

success: function (res) {
    const data = '<li class="list-group-item">Sender: ' + res.sender + ', Amount: ' + res.amount + ', Receiver: ' +
    res.receiver + '</li>';
    $('#transaction_list').append(data);
},

Теперь давайте проверим это. и мы можем увидеть следующее после нажатия кнопки «Отправить»:

Дааа. Мы сделали. Однако мы можем добавить некоторую часть переднего плана, чтобы получить список при загрузке страницы, что можно сделать в качестве бонуса. Если мы нажмем корневой маршрут ‘/’, мы увидим следующее.

Я установил расширение для правильного отступа наших данных.

Отлично провел время за написанием этого блога, состоящего из 2 частей. Надеюсь, это было полезно. Посмотрим, что дальше…