Mengambil dan Mempersembahkan Produk dalam Nuxt.js untuk Kedai E-Dagang Anda

Semak siaran ini dalam nota web saya!

Akhir sekali, perkara yang menarik, selepas kami selesai dengan UI, kami boleh beralih kepada melaksanakan fungsi utama. Jadi dalam artikel ini, kami akan bercakap tentang mengambil data dari pelayan dan menyimpannya dalam storan Pinia, juga kami akan memaparkan senarai kedai dan halaman produk kami secara dinamik. Seperti biasa, kita akan mulakan dengan menentukan rancangan kerja yang perlu dilakukan:

1. Mengkonfigurasi Modul Axios Mudah
2. Mengambil dan Memaparkan Senarai Produk
3. Menetapkan Halaman Dinamik Produk dengan Nuxt.js

Sekarang kami mempunyai rancangan yang jelas, tiba masanya untuk menyingsing lengan baju dan mula bekerja. Kami akan mulakan dengan mengkonfigurasi modul Axios, yang akan berfungsi sebagai tulang belakang untuk mengambil data daripada pelayan.

1. Mengkonfigurasi Modul Axios Mudah

Kami telah memasang axios dalam salah satu siaran kami sebelum ini: "Membina Kedai E-Dagang Anda dengan Nuxt.js: Panduan Langkah demi Langkah untuk Persediaan Projek", jadi kini kami boleh mengkonfigurasinya dan bersedia untuk digunakan.

Mari buat folder "http" di dalam direktori akar kami, dan di dalam folder http buat fail http-client.js. Ia akan menjadi fail untuk tetapan dan pemintas Axios utama kami jika kami memerlukannya, tetapi buat masa ini, kami hanya akan mendaftarkan Axios dengan URL asas.

import axios from "axios";

export const HTTP = axios.create({
    baseURL: "http://localhost:3005",
});

Di dalam folder "http" kami akan mencipta folder "perkhidmatan" yang akan menyimpan perkhidmatan axios kami untuk fungsi aplikasi yang berasingan. Di dalam direktori "perkhidmatan" cipta produk perkhidmatan pertama.service.js ia akan menyimpan perkhidmatan REST API kami untuk produk.

Kami boleh menambah dua fungsi get pertama dengan axios, untuk itu kami hanya perlu mengimport HTTP dan mencipta fungsi anak panah yang akan mengembalikan data daripada permintaan.

import { HTTP } from '../http-client';

export const getAllProducts = () => 
    HTTP.get('/products').then(({data}) => data )

export const getProductById = (id) => 
    HTTP.get(`/products/${id}`).then(({data}) => data )

Seperti yang anda ingat, kami juga memasang "json-server" untuk meniru pelayan bahagian belakang, dan mengisinya terlebih dahulu dengan tatasusunan produk, kami boleh mengemas kini data produk dan mencipta lebih banyak produk seperti ini:

{ 
    "id": "1", 
    "name": "Product 1",
    "instagram": "https://instagram.com",
    "pinterest": "https://pinterest.com",
    "image": "https://images.pexels.com/photos/2081332/pexels-photo-2081332.jpeg?auto=compress&cs=tinysrgb&w=600",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "price": 100
},

Kini, kami mempunyai pelayan dev sedia untuk digunakan dengan data produk dan fungsi yang akan memanggil API pelayan tersebut. Langkah seterusnya kami akan melaksanakan pengambilan data ini ke dalam halaman produk.

2. Mengambil dan Memaparkan Senarai Produk

Buat kedai products.js baharu dan tambahkan pembolehubah "productsList" yang akan menyimpan senarai produk yang diterima daripada pelayan dan pembolehubah "product" yang akan menyimpan produk berasingan untuk halaman Produk. Kemudian kami akan menambah dua tindakan yang akan menggunakan perkhidmatan Axios untuk mengambil data daripada pelayan dan menetapkannya kepada keadaan. Dan jangan lupa untuk menambah pengambil.

import { defineStore } from 'pinia';
import {
    getAllProducts,
    getProductById
} from '@/http/services/products.services';

