ดาวน์โหลด vue commerce lab - ดาวน์โหลด vue commerce lab ซอร์สโค้ด

vue commerce lab

หลาม

1.0.0

ดาวน์โหลด

VueCommerceLab

ภาพรวมโครงการ

พื้นที่เก็บข้อมูลนี้มีแดชบอร์ดอีคอมเมิร์ซทดลองซึ่งทำหน้าที่เป็นแอปพลิเคชันเชิงปฏิบัติสำหรับการเรียนรู้และการใช้งาน Laravel ฉันนั่งร้านสิ่งนี้ด้วย Laravel Breeze และใช้ Laravel Valet เพื่อการพัฒนาท้องถิ่น

คุณสมบัติที่สำคัญ

การดำเนินงาน CRUD : ฟังก์ชันการสร้าง อ่าน อัปเดต และลบที่ครอบคลุมสำหรับผลิตภัณฑ์และลูกค้า โดยจัดแสดงความสามารถแบ็คเอนด์ที่แข็งแกร่งของ Laravel
Laravel 10 : เฟรมเวิร์ก PHP อันทรงพลังสำหรับการสร้างเว็บแอปพลิเคชันที่ปรับขนาดได้ด้วยไวยากรณ์ที่ชัดเจนและชัดเจน
TypeScript : ชุดคำสั่งย่อยของ JavaScript ที่เพิ่มคำจำกัดความประเภทคงที่ ช่วยให้ได้รับประสบการณ์การพัฒนาที่แข็งแกร่งยิ่งขึ้น
Vue.js 3 : ส่วนหน้าแบบไดนามิกและโต้ตอบที่สร้างด้วย Vue.js มอบประสบการณ์ผู้ใช้ที่น่าดึงดูด
Ziggy : เปิดเผยเส้นทางฝั่งเซิร์ฟเวอร์ที่มีชื่อของ Laravel ผ่านฟังก์ชัน route() ช่วยให้สร้างเส้นทางได้ง่ายในส่วนประกอบ Vue
Inertia.js : Bridges Laravel และ Vue.js เปิดใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการนำทางฝั่งไคลเอ็นต์โดยไม่ต้องโหลดหน้าซ้ำ
TailwindCSS : เฟรมเวิร์ก CSS เน้นยูทิลิตี้เป็นหลัก ซึ่งใช้สำหรับการออกแบบเลย์เอาต์ที่ทันสมัยและตอบสนองอย่างรวดเร็วด้วยความเร็วและประสิทธิภาพ
หนังสือนิทาน : สภาพแวดล้อมการพัฒนาสำหรับส่วนประกอบ UI ช่วยให้สามารถทำซ้ำและทดสอบได้อย่างรวดเร็ว
การออกแบบอะตอมมิก: วิธีวิทยาในการออกแบบ UI โดยเน้นไปที่การนำกลับมาใช้ใหม่และความสามารถในการขยายขนาด
การทดสอบ: การทดสอบหน่วยสำหรับทุกรุ่นและคอนโทรลเลอร์โดยใช้ PHPUnit และการทดสอบส่วนประกอบสำหรับส่วนประกอบ Vue.js โดยใช้ Vitest และ Vue Test Utils
Linting และการจัดรูปแบบ: Linting และการจัดรูปแบบอัตโนมัติสำหรับไฟล์ PHP, JavaScript, CSS และ Vue.js
Github Actions: การบูรณาการและการทดสอบอย่างต่อเนื่องกับ Github Actions

ผลการเรียนรู้

การเรียนรู้สถาปัตยกรรม MVC ของ Laravel สำหรับการสร้างเว็บแอปพลิเคชันที่ปรับขนาดได้
การใช้พฤติกรรม SPA ใน Laravel ด้วย Vue.js และ Inertia.js
การพัฒนา UI ที่ใช้งานง่ายด้วย Tailwind CSS
ทำความเข้าใจการจัดการสถานะและปฏิกิริยาใน Vue.js
เข้าใจหลักการของการออกแบบ RESTful API และการดำเนินการ CRUD ใน Laravel
การเขียนการทดสอบหน่วยสำหรับโมเดลและคอนโทรลเลอร์ด้วย PHPUnit และ Vitest

ส่วนโครงการ

