spa starter kit

ชุดเริ่มต้นแอปพลิเคชันหน้าเดียวของ Codecast

ชุดเริ่มต้นแอปพลิเคชันหน้าเดียว ที่มีความคิดเห็นสูง ซึ่งสร้างขึ้นบน Vue.js และ Laravel

แพ็คเกจนี้ประกอบด้วยสองโครงการแยกกันเพื่อทำหน้าที่เป็นจุดเริ่มต้นสำหรับแอปพลิเคชันหน้าเดียว: โครงการ Vue.js (สร้างด้วยเทมเพลต vue-cli + webpack) และโครงการ Laravel 5.3

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

สาธิต

สามารถดูการสาธิตสดได้ที่ https://spa.codecasts.rocks/

คุณสมบัติ

1. ฝั่งไคลเอ็นต์
   • สร้างโปรเจ็กต์ Vue.js 2.0 ด้วยเทมเพลต vue-cli + webpack
   • การจัดการรัฐแบบรวมศูนย์ด้วย Vuex
   • การจัดการเส้นทางด้วย Vue-router
   • การรับรองความถูกต้องกับ JWT
   • ให้ผู้ใช้ลงชื่อเข้าใช้โดยใช้ข้อมูลที่เก็บไว้ในเครื่อง
   • คำขอ HTTP ด้วย Axios
   • ESLint พร้อมการตั้งค่าล่วงหน้า AirBNB
   • การแบ่งหน้ารวมกับ lengthAwarePaginator ของ Laravel
   • การแจ้งเตือนและการแจ้งเตือนการยืนยันโดย SweetAlert
2. ฝั่งเซิร์ฟเวอร์
   • ลาราเวล 5.3
   • การรับรองความถูกต้องกับ JWT
   • แฟร็กทัล
   • บริการเว็บ RESTful ด้วย Dingo (วางแผนไว้)

ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node และ Yarn (เวอร์ชันล่าสุด) รวมถึง PHP 7 และ MySQL

การติดตั้ง

การโคลนนิ่ง

คำสั่งเหล่านี้จะดาวน์โหลดพื้นที่เก็บข้อมูลและจัดเตรียมไว้สำหรับคุณ

 git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

ตั้งค่า

1. ฝั่งไคลเอ็นต์ - นี่คือโครงการ Vue.js ที่สร้างด้วย vue-cli
   • ด้วย Terminal cd client && yarn && yarn run dev
2. ฝั่งเซิร์ฟเวอร์ - นี่คือโครงการ Laravel 5.3
   • ด้วยเทอร์มินัล:
     • นำทางไปยังโฟลเดอร์ บริการเว็บ แล้ว:
     • composer install เพื่อติดตั้งแพ็คเกจ Laravel และบุคคลที่สาม
     • touch database/database.sqlite เพื่อสร้างไฟล์ฐานข้อมูลเปล่า
     • cp .env.example .env เพื่อกำหนดค่าการติดตั้ง
     • php artisan key:generate เพื่อสร้างรหัสเฉพาะสำหรับโครงการ
     • php artisan jwt:secret เพื่อสร้างคีย์เฉพาะสำหรับโปรเจ็กต์
     • php artisan migrate เพื่อสร้างตารางทั้งหมด
     • php artisan db:seed เพื่อเติมข้อมูลปลอมลงในตาราง
     • php artisan serve ให้บริการแอปพลิเคชันบน localhost:8000

การใช้งาน

1. ฝั่งไคลเอ็นต์
   • ใบสมัครของคุณจะพร้อมใช้งานบน http://localhost:8080
2. ฝั่งเซิร์ฟเวอร์
   • จุดสิ้นสุด API คือ http:// localhost:8000/api

การทดสอบ

นำทางไปยังโฟลเดอร์ บริการเว็บ และเรียกใช้สคริปต์ทดสอบผู้แต่ง

$ composer test 

สิ่งที่ควรค่าแก่การกล่าวถึง

1. การจัดการข้อผิดพลาดทำได้ทั่วโลกโดยใช้ตัวสกัดกั้นของ Axios แต่คุณยังคงสามารถ .catch() ข้อผิดพลาดภายในส่วนประกอบเพื่อดำเนินการที่เกี่ยวข้องกับขอบเขตนั้นได้ ดู /client/src/plugins/http.js;

2. เช่นเดียวกับข้อความแสดงข้อผิดพลาดที่อยู่ในองค์ประกอบเดียว (/client/src/modules/general/alerts.vue) และการมองเห็นจะถูกควบคุมโดยคุณสมบัติ Vuex ดังนั้นเพื่อแสดง/ซ่อนข้อความ มันเป็นเพียงเรื่องของการกำจัดการกระทำของ Vuex จากภายในส่วนประกอบใดๆ

3. สปินเนอร์ที่แสดงในระหว่างการร้องขอของเซิร์ฟเวอร์ (ดูด้านบนขวาใกล้กับการระบุผู้ใช้) ยังถูกควบคุมโดยคุณสมบัติ Vuex ขั้นตอนการแสดง/ซ่อนจะเหมือนกับที่อธิบายไว้ในข้อ 2 ข้างต้น

4. เส้นทางและโมดูล Vuex อยู่ใกล้กับโมดูลที่พวกเขาทำงานด้วย ให้มองหาเส้นทาง js และ store.js ภายในไดเร็กทอรีโมดูลเสมอ ดู /client/src/modules/categories;

5. สำคัญ : โครงการ Laravel ที่พบใน เว็บเซอร์ ไดเร็กทอรีได้รับการแก้ไขนอกเหนือจากการเพิ่มเส้นทางและตัวควบคุม ตัวอย่างเช่น: webservice/app/Exceptions/Handler.php ได้รับการแก้ไขจากเวอร์ชันดั้งเดิมเพื่อส่งคืนข้อยกเว้นทั้งหมดไปยังไคลเอ็นต์ ไม่ใช่แค่ HttpExceptions การเปลี่ยนแปลงอื่น ๆ ก็เกิดขึ้นเช่นกัน ดังนั้นคำแนะนำของเราคือใช้โปรเจ็กต์นี้เพื่อสร้างของคุณเองเสมอ แทนที่จะคัดลอกตัวควบคุมและเส้นทางไปยังโปรเจ็กต์ใหม่

มีส่วนร่วม

1. ส้อมมัน!
2. สร้างสาขาฟีเจอร์ของคุณจาก Develop : git checkout -b feature/my-new-feature
3. เขียนรหัสของคุณ แสดงความคิดเห็นรหัสของคุณ
4. ยอมรับการเปลี่ยนแปลงของคุณ: git commit -am 'Add some feature'
5. พุชไปที่สาขา: git push origin feature/my-new-feature
6. ส่งคำขอดึงเพื่อ พัฒนา สาขา :D

เครดิต

ฟาบิโอ เวโดเวลลี และผู้มีส่วนร่วมโดยเฉพาะ

ใบอนุญาต

ได้รับอนุญาตภายใต้ใบอนุญาต MIT