کدهای مورد نیاز برای ساخت این صفحه با FastAPI به شرح زیر است:

ابتدا مدل‌های Pydantic:

“`python
from pydantic import BaseModel
from typing import List, Optional

class Product(BaseModel):
name: str
type: str
product_page: str
description: Optional[str] = None
software: Optional[List[dict]] = None
“`

Endpoint برای دریافت لیست استان‌ها:

“`python
from fastapi import FastAPI, HTTPException
app = FastAPI()

PRODUCTS_DB = [
{“name”: “ماژول LED P2 GKGD”, “type”: “ماژول”, “product_page”: “/products/1”, “description”: “ماژول Indoor با رفرش ریت بالا”},
{“name”: “کارت کنترلر Novastar DH7508”, “type”: “کارت کنترلر”, “product_page”: “/products/2”},
# …
]

LOCATIONS = [
“تهران”,
“اصفهان”,
“مشهد”,
“شیراز”,
“تبریز”,
# … سایر استان‌ها
]

@app.get(“/locations”, response_model=List[str])
async def get_locations(search: str = None):
if search:
return [loc for loc in LOCATIONS if search.lower() in loc.lower()]
return LOCATIONS
“`

Endpoint برای دریافت لیست محصولات:

“`python
@app.get(“/products”, response_model=List[Product])
async def get_products(location: str = None):
return PRODUCTS_DB
“`

صفحه فرانت اند با Vue.js:

“`html

“`

مزایای این پیاده‌سازی:

1. جستجوی استان به صورت real-time با اضافه کردن هر کاراکتر
2. نمایش لیست استان‌های فیلتر شده در dropdown
3. دریافت محصولات بر اساس استان انتخاب شده
4. رابط کاربری واکنش‌گرا و مدرن
5. استفاده از مدل‌های Pydantic برای اعتبارسنجی داده‌ها