Nodejs에서 카트 구축

본고에서 우리는 Nodejs를 백엔드로 하는 전자상거래 플랫폼을 구축할 것이다. 전방에 대해 우리는 3가지 다른 기술(Angular,React과Vuejs을 가지고 있다.나는 가능한 한 빨리 이 문장들을 발표하고 이 문장에 링크를 제공할 것이다.Vue Vite for frontend part is live, you can read now . You can now also check frontend part in react .
우리는 본문을 두 부분, 뒷부분과 앞부분으로 나눌 것이다.어플리케이션에는 제품 추가 및 카트에 제품 추가 등의 기본 기능이 있습니다.
선결 조건

HTML, CSS 및 Javascript(ES6+)에 익숙합니다.

Vs 코드나 개발 기계에 설치된 모든 코드 편집기.

POSTMAN이 개발 기기에 설치됩니다.

Reactjs와 Expressjs의 기본 지식.

우리는 우선 응용 프로그램에 백엔드를 설정할 것이다.응용 프로그램에 새 디렉터리를 만들고 nodejs 응용 프로그램을 초기화합니다.터미널을 열고 다음을 입력합니다.

cd desktop
mkdir reactcart && cd reactcart
npm init -y
code .

필요한 소프트웨어 패키지 설치

어플리케이션을 위한 패키지를 설치해야 합니다.

body-parser: express 중간부품으로 폼의 입력을 읽고 req를 통해 접근할 수 있는javascript 대상으로 저장합니다.몸통

nodemon: 파일의 변경 사항을 모니터링하고 변경 사항이 있을 때 서버를 다시 시작합니다.

express 이것은 우리의nodejs 서버를 구축하는 데 사용될 것입니다.

cors: 하나의 소스에서 실행되는 웹 응용 프로그램이 서로 다른 소스에서 선택한 자원에 접근할 수 있도록 추가 HTTP 헤더를 사용하여 브라우저에 알려주는 메커니즘입니다.

dotenv: 모든 환경 변수가 저장됩니다.이것은 우리가 전자 우편 변수를 저장하는 곳이다.

morgan: 모든 응용 프로그램의 루트를 기록하는 패키지입니다.

mongoose: MongoDB를 비동기적으로 조회하는 데 사용되는 객체 모델링 도구입니다.

multer: Multer는 노드입니다.js 처리 중간부품multipart/form-data, 주로 파일을 업로드하는 데 사용됩니다.

이 패키지를 설치하려면 터미널을 열고 다음을 입력합니다.

npm i express mongoose morgan dotenv multer body-parser cors nodemon --save

이 명령을 실행하면 node_modules 폴더가 생성됩니다..gitignore 파일을 만들고 node_modules 파일을 추가해야 합니다.

서버 설정

우리는 계속해서 src/index.js 파일을 만들고 다음 코드 줄을 추가할 것입니다.

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const app = express();
app.use(morgan('dev'));
app.use(cors());
app.use(bodyParser.json())
app.get('/', (req, res) => {
    res.json({
        message: 'Arise MERN Developers'
    });
});
const port = process.env.PORT || 4000;
app.listen(port, () => {
    console.log(`Application is Running on ${port}`);
});

이것을 추가하면 터미널에 nodemon src 을 입력하면 Nodemon을 사용하여 프로그램을 실행할 수 있습니다.이 명령을 실행하면 Application is Running on 4000 이 출력됩니다.
현재 서버가 실행 중입니다. 몬고 DB 서버를 설정해야 합니다.이를 위해 새 디렉터리src/config와 파일mongoose.js을 만들고 다음 코드를 추가합니다.

const mongoose = require("mongoose");
module.exports = app => {
    mongoose.connect('mongodb://localhost:27017/cart', {
        useUnifiedTopology: true,
        useNewUrlParser: true,
        useFindAndModify: false
    }).then(res => console.log("conneceted")).catch(err => console.log(err))
    mongoose.Promise = global.Promise;
    process.on("SIGINT", cleanup);
    process.on("SIGTERM", cleanup);
    process.on("SIGHUP", cleanup);
    if (app) {
        app.set("mongoose", mongoose);
    }
};
function cleanup() {
    mongoose.connection.close(function () {
        process.exit(0);
    });
}

이제 이 구성을 index.js 파일에 등록해야 합니다.

require("./config/mongoose.js")(app);

Nodejs 서버가 실행될 때 추가하면 데이터베이스에 연결됩니다.
express 실례를 설명한 후에 이것을 설명해야 합니다.
우리는 지금 우리의 제품과 쇼핑카를 위해 MongoDB 모델과 노선을 만들어야 한다.src/app 디렉터리를 만듭니다. 이것은 우리가 모듈을 만드는 곳입니다.이 디렉토리에서 제품 디렉토리를 만들고 다음 파일을 추가합니다.

모델입니다.js

컨트롤러.js

저장소.js

노선.js

모든 데이터베이스 통신을 저장소 파일로 전송하는 것도 좋은 생각이다.
모델에 추가하여 제품 모델을 정의합니다.js 파일:

const mongoose = require("mongoose");
const productSchema = mongoose.Schema({
  name: {
    type: String,
    required: [true, "Please Include the product name"],
  },
  price: {
    type: String,
    required: [true, "Please Include the product price"],
  },
 image: {
    type: String,
    required: true,
  },
});
const Product = mongoose.model("Product", productSchema);
module.exports = Product;

우리의 제품 모델은 가능한 한 기본적일 것이다. 왜냐하면 그것은 제품 명칭, 가격과 이미지를 포함하기 때문이다.
우리는 현재 저장소에서 데이터베이스 요청을 정의해야 한다.js 파일:

const Product = require("./model");
exports.products = async () => {
    const products = await Product.find();
    return products;
};
exports.productById = async id => {
    const product = await Product.findById(id);
    return product;
}
exports.createProduct = async payload => {
    const newProduct = await Product.create(payload);
    return newProduct
}
exports.removeProduct = async id => {
    const product = await Product.findByIdAndRemove(id);
    return product
}

우리는 모든 제품을 얻고 단일 제품의 상세한 정보를 얻으며 제품을 삭제하고 제품을 만드는 기본 노선을 정의해야 한다.논리는 루트가 우리의 컨트롤러와 대화하고 컨트롤러와 저장소가 대화하며 저장소와 우리의 모델이 대화하는 것이다.
루트를 정의하기 전에, 이미지 업로드에 multer를 설정해야 합니다.multer.js 파일을 만들고 다음 코드를 추가합니다.

const multer = require("multer");
const path = require("path");
//image upload
const storage = multer.diskStorage({
    destination: (req, res, cb) => {
         cb(null, path.join("./files/"));
    },
    filename: (req, file, cb) => {
        cb(null, new Date().toISOString() + file.originalname);
    }
});
// checking file type
const fileFilter = (req, file, cb) => {
    if (file.mimetype.startsWith('image')) {
        cb(null, true);
    } else {
        cb(new Error('Not an image! Please upload an image.', 400), false);
    }
};
exports.upload = multer({
    storage: storage,
    limits: {
        fileSize: 1024 * 1024 * 6
    },
    fileFilter: fileFilter
});

응용 프로그램의 루트 디렉터리에 files 디렉터리를 만듭니다.이것은 업로드된 모든 이미지의 저장 위치입니다.
모든 이미지가 파일 디렉터리에 들어가기 때문에 files 폴더로 설정해야 합니다.이 점을 하려면 색인으로 이동하십시오.js 파일 및 다음을 추가합니다.

app.use('/files', express.static("files"));

완료되면 파일 디렉터리에 저장된 이미지를 서비스할 수 있습니다.
노선에 추가합니다.js 파일:

const router = require("express").Router();
const productController = require("./controller");
const multerInstance = require('../../config/multer')
router.post("/", multerInstance.upload.single('image'), productController.createProduct);
router.get("/", productController.getProducts);
router.get("/:id", productController.getProductById);
router.delete("/:id", productController.removeProduct);
module.exports = router;

우리는 지금 반드시 이런 루트의 방법을 정의해야 한다.이를 위해 컨트롤러에 생성하고 추가합니다.js 파일:

const productRepository = require('./repository')
exports.createProduct = async (req, res) => {
    try {
        let payload = {
            name: req.body.name,
            price: req.body.price,
            image: req.file.path
        }
        let product = await productRepository.createProduct({
            ...payload
        });
        res.status(200).json({
            status: true,
            data: product,
        })
    } catch (err) {
        console.log(err)
        res.status(500).json({
            error: err,
            status: false,
        })
    }
}
exports.getProducts = async (req, res) => {
    try {
        let products = await productRepository.products();
        res.status(200).json({
            status: true,
            data: products,
        })
    } catch (err) {
        console.log(err)
        res.status(500).json({
            error: err,
            status: false,
        })
    }
}

exports.getProductById = async (req, res) => {
    try {
        let id = req.params.id
        let productDetails = await productRepository.productById(id);
        res.status(200).json({
            status: true,
            data: productDetails,
        })
    } catch (err) {
        res.status(500).json({
            status: false,
            error: err
        })
    }
}
exports.removeProduct = async (req, res) => {
    try {
        let id = req.params.id
        let productDetails = await productRepository.removeProduct(id)
        res.status(200).json({
            status: true,
            data: productDetails,
        })
    } catch (err) {
        res.status(500).json({
            status: false,
            error: err
        })
    }
}

routerHandler.js 디렉터리에 src 파일을 만듭니다. 이것은 우리의 전역 루트 프로세서입니다.

const productRoutes = require("./Product/routes")
module.exports = app => {
    app.use("/product", productRoutes);
}

그런 다음 index.js 파일에 등록합니다.mongose 실례 후에 이 파일을 등록해야 합니다.

require('./app/routeHandler')(app)

우리의 노선을 시험하다

모든 제품 가져오기

게시물 작성

ID로 제품 가져오기

제품 삭제

우리는 이제 쇼핑 카트의 기능을 개발하기 시작할 수 있다.Cart 디렉터리에 새 디렉터리src/app를 만듭니다.우리가 제품 모듈에서 한 바와 같이, 우리는 모델, 루트, 보고서와 컨트롤러 파일을 정의할 것이다.
카트 모델 정의부터 시작합니다.

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
let ItemSchema = new Schema({
    productId: {
        type: mongoose.Schema.Types.ObjectId,
        ref: "Product",
    },
    quantity: {
        type: Number,
        required: true,
        min: [1, 'Quantity can not be less then 1.']
    },
    price: {
        type: Number,
        required: true
    },
    total: {
        type: Number,
        required: true,
    }
}, {
    timestamps: true
})
const CartSchema = new Schema({
    items: [ItemSchema],
    subTotal: {
        default: 0,
        type: Number
    }
}, {
    timestamps: true
})
module.exports = mongoose.model('cart', CartSchema);

여기에서 우리는 첫 번째 모드를 만들어서 현재 제품의 실례를 저장하고 두 번째 파일을 만들어서 카트의 항목 그룹을 저장합니다.
이제 저장소를 정의해야 합니다.js 파일:

const Cart = require("./model");
exports.cart = async () => {
    const carts = await Cart.find().populate({
        path: "items.productId",
        select: "name price total"
    });;
    return carts[0];
};
exports.addItem = async payload => {
    const newItem = await Cart.create(payload);
    return newItem
}

기본적으로 우리는 데이터베이스에 있는 모든 쇼핑 카트 항목을 얻고 항목을 쇼핑 카트 모델에 추가하는 두 가지 방법을 작성했다.
이제 카트에 대한 컨트롤러를 생성할 수 있습니다. 3개의 컨트롤러가 있습니다.

모든 카트 품목 수령

카트에 제품 항목 추가

빈차

    const cartRepository = require('./repository')
    const productRepository = require('../Product/repository');

    exports.addItemToCart = async (req, res) => {
        const {
            productId
        } = req.body;
        const quantity = Number.parseInt(req.body.quantity);
        try {
            let cart = await cartRepository.cart();
            let productDetails = await productRepository.productById(productId);
                 if (!productDetails) {
                return res.status(500).json({
                    type: "Not Found",
                    msg: "Invalid request"
                })
            }
            //--If Cart Exists ----
            if (cart) {
                //---- check if index exists ----
                const indexFound = cart.items.findIndex(item => item.productId.id == productId);
                //------this removes an item from the the cart if the quantity is set to zero,We can use this method to remove an item from the list  -------
                if (indexFound !== -1 && quantity <= 0) {
                    cart.items.splice(indexFound, 1);
                    if (cart.items.length == 0) {
                        cart.subTotal = 0;
                    } else {
                        cart.subTotal = cart.items.map(item => item.total).reduce((acc, next) => acc + next);
                    }
                }
                //----------check if product exist,just add the previous quantity with the new quantity and update the total price-------
                else if (indexFound !== -1) {
                    cart.items[indexFound].quantity = cart.items[indexFound].quantity + quantity;
                    cart.items[indexFound].total = cart.items[indexFound].quantity * productDetails.price;
                    cart.items[indexFound].price = productDetails.price
                    cart.subTotal = cart.items.map(item => item.total).reduce((acc, next) => acc + next);
                }
                //----Check if Quantity is Greater than 0 then add item to items Array ----
                else if (quantity > 0) {
                    cart.items.push({
                        productId: productId,
                        quantity: quantity,
                        price: productDetails.price,
                        total: parseInt(productDetails.price * quantity)
                    })
                    cart.subTotal = cart.items.map(item => item.total).reduce((acc, next) => acc + next);
                }
                //----if quantity of price is 0 throw the error -------
                else {
                    return res.status(400).json({
                        type: "Invalid",
                        msg: "Invalid request"
                    })
                }
                let data = await cart.save();
                res.status(200).json({
                    type: "success",
                    mgs: "Process Successful",
                    data: data
                })
            }
            //------------ if there is no user with a cart...it creates a new cart and then adds the item to the cart that has been created------------
            else {
                const cartData = {
                    items: [{
                        productId: productId,
                        quantity: quantity,
                        total: parseInt(productDetails.price * quantity),
                        price: productDetails.price
                    }],
                    subTotal: parseInt(productDetails.price * quantity)
                }
                cart = await cartRepository.addItem(cartData)
                // let data = await cart.save();
                res.json(cart);
            }
        } catch (err) {
            console.log(err)
            res.status(400).json({
                type: "Invalid",
                msg: "Something Went Wrong",
                err: err
            })
        }
    }
    exports.getCart = async (req, res) => {
        try {
            let cart = await cartRepository.cart()
            if (!cart) {
                return res.status(400).json({
                    type: "Invalid",
                    msg: "Cart Not Found",
                })
            }
            res.status(200).json({
                status: true,
                data: cart
            })
        } catch (err) {
            console.log(err)
            res.status(400).json({
                type: "Invalid",
                msg: "Something Went Wrong",
                err: err
            })
        }
    }

    exports.emptyCart = async (req, res) => {
        try {
            let cart = await cartRepository.cart();
            cart.items = [];
            cart.subTotal = 0
            let data = await cart.save();
            res.status(200).json({
                type: "success",
                mgs: "Cart Has been emptied",
                data: data
            })
        } catch (err) {
            console.log(err)
            res.status(400).json({
                type: "Invalid",
                msg: "Something Went Wrong",
                err: err
            })
        }
    }

이해하기 편리하도록 코드 세그먼트에 주석을 달았다.
이제 모듈 라우팅을 정의하고 글로벌 라우팅을 정의할 수 있습니다.노선에 추가합니다.js 파일:

const router = require("express").Router();
const cartController = require("./controller");
router.post("/", cartController.addItemToCart);
router.get("/", cartController.getCart);
router.delete("/empty-cart", cartController.emptyCart);
module.exports = router;

그리고 routeHandler.js 파일을 다음과 같이 업데이트합니다.

const productRoutes = require("./Product/routes");

const cartRoutes = require('./Cart/routes')

module.exports = app => {

    app.use("/product", productRoutes);

    app.use("/cart", cartRoutes);

}

카트 기능 테스트

카트에 항목 추가

카트 항목 가져오기

카트 비우기

테스트 목적으로 POSTMAN을 사용하여 제품을 작성합니다.이것이 바로 우리가 전방 응용 프로그램에서 테스트 목적에 사용할 내용이다.

운동하다

카트에서 제품 수량 증가

카트에서 개별 제품 꺼내기

실현된 후, 당신의 작업을git로 전송하고, 논평 부분에 링크를 추가합니다.재밌게 놀래요.😁
지금 우리의 백엔드는 이미 준비가 다 되었으니, 우리는 지금 전방으로 돌릴 수 있다.전단에 대해 저는 3가지 다른 전단 기술 Vue Vite, Angular와 React를 사용하여 곧 이곳에서 링크를 발표할 것입니다.