Node Js 및 Angular 10에서 장바구니 만들기

16164 단어 angular webdev beginners javascript

이 기사에서는 애플리케이션을 위해 Angular 10을 사용하여 장바구니 프런트엔드를 구축할 것입니다.

우리가 이미 게시한 우리의 backend part built in Nodejs 을 확인할 수 있습니다.

로컬 컴퓨터에 Angular CLI를 설치해야 합니다. upgrade to Angular 10에서 이 자습서를 따라갈 수 있습니다.

시작하려면 애플리케이션 디렉토리를 설정해야 합니다. 데스크톱에 angular-cart 디렉토리를 생성하고 다음 명령을 실행하여 새 각도 프로젝트를 설정합니다.

cd desktop
mkdir angular-cart && cd angular-cart
ng new angular-cart

ng new 명령을 실행하면 프로젝트 스캐폴딩에 대한 몇 가지 질문이 표시됩니다. y를 입력하여 해당 프로젝트에 Angular 라우팅을 추가하고 기본 스타일시트로 css를 선택합니다.

이 두 가지를 선택하면 새로운 Angular 10 프로젝트가 생성됩니다. 프로젝트 디렉토리로 이동한 다음 code . 명령을 사용하여 VS Code에서 프로젝트를 열 수 있습니다.

애플리케이션을 제공하기 위해 ng serve를 실행하여 포트 4200에서 애플리케이션을 열 수 있습니다.

계속해서 애플리케이션의 사용자 인터페이스를 설정하겠습니다. WrapPixel's UI Kit에서 모든 UI 구성 요소를 얻을 수 있습니다.

WrapPixel은 멋진 Angular Dashboard Template 및 Angular Material Themes을 얻을 수 있는 온라인 템플릿 스토어입니다.

제품 목록 및 장바구니 세부 정보에 대한 구성 요소를 생성합니다. 또한 페이지 탐색을 위한 navbar 구성 요소를 정의합니다.

구성 요소를 만들려면 터미널에서 다음을 실행하십시오.

ng g c components/cart
ng g c components/navbar
ng g c components/products

이렇게 하면 구성 요소 디렉토리가 생성되고 마크업과 스타일을 정의할 카트 모듈이 생성됩니다.
src/dex.html 파일에 CDN을 추가하여 애플리케이션에 Bootstrap을 구성해야 합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularCart</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

components/navbar/navbar.components.html의 코드를 다음과 같이 편집하여 navbar를 정의해 보겠습니다.

 <nav class="navbar navbar-expand-lg navbar-light bg-info">
   <div class="container">
     <a routerLink="/" class="navbar-brand">Angular Cart</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
       aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
       <ul class="navbar-nav">
         <li class="nav-item active">
           <a routerLink="/" class="nav-link">Home </a>
         </li>
         <li class="nav-item">
           <a routerLink="/cart" class="nav-link">Cart </a>
         </li>
       </ul>
     </div>
   </div>
 </nav>

그런 다음 app/app.components.html의 코드를 다음과 같이 수정합니다.

<app-navbar></app-navbar>
<section>
  <div class="banner-innerpage" style="
          background-image: url(https://images.pexels.com/photos/1005638/pexels-photo-1005638.jpeg?cs=srgb&dl=pexels-oleg-magni-1005638.jpg&fm=jpg);
        ">
    <div class="container">
      <!-- Row  -->
      <div class="row justify-content-center">
        <!-- Column -->
        <div class="col-md-6 align-self-center text-center" data-aos="fade-down" data-aos-duration="1200">
          <h1 class="title">Shop listing</h1>
          <h6 class="subtitle op-8">
            We are small team of creative people working together.
          </h6>
        </div>
        <!-- Column -->
      </div>
    </div>
  </div>
</section>
<router-outlet></router-outlet>

app.component.css에 몇 가지 스타일을 추가합니다.

.banner-innerpage {
  padding: 150px 0 100px;
  background-size: cover;
  background-position: center center;
}
.banner-innerpage .title {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 40px;
  line-height: 40px;
}
.banner-innerpage .subtitle {
  color: #ffffff;
}
.shop-listing .shop-hover {
  position: relative;
}
.shop-listing .shop-hover .card-img-overlay {
  display: none;
  background: rgba(255, 255, 255, 0.5);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.shop-listing .shop-hover:hover .card-img-overlay {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.shop-listing .shop-hover .label {
  padding: 5px 10px;
  position: absolute;
  top: 10px;
  right: 10px;
}
/*******************
shop table
*******************/
.shop-table td {
  padding: 30px 0;
}

app/app-routing.module.ts 파일에 경로를 등록해 보겠습니다.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CartComponent } from './components/cart/cart.component';
import { ProductsComponent } from './components/products/products.component';
const routes: Routes = [
  { path: '', component: ProductsComponent },
  { path: 'cart', component: CartComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

이 작업이 완료되면 이제 라우터 링크를 정의하여 navbar 구성 요소에서 라우팅을 처리할 수 있습니다.

 <nav class="navbar navbar-expand-lg navbar-light bg-info">
   <div class="container">
     <a routerLink="/" class="navbar-brand">Angular Cart</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
       aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
       <ul class="navbar-nav">
         <li class="nav-item active">
           <a routerLink="/" class="nav-link">Home </a>
         </li>
         <li class="nav-item">
           <a routerLink="/cart" class="nav-link">Cart </a>
         </li>
       </ul>
     </div>
   </div>
 </nav>

이제 HTTP 요청을 처리할 일부 서비스를 만들 수 있습니다. Angular에서 서비스를 생성하려면 터미널을 열고 다음을 입력하십시오.

ng g s http

이렇게 하면 http.service.ts 파일이 생성됩니다. http 요청을 위해 AngularHttpClient를 가져온 다음 http 서비스를 정의합니다.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';
@Injectable({
  providedIn: 'root',
})
export class HttpService {
  constructor(private http: HttpClient) {}
  getAllProducts() {
    return this.http.get(`${environment.baseURL}/product`);
  }
  addToCart(payload) {
    return this.http.post(`${environment.baseURL}/cart`, payload);
  }
  getCartItems() {
    return this.http.get(`${environment.baseURL}/cart`);
  }
  increaseQty(payload) {
    return this.http.post(`${environment.baseURL}/cart`, payload);
  }
  emptyCart() {
    return this.http.delete(`${environment.baseURL}/cart/empty-cart`);
  }
}

서버 baseURL을 environment.ts 파일에 저장합니다.

baseURL: 'http://localhost:4000'

이제 구성 요소에서 이 서비스를 사용할 수 있습니다. 제품 구성 요소에서 시작하여 제품 목록을 구현하고 제품 항목을 장바구니에 추가합니다.

AngularhttpClient 모듈을 사용할 수 있으려면 이를 app/app.module.ts 파일로 가져와서 응용 프로그램에서 전역적으로 등록해야 합니다.

import { HttpClientModule } from '@angular/common/http';
imports: [... other modules,HttpClientModule]

app/components/products.component.ts 파일의 코드를 다음과 같이 수정해 보겠습니다.

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../http.service';
@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
})
export class ProductsComponent implements OnInit {
  products: Array<object> = [];
  constructor(private http: HttpService) {}
  _getProducts(): void {
    this.http.getAllProducts().subscribe((data: any) => {
      this.products = data.data;
      console.log(this.products);
    });
  }
  _addItemToCart( id, quantity): void {
    let payload = {
      productId: id,
      quantity,
    };
    this.http.addToCart(payload).subscribe(() => {
      this._getProducts();
      alert('Product Added');
    });
  }
  ngOnInit(): void {
    this._getProducts();
  }
}

그런 다음 products.component.ts 파일을 다음과 같이 편집하여 애플리케이션용 템플릿을 설정합니다.

      <section>
        <div class="spacer">
          <div class="container">
            <div class="row mt-5">
              <div class="col-lg-9">
                <div class="row shop-listing">
                  <div class="col-lg-4" *ngFor="let product of products">
                    <div class="card shop-hover border-0">
                      <img [src]="'http://localhost:5000/' + product.image" alt="wrapkit" class="img-fluid" />
                      <div class="card-img-overlay align-items-center">
                        <button class="btn btn-md btn-info" (click)="_addItemToCart(product._id, 1)">Add to Cart</button>
                      </div>
                    </div>
                    <div class="card border-0">
                      <h6>
                        <a href="#" class="link">{{ product.name }}</a>
                      </h6>
                      <h6 class="subtitle">by Wisdom</h6>
                      <h5 class="font-medium m-b-30">
                        ${{product.price}}
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

이를 통해 이제 모든 제품을 나열하고 장바구니에 제품 항목을 추가할 수 있습니다.

장바구니 섹션을 구현하여 진행하겠습니다. app/components/cart.component.ts 파일에서 모든 장바구니 방법을 정의해 보겠습니다.

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../http.service';
@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css'],
})
export class CartComponent implements OnInit {
  carts;
  cartDetails;
  constructor(private http: HttpService) {}
  _getCart(): void {
    this.http.getCartItems().subscribe((data: any) => {
      this.carts = data.data;
      // this.cartDetails = data.data;
      console.log(this.carts);
    });
  }
  _increamentQTY(id, quantity): void {
    const payload = {
      productId: id,
      quantity,
    };
    this.http.increaseQty(payload).subscribe(() => {
      this._getCart();
      alert('Product Added');
    });
  }
  _emptyCart(): void {
    this.http.emptyCart().subscribe(() => {
      this._getCart();
      alert('Cart Emptied');
    });
  }
  ngOnInit(): void {
    this._getCart();
  }
}

또한 html 파일에 장바구니 항목을 나열하기 위한 템플릿을 설정합니다.

      <section>
        <div class="spacer">
          <div class="container">
            <div class="row mt-5">
              <div class="col-lg-9">
                <div class="row shop-listing">
                  <table class="table shop-table" *ngIf="carts">
                    <tr>
                      <th class="b-0">Name</th>
                      <th class="b-0">Price</th>
                      <th class="b-0">Quantity</th>
                      <th class="b-0 text-right">Total Price</th>
                    </tr>
                    <tr *ngFor="let item of carts.items">
                      <td>{{ item.productId.name }}</td>
                      <td>{{ item.productId.price }}</td>
                      <td>
                        <button class="btn btn-primary btn-sm" (click)="_increamentQTY(item.productId._id,1)">+</button>
                        {{ item.quantity }}
                        <button class="btn btn-primary btn-sm">-</button>
                      </td>
                      <td class="text-right">
                        <h5 class="font-medium m-b-30">{{ item.total }}</h5>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="3" align="right">Subtotal :{{ carts.subTotal }}</td>
                      <td colspan="4" align="right">
                        <button class="btn btn-danger" (click)="_emptyCart()">Empty Cart</button>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

운동

감소 기능 구현

카트에서 제품 제거 구현

이를 구현한 후 작업을 git에 푸시하고 주석 섹션에 링크를 추가하십시오. 재미있게 놀자😁

Reference

이 문제에 관하여(Node Js 및 Angular 10에서 장바구니 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/suniljoshi19/build-a-shopping-cart-in-nodejs-and-angular10-4hne

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

메서드에 매개변수를 제공하는 ♦ Vue.js❏

MarianMT를 사용한 텍스트 데이터 증대

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다