Nodejs 및 Vue Vite에서 카트 구축

19838 단어 vuewebdevbeginnersjavascript
본고에서, 우리는 우리의 응용 프로그램을 위해 쇼핑 카트의 앞부분을 구축할 것이다.Vue Vite를 사용하면 더 빠른 핫 모듈을 다시 로드할 수 있습니다.
당신은 우리가 이미 발표한 것을 볼 수 있습니다 backend part built in Nodejs.
Vite를 위한 응용 프로그램 디렉토리를 만들어야 합니다.데스크톱에 vue-cart 디렉터리를 만들고 다음 명령을 실행하여 setup Vite를 실행합니다.
cd desktop
mkdir vue-cart && cd vue-cart
npm init vite-app vue-cart
Vite 응용 프로그램을 초기화한 후 터미널에서 다음을 실행합니다.
cd vue-cart
npm install
code . && npm run dev
code . 명령은 비주얼 스튜디오 코드에서 이 항목을 열 것입니다.
우리는 계속해서 응용 프로그램에 사용자 인터페이스를 설정할 것이다.WrapPixel's UI Kit 에서 모든 UI 구성 요소를 얻을 수 있습니다.
Wrappixel은 온라인 템플릿 상점으로 그곳에서 좋은 UI 템플릿과 vue templates을 얻을 수 있습니다.
두 개의 구성 요소를 만듭니다: product.vue 및 chart.vue.product.Vue 는 우리의 모든 제품을 열거하고, cart.vue 는 우리의 쇼핑 카트에 있는 모든 항목을 열거할 것이다.
CDN을 index.html 파일에 추가하여 응용 프로그램에 부트를 구성해야 합니다.
우리는 안내식 css CDN에만 관심이 있습니다. 따라서 공식 안내식 CDN으로 가서 css 링크를 복사하고 색인에 추가하십시오.html 파일:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite app</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>
이게 있으면 우리는 이제 우리의 구성 요소를 설정할 수 있다.루트 Vuejs 파일을 먼저 만들고 응용 프로그램에 루트를 설정합니다.
다음 명령을 실행하여 Vue 3 라우터를 설치하십시오.
 npm i --save [email protected]
설치 후, 우리는 응용 프로그램에 대한 루트를 설정해야 한다.우리는 우리의 쇼핑 카트 항목을 표시하기 위한 기본적인 노선을 가지고 있을 것이다.router.js 디렉토리에 src 파일을 만들고 다음 코드를 추가합니다.
import {
    createWebHistory,
    createRouter
} from "vue-router";
import Home from "./components/HelloWorld.vue";
import Product from './components/product.vue'
import Cart from './components/cart.vue'
const history = createWebHistory();
const routes = [{
    path: "/",
    component: Product
}, {
    path: "/cart",
    component: Cart
}, ];
const router = createRouter({
    history,
    routes
});
export default router;
여기서 우리는 기본적으로 쇼핑카트와 제품 구성 요소를 노선으로 등록한다.
우리는 반드시 주요 간선도로에 우리의 노선을 등록해야 한다.js 파일:
import {
    createApp
} from 'vue'
import App from './App.vue'
import './index.css'
import router from "./router";

createApp(App).use(router).mount('#app')
완료되면 App.vue 루트 구성 요소를 이 구성 요소로 변경하여 모든 구성 요소를 표시해야 합니다.
<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-info">
    <div class="container">
      <router-link to="/" class="navbar-brand">Vue Cart </router-link>
      <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">
            <router-link to="/" class="nav-link">Home </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/cart" class="nav-link">Cart </router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <router-view />
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>
우리는 현재 제품 카드를 설정하고 백엔드 API에 http 요청을 할 수 있습니다.
홈 페이지를 위한 간단한 사용자 인터페이스를 만듭니다.product.vue 파일에 추가:
<template>
  <main>
    <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>
    <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-6">
                  <div class="card shop-hover border-0">
                    <img
                      src="https://images.pexels.com/photos/1005638/pexels-photo-1005638.jpeg?cs=srgb&dl=pexels-oleg-magni-1005638.jpg&fm=jpg"
                      alt="wrapkit"
                      class="img-fluid"
                    />
                    <div class="card-img-overlay align-items-center">
                      <button class="btn btn-md btn-info">
                        Add to cart
                      </button>
                    </div>
                  </div>
                  <div class="card border-0">
                    <h6><a href="#" class="link">Mens Wear </a></h6>
                    <h6 class="subtitle">by Wisdom</h6>
                    <h5 class="font-medium m-b-30">
                      $195 / <del class="text-muted line-through">$225</del>
                    </h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<style>
.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;
}
</style>
이것은 우리의 응용 프로그램에 간단한 사용자 인터페이스를 만들 것이다.다음으로 우리는 단점을 사용하기 시작해야 한다.이전 강좌에서 만든 백엔드 API를 시작합니다. 완성되면 자바스크립트를 사용하여 백엔드에 요청을 할 수 있습니다.
다음 스크립트를 제품 구성 요소의 <script> 섹션에 추가합니다.
<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  created() {
    this.getProducts();
  },
  methods: {
    async getProducts() {
      const res = await fetch("http://localhost:4000/product");
      const data = await res.json();
      this.products = new Proxy(data.data, {});
      console.log(this.products);
    },
  },
};
</script>
백엔드 API에 모든 제품 목록을 요청하고 에 정의된 제품 그룹에 제품을 저장합니다.
데이터 인스턴스.
이제 Vuejsv-for 명령을 사용하여 제품 카드 저장 열을 수정하여 제품을 순환할 수 있습니다.
     <div
          class="col-lg-4"
          v-for="product in products"
          :key="product._id"
          >
          <div class="card shop-hover border-0">
          <img
          :src="'http://localhost:4000/' + product.image"
          alt="wrapkit"
          class="img-fluid"
          />
            <div class="card-img-overlay align-items-center">
             <button class="btn btn-md btn-info">
                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">
                $195 / <del class="text-muted line-through">$225</del>
             </h5>
          </div>
     </div>
