fullstack fastapi vuejs price aggregator

เครื่องมือรวบรวมราคา Fullstack

ผู้รวบรวมราคาซูเปอร์มาร์เก็ตในสหราชอาณาจักรผ่านการขูดเว็บ สิ่งนี้ได้รับการพัฒนาสำหรับโครงการมหาวิทยาลัยของฉันในฐานะ MVP ดังนั้นจึงมีบางแง่มุมที่ทำงานไม่ถูกต้อง ฉันอาจอัปเดตได้ในอนาคต

คุณสมบัติ

• แบ็กเอนด์ Python REST ผ่าน FastAPI
• VueJS Frontend SPA พร้อม TypeScript โดยใช้เทมเพลตนี้
• การตรวจสอบสิทธิ์ JWT ระหว่างแบ็กเอนด์และส่วนหน้า
• คลีไอ
• นักเทียบท่า
• บทกวี
• ราคาที่คัดลอกจากเว็บผ่าน selectorlib
• ขูดหน้าที่เปิดใช้งาน JavaScript โดยใช้ Splash

ตั้งค่า

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Docker และ Node.js แล้ว

1. โคลนที่เก็บนี้
2. cd เข้าไปในรูทโปรเจ็กต์และรัน docker-compose up --build -d การเริ่มต้นแบ็กเอนด์และการรันครั้งแรกจะสร้างคอนเทนเนอร์ที่จำเป็นทั้งหมดซึ่งอาจใช้เวลาไม่กี่นาที
3. เมื่อแบ็กเอนด์สร้างเสร็จแล้ว ให้รับเชลล์ที่มี docker-compose exec backend bash
4. ในการเริ่มต้นฐานข้อมูลให้รัน python manage.py createdb จากภายใน bash shell
   • (ไม่บังคับ) หากต้องการ seed db ด้วยข้อมูลจำลอง ให้รัน python manage.py seeddb หมายเหตุว่ารหัสผ่านทั้งหมดถูกตั้งเป็น รหัสผ่าน
5. cd ลงในไดเร็กทอรีไคลเอ็นต์ให้รัน npm install ซึ่งจะติดตั้งโมดูลโหนดที่ต้องการ
6. เรียกใช้ npm run serve ซึ่งจะให้บริการส่วนหน้าของไคลเอ็นต์

URL โครงการ

URL	คำอธิบาย
0.0.0.0:8000/เอพีไอ	JSON API แบ็กเอนด์
0.0.0.0:8000/เอกสาร	เอกสารอ้างอิง API ที่สร้างโดย OpenAPI/Swagger แบ็กเอนด์
0.0.0.0:8000/ทำซ้ำ	เอกสารโต้ตอบทางเลือกที่จัดทำโดย ReDoc
โฮสต์ท้องถิ่น:9527	แอปพลิเคชันหน้าเดียว VueJS ส่วนหน้า

คลีไอ

แบ็กเอนด์มี CLI ที่ได้รับแรงบันดาลใจอย่างมากจาก Dispatch ของ Netflix

typer (ผู้เขียนคนเดียวกันกับ FastAPI) ใช้เพื่อสร้าง CLI สำหรับโครงการและเข้าถึงได้ผ่าน Manage.py

ในการรันคำสั่ง คุณจะต้องให้เชลล์ทำงานภายในคอนเทนเนอร์แบ็กเอนด์ด้วย:

 docker-compose run backend bash

หากต้องการดูคำสั่งที่ใช้ได้ทั้งหมด:

 root@72293bee6b37:/app# python manage.py 
Usage: manage.py [OPTIONS] COMMAND [ARGS]...

Options:
  --help  Show this message and exit.

Commands:
  config      Display application configuration.
  createdb    Creates an empty database.
  createrole  Add role to database.
  createuser  Create new user in the database.
  develop     Start a development server with reload.
  dropdb      Drop the existing database.
  routes      Display application routes and dependencies.
  seeddb      Add fake data to database.
  shell       Starts an interactive shell with app object imported.

เส้นทาง

 root@72293bee6b37:/app# python manage.py routes

Application Endpoints
Path                           Methods    Dependencies
-----------------------------  ---------  --------------------------------------------------------
/api/v1/users/                 GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/                 POST       ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}             GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}             PUT        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}             DELETE     ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/roles       GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/roles       PUT        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/shops       GET        ['RoleChecker: Roles: admin,user']
/api/v1/users/{id}/shops       PUT        ['RoleChecker: Roles: admin,user']
/api/v1/roles/                 GET        ['RoleChecker: Roles: admin,user']
/api/v1/roles/                 POST       ['RoleChecker: Roles: admin,user']
/api/v1/roles/{id}             GET        ['RoleChecker: Roles: admin,user']
/api/v1/roles/{id}             PUT        ['RoleChecker: Roles: admin,user']
/api/v1/roles/{id}             DELETE     ['RoleChecker: Roles: admin,user']
/api/v1/shops/                 GET        ['RoleChecker: Roles: admin,user']
/api/v1/shops/                 POST       ['RoleChecker: Roles: admin,user']
/api/v1/shops/{id}             PUT        ['RoleChecker: Roles: admin,user']
/api/v1/shops/{id}             DELETE     ['RoleChecker: Roles: admin,user']
/api/v1/shops/listings/        GET        ['RoleChecker: Roles: admin,user']
/api/healthcheck               GET        []

การกำหนดค่า

 python manage.py config

Application Configuration
Setting                     Value(s)
--------------------------  --------------------------------------------------------------------
APP_DIR                     /app/app
STATIC_DIR                  /app/app/static
EMAIL_TEMPLATES_DIR         /app/app/static/email-templates/html
PROJECT_NAME                Fastapi Backend
SERVER_HOST                 0.0.0.0
CORS_WHITELIST              ['http://localhost', 'http://localhost:8000', 'http://0.0.0.0:8000']
FASTAPI_ENV                 development
DEBUG                       False
LOG_LEVEL                   debug
FIRST_SUPERUSER             [email protected]
FIRST_SUPERUSER_PASSWORD    a5dbf43e07f4d19e5b73bc89a8f74
USERS_OPEN_REGISTRATION     True
SECRET_KEY                  **********
JWT_AUTH_LIFETIME_SECONDS   604800
JWT_EMAIL_LIFETIME_SECONDS  3600
SMTP_USER                   [email protected]
SMTP_PASSWORD               **********
SMTP_TLS                    False
SMTP_SSL                    False
SMTP_HOST                   mailhog
SMTP_PORT                   1025
POSTGRES_USER               postgres
POSTGRES_PASSWORD           **********
POSTGRES_HOST               postgres
POSTGRES_PORT               5432
POSTGRES_DB                 fastapi_backend

มุมมองส่วนหน้า

มุมมองเข้าสู่ระบบ

มุมมองแดชบอร์ดของผู้ดูแลระบบ

มุมมอง CRUD ของผู้ใช้

ผู้ใช้สร้างมุมมอง

มุมมองโปรไฟล์ผู้ใช้

มุมมองร้านค้า CRUD

ร้านค้าเลือกดู

มุมมองรายการที่คัดลอกมา