9. Project Enhancement.md

실제 온라인 샵처럼 바꿔보자!

Detail 페이지 추가

• product-list.ejs 수정

<div class="card__actions">
    <a href="/products/<%= product.id %>" class="btn">Details</a>
    <form action="/add-to-cart" method="POST">
        <button class="btn">Add to Cart</button>
    </form>

• model/product.js 수정

  save() {
      // id에 랜덤 값 입력하기 (데이터가 얼마 안됨으로)
    this.id = Math.random().toString(); 
    getProductsFromFile(products => {
      products.push(this);
      fs.writeFile(p, JSON.stringify(products), err => {
        console.log(err);
      });
    });

• routes/shop.js 아래 추가

router.get('/products/:productsId')

express를 사용할 때 : 를 url 에 추가하면 동적으로 데이터를 보내줄 수 있다.

참고: 라우터의 순서가 중요하다

router.get('/products/:productsId')

router.get('/products/delete')

이 순서로 /products 라우터를 만들면 동적 라우터에서 모든 요청이 걸러진다. 따라서 /products/delete 라우터를 위로 올려야 한다.

• controllers/shop.js 에 함수 추가

exports.getProduct = (req, res, next) => {
    //req.params.xxx url에서 요청한 값을 동적으로 받을 수 있다.
  const prodId = req.params.productId;
  console.log(prodId);
  res.redirect('/');
};