# 20230605前端
# addProduct -html

<h1>新增商品</h1>
<form #tForm="ngForm" (ngSubmit)="doSubmit(tForm)">
  <div class="form-group">
    <div class="form-field">
      <label for="productName" style="font-size: 23px;margin-top: 15px;">商品名稱</label><br />
      <input type="text" #tName="ngModel" name="name" class="form-control" id="productName" aria-describedby="emailHelp"
        placeholder="請輸入商品名稱..." [(ngModel)]="name" required="required">
      <ng-container *ngIf="tName.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tName.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>
  <div class="form-group">
    <div class="form-field">
      <label for="productPrice" style="font-size: 23px;margin-top: 15px;">商品價錢</label><br />
      <input type="number" #tprice="ngModel" name="price" class="form-control" id="productPrice" placeholder="請輸入商品價錢..."
        [(ngModel)]="price" required="required">
      <ng-container *ngIf="tprice.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tprice.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>
  <div class="form-group">
    <div class="form-field">
      <label for="productDetail" style="font-size: 23px;margin-top: 15px;">商品詳細說明</label><br />
      <input type="text" #tdetail="ngModel" name="detail" class="form-control" id="productDetail" placeholder="請輸入商品詳細說明..."
        [(ngModel)]="detail" required="required">
      <ng-container *ngIf="tdetail.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tdetail.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>

  <div class="form-group">
    <div class="form-field">
      <label for="productCategory" style="font-size: 23px;margin-top: 15px;">商品分類</label><br />
      <select  type="select" #tcategory="ngModel" name="category" class="form-control" id="productCategory" placeholder="請輸入商品分類..."
      [(ngModel)]="category" required="required">
      <option *ngFor="let cate of allCategory" value="{{cate.id}}">{{cate.name}}</option>
      <!-- <option>iPad</option> -->
      </select>
      <ng-container *ngIf="tcategory.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tcategory.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="tForm.invalid" (click)="AddProduct()">送出</button>
  <button type="submit" class="btn btn-secondary" (click)="tForm.reset()">清除</button>
</form>

<br/><br/><br/><br/><br/>

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

const product_url="http://localhost:8080/api/product/";
const productCategory_url ="http://localhost:8080/api/productCategory/"

@Component({
  selector: 'app-add-product',
  templateUrl: './add-product.component.html',
  styleUrls: ['./add-product.component.css']
})
export class AddProductComponent implements OnInit {
  // id:number;
  name:string;
  price: number;
  filepath: string;
  // quant:number;
  detail:string;
  // upDate:Date;
  // product:Object;
  products: Object;
  category:object;
  allCategory:any=[];

  constructor(private http: HttpClient) {
  }
  ngOnInit(): void {
    this.getCategory();
  }

  AddProduct(){
    const c = { name: this.name, price: this.price,detail:this.detail ,filepath:this.filepath}
    this.http.post(product_url+'all/'+this.category, c).subscribe(d=>{
      console.log("新增：",d)
    })
    window.alert("成功新增商品!");
    window.location.reload()
  }

  getCategory(){
    this.http.get(productCategory_url+'all').subscribe(d=>{
      this.allCategory=d;
      console.log(this.allCategory)
    })
  }

  doSubmit(addproduct: AddProductComponent): void {
    console.log('submit new  data', addproduct);

  }
}

# cart-html