export const useProductsStore = defineStore({
    id: 'products',
    state: () => ({
        productsList: [],
        product: null
    }),
    actions: {
        async aGetAllProducts() {
            await getAllProducts()
            .then((data) => {
                this.productsList = data;
            })
            .catch((error) => {
                console.log(error);
            })
        },
        async aGetProductById(id) {
            await getProductById(id)
            .then((data) => {
                this.product = JSON.parse(JSON.stringify(data));
            })
            .catch((error) => {
                console.log(error);
            })
        }
    },
    getters: {
        gProductsList: (state) => state.productsList,
        gProduct: (state) => state.product
    }
})

Nampak hebat. Kita boleh mula menggunakan komponen dalam kedai ini.

Buka halaman kedai kami, import kedai produk dan dalam cangkuk kitaran hayat yang dibuat (ia akan mengambil data sebelum memaparkan keseluruhan halaman) hubungi tindakan "aGetAllProducts" kami.

created() {
    const productsStore = useProductsStore();
    productsStore.aGetAllProducts();
}

Selepas itu, kita boleh menggunakan getter untuk mendapatkan dan memaparkan senarai produk. Kami perlu menghantar data senarai produk ke senarai kad produk kami.

<div class="products__content">
    <ProductCard v-for="product in productsStore.gProductsList" :key="product.name" :product="product" />
</div>

Sekarang kita perlu memulakan json-server dengan arahan: "json-server --watch db/db.json --port 3005". Dan mulakan pelayan Nuxt dev kami dalam PowerShell yang berasingan dengan arahan: "npm run dev".

Sekarang, selepas melawati atau memuat semula halaman Kedai kami, kami akan menghantar permintaan kepada pelayan json kami untuk data produk dan memaparkan data tersebut ke halaman kami.

Hebat. Tetapi masalahnya ialah apabila kita mengklik pada kad produk, kita akan dialihkan ke halaman produk dengan data statik. Setiap halaman akan memaparkan maklumat dan imej yang sama, untuk menyelesaikannya mari kita beralih ke langkah seterusnya.

3. Menetapkan Halaman Dinamik Produk dengan Nuxt.js

Semasa kami membina halaman produk, kami menamakan folder kami dengan kurungan untuk menjadikan halaman itu dinamik. Kini apabila kami mengklik pada kad produk kami dialihkan ke halaman kedai dengan ID produk dalam URL, itu kerana Nuxt menggantikan "produk" di dalam nama folder dengan IDnya, tetapi halaman kami masih statik. Untuk mengubahnya kita perlu mendapatkan ID produk daripada URL dan kemudian mengambil data produk daripada pelayan dengan ID tersebut.

Kami telah mencipta fungsi untuk mengambil data daripada pelayan, kini kami perlu mengemas kini halaman Produk kami. Untuk itu, sila buka fail index.vue di dalam folder [produk] dan import kedai produk kami, kemudian tambahkan cangkuk yang dibuat di dalam komponen kami di mana kami akan mendapatkan parameter penghala dan menghantarnya sebagai parameter lain ke dalam tindakan "aGetProductById".

created() {
    const productId = this.$route.params.product;
    this.productsStore.aGetProductById(productId);
}

Selain itu, kami perlu mengemas kini templat kami (tajuk, harga, penerangan, imej ...) hanya untuk memaparkan data yang diterima daripada pelayan.
Imej:

<div class="product-info__image--main">
    <img :src="productsStore.gProduct?.image" alt="product image">
</div>

Product Description:

<h1 class="product-info__content--title">{{ productsStore.gProduct?.name }}</h1>
<p class="product-info__content--price">{{ productsStore.gProduct?.price }} $</p>
<p class="product-info__content--description">{{ productsStore.gProduct?.description }}</p>

Now, let's restart the Nuxt dev server and check the result by clicking on different product cards. We should see another product each time.

In this article, we explored the process of fetching and presenting products in a Nuxt.js e-commerce application. We started by configuring the Axios module, which served as the backbone for making API requests to our server.

Keep in mind that these code examples are only the top of the iceberg. Feel free to experiment with advanced approaches, add new features, and optimize your codebase as you improve your e-commerce application to better suit the demands of your customers and company.

If you would need a source code for this tutorial you can get it here.

Atas ialah kandungan terperinci Mengambil dan Mempersembahkan Produk dalam Nuxt.js untuk Kedai E-Dagang Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!