Чӣ гуна шумо барномаи гаражии автомобилро дар Vue.js…

Ман ба компонентӣ муносибат дар Vue.js истифода мебурдам.

Мақомоти:

App.vue: Компоненти асосӣ. Дар он роутер ва нақшаҳои асосӣ дохил мешаванд.
Views: Сафарҳо (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
Components: Компонентҳои такрорӣ (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
Stores: Pinia барои идоракунии ҳолат (феҳристи паркингҳо, пурра будани ҷойҳо).
Services: Модулҳо барои кор бо API (гирифтани маълумот дар бораи паркингҳо, сабти ном/холӣ кардани ҷойҳо).

Ҳолат (Pinia):

parkingLots: Таврии объектҳои паркинг.
selectedParkingLot: Паркинги интихобшуда.
loading: Ҳолати боркунӣ.

// stores/parking.js
import { defineStore } from 'pinia';

export const useParkingStore = defineStore('parking', {
  state: () => ({
    parkingLots: [],
    selectedParkingLot: null,
    loading: false,
  }),
  actions: {
    async fetchParkingLots() {
      this.loading = true;
      // Имомияти API
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Парковка 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Парковка 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Иловаи дигар барои сабти ном/холӣ кардани ҷойҳо
  },
});

Роутинг (Vue Router):

/parking-lots: Листи паркингҳо.
/parking-lots/:id: Тафсилоти паркинг махсус.

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ParkingLotsPage from '@/views/ParkingLotsPage.vue';
import ParkingLotDetailsPage from '@/views/ParkingLotDetailsPage.vue';

const routes = [
  {
    path: '/parking-lots',
    name: 'ParkingLots',
    component: ParkingLotsPage,
  },
  {
    path: '/parking-lots/:id',
    name: 'ParkingLotDetails',
    component: ParkingLotDetailsPage,
    props: true, // интиқоли параметрҳои маршрут ҳамчун props
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Компонентҳо:

ParkingLotsPage.vue:
- Листи паркингҳоро аз Pinia мегирад.
- ParkingLotCard барои ҳар паркинг нишон медиҳад.
ParkingLotCard.vue:
- Объекти паркингро ҳамчун prop қабул мекунад.
- Ном, иқтидори ва пурра будани онро нишон медиҳад.
- Тугма барои гузаштан ба тафсилоти паркинг.
ParkingLotDetailsPage.vue:
- id-ро аз параметрҳои маршрут мегирад.
- Инро барои интихоби паркинг аз Pinia ё боркунии тафсилот истифода мебарад.
- Нақшаи паркингро нишон медиҳад (SlotStatus компонентҳо бо истифода аз бисёр).
- Форм барои сабти ном/холӣ кардани мошин (VehicleForm.vue).
SlotStatus.vue:
- Статусро қабул мекунад (бос/заводӣ).
- Ранги мувофиқ/иконаро нишон медиҳад.
VehicleForm.vue:
- Форм барои ворид кардани рақами мошин ва интихоби амалиёт (вуруд/баромад).
- Маълумотро ба Pinia/Service мефиристад.

Стили:

Барои стилҳои компонентӣ SCSS ё CSS модулҳоро истифода баред.
Flexbox ё grid-ро барои ҷойгиркунии элементҳо истифода баред.

Иловаи имконот:

Взаимодействие бо бекенд тавассути API.
Сабти номи корбарон ва мошинҳояшон.
Тарҷумаи таърихии паркинг.
Системаҳои огоҳӣ.
Системаи пардохт.

Ин структураи асосӣ аст. Таҳлилҳои иҷроиш ба талаботҳои мушаххас ва ҳаҷми барнома вобастаанд.

Чӣ гуна шумо барномаи гаражии автомобилро дар Vue.js тарҳрезӣ мекунед?