<br/><br/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container padding-bottom-3x mb-1">
    <!-- Shopping Cart-->
    <div class="table-responsive shopping-cart">
        <table class="table"  style="background-color:#e0e0e0; border-color: white;">
            <thead>
                <tr>
                    <th class="text-center">商品名稱</th>
                    <th class="text-center">說明</th>
                    <!--<th class="text-center">
                      數量
                    </th>-->
                    <th class="text-center">價錢</th>
                    <th class="text-center"><a class="btn btn-sm btn-outline-danger" (click)="deleteAllCart()">Clear Cart</a></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let cart of carts">
                    <td>
                        <div class="product-item">
                            <!--<a class="product-thumb" href="#"><img src="https://www.bootdey.com/image/220x180/FF0000/000000" alt="Product"></a>-->
                            <div class="product-info">
                                <h4 class="product-title class text-center"><a href="#">{{cart.name}}</a></h4><!--<span><em>Size:</em> 10.5</span><span><em>Color:</em> Dark Blue</span>-->
                            </div>
                        </div>
                    </td>
                    <td class="text-center text-lg text-medium">{{cart.detail}}</td>
                    <td class="text-center text-lg text-medium">$ {{cart.price}}</td>
                    <td class="text-center"><a class="remove-from-cart" data-toggle="tooltip" title="" data-original-title="Remove item" (click)="deletecart(cart.id)"><i class="fa fa-trash"></i></a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="shopping-cart-footer">
        <div class="column text-lg" style="font-size:20px;">總價: <span class="text-medium">$ {{totalPrice}}</span></div>
    </div>
    <div class="shopping-cart-footer">
        <div class="column"><a class="btn btn-outline-secondary" routerLink="/"><i class="icon-arrow-left"></i>&nbsp;Back to Shopping</a></div>
        <!--<div class="column"><a class="btn btn-success" href="#">Checkout</a></div>-->
    </div>
</div>



<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

const customer_url = "http://localhost:8080/api/customer/"
const product_url = "http://localhost:8080/api/product/";

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
 // id: number;
 name: string;
 price: number;
 // amount: number;
 carts: any = [];
 // cart: object;
 customers: any = [];
 totalPrice: number = 0;

 allCarts: any[];

 constructor(private http: HttpClient) {
   this.name = sessionStorage.getItem('user')
 }
 ngOnInit(): void {
   this.getAllCart();
 }

 getAllCart() {
   this.http.get(customer_url + 'all').subscribe(d => {
     this.customers = d
     this.customers.forEach(element => {
       if (element.name == this.name) {
         this.carts = element.products
         this.carts.forEach((element: any = []) => {
           this.totalPrice = this.totalPrice + element.price
           console.log("價錢", element.price)
         });
       }
     });
   })
 }

 deletecart(id: number) {
   this.http.get(customer_url + 'all').subscribe(d => {
     this.customers = d
     this.customers.forEach(element => {
       if (element.name == this.name) {
         console.log(id)
         this.http.delete(product_url + element.id + '/' + id).subscribe(res => console.log("Result", res));
         window.location.reload()
       }
     });
   })
 }

 deleteAllCart() {
   this.http.get(customer_url + 'all').subscribe(d => {
     this.customers = d
     this.customers.forEach(element => {
       if (element.name == this.name) {
         this.http.delete(product_url + element.id + '/all').subscribe(res => console.log("Result", res));
         window.location.reload()
       }
     });
   })
 }

}

# cate_ipad -html

<!-- Header-->
<header class="py-5" style="background-color:#5E5A54;">
  <div class="container px-4 px-lg-5 my-5">
      <div class="text-center text-white">
          <h1 class="display-4 fw-bolder">iPad</h1>
          <p class="lead fw-normal text-white-50 mb-0"></p>
      </div>
  </div>
</header>
<section class="py-5" style="background-color:#FFF8EC;">
  <div class="container px-4 px-lg-5 mt-5">
      <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
          <div class="col mb-5" *ngFor="let category of category">
              <div class="card h-100">
                  <!-- Sale badge-->
                  <!--<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>-->
                  <!-- Product image-->
                  <img class="card-img-top" src="{{category.filePath}}" style="height:250px ;width:268px;" alt="{{category.name}}" />
                  <!--<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />-->
                  <!-- Product details-->
                  <div class="card-body p-4">
                      <div class="text-center">
                          <!-- Product name-->
                          <h5 class="fw-bolder">{{category.name}}</h5>
                          <p>{{category.detail}}</p>
                          <!-- Product reviews
                          <div class="d-flex justify-content-center small text-warning mb-2">
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                          </div>-->
                          <!-- Product price-->
                          <!--<span class="text-muted text-decoration-line-through">$20.00</span>-->
                          ${{category.price}}
                      </div>
                  </div>
                  <!-- Product actions-->
                  <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                    <div class="login" *ngIf="isLogin()">
                      <div class="text-center">
                          <a class="btn btn-outline-dark mt-auto" (click)="addToCart(category.id,category.name,category.price,category.detail)">Add to cart</a>
                      </div>
                    </div>

                      <br />
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const productCategory_url ="http://localhost:8080/api/productCategory/"
const product_url = "http://localhost:8080/api/product/";
const customer_url = "http://localhost:8080/api/customer/";

