Инструменты пользователя

Инструменты сайта


nodejs:express:korzina:dinamika

динамика (Удаление позиции в корзине через ajax)

клиентские скрипт js

document.querySelectorAll('.price').forEach((node) => {
    //Intl - глобальный класс для форматирования цены
    node.textContent = new Intl.NumberFormat('ru-Ru', //локаль
        {
        currency: 'rub',//опции
        style: 'currency'
    }).format(node.textContent);//здесь какоето число
});
 
const $card = document.querySelector('#card');
 
if($card){
    $card.addEventListener('click', (evt) => {
        evt.preventDefault();
        if(evt.target.classList.contains('js-remove')){//получить список элементов с классами содержащие класс "js-remove"
            const id  = evt.target.dataset.id; //аналог jquery,  $(evt.target).data('id')
            fetch('/card/remove/'+id,{//Ajax запрос замена XMLHttpRequest()
                method: 'delete'//delete - запрос
            }).then(res => res.json())
              .then(card => {//Возвращает промис
                console.log(card);
                if(card.courses.length){
                    const html= card.courses.map((c)=> {
                        return `
                        <tr>
                            <td>${c.title}</td>
                            <td>${c.count}</td>
                            <td><a href="#" class="btn"><i class="material-icons js-remove" data-id="${c.id}">delete</i></a></td>
                        </tr>
                        `;
                    }).join();
                    $card.querySelector('tbody').innerHTML = html;
                    $card.querySelector('.price').textContent = new Intl.NumberFormat('ru-Ru', //локаль
                        {
                            currency: 'rub',//опции
                            style: 'currency'
                        }).format(card.price);//здесь какоето число
                }
                else{
                    $card.innerHTML = `<p>Корзина пуста</p>`
                }
            });
        }
    })
}

роут routes/card.js

const {Router} = require('express');//или const express.Router = require('express'); - модуль express
const Card = require('../models/card');
const Course = require('../models/course');
 
const router = Router();
 
/**
 * Удалить позицию в заказе
 * первый параметр адрес страницы, в данном случае используется префикс при регистрации ройтера,
 * с динамическим параметром id
 * второй параметр callback - обработчик запроса req - request , запрос от браузера
 */
router.delete('/remove/:id', async (req, res)=>{
 
    const card = await Card.remove(req.params.id);//Обращаемся к модели и удаляем позицию
    res.status(200).json(card)//возвращаем статус 200 и json строку
});
 
 
module.exports = router;//Экспортирум роутер

Модель models/card.js

const path = require('path');//модуль генерации путей
const fs = require('fs');//модуль обработки файлов
 
/**
 *
 * Зарание сгенерированный путь
 * @type {string}
 */
const p = path.join(
    __dirname,
    '..',
    'data',
    'card.json'
);
 
 
class Card {
 
 
    /**
     * Получить данные из корзины
     * @returns возврощаем промис
     */
    static async fetch(){
        return new Promise((resolve, reject) => {
            /**
             * p - путь к json файлу
             * кодировка
             * callback, err -ошибка, data - данные из файла
             */
            fs.readFile(p, 'utf-8',(err, data)=> {
                if(err){
                    reject();
                }
                resolve(JSON.parse(data));//Парсим объект
            });
        });
    }
 
    /**
     * Удалить позицию в заказе
     * @param id - id позиции
     * @returns {Promise} - возвращаем промис
     */
    static async remove(id){
        const card = await Card.fetch();//список позиций в корзине
        const idx = card.courses.findIndex(c => c.id === id);//ищем курс по id
        const course = card.courses[idx];//выбрать найденный курс и сохранить в переменной
 
        if(course.count === 1){//Удалить, в случае если заказали позицию в одном экземпляре
            card.courses = card.courses.filter((c) => c.id !== id )//Фильтруем список позиций, 
            // оставляем только те с кем не совпал переданный id
        }
        else{
            //Изменить колличество
            card.courses[idx].count--;
 
        }
 
        card.price -=course.price;//Вычисляем итоговую стоимость
 
        return new Promise((resolve, reject) => {//Запись в card.json, данные по карзине хранятся в файле
            /**
             * p - путь к файлу
             * JSON.stringify(card) - json строка
             * callback, err - вывод ошибки
             */
            fs.writeFile(p, JSON.stringify(card), (err) => {
                    if(err){
                        reject();
                    }
                    resolve(card);
                }
            );
        });
    }
}
 
module.exports = Card;//Экспортирум класс в роутер
nodejs/express/korzina/dinamika.txt · Последние изменения: 2023/01/12 12:18 (внешнее изменение)