ผลิตภัณฑ์ : รวมคุณสมบัติต่างๆ เช่น การลงรายการผลิตภัณฑ์ การเพิ่มผลิตภัณฑ์ใหม่ การแก้ไข และการลบ
ลูกค้า : จัดการข้อมูลลูกค้าด้วยฟังก์ชันสำหรับการเพิ่ม ดู แก้ไข และลบบันทึกลูกค้า
คำสั่งซื้อ : อนุญาตให้ผู้ใช้สั่งซื้อผลิตภัณฑ์โดยมีหน้าเฉพาะสำหรับการดูคำสั่งซื้อทั้งหมด
รายงาน : จัดให้มีแดชบอร์ดสำหรับการดูรายงานการขายและตัวชี้วัดอื่นๆ

แรงจูงใจ

โปรเจ็กต์นี้ทำหน้าที่เป็นตัวอย่างที่ครอบคลุมสำหรับทุกคนที่สนใจพัฒนาเว็บแอปพลิเคชันที่มีคุณสมบัติครบถ้วนโดยใช้เทคโนโลยีเหล่านี้

การติดตั้ง

โคลนพื้นที่เก็บข้อมูล (ลงในไดเร็กทอรีไซต์ Valet ของคุณ):

git clone [email protected]:gregrickaby/vue-commerce-lab.git

ติดตั้งการพึ่งพา:

composer install && npm install

สร้างไฟล์ .env :

cp .env.example .env

สร้างไฟล์ database.sqlite :

touch database/database.sqlite

สร้างรหัสแอปพลิเคชัน:

php artisan key:generate

ดำเนินการย้ายข้อมูล:

php artisan migrate:fresh

เพาะฐานข้อมูล:

php artisan db:seed

ตั้งค่าเวอร์ชัน PHP เป็น 8.3:

valet isolate [email protected]

รักษาความปลอดภัยเว็บไซต์:

valet secure

เริ่มเซิร์ฟเวอร์การพัฒนา:

npm run dev

เยี่ยมชมเว็บไซต์: https://vue-commerce-lab.test และเข้าสู่ระบบด้วยข้อมูลรับรองต่อไปนี้:

ผู้ใช้: [email protected]
ผ่าน: password

ลาราเวล

โมเดล

โมเดลอยู่ในไดเร็กทอรี app/Models แต่ละรุ่นมีโรงงานและ Seeder ที่สอดคล้องกันในไดเร็กทอรี database/factories และไดเร็กทอรี database/seeders

โมเดลมีหน้าที่ในการจัดการข้อมูลของแอปพลิเคชัน พวกเขารับอินพุตจากคอนโทรลเลอร์ ตรวจสอบความถูกต้อง แล้วส่งไปยังฐานข้อมูล

จำนวนการดู

แอปพลิเคชันนี้ใช้ Vue และ Inertia ดังนั้นมุมมองจึงอยู่ในไดเร็กทอรี resources/js/pages และกำหนดเส้นทางผ่านไฟล์ web.php

มุมมองมีหน้าที่รับผิดชอบในการแสดงข้อมูลให้กับผู้ใช้ พวกเขารับข้อมูลจากคอนโทรลเลอร์ จากนั้นเรนเดอร์ไปยังเบราว์เซอร์

ผู้ควบคุม

คอนโทรลเลอร์อยู่ในไดเร็กทอรี app/Http/Controllers คอนโทรลเลอร์แต่ละตัวมีการทดสอบที่สอดคล้องกันในไดเร็กทอรี tests/Feature

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

เส้นทาง

เส้นทางอยู่ในไดเรกทอรี routes ไฟล์ web.php มีเส้นทางทั้งหมดสำหรับแอปพลิเคชัน

Vue.js

ไฟล์ Vue.js อยู่ในไดเร็กทอรี resources/js

โครงสร้างไดเร็กทอรี

โครงสร้างไดเร็กทอรีเป็นไปตามแบบแผนมาตรฐานของ Laravel โดยมีการเพิ่มไดเร็กทอรี types สำหรับอินเทอร์เฟซและประเภท TypeScript และไดเร็กทอรี utils สำหรับฟังก์ชันยูทิลิตี้และตัวช่วย

 ├── resources