@Component({
  selector: 'app-cate-ipad',
  templateUrl: './cate-ipad.component.html',
  styleUrls: ['./cate-ipad.component.css']
})
export class CateIpadComponent implements OnInit {
 // id:number;
  // name: string;
  // price: number;
  // detail: string;
  // filePath:string;
  // allproducts:object;
  category:object;
  compareRes: Object;
  allcustomers:any=[];
  userSession = sessionStorage.getItem('user');
  customer_id: object;
  ngOnInit(): void {
    this.getCategoryList();
  }
  constructor(private http: HttpClient, private route: ActivatedRoute){}

  getCategoryList(){
    this.http.get(productCategory_url+'all').subscribe(d=>{
      this.category=d[0].products;
      console.log(this.category)
    })
  }

  deleteproduct(id: number) {
    this.http.delete(product_url + id).subscribe(res => console.log("Result", res));
    window.location.reload()
  }

  // addToCart(name: string, price: number,detail:string) {
  //   const c = { name, price,detail }
  //   // 將name帶到後端檢查是否存在
  //   this.http.post(cart_url + name, name).subscribe(d => {
  //     // console.log("是否存在=>", d)
  //     this.compareRes = d;

  //     // 如果回傳回來為true那就無法新增並提示訊息
  //     if (this.compareRes == true) {
  //       window.alert(name + " 購物車已經存在");
  //       console.log("已經存在")
  //       // window.location.reload()
  //     } else if (this.compareRes == false) {
  //       this.http.post(cart_url + 'all', c).subscribe(d => { console.log("新增：", d) })
  //       window.location.reload()
  //     }

  //   })
  // }

  addToCart(product_id: number, name: string, price: number, detail: string) {

    // 取得所有用戶資訊
    this.http.get(customer_url + 'all').subscribe(c => {
      this.allcustomers = c;
      this.allcustomers.forEach(element => {
        // 如果比對到相同的名稱，取出customer的id
        if (this.userSession === element.name) {
          this.customer_id = element.id;
          const c = { product_id, name, price, detail };
          this.http.post(customer_url + element.id + '/' + product_id, c).subscribe(d => {
            console.log(customer_url + element.id + '/' + product_id)
          })
        }
      })

    });

  }
  isLogin() {
    return sessionStorage.getItem('user') != null;
  }
}

# cate iphone-html

<!-- Header-->
<header class="py-5" style="background-color:#5E5A54;">
  <div class="container px-4 px-lg-5 my-5">
      <div class="text-center text-white">
          <h1 class="display-4 fw-bolder">Iphone</h1>
          <p class="lead fw-normal text-white-50 mb-0"></p>
      </div>
  </div>
</header>
<section class="py-5" style="background-color:#FFF8EC;">
  <div class="container px-4 px-lg-5 mt-5">
      <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
          <div class="col mb-5" *ngFor="let category of category">
              <div class="card h-100">
                  <!-- Sale badge-->
                  <!--<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>-->
                  <!-- Product image-->
                  <img class="card-img-top" src="{{category.filePath}}" style="height:250px ;;width:268px;" alt="{{category.name}}" />
                  <!--<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />-->
                  <!-- Product details-->
                  <div class="card-body p-4">
                      <div class="text-center">
                          <!-- Product name-->
                          <h5 class="fw-bolder">{{category.name}}</h5>
                          <p>{{category.detail}}</p>
                          <!-- Product reviews
                          <div class="d-flex justify-content-center small text-warning mb-2">
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                          </div>-->
                          <!-- Product price-->
                          <!--<span class="text-muted text-decoration-line-through">$20.00</span>-->
                          ${{category.price}}
                      </div>
                  </div>
                  <!-- Product actions-->
                  <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                    <div class="login" *ngIf="isLogin()">
                      <div class="text-center">
                          <a class="btn btn-outline-dark mt-auto" (click)="addToCart(category.id,category.name,category.price,category.detail)">Add to cart</a>
                      </div>
                    </div>

                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const productCategory_url = "http://localhost:8080/api/productCategory/"
const product_url = "http://localhost:8080/api/product/";
const customer_url = "http://localhost:8080/api/customer/";