이것은 우리 데이터베이스에 저장된 모든 제품을 열거할 것이다

이제 add to cart 기능을 추가합니다.우리는 제품 Id와 기본 수량을 하나로 하고 백엔드로 보내는 방법을 만들 것입니다.addToCart 방법을 정의해 보겠습니다.
 async addToCart(id, quantity) {
      try {
        const response = await fetch("http://localhost:4000/cart", {
          method: "POST",
          body: JSON.stringify({
            productId: id,
            quantity: quantity,
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        });
        let data = await response.json();
        alert("Item added to cart");
        console.log(data);
      } catch (err) {
        alert("Something went wrong");
        console.log(err);
      }
    },
이 작업을 완료하면 버튼을 클릭하여 메서드를 트리거해야 합니다.
 <button
    class="btn btn-md btn-info"
    @click="addToCart(product._id, 1)"
    >
      Add to Cart
 </button>
여기에서 우리는 제품 id와 기본 수량을 1로 전달합니다.
이제 카트 항목을 확인하고 카트 TTEM 추가 및 카트 비우기를 시작할 수 있습니다.cart.vue 구성 요소로 이동하여 사용자 인터페이스를 구축합니다.
<template>
  <main>
    <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">Cart</h1>
              <h6 class="subtitle op-8">
                We are small team of creative people working together.
              </h6>
            </div>
            <!-- Column -->
          </div>
        </div>
      </div>
    </section>
    <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">
                  <tr>
                    <th class="b-0">Image</th>
                    <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>
                    <td>
                      <img
                        src="../assets/images/innerpage/shop/1.jpg"
                        width="200"
                        alt="wrapkit"
                      />
                    </td>
                    <td>
                      Mens Wear
                    </td>
                    <td>
                      $3000
                    </td>
                    <td>
                      <button class="btn btn-primary btn-sm">+</button> 3
                      <button class="btn btn-primary btn-sm">
                        -
                      </button>
                    </td>
                    <td class="text-right">
                      <h5 class="font-medium m-b-30">
                        $195
                      </h5>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" align="right">Subtotal :$1000</td>
<td colspan="4" align="right">
                      <button class="btn btn-danger">Empty Cart</button>
                    </td>
                  </tr>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
이것은 우리에게 간단한 사용자 인터페이스를 제공할 것이다.

백엔드에서 모든 품목을 가져오는 방법을 작성하여 모든 카트 품목을 가져옵니다.
<script>
export default {
  data() {
    return {
      carts: {},
    };
  },
  methods: {
    async getCartItems() {
      try {
        const res = await fetch("http://localhost:4000/cart");
        const data = await res.json();
        this.carts = new Proxy(data.data, {});
        console.log(this.carts);
      } catch (err) {
        console.log(err);
      }
    },
  },
  created() {
    this.getCartItems();
  },
};
</script>
이제 테이블을 다음과 같이 수정하여 카트 항목을 순환할 수 있습니다.
              <table class="table shop-table">
                      <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 v-for="(item, id) in carts.items" :key="id">
                        <td>{{ item.productId.name }}</td>
                        <td>{{ item.productId.price }}</td>
                        <td>
                          <button
                            class="btn btn-primary btn-sm"
                            @click="increaseQty(item.productId._id)"
                          >+</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">Empty Cart</button>
                        </td>
                      </tr>
                    </table>
이제 카트 품목 수를 늘리는 방법을 추가하여 카트 품목 수를 늘릴 수 있습니다.
    async increaseQty(id) {
      try {
        const res = await fetch("http://localhost:4000/cart", {
          method: "POST",
          body: JSON.stringify({
            productId: id,
            quantity: 1,
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        });
        this.getCartItems();
        alert("Item Increamented");
      } catch (err) {
        console.log(err);
      }
    },
그리고 이 방법을 듣기 위해 클릭 짝수를 추가합니다.
<button
   class="btn btn-primary btn-sm"                          
   @click="increaseQty(item.productId._id)"
   >+
</button>
+ 단추를 누르면 항목 수가 증가하고 가격이 업데이트됩니다.
빈 카트 기능을 구현해 보겠습니다.그러면 카트가 비워지고 제품 목록 페이지로 이동합니다.이 작업을 수행하는 방법을 만들려면 다음과 같이 하십시오.
  async emptyCart() {
      try {
        const res = await fetch("http://localhost:4000/cart/empty-cart", {
          method: "DELETE",
        });
        const data = await res.json();
        this.$router.push({
          path: "/",
        });
      } catch (err) {
        console.log(err);
      }
    },
그리고 이벤트 탐지기를 추가하여 이 방법을 탐지합니다.
<button class="btn btn-danger" @click="emptyCart">Empty cart</button>

운동하다

  • 감량 기능 실현
  • 카트에서 제품 분리
    • 실현된 후, 당신의 작업을git로 전송하고, 논평 부분에 링크를 추가합니다.재밌게 놀래요.😁
    QT TCP 클라이언트와 서버의 구현 절차
    XMPP 핵심 프로토콜 학습 소감 2

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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