واکشی و ارائه محصولات در Nuxt.js برای فروشگاه تجارت الکترونیک شما

این پست را در یادداشت های وب من بررسی کنید!

در نهایت، چیزهای جالب، پس از پایان کار با UI، می‌توانیم به پیاده‌سازی عملکرد اصلی برویم. بنابراین در این مقاله، ما در مورد واکشی داده ها از سرور و ذخیره آن در ذخیره سازی Pinia صحبت خواهیم کرد، همچنین لیست فروشگاه و صفحه محصول خود را به صورت پویا ارائه خواهیم داد. طبق معمول، ما با تعریف برنامه کاری که باید انجام شود شروع می کنیم:

1. پیکربندی ماژول ساده Axios
2. واکشی و ارائه فهرست محصولات
3. تنظیم صفحات پویا محصول با Nuxt.js

حالا که برنامه مشخصی داریم، وقت آن است که آستین ها را بالا بزنیم و دست به کار شویم. ما با پیکربندی ماژول Axios شروع می کنیم، که به عنوان ستون فقرات برای واکشی داده ها از سرور عمل می کند.

1. پیکربندی ماژول ساده Axios

ما قبلاً axios را در یکی از پست‌های قبلی خود نصب کرده‌ایم: «ساخت فروشگاه تجارت الکترونیک شما با Nuxt.js: راهنمای گام به گام برای راه‌اندازی پروژه»، بنابراین اکنون می‌توانیم آن را پیکربندی کرده و برای استفاده آماده کنیم.

بیایید پوشه “http” را در پوشه اصلی خود ایجاد کنیم، و در داخل پوشه http، فایل http-client.js را ایجاد کنیم. در صورت نیاز، فایلی برای تنظیمات اصلی و رهگیرهای Axios ما خواهد بود، اما در حال حاضر، ما فقط Axios را با URL اصلی ثبت می کنیم.

import axios from "axios";

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

در داخل پوشه “http” ما یک پوشه “خدمات” ایجاد خواهیم کرد که خدمات axios ما را برای عملکرد جداگانه برنامه ذخیره می کند. در داخل دایرکتوری “services” اولین سرویس products.service.js را ایجاد کنید که خدمات REST API ما را برای محصولات ذخیره می کند.

ما می‌توانیم دو تابع دریافت اول را با axios اضافه کنیم، برای این کار فقط باید HTTP را وارد کنیم و یک تابع پیکان ایجاد کنیم که داده‌های درخواست را برمی‌گرداند.

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 )

همانطور که به یاد دارید ما همچنین “json-server” را برای تقلید از سرور باطن نصب کردیم و آن را با آرایه محصولات از قبل پر کردیم، می توانیم داده های محصول را به روز کنیم و محصولات بیشتری مانند این ایجاد کنیم:

{ 
    "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
},

اکنون، ما یک سرور توسعه دهنده آماده برای استفاده با داده ها و عملکردهای محصول داریم که آن سرور API را فراخوانی می کند. گام بعدی ما پیاده سازی این داده ها در صفحات محصول خواهد بود.

2. واکشی و ارائه فهرست محصولات

یک فروشگاه product.js جدید ایجاد کنید و یک متغیر “productsList” که لیستی از محصولات دریافت شده از سرور را ذخیره می کند و یک متغیر “product” که محصولات جداگانه را برای صفحات محصول ذخیره می کند، اضافه کنید. سپس دو عمل اضافه می کنیم که از سرویس های Axios برای واکشی داده ها از سرور و تنظیم آن در حالت استفاده می کند. و فراموش نکنید که گیرنده ها را اضافه کنید.

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
    }
})

عالی به نظر می رسد. ما می توانیم از این فروشگاه در داخل کامپوننت ها استفاده کنیم.

صفحه فروشگاه ما را باز کنید، فروشگاه محصولات را وارد کنید و در داخل قلاب چرخه حیات ایجاد شده (قبل از نمایش کل صفحه، داده ها را دریافت می کند) اقدام “aGetAllProducts” ما را فراخوانی کنید.

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

پس از آن، می توانیم از دریافت کننده ها برای دریافت و رندر لیست محصول استفاده کنیم. ما باید داده های لیست محصول را به لیست کارت های محصول خود ارسال کنیم.

اکنون باید json-server را با دستور “json-server –watch db/db.json –port 3005” راه اندازی کنیم. و سرور Nuxt dev ما را در PowerShell جداگانه با دستور: “npm run dev” راه اندازی کنید.

اکنون، پس از بازدید یا بازخوانی صفحه فروشگاه خود، درخواستی برای داده های محصول به سرور json خود ارسال می کنیم و آن داده ها را در صفحه خود ارائه می دهیم.

عالی. اما مشکل اینجاست که وقتی روی کارت محصول کلیک می کنیم به صفحه محصول با داده های ثابت هدایت می شویم. هر صفحه اطلاعات و تصاویر یکسانی را نشان می دهد، برای حل این مشکل، اجازه دهید به مرحله بعدی برویم.

3. تنظیم صفحات پویا محصول با Nuxt.js

هنگامی که در حال ساختن یک صفحه محصول بودیم، نام پوشه خود را با براکت گذاشتیم تا آن صفحه را پویا کنیم. اکنون وقتی روی کارت محصول کلیک می کنیم به صفحه فروشگاه با شناسه محصول در URL هدایت می شویم، به این دلیل که Nuxt در حال جایگزینی “محصول” در داخل نام پوشه با شناسه خود است، اما صفحه ما هنوز ثابت است. برای تغییر آن، باید شناسه محصول را از URL دریافت کنیم و سپس داده های محصول را با آن شناسه از سرور واکشی کنیم.

ما قبلاً قابلیتی برای واکشی داده ها از سرور ایجاد کرده ایم، اکنون باید صفحه محصول خود را به روز کنیم. برای این کار، لطفاً فایل index.vue را در داخل باز کنید [product] پوشه و فروشگاه محصولات ما را وارد کنید، سپس قلاب ایجاد شده را در داخل کامپوننت خود اضافه کنید، جایی که پارامتر روتر را دریافت می کنیم و آن را به عنوان پارامتر دیگری در اکشن “aGetProductById” ارسال می کنیم.

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

همچنین، ما باید قالب خود (عنوان، قیمت، توضیحات، تصویر …) را فقط برای رندر کردن داده های دریافتی از سرور به روز کنیم.
تصویر:

توضیحات محصول:

{{ productsStore.gProduct?.price }} $
{{ productsStore.gProduct?.description }}

حال، بیایید سرور توسعه دهنده Nuxt را مجددا راه اندازی کنیم و با کلیک بر روی کارت های مختلف محصول، نتیجه را بررسی کنیم. ما باید هر بار محصول دیگری را ببینیم.

در این مقاله، فرآیند واکشی و ارائه محصولات در یک برنامه تجارت الکترونیک Nuxt.js را بررسی کردیم. ما با پیکربندی ماژول Axios که به عنوان ستون فقرات درخواست های API به سرور ما عمل می کرد، شروع کردیم.

به خاطر داشته باشید که این نمونه های کد فقط بالای کوه یخ هستند. به راحتی با رویکردهای پیشرفته آزمایش کنید، ویژگی‌های جدید اضافه کنید و پایگاه کد خود را بهینه کنید، زیرا برنامه تجارت الکترونیکی خود را برای مطابقت بهتر با خواسته‌های مشتریان و شرکت خود بهبود می‌بخشید.

اگر برای این آموزش به کد منبع نیاز دارید، می توانید آن را از اینجا دریافت کنید.