@Component({
  selector: 'app-cate-phone',
  templateUrl: './cate-phone.component.html',
  styleUrls: ['./cate-phone.component.css']
})
export class CatePhoneComponent implements OnInit {
  // id:number;
  // name: string;
  // price: number;
  // detail: string;
  // filePath:string;
  // allproducts:object;
  category: object;
  compareRes: Object;
  allcustomers: any = [];
  userSession = sessionStorage.getItem('user');
  customer_id: object;
  ngOnInit(): void {
    this.getCategoryList();
  }
  constructor(private http: HttpClient) { }

  getCategoryList() {
    this.http.get(productCategory_url + 'all').subscribe(d => {
      this.category = d[1].products;
      console.log(this.category)
    })
  }

  deleteproduct(id: number) {
    this.http.delete(product_url + id).subscribe(res => console.log("Result", res));
    window.location.reload()
  }

  // addToCart(name: string, price: number,detail:string) {
  //   const c = { name, price,detail}
  //   // 將name帶到後端檢查是否存在
  //   this.http.post(cart_url + name, name).subscribe(d => {
  //     // console.log("是否存在=>", d)
  //     this.compareRes = d;

  //     // 如果回傳回來為true那就無法新增並提示訊息
  //     if (this.compareRes == true) {
  //       window.alert(name + " 購物車已經存在");
  //       console.log("已經存在")
  //       // window.location.reload()
  //     } else if (this.compareRes == false) {
  //       this.http.post(cart_url + 'all', c).subscribe(d => { console.log("新增：", d) })
  //       window.location.reload()
  //     }

  //   })
  // }

  addToCart(product_id: number, name: string, price: number, detail: string) {

    // 取得所有用戶資訊
    this.http.get(customer_url + 'all').subscribe(c => {
      this.allcustomers = c;
      this.allcustomers.forEach(element => {
        // 如果比對到相同的名稱，取出customer的id
        if (this.userSession === element.name) {
          this.customer_id = element.id;
          const c = { product_id, name, price, detail };
          this.http.post(customer_url + element.id + '/' + product_id, c).subscribe(d => {
            console.log(customer_url + element.id + '/' + product_id)
          })
        }
      })

    });

  }
  isLogin() {
    return sessionStorage.getItem('user') != null;
  }
}

# login -html

<!-- <div *ngIf="!isLogin()">
  <div style="color: red;" *ngIf="isFail">{{warnMessage}}</div>
  <div>
    <label>帳號<input type="text" name="username" [(ngModel)]="username"></label>
    <label>信箱<input type="text" name="email" [(ngModel)]="email"></label><br />
    <button (click)="login()">Login</button>
  </div>
</div>

<hr>

<div *ngIf="isLogin()">
  <h1>Hello {{username}}</h1>
  <button (click)="logout()">logout</button>
</div> -->
<html>
<body>
  <div class="system_name">
    <h2>登入</h2>
  </div>

  <div class="login_page">
    <div id="container1">

      <div class="login" *ngIf="!isLogin()">
        <h3>Login</h3>
        <div>
          <input type="text" id="username" name="username" placeholder="帳號" [(ngModel)]="username" required>
          <div class="tab"></div>
          <input type="password" id="password" name="password" placeholder="密碼" [(ngModel)]="password" required>
          <div class="tab"></div>
          <div style="color: red; margin-left: 40px;" *ngIf="isFail">{{warnMessage}}</div>
          <button type="button" class="btn btn-warning" (click)="login()">登入</button>
        </div>

        <!-- <h5 onclick="show_hide()">註冊帳號</h5> -->
        <button type="button" class="btn btn-warning" routerLink='/register'>註冊帳號</button>
        <!-- <button type="button" class="btn btn-warning" routerLink='/register'>修改密碼</button> -->

      </div>
      <!-- login end-->
      <div *ngIf="isLogin()">
        <br/><br/><br/>
        <h1 style="size: 16px;margin-left: 32%;">登入成功</h1>
        <br/><br/><br/>
        <button type="button" class="btn btn-warning" routerLink="/">前往首頁</button>
        <button type="button" class="btn btn-warning" (click)="logout()" routerLink="/">登出</button>
      </div>
    </div><!-- container1 end-->
  </div><!-- login_page end-->

</body>

</html>

<br><br><br><br><br><br>

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

const customer_url="http://localhost:8080/api/customer/";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  username :string;
  password :string;
  isFail: boolean =false;
  warnMessage:String='帳號或密碼錯誤';

  // customer:Object;
  // customers:Object;
  allcustomers: any=[];

  ngOnInit(): void {
    this.getAllCustomerList();
  }
  constructor(private http: HttpClient){}

  getAllCustomerList(){
    this.http.get(customer_url+'all').subscribe(c => {
      this.allcustomers.push(c)
  })
  }

  login(){
    sessionStorage.removeItem('user');
    console.log(this.allcustomers[0])
    this.allcustomers[0].forEach(element => {
      if(this.username===element.name && this.password===element.password){
      sessionStorage.setItem('user',this.username);
      this.isFail=false;
      window.location.reload()
    }else{
      this.isFail=true;
    }
    });
  }

  isLogin(){
    return sessionStorage.getItem('user')!=null;
  }
  logout(){
    sessionStorage.removeItem('user');
  }

}

# modify_product -html

<h1>修改商品</h1>

<form #tForm="ngForm" (ngSubmit)="doSubmit(tForm)">
  <div class="form-group">
    <div class="form-field">
      <label for="productName" style="font-size: 23px;margin-top: 15px;">商品名稱</label><br />
      <input type="text" #tName="ngModel" name="name" class="form-control" id="productName" aria-describedby="emailHelp"
        placeholder="請輸入商品名稱..." [(ngModel)]="name" required="required">
      <ng-container *ngIf="tName.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tName.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>
  <div class="form-group">
    <div class="form-field">
      <label for="productPrice" style="font-size: 23px;margin-top: 15px;">商品價錢</label><br />
      <input type="number" #tprice="ngModel" name="price" class="form-control" id="productPrice" placeholder="請輸入商品價錢..."
        [(ngModel)]="price" required="required">
      <ng-container *ngIf="tprice.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tprice.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>
  <div class="form-group">
    <div class="form-field">
      <label for="productDetail" style="font-size: 23px;margin-top: 15px;">商品詳細說明</label><br />
      <input type="text" #tdetail="ngModel" name="detail" class="form-control" id="productDetail" placeholder="請輸入商品詳細說明..."
        [(ngModel)]="detail" required="required">
      <ng-container *ngIf="tdetail.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tdetail.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>

  <div class="form-group">
    <div class="form-field">
      <label for="productCategory" style="font-size: 23px;margin-top: 15px;">商品分類</label><br />
      <select  type="select" #tcategory="ngModel" name="category" class="form-control" id="productCategory" placeholder="請輸入商品分類..."
      [(ngModel)]="category" required="required">
      <option *ngFor="let cate of allCategory" value="{{cate.id}}">{{cate.name}}</option>
      </select>
      <ng-container *ngIf="tcategory.invalid && tForm.submitted">
        <p class="error-message" *ngIf="tcategory.errors?.required">此欄位為必填</p>
      </ng-container>
    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="tForm.invalid" (click)="ModifyProduct()" routerLink="/">送出</button>
  <button type="submit" class="btn btn-secondary" (click)="tForm.reset()">清除</button>
</form>

<br/><br/><br/><br/><br/>

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { AddProductComponent } from '../add-product/add-product.component';

const Modifyproduct_url = "http://localhost:8080/api/product/";
const productCategory_url = "http://localhost:8080/api/productCategory/"

@Component({
  selector: 'app-modify-product',
  templateUrl: './modify-product.component.html',
  styleUrls: ['./modify-product.component.css']
})
export class ModifyProductComponent implements OnInit {
  // id:number;
  name: string;
  price: number;
  detail: string;
  // allproducts: Object;
  filePath: string;
  p: { id: number, name: string, price: number, detail: string }
  location: any;
  category: string;
  // cate:object;
  allCategory: any = [];

  constructor(private http: HttpClient, private route: ActivatedRoute) {

  }
  ngOnInit(): void {
    this.p = {
      id: this.route.snapshot.params['id'],
      name: this.route.snapshot.params['name'],
      price: this.route.snapshot.params['price'],
      detail: this.route.snapshot.params['detail']
    };
    this.route.params.subscribe((params: Params) => {
      this.p.id = params['id'];
      this.p.name = params['name'];
      this.p.price = params['price'];
      this.p.detail = params['detail'];
    });
    this.name = this.p.name;
    this.price = this.p.price;
    this.detail = this.p.detail;
    this.getCategory();
  }