│   ├── css
│   │   └── app.css <-- TailwindCSS
│   ├── js
│   │   ├── Components
│   │   │   ├── Atoms
│   │   │   │   ├── ApplicationLogo
│   │   │   │   │   ├── ApplicationLogo.stories.ts <-- Storybook
│   │   │   │   │   ├── ApplicationLogo.test.ts <-- Test
│   │   │   │   │   ├── ApplicationLogo.test.ts.snap <-- Snapshot
│   │   │   │   │   └── ApplicationLogo.vue <-- Vue Component
│   │   │   ├── Molecules
│   │   │   ├── Organisms
│   │   ├── Layouts
│   │   ├── Pages
│   │   │   ├── Customers
│   │   │   │   ├── Create.vue
│   │   │   │   ├── Index.vue
│   │   │   │   └── {customer} <-- Dynamic route
│   │   │   │       ├── Edit.vue
│   │   │   │       └── Show.vue
│   │   ├── app.ts <-- Vue app
│   │   ├── types
│   │   │   └── index.d.ts <-- Typescript interfaces and types
│   │   └── utils
│   │       └── index.ts <-- Utility and helper functions
│   └── views
│       ├── app.blade.php
│       └── welcome.blade.php

เส้นทางแบบไดนามิก

โฟลเดอร์ที่มี {} ล้อมรอบเป็นเส้นทางแบบไดนามิก ตัวอย่างเช่น /Pages/Customers/{customers}/Edit.vue เป็นเส้นทางแบบไดนามิกที่จะตรงกับรหัสลูกค้าใดๆ จากนั้น ID จะพร้อมใช้งานในคอมโพเนนต์ Edit.vue

การทดสอบ

แอปพลิเคชั่นนี้มีทั้ง PHPUnit และ Vitest สำหรับการทดสอบ นอกจากนี้ยังใช้ประโยชน์จาก Github Actions สำหรับการรวมและการทดสอบอย่างต่อเนื่อง และ Storybook สำหรับการพัฒนาส่วนประกอบ UI แบบแยกส่วน

PHPUnit

แอปพลิเคชั่นนี้มาพร้อมกับการทดสอบ PHPUnit สำหรับทุกรุ่นและคอนโทรลเลอร์ การทดสอบ PHP อยู่ในไดเร็กทอรี /tests :

 ├── tests
│   ├── Feature
│   │   ├── Auth
│   │   │   ├── AuthenticationTest.php
│   │   └── ExampleTest.php
│   └── Unit
│       └── ExampleTest.php

เส้นทาง Laravel ส่งคืนการตอบสนองความเฉื่อยที่ขึ้นอยู่กับการมีอยู่ของส่วนประกอบ Vue หากไม่มีสินทรัพย์ส่วนหน้าที่สร้างขึ้น ส่วนประกอบเหล่านี้จะไม่พร้อมใช้งาน ซึ่งนำไปสู่ความล้มเหลวในการทดสอบที่ส่งคำขอไปยังเส้นทางเหล่านี้ เพื่อหลีกเลี่ยงปัญหานี้ คุณต้องรันเซิร์ฟเวอร์การพัฒนาในเบื้องหลังขณะรันการทดสอบ

เริ่มเซิร์ฟเวอร์การพัฒนา:

npm run dev

รันการทดสอบ PHPUnit ด้วย:

php artisan test

ดำเนินการทดสอบเฉพาะด้วย:

php artisan test --filter=CustomerTest

การทดสอบส่วนประกอบ Vue

แอปพลิเคชั่นนี้มีทั้ง Vitest (นักวิ่งทดสอบอย่างเป็นทางการ) และ Vue Test Utils (ไลบรารีการทดสอบอย่างเป็นทางการ) สำหรับการทดสอบส่วนประกอบ Vue การทดสอบจะต้องวางไว้ถัดจากส่วนประกอบและชื่อ ComponentName.test.ts :

 ├── resources
│   ├── js
│   │   ├── Components
│   │   │   ├── Atoms
│   │   │   │   ├── ApplicationLogo
│   │   │   │   │   ├── ApplicationLogo.stories.ts <-- Storybook
│   │   │   │   │   ├── ApplicationLogo.test.ts <-- Test
│   │   │   │   │   ├── ApplicationLogo.test.ts.snap <-- Snapshot
│   │   │   │   │   └── ApplicationLogo.vue <-- Vue Component

