Sobes.tech
Intervyu yordami
Resurslar
Intervyuga tayyorgarlik
Resurslar
Ish qidirish
Resurslar
Huquqiy
Savollarga qaytish
Middle+

Vue.js da avtomobil parkovkasi uchun ilovani qanday loyihalashtirasiz?

sobes.tech AI

AIdan javob

Vue.js bilan komponent yondashuvni qo'llardim.

Arxitektura:

  • App.vue: Asosiy komponent. Router va asosiy maketlarni o'z ichiga oladi.
  • Views: Sahifa komponentlari (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
  • Components: Qayta ishlatiladigan komponentlar (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
  • Stores: Pinia holatni boshqarish uchun (parkovka ro'yxati, joylar bandligi).
  • Services: API bilan ishlash uchun modullar (ma'lumotlarni olish, joylarni ro'yxatdan o'tkazish/bo'shatish).

Holat (Pinia):

  • parkingLots: Parkovka obyektlari ro'yxati.
  • selectedParkingLot: Tanlangan parkovka.
  • loading: Ma'lumotlarni yuklash holati.
// 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 so'rovini simulyatsiya qilish
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parkovka 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parkovka 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Qo'shimcha joylarni ro'yxatdan o'tkazish/bo'shatish uchun amal
  },
});

Routing (Vue Router):

  • /parking-lots: Parkovka ro'yxati.
  • /parking-lots/:id: Aniq parkovka tafsilotlari.
// 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, // Parametrlarni props sifatida o'tkazish
  },
];

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

export default router;

Komponentlar:

  • ParkingLotsPage.vue:
    • Pinia'dan parkovka ro'yxatini oladi.
    • Har bir parkovka uchun ParkingLotCard ni ko'rsatadi.
  • ParkingLotCard.vue:
    • Parkovka ob'ektini prop sifatida qabul qiladi.
    • Nom, sig'imi va bandlikni ko'rsatadi.
    • Parkovka tafsilotlariga o'tish uchun tugma.
  • ParkingLotDetailsPage.vue:
    • Rota parametrlaridan id ni oladi.
    • Uni Pinia'dan parkovkani tanlash uchun ishlatadi (yoki tafsilotlarni yuklaydi, agar mavjud bo'lmasa).
    • Parkovka sxemasini ko'rsatadi (SlotStatus komponentlari yordamida).
    • Avtomobilni ro'yxatdan o'tkazish/bo'shatish uchun forma (VehicleForm.vue).
  • SlotStatus.vue:
    • Slot holatini (bo'sh/to'liq) qabul qiladi.
    • Mos rang/ikonani ko'rsatadi.
  • VehicleForm.vue:
    • Avtomobil raqamini kiritish va harakatni tanlash uchun forma (kirish/chiqish).
    • Ma'lumotlarni Pinia/Service ga yuboradi.

Stil:

  • Komponentga asoslangan stil uchun SCSS yoki CSS-modullarni foydalaning.
  • Elementlarni joylashtirish uchun Flexbox yoki Grid ni qo'llang.

Qo'shimcha imkoniyatlar:

  • API orqali haqiqiy backend bilan ishlash.
  • Foydalanuvchilar va ularning avtomobillarini ro'yxatdan o'tkazish.
  • Parkovka tarixini saqlash.
  • Bildirishnoma tizimi.
  • To'lov tizimi.

Bu asosiy tuzilma. Amalga oshirish tafsilotlari aniq talablar va ilovaning miqyosiga bog'liq.

OldingiKeyingi