หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

MUC

ตัวแปลง URL เพลง

แอปพลิเคชั่นง่าย ๆ ที่จะใช้ใน URL จากบริการสตรีมเพลงต่างๆและแสดงแทร็กเดียวกัน (เมื่อมี) จากบริการสตรีมมิ่งอื่น ๆ คุณสามารถดูการสาธิตสด @ https://muc.anirbanmu.com/?queries [เดียวกัน

พารามิเตอร์แบบสอบถาม

  • queries[]=spotify:track:2HYr8LZRlJKEfMbIgT0365 - พารามิเตอร์การสืบค้นประเภทอาร์เรย์ (สามารถมีหลายตัว) ที่สามารถส่งผ่านเป็นคำค้นหาเริ่มต้นไปยังแอป

บริการสนับสนุน

ปัจจุบันรองรับ Spotify, YouTube, iTunes/Apple Music & Deezer

การตั้งค่า

  • ตรวจสอบให้แน่ใจว่าคุณติดตั้ง Node & NPM
  • โคลน repo
  • cd ลงในไดเรกทอรี repo
  • npm install

ส่วนหน้า

ส่วนหน้าจะต้องสร้างและพร้อมที่จะไปก่อนที่แบ็กเอนด์จะสามารถให้บริการแอพได้สำเร็จ

สำหรับการพัฒนา (จะสร้างให้ดูการเปลี่ยนแปลงและสร้างส่วนหน้า Vue.js):: 

 npm run build-watch

สำหรับการผลิต (จะสร้างเท่านั้น): 

 npm run build

ไฟล์ที่สร้างขึ้นจะถูกวางไว้ในไดเรกทอรี ./dist สต์

แบ็กเอนด์

แบ็กเอนด์ต้องการคีย์ API ที่จะตั้งค่าเพื่อให้สามารถใช้ API ที่เกี่ยวข้องได้ 

 SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> [OPTIONAL]

หลังจากตั้งค่าตัวแปรสภาพแวดล้อมคุณสามารถเริ่มเซิร์ฟเวอร์แบ็กเอนด์ในเครื่องด้วย: 

 npm run express

ตอนนี้คุณควรเข้าถึงแอปพลิเคชันในเครื่อง @ http: // localhost: 8081

fly.io

แอปพลิเคชันพร้อมที่จะนำไปใช้กับ Fly.io เพียงสร้างแอพด้วย flyctl และแทนที่ <APP-NAME> ใน fly.toml หลังจากที่คุณสร้างแอพและแทนที่ชื่อใน fly.toml:

  • flyctl secrets set SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
  • flyctl secrets set SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
  • flyctl secrets set YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
  • flyctl deploy flyctl deploy flyctl deploy --build-secret GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> หากคุณต้องการรหัสการตรวจสอบไซต์ Google ในหน้าอื่น ๆ

รายละเอียด

ส่วนหน้า

รหัสแอปพลิเคชันส่วนใหญ่เป็นฝั่งไคลเอ็นต์ซึ่งเป็นแอพ Vue.js สิ่งนี้จัดการการแสดงผลทั้งหมดการแยก URL และแปลงเป็นบริการอื่น ๆ

แบ็กเอนด์

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

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด