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

กระบวนการพัฒนา Yelpcamp

โครงการ Node.js เต็มรูปแบบจากหลักสูตร Web Dev ของฉันด้วยการกำหนดเส้นทาง

หน้าแรก

การตั้งค่าเริ่มต้น

  • เพิ่มหน้า Landing Page
  • เพิ่มหน้าแคมป์ที่แสดงรายการที่ตั้งแคมป์ทั้งหมด

แต่ละค่ายมี:

  • ชื่อ
  • ภาพ

เค้าโครงและสไตล์พื้นฐาน

  • สร้างส่วนหัวและส่วนท้ายส่วนหนึ่ง
  • เพิ่มใน bootstrap

การสร้างที่ตั้งแคมป์ใหม่

  • ตั้งค่าเส้นทางโพสต์แคมป์ใหม่
  • เพิ่มในร่างกาย
  • เส้นทางการตั้งค่าเพื่อแสดงแบบฟอร์ม
  • เพิ่มแบบฟอร์มที่ไม่เป็นระเบียบพื้นฐาน

สไตล์หน้าแคมป์

  • เพิ่มส่วนหัว/ชื่อที่ดีกว่า
  • ทำให้แคมป์แสดงอยู่ในตาราง

จัดรูปแบบ Navbar และรูปแบบ

  • เพิ่ม navbar ลงในเทมเพลตทั้งหมด
  • จัดรูปแบบค่ายใหม่

เพิ่มพังพอน

  • ติดตั้งและกำหนดค่าพังพอน
  • รุ่นที่ตั้งแคมป์ตั้งค่า
  • ใช้โมเดลที่ตั้งแคมป์ภายในเส้นทาง

แสดงหน้า

  • ตรวจสอบเส้นทางพักผ่อนที่เราเคยเห็นมา
  • เพิ่มคำอธิบายในรูปแบบที่ตั้งแคมป์
  • แสดง db.collection.drop ()
  • เพิ่มเส้นทางแสดง/เทมเพลต

รหัสพังพอน Refactor

  • สร้างไดเรกทอรีโมเดล
  • ใช้ module.exports
  • ต้องการทุกอย่างอย่างถูกต้อง!

เพิ่มไฟล์เมล็ดพันธุ์

  • เพิ่มไฟล์ seeds.js
  • เรียกใช้ไฟล์เมล็ดทุกครั้งที่เซิร์ฟเวอร์เริ่มต้น

เพิ่มโมเดลความคิดเห็น!

  • ทำให้เกิดข้อผิดพลาดความคิดเห็นหายไป!
  • แสดงความคิดเห็นในหน้าการแสดงที่ตั้งแคมป์

แสดงความคิดเห็นใหม่/สร้าง

  • หารือเกี่ยวกับเส้นทางที่ซ้อนกัน
  • เพิ่มความคิดเห็นใหม่และสร้างเส้นทาง
  • เพิ่มแบบฟอร์มความคิดเห็นใหม่

หน้าแสดงสไตล์

  • เพิ่มแถบด้านข้างเพื่อแสดงหน้า
  • แสดงความคิดเห็นเป็นอย่างดี

หน้าการจัดแต่งทรงผมเสร็จสิ้น

  • เพิ่มไดเรกทอรีสาธารณะ
  • เพิ่มสไตล์ชีทที่กำหนดเอง

การรับรองความถูกต้อง Pt. 1 - เพิ่มโมเดลผู้ใช้

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

การรับรองความถูกต้อง Pt. 2 - ลงทะเบียน

  • กำหนดค่าหนังสือเดินทาง
  • เพิ่มเส้นทางการลงทะเบียน
  • เพิ่มเทมเพลตการลงทะเบียน

การรับรองความถูกต้อง Pt. 3 - เข้าสู่ระบบ

  • เพิ่มเส้นทางเข้าสู่ระบบ
  • เพิ่มเทมเพลตเข้าสู่ระบบ

การรับรองความถูกต้อง Pt. 4 - ออกจากระบบ/navbar

  • เพิ่มเส้นทางออกจากระบบ
  • ป้องกันไม่ให้ผู้ใช้เพิ่มความคิดเห็นหากไม่ได้ลงชื่อเข้าใช้
  • เพิ่มลิงค์ไปยัง Navbar

การรับรองความถูกต้อง Pt. 5 - แสดง/ซ่อนลิงค์

  • แสดง/ซ่อนลิงค์รับรองความถูกต้องใน Navbar

refactor เส้นทาง

  • ใช้เราเตอร์ด่วนเพื่อ reoragnize เส้นทางทั้งหมด

ผู้ใช้ + ความคิดเห็น

  • เชื่อมโยงผู้ใช้และความคิดเห็น
  • บันทึกชื่อผู้แต่งลงในความคิดเห็นโดยอัตโนมัติ

ผู้ใช้ + ที่ตั้งแคมป์

  • ป้องกันไม่ให้ผู้ใช้ที่ไม่ได้รับการรับรองจากการสร้างที่ตั้งแคมป์
  • บันทึกชื่อผู้ใช้+id ไปยังที่ตั้งแคมป์ที่สร้างขึ้นใหม่

การแก้ไขที่ตั้งแคมป์

  • เพิ่ม Method-Override
  • เพิ่มเส้นทางแก้ไขสำหรับที่ตั้งแคมป์
  • เพิ่มลิงค์ไปยังหน้าแก้ไข
  • เพิ่มเส้นทางอัปเดต

การลบที่ตั้งแคมป์

  • เพิ่มเส้นทางทำลาย
  • เพิ่มปุ่มลบ

การอนุญาตตอนที่ 1: ที่ตั้งแคมป์

  • ผู้ใช้สามารถแก้ไขที่ตั้งแคมป์ของเขา/เธอได้เท่านั้น
  • ผู้ใช้สามารถลบที่ตั้งแคมป์ของเขา/เธอได้เท่านั้น
  • ซ่อน/แสดงการแก้ไขและลบปุ่ม

การแก้ไขความคิดเห็น

  • เพิ่มเส้นทางแก้ไขสำหรับความคิดเห็น
  • เพิ่มปุ่มแก้ไข
  • เพิ่มเส้นทางอัปเดต

เส้นทางแก้ไขแคมป์สนาม:/ที่ตั้งแคมป์/: ID/แก้ไขความคิดเห็นแก้ไขเส้นทาง:/Campgrounds/: id/ความคิดเห็น/: comment_id/แก้ไข

การลบความคิดเห็น

  • เพิ่มเส้นทางทำลาย
  • เพิ่มปุ่มลบ

เส้นทางทำลายล้างแคมป์:/ที่ตั้งแคมป์/: ความคิดเห็น id ทำลายเส้นทาง:/ที่ตั้งแคมป์/: id/ความคิดเห็น/: comment_id

การอนุมัติส่วนที่ 2: ความคิดเห็น

  • ผู้ใช้สามารถแก้ไขความคิดเห็นของเขา/เธอได้เท่านั้น
  • ผู้ใช้สามารถลบความคิดเห็นของเขา/เธอได้เท่านั้น
  • ซ่อน/แสดงการแก้ไขและลบปุ่ม
  • Refactor Middleware เป็นไฟล์เดียว

เพิ่มในแฟลช!

  • เวอร์ชันการสาธิตการทำงาน
  • ติดตั้งและกำหนดค่า Connect-Flash
  • เพิ่มการแจ้งเตือน bootstrap ลงในส่วนหัว

การเพิ่มป้ายราคาแบบไดนามิก

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