知識庫 / Spring / Spring Boot RSS 訂閱

{
    "/api": {
        "target": "http://localhost:8080",
        "secure": false
    }
}

然後我們需要打開 package.json 並將 scripts.start 屬性更改為以下內容：

"scripts": {
    ...
    "start": "ng serve --proxy-config proxy-conf.json",
    ...
  }

現在，我們應該記住，啓動應用程序時應該使用 npm start，而不是 ng serve。

3.6. 產品

在我們的 ProductsComponent 中，我們將注入我們之前創建的服務，並從 API 加載產品列表，將其轉換為 ProductOrders 列表，因為我們希望為每個產品添加一個數量字段：

export class ProductsComponent implements OnInit {
    productOrders: ProductOrder[] = [];
    products: Product[] = [];
    selectedProductOrder: ProductOrder;
    private shoppingCartOrders: ProductOrders;
    sub: Subscription;
    productSelected: boolean = false;

    constructor(private ecommerceService: EcommerceService) {}

    ngOnInit() {
        this.productOrders = [];
        this.loadProducts();
        this.loadOrders();
    }

    loadProducts() {
        this.ecommerceService.getAllProducts()
            .subscribe(
                (products: any[]) => {
                    this.products = products;
                    this.products.forEach(product => {
                        this.productOrders.push(new ProductOrder(product, 0));
                    })
                },
                (error) => console.log(error)
            );
    }

    loadOrders() {
        this.sub = this.ecommerceService.OrdersChanged.subscribe(() => {
            this.shoppingCartOrders = this.ecommerceService.ProductOrders;
        });
    }
}

我們還需要一個選項，用於將產品添加到購物車或從購物車中刪除一個產品：

addToCart(order: ProductOrder) {
    this.ecommerceService.SelectedProductOrder = order;
    this.selectedProductOrder = this.ecommerceService.SelectedProductOrder;
    this.productSelected = true;
}

removeFromCart(productOrder: ProductOrder) {
    let index = this.getProductIndex(productOrder.product);
    if (index > -1) {
        this.shoppingCartOrders.productOrders.splice(
            this.getProductIndex(productOrder.product), 1);
    }
    this.ecommerceService.ProductOrders = this.shoppingCartOrders;
    this.shoppingCartOrders = this.ecommerceService.ProductOrders;
    this.productSelected = false;
}

最後，我們將創建一個在第 3.4 節中提到的 reset() 方法：

reset() {
    this.productOrders = [];
    this.loadProducts();
    this.ecommerceService.ProductOrders.productOrders = [];
    this.loadOrders();
    this.productSelected = false;
}

我們將在 HTML 文件中迭代產品列表，並將其顯示給用户：

<div class="row card-deck">
    <div class="col-lg-4 col-md-6 mb-4" *ngFor="let order of productOrders">
        <div class="card text-center">
            <div class="card-header">
                <h4>{{order.product.name}}</h4>
            </div>
            <div class="card-body">
                <a href="#"><img class="card-img-top" src={{order.product.pictureUrl}} 
                    alt=""></a>
                <h5 class="card-title">${{order.product.price}}</h5>
                <div class="row">
                    <div class="col-4 padding-0" *ngIf="!isProductSelected(order.product)">
                        <input type="number" min="0" class="form-control" 
                            [(ngModel)]=order.quantity>
                    </div>
                    <div class="col-4 padding-0" *ngIf="!isProductSelected(order.product)">
                        <button class="btn btn-primary" (click)="addToCart(order)"
                                [disabled]="order.quantity <= 0">Add To Cart
                        </button>
                    </div>
                    <div class="col-12" *ngIf="isProductSelected(order.product)">
                        <button class="btn btn-primary btn-block"
                                (click)="removeFromCart(order)">Remove From Cart
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我們還會為對應的 CSS 文件添加一個簡單的類，以確保一切都完美地適應：

.padding-0 {
    padding-right: 0;
    padding-left: 1;
}

3.7. 購物車

在 <em >ShoppingCart</em> 組件中，我們還將注入服務。 我們將使用它來訂閲 <em >ProductsComponent</em> 中發生的更改（以便注意到產品被選中放入購物車時），然後相應地更新購物車內容並重新計算總價：

export class ShoppingCartComponent implements OnInit, OnDestroy {
    orderFinished: boolean;
    orders: ProductOrders;
    total: number;
    sub: Subscription;

    @Output() onOrderFinished: EventEmitter<boolean>;

    constructor(private ecommerceService: EcommerceService) {
        this.total = 0;
        this.orderFinished = false;
        this.onOrderFinished = new EventEmitter<boolean>();
    }

    ngOnInit() {
        this.orders = new ProductOrders();
        this.loadCart();
        this.loadTotal();
    }

    loadTotal() {
        this.sub = this.ecommerceService.OrdersChanged.subscribe(() => {
            this.total = this.calculateTotal(this.orders.productOrders);
        });
    }

    loadCart() {
        this.sub = this.ecommerceService.ProductOrderChanged.subscribe(() => {
            let productOrder = this.ecommerceService.SelectedProductOrder;
            if (productOrder) {
                this.orders.productOrders.push(new ProductOrder(
                    productOrder.product, productOrder.quantity));
            }
            this.ecommerceService.ProductOrders = this.orders;
            this.orders = this.ecommerceService.ProductOrders;
            this.total = this.calculateTotal(this.orders.productOrders);
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

我們從這裏向父組件發送事件，當訂單完成時，需要跳轉到結算流程。這裏也包含reset() 方法：

finishOrder() {
    this.orderFinished = true;
    this.ecommerceService.Total = this.total;
    this.onOrderFinished.emit(this.orderFinished);
}

reset() {
    this.orderFinished = false;
    this.orders = new ProductOrders();
    this.orders.productOrders = []
    this.loadTotal();
    this.total = 0;
}

HTML 文件很簡單：

<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
    <div class="card-header text-center">Shopping Cart</div>
    <div class="card-body">
        <h5 class="card-title">Total: ${{total}}</h5>
        <hr>
        <h6 class="card-title">Items bought:</h6>

        <ul>
            <li *ngFor="let order of orders.productOrders">
                {{ order.product.name }} - {{ order.quantity}} pcs.
            </li>
        </ul>

        <button class="btn btn-light btn-block" (click)="finishOrder()"
             [disabled]="orders.productOrders.length == 0">Checkout
        </button>
    </div>
</div>

3.8. 訂單

我們將盡量保持操作的簡潔，並在 OrdersComponent 中模擬支付行為，通過將屬性設置為 true 並將訂單保存到數據庫中來實現。您可以通過 h2-console 檢查訂單是否已保存，或通過訪問 http://localhost:8080/api/orders 來檢查。

此處需要使用 EcommerceService 以檢索購物車中的產品列表和訂單總額：

export class OrdersComponent implements OnInit {
    orders: ProductOrders;
    total: number;
    paid: boolean;
    sub: Subscription;

    constructor(private ecommerceService: EcommerceService) {
        this.orders = this.ecommerceService.ProductOrders;
    }

    ngOnInit() {
        this.paid = false;
        this.sub = this.ecommerceService.OrdersChanged.subscribe(() => {
            this.orders = this.ecommerceService.ProductOrders;
        });
        this.loadTotal();
    }

    pay() {
        this.paid = true;
        this.ecommerceService.saveOrder(this.orders).subscribe();
    }
}

最後，我們需要將信息顯示給用户。

<h2 class="text-center">ORDER</h2>
<ul>
    <li *ngFor="let order of orders.productOrders">
        {{ order.product.name }} - ${{ order.product.price }} x {{ order.quantity}} pcs.
    </li>
</ul>
<h3 class="text-right">Total amount: ${{ total }}</h3>

<button class="btn btn-primary btn-block" (click)="pay()" *ngIf="!paid">Pay</button>
<div class="alert alert-success" role="alert" *ngIf="paid">
    <strong>Congratulation!</strong> You successfully made the order.
</div>

4. 合併 Spring Boot 和 Angular 應用

我們完成了這兩個應用的開發，現在單獨開發可能更方便。但是，在生產環境中，擁有一個單一的應用會更方便，所以我們現在將它們合併。

我們想要做的是構建一個調用 Webpack 打包所有資產並將其推送到 Spring Boot 應用 <em>/resources/static</em> 目錄的 Angular 應用。 這樣，我們就可以運行 Spring Boot 應用並測試我們的應用，並將所有這些打包並部署為一個應用。

為了實現這一點，我們需要再次打開 <em>package.json</em> 並添加一些新的腳本在 <em>scripts</em>.<em>build</em> 之後：

"postbuild": "npm run deploy",
"predeploy": "rimraf ../resources/static/ && mkdirp ../resources/static",
"deploy": "copyfiles -f dist/** ../resources/static",

我們正在使用一些沒有安裝的包，所以我們來安裝它們：

npm install --save-dev rimraf
npm install --save-dev mkdirp
npm install --save-dev copyfiles

rimraf 命令將查看目錄並清理它，而 copyfiles 命令則將從 Angular 分發文件夾中複製文件到我們的 static 文件夾。

現在，我們只需要運行 npm run build 命令，這將會執行所有這些命令，最終輸出結果將是 static 文件夾中的打包好的應用程序。

然後，我們運行 Spring Boot 應用程序，在端口 8080 上訪問它，並使用 Angular 應用程序。

5. 結論

在本文中，我們創建了一個簡單的電子商務應用程序。我們使用 Spring Boot 在後端創建了一個 API，然後我們在 Angular 製作的前端應用程序中消費了它。我們展示瞭如何創建所需的組件、如何使它們相互通信以及如何從/到 API 中檢索/發送數據。

最後，我們展示瞭如何將這兩個應用程序合併到一個靜態文件夾中的打包 Web 應用程序中。