  ModifyProduct() {
    const c = { name: this.name, price: this.price, detail: this.detail, filePath: this.filePath }
    if (confirm("是否修改商品?") == true) {
      this.http.put(Modifyproduct_url + this.p.id + '/' + this.category, c).subscribe(d => { console.log("修改：", d) })
      console.log(this.category)
    }
  }

  goBack(): void {
    this.location.back();
  }

  getCategory() {
    this.http.get(productCategory_url + 'all').subscribe(d => {
      this.allCategory = d;
      // console.log(this.allCategory)
    })
  }

  doSubmit(addproduct: AddProductComponent): void {
    // console.log('submit new  data', addproduct);
  }

  

}

# product -html

<!-- Header-->
<header class="py-5" style="background-color:#5E5A54;">
  <div class="container px-4 px-lg-5 my-5">
    <div class="text-center text-white">
      <h1 class="display-4 fw-bolder">ALL</h1>
      <p class="lead fw-normal text-white-50 mb-0"></p>
    </div>
  </div>
</header>
<section class="py-5" style="background-color:#FFF8EC;">
  <div class="container px-4 px-lg-5 mt-5">
    <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
      <div class="col mb-5" *ngFor="let product of products">
        <div class="card h-100">
          <!-- Sale badge-->
          <!--<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>-->
          <!-- Product image-->
          <img class="card-img-top" src="{{product.filePath}}" style="height:250px ;width:268px;"
            alt="{{product.name}}" />
          <!--<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />-->
          <!-- Product details-->
          <div class="card-body p-4">
            <div class="text-center">
              <!-- Product name-->
              <h5 class="fw-bolder">{{product.name}}</h5>
              <p>{{product.detail}}
              </p>
              <!-- Product reviews
                          <div class="d-flex justify-content-center small text-warning mb-2">
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                              <div class="bi-star-fill"></div>
                          </div>-->
              <!-- Product price-->
              <!--<span class="text-muted text-decoration-line-through">$20.00</span>-->
              ${{product.price}}
            </div>
          </div>
          <!-- Product actions-->
          <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
            <div class="login" *ngIf="isLogin()">
              <div class="text-center">
                <a class="btn btn-outline-dark mt-auto"
                  (click)="addToCart(product.id,product.name,product.price,product.detail)">Add to cart</a>
              </div>
            </div>
            <br />
            <div class="text-center">
              <a class="btn btn-outline-dark mt-auto"
                routerLink="/product/{{product.id}}/{{product.name}}/{{product.price}}/{{product.detail}}"
                routerLinkActive="active">Modify Product</a>
            </div>
            <br />
            <div class="text-center">
              <a class="btn btn-outline-dark mt-auto" (click)="deleteproduct(product.id)">Delete Product</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const product_url = "http://localhost:8080/api/product/";
const customer_url = "http://localhost:8080/api/customer/";

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  // id: number;
  // name: string;
  // price: number;
  // filePath: string;
  // amount: number;
  // detail: string;
  // upDate: Date;
  // category: string;
  // product: Object;
  products: Object;
  compareRes: Object;
  userSession = sessionStorage.getItem('user');
  customer_id: object;
  product_name:object;
  allcustomers: any = [];
  carts: any = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    // this.getAllCart();
    this.getproductList();
  }

  getproductList() {
    this.http.get(product_url + 'all').subscribe(d => {
      this.products = d
      console.log(this.products)
    })
  }

  deleteproduct(id: number) {
    if (confirm("是否刪除商品?") == true) {
      this.http.delete(product_url + id).subscribe(res => console.log("Result", res));
      console.log(product_url + id)
      window.location.reload()
    }
  }

  // addToCart(product_id: number,name: string, price: number,detail:string) {

  //   const c = { name, price,detail}
  //   // 將name帶到後端檢查是否存在
  //   this.http.post(product_url + name, name).subscribe(d => {
  //     this.compareRes = d;

  //     // 如果回傳回來為true那就無法新增並提示訊息
  //     if (this.compareRes == true) {
  //       window.alert(name + " 購物車已經存在");
  //       console.log("已經存在")
  //       // window.location.reload()
  //     } else if (this.compareRes == false) {
  //       this.http.get(product_url + 'all').subscribe(c => {
  //         this.allcustomers = c;
  //         this.allcustomers.forEach(element => {

  //           // 如果比對到相同的名稱，取出customer的id
  //           if (this.userSession === element.name) {
  //             this.customer_id=element.id;
  //             const c={product_id,name,price,detail};
  //             this.http.post(customer_url + element.id+'/' + product_id,c).subscribe(d => {
  //               console.log(customer_url + element.id+'/' + product_id)
  //             })
  //           }
  //         })

  //       });
  //       window.location.reload()
  //     }

  //   })
  // }

  addToCart(product_id: number, name: string, price: number, detail: string) {
    // 取得所有用戶資訊
    this.http.get(customer_url + 'all').subscribe(c => {
      this.allcustomers = c;
      this.allcustomers.forEach(element => {
        // 如果比對到相同的名稱，取出customer的id
        if (this.userSession === element.name) {
          this.customer_id = element.id;
          const c = { product_id, name, price, detail };
          this.http.post(customer_url + this.customer_id + '/' + product_id, c).subscribe(d => {
            console.log(d)
          })
        }
      })
    });
  }

  // addToCart(product_id: number, name: string, price: number, detail: string) {
  //   this.http.get(customer_url + 'all').subscribe(d => {
  //     this.allcustomers = d
  //     this.allcustomers.forEach(element => {
  //       if (element.name == name) {
  //         this.carts = element.products
  //         this.carts.forEach((element: any = []) => {

  //           console.log("名稱", this.carts)
  //         });
  //       }
  //     });

  //   })
  // }

  isLogin() {
    return sessionStorage.getItem('user') != null;
  }

}

# register -html

<html>

<body>
  <div class="system_name">
    <h2>註冊</h2>
  </div>

  <div class="login_page">
    <div id="container1">

      <div class="register">
        <h3>Register</h3>
        <div>
          <input type="text" id="username" name="username" placeholder="帳號" [(ngModel)]="name" required="required">
          <div class="tab"></div>
          <input type="password" id="password" name="password" placeholder="密碼" [(ngModel)]="password" required="required">
          <div class="tab"></div>
          <div style="color: red; margin-left: 40px;" *ngIf="isFail">{{warnMessage}}</div>
          <div style="color: red; margin-left: 40px;" *ngIf="isFail2">{{warnMessage2}}</div>
          <button type="button" class="btn btn-warning" (click)="CreateUser()">註冊</button>
        </div>

        <!-- <h5 onclick="show_hide()">註冊帳號</h5> -->
        <button type="button" class="btn btn-warning" routerLink='/login'>返回登入</button>

      </div><!-- login end-->
      <!-- <div >
        <h1 style="size: 16px;">登入成功</h1>
        <button type="button" class="btn btn-warning"  routerLink="/">logout</button>
      </div> -->
    </div><!-- container1 end-->
  </div><!-- login_page end-->

</body>

</html>

<br><br><br><br><br>

# ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

const customer_url = "http://localhost:8080/api/customer/";

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  name: string;
  password: string;
  isFail: boolean = false;
  warnMessage: String = '帳戶已經存在';
  isFail2: boolean = false;
  warnMessage2: String = '請輸入帳號或密碼!';

  customer: Object;
  customers: Object;
  allcustomers: any = [];

  // c:any;

  ngOnInit(): void {
    // this.CreateUser();
  }
  constructor(private http: HttpClient) { }

  CreateUser() {
    //帳號或密碼為空，顯示錯誤訊息 "請輸入帳號或密碼"
    if (this.name == null || this.password == null) {
      this.isFail2 = true;
    }
    else {
      this.isFail2 = false;
      this.http.post(customer_url + this.name, this.name).subscribe(res => {
        console.log(res)
        // 判斷帳號有無重複
        if (res == true) {
          console.log("已經存在")
          this.isFail = true;
        }
        else if (res == false) {
          const c = { name: this.name, password: this.password }
          console.log("!!"+this.name)
          this.http.post(customer_url + 'all', c).subscribe(d => {
            // console.log(d);
            this.isFail = false;
          })
          window.alert("註冊成功");
          window.location.reload();
        }

      })
    }
  }
}

# appcomponent -html

<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>


<body>
  <!-- Navigation-->
  <nav class="navbar navbar-expand-lg" style="background-color: #b8aa95;">
    <div class="container px-4 px-lg-5">
      <a class="navbar-brand" routerLink="" routerLinkActive="active">3C SHOP</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span
          class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
          <li class="nav-item"><a class="nav-link active" aria-current="page" routerLink=""
              routerLinkActive="active">首頁</a></li>
          <!--<li class="nav-item"><a class="nav-link" routerLink="Iphone" routerLinkActive="active">Iphone</a></li>
          <li class="nav-item"><a class="nav-link" routerLink="iPad" routerLinkActive="active">iPad</a></li>-->

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">商品分類</a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <!--<li><a class="dropdown-item">商品分類</a></li>
              <li>
                <hr class="dropdown-divider" />
              </li>-->
              <li><a class="dropdown-item" routerLink="Iphone" routerLinkActive="active">Iphone</a></li>
              <li><a class="dropdown-item" routerLink="iPad" routerLinkActive="active">iPad</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" routerLink="addproduct" routerLinkActive="active">新增商品</a></li>
        </ul>
        <div *ngIf="isLogin()">
          <button [routerLink]="['/cart']" routerLinkActive="active" class="btn btn-outline-dark"
            style="margin-right: 10px;">
            <i class="bi-cart-fill me-1"></i>
            Cart
            <!-- <span class="badge bg-dark text-white ms-1 rounded-pill">0</span> -->
          </button>
        </div>
        <div class="login" *ngIf="!isLogin()">
          <button routerLink='/login' type="button" class="btn btn-outline-light me-1">Login</button>
        </div>
        <br>
        <div *ngIf="isLogin()">
          <button (click)="logout()" routerLink="/" type="button" class="btn btn-outline-light me-1">Logout</button>
          Hi, {{userSession}}
        </div>
      </div>
    </div>
  </nav>

  <!-- Section-->
  <router-outlet></router-outlet>
  <!-- Footer-->
  <footer class="py-5" style="background-color:#5E5A54;">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; 3C SHOP 2023</p>
    </div>
  </footer>
  <!-- Bootstrap core JS-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Core theme JS
        <script src="js/scripts.js"></script>-->
</body>

</html>

# appcomponent ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  isFail: boolean = false;
  userSession = sessionStorage.getItem('user');

  ngOnInit(): void {
    this.userSession = sessionStorage.getItem('user');
    this.isLogin()
  }
  constructor(private http: HttpClient) { }
  title = 'finallab';

  isLogin(){
    return sessionStorage.getItem('user')!=null;
  }
  logout(){
    sessionStorage.removeItem('user');
  }
}

# app module ts

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import　{RouterModule,Routes} from '@angular/router';

import { AppComponent } from './app.component';
import {  ProductComponent } from './product/product.component';
import { CartComponent } from './cart/cart.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { AddProductComponent } from './add-product/add-product.component';
import { ModifyProductComponent } from './modify-product/modify-product.component';
import { CatePhoneComponent } from './cate-phone/cate-phone.component';
import { CateIpadComponent } from './cate-ipad/cate-ipad.component';

const appRoute :Routes=[
  {path:'',component: ProductComponent},
  {path:'product',component: ProductComponent},
  // {path:'product/:id',component: ModifyProductComponent},
  {path:'product/:id/:name/:price/:detail',component: ModifyProductComponent},
  {path:'addproduct',component:AddProductComponent},
  {path:'cart',component:CartComponent },
  {path:'login',component:LoginComponent },
  {path:'register',component:RegisterComponent },
  {path:'Iphone',component:CatePhoneComponent },
  {path:'iPad',component:CateIpadComponent },
  // {path:'Iphone/:id/:name/:price/:detail',component:CatePhoneComponent },
  // {path:'iPad/:id/:name/:price/:detail',component:CateIpadComponent }
]

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    AddProductComponent,
    CartComponent,
    LoginComponent,
    RegisterComponent,
    ModifyProductComponent,
    CatePhoneComponent,
    CateIpadComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(appRoute),
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }