nodejsとangular 10でショッピングカートを構築する

15915 ワード

angular webdev beginners javascript テキストリンク

この記事では、我々のアプリケーションのための角度10でショッピングカートフロントエンドを構築する予定です.
チェックしてくださいbackend part built in Nodejs , 我々がすでに発表したもの.
ローカルマシンにアングルCLIをインストールする必要があることに注意してください.To upgrade to Angular 10 このチュートリアルをフォローできます.
起動するには、アプリケーションディレクトリを設定する必要があります.クリエイトアangular-cart デスクトップのディレクトリを作成し、このコマンドを実行して新しい角度プロジェクトを設定します.

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

ランニングng new コマンドは、プロジェクトの足場にいくつかの質問をプロンプトが表示されます.種類y そのプロジェクトに角度ルーティングを追加するにはcss デフォルトスタイルシートとして.
この2つのことを選択すると、新しい角度10プロジェクトを作成します.プロジェクトディレクトリに移動し、code . コマンドは、VSコードで我々のプロジェクトを開く.
我々のアプリケーションを提供するためにng serve ポート4200でアプリケーションを開きます.
我々は、アプリケーションのユーザーインターフェイスを設定して続行されます.すべてのUIコンポーネントをWrapPixel's UI Kit .
WrapPixelは、あなたが素晴らしい得ることができるオンラインテンプレートストアですAngular Dashboard Template and Angular Material Themes .
私達はプロダクトおよびカートの詳細のリストのためのコンポーネントを作成する.ページナビゲーション用のNavbarコンポーネントも定義します.
コンポーネントを端末に作成するには、次の手順に従います.

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

これは、コンポーネントディレクトリを作成し、我々のマークアップとスタイルを定義するカートモジュールを作成します.
設定する必要がありますBootstrap 我々のアプリケーションにCDNを追加することによってsrc/dex.html ファイル.

<!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>

コードを編集することによって我々のnavbarを定義しましょうcomponents/navbar/navbar.components.html これを:

 <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リクエストを処理するサービスを作成することができます.角でサービスを作成するには、端末を開き、次のように入力します.

ng g s http

これはhttp.service.ts ファイル.我々は角度をもたらすHttpClient HTTPリクエストを作成し、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`);
  }
}

私たちはサーバのベースURLをenvironment.ts ファイル

baseURL: 'http://localhost:4000'

このサービスをコンポーネントで使用できます.我々は、製品のリストを実装し、カートに商品の項目を追加する製品のコンポーネントから開始されます.
角度を使うことができるhttpClient モジュールは、我々のアプリケーションにグローバルに登録することによってそれをインポートする必要があります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

この問題について(nodejsと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

ターミナルでMacの絵文字の時計を回す

MarianMTによるテキストデータ増強