คุณสามารถทำการทดสอบด้วย:

npm run test

Vitest จะทำการทดสอบในโหมดนาฬิกา ดังนั้นคุณจึงสามารถเปลี่ยนแปลงส่วนประกอบและดูผลลัพธ์ได้แบบเรียลไทม์

การเขียนแบบทดสอบส่วนประกอบ

การทดสอบส่วนประกอบเขียนด้วย TypeScript และใช้ Vitest API สำหรับการยืนยัน นี่คือตัวอย่าง:

 import ApplicationLogo from '@/Components/Atoms/ApplicationLogo/ApplicationLogo.vue'
import { mount } from '@vue/test-utils'
import { describe , expect , test } from 'vitest'

/**
 * Define a test suite.
 *
 * @see https://vitest.dev/api/#describe
 */
describe ( 'ApplicationLogo' , ( ) => {
    /**
     * Mount the component.
     *
     * @see https://vue-test-utils.vuejs.org/api/#mount
     */
    const wrapper = mount ( ApplicationLogo )

    /**
     * Assert the component renders.
     *
     * @see https://vitest.dev/api/expect.html
     */
    test ( 'component renders' , ( ) => {
        expect ( wrapper ) . toBeTruthy ( )
    } )

    /**
     * Assert the component is a SVG.
     */
    test ( 'component is SVG' , ( ) => {
        wrapper . find ( 'svg' )
    } )

    /**
     * Assert the component matches the snapshot.
     *
     * @see https://vitest.dev/api/expect.html#tomatchsnapshot
     */
    test ( 'component matches snapshot' , ( ) => {
        expect ( wrapper . html ( ) ) . toMatchSnapshot ( )
    } )
} )

ลิงค์ที่เป็นประโยชน์

เยี่ยมชม API
Vue Test Utils API

การกระทำ Github

Github Actions จะทำการทดสอบทุก PR ไปยังสาขา main ด้วย

ผ้าสำลี

ESLint

แอปพลิเคชั่นนี้ติดตั้ง ESLint และกำหนดค่าสำหรับการแยกวิเคราะห์ TypeScript ไฟล์ JavaScript และ Vue linting อัตโนมัติเกิดขึ้น on_save

คุณยังสามารถเรียกใช้ผ้าสำลีด้วยตนเองได้:

npm run lint

Stylelint และ TailwindCSS (สวยกว่า)

แอปพลิเคชันนี้มาพร้อมกับปลั๊กอิน Stylelint และ Prettier สำหรับ TailwindCSS การขุยและการจัดรูปแบบอัตโนมัติจะเกิดขึ้น on_save

สวยกว่าและไพน์

การจัดรูปแบบอัตโนมัติสำหรับทั้งไฟล์ JavaScript และ PHP ได้รับการกำหนดค่าสำหรับ on_save โปรดดูการตั้งค่า VSCode และการกำหนดค่าส่วนขยายสำหรับข้อมูลเพิ่มเติม

รัน Prettier และ Pint ด้วยตนเองด้วย:

npm run format && composer run lint

หนังสือนิทาน

ดูหนังสือนิทาน: https://gregrickaby.github.io/vue-commerce-lab/

แอปพลิเคชั่นนี้มาพร้อมกับ Storybook สำหรับการพัฒนาส่วนประกอบ UI แบบแยกส่วน เรื่องราวต้องเขียนด้วย CSF โดยวางไว้ข้างส่วนประกอบในไดเร็กทอรี resources/js/Components เรื่องราวต้องตั้งชื่อ ComponentName.stories.ts :

 ├── resources
│   ├── js
│   │   ├── Components
│   │   │   ├── Atoms
│   │   │   │   ├── ApplicationLogo
│   │   │   │   │   ├── ApplicationLogo.stories.ts <-- Storybook
│   │   │   │   │   ├── ApplicationLogo.test.ts <-- Test
│   │   │   │   │   ├── ApplicationLogo.test.ts.snap <-- Snapshot
│   │   │   │   │   └── ApplicationLogo.vue <-- Vue Component

เรียกใช้ Storybook ด้วย: