การสร้างแอป Nuxt แรกของคุณ – CRUD Book Store

เรียนรู้วิธีสร้างแอปพลิเคชั่น Nuxt.


CRUD – สร้างอ่านอัปเดตลบ

ฉันคิดว่าคุณรู้พื้นฐานของ Vue JS แล้วและ / หรือคุณคุ้นเคยกับกรอบ Nuxt JS เป็นเฟรมเวิร์กที่มีประสิทธิภาพสร้างขึ้นบน Vue JS เป็นหลักเหมือนกับ Vue JS ถ้าเช่นนั้นทำไม Nuxt?

สำหรับคนส่วนใหญ่การตัดสินใจใช้ Nuxt JS นั้นมักจะเป็นความสามารถของ SSR.

SSR คืออะไร?

SSR เป็นตัวย่อสำหรับ Server Side Rendering.

โดยทั่วไปสำหรับแอปพลิเคชันหน้าเดียวส่วนใหญ่ (SPA) ไฟล์ที่แสดงผลจะถูกฉีดเข้าสู่ DOM โดยอัตโนมัติหลังจากโหลดหน้าเว็บแล้ว ดังนั้นบอทซอฟต์แวร์รวบรวมข้อมูล SEO จะพบหน้าว่างในการโหลดหน้า อย่างไรก็ตามสำหรับ SSR เนื่องจากความสามารถในการแสดงผลแอพล่วงหน้าบนเซิร์ฟเวอร์ก่อนหน้าจึงสามารถทำดัชนีหน้าเว็บได้โดยโปรแกรมรวบรวมข้อมูล SEO นอกจากนี้ยังอาจทำให้แอปมีประสิทธิภาพมากกว่าสปาปกติ.

Nuxt JS ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชัน SSR ได้อย่างง่ายดาย แอป Vue JS SPA ปกติยังสามารถกำหนดค่าให้ใช้ SSR ได้ แต่กระบวนการค่อนข้างยุ่งยากและ Nuxt JS จัดเตรียม wrapper เพื่อจัดการการกำหนดค่าทั้งหมดนั้น นอกเหนือจาก SSR แล้ว Nuxt ยังมอบวิธีที่ง่ายในการตั้งค่าโครงการ VueJS ของคุณด้วยประสิทธิภาพที่มากขึ้น.

แม้ว่า Nuxt JS ยังคงเป็น Vue JS แต่ก็มีความแตกต่างพื้นฐานบางประการในวิธีการสร้างโครงสร้างโฟลเดอร์.

จุดเน้นของบทความนี้เพื่อให้คุณสามารถ สร้างแอปด้วย Nuxt; ด้วยเหตุนี้, เราจะไม่ดำดิ่งสู่สถาปัตยกรรมโฟลเดอร์ของ Nuxt แต่ฉันจะอธิบายบางสิ่งที่สำคัญที่เราอาจต้องการได้อย่างรวดเร็วที่นี่.

หน้า

โฟลเดอร์หน้าเป็นหนึ่งในความแตกต่างพื้นฐานจาก Vue SPA ปกติ เพราะมันหมายถึงโฟลเดอร์มุมมองในสถาปัตยกรรม Vue ปกติ mores o ใน Nuxt ไฟล์ที่สร้างในโฟลเดอร์หน้าจะถูกจัดเตรียมโดยอัตโนมัติเป็นเส้นทาง ความหมายเมื่อคุณสร้างไฟล์ index.vue ในโฟลเดอร์เพจซึ่งจะกลายเป็นรูทเส้นทางของคุณโดยอัตโนมัติเช่น localhost: 3000 /.

นอกจากนี้เมื่อคุณสร้างชื่อไฟล์อื่น ๆ มันจะกลายเป็นเส้นทาง – การสร้าง about.vue ช่วยให้คุณเข้าถึง localhost: 3000 / about.

คุณยังสามารถสร้างโฟลเดอร์ภายในโฟลเดอร์หน้า หากคุณสร้างโฟลเดอร์ชื่อ ‘contact’ และภายในโฟลเดอร์นั้นคุณมี email.vue จากนั้นคุณสามารถเข้าถึง localhost: 3000 / contact / email มันง่ายมาก ด้วยวิธีนี้คุณไม่จำเป็นต้องสร้างไฟล์ router.js ด้วยตนเองเหมือนกับที่คุณทำกับ Vue JS เพื่อสร้างเส้นทางของคุณ.

ส่วนประกอบ

มันยังคงค่อนข้างเหมือนกับ Vue JS ส่วนประกอบที่สร้างขึ้นจะไม่ได้รับการจัดเตรียมโดยอัตโนมัติเป็นเส้นทาง.

คงที่

โฟลเดอร์แบบคงที่แทนที่โฟลเดอร์สาธารณะในแอป Vue JS ปกติฟังก์ชั่นเหมือนกันมาก ไฟล์ที่นี่ไม่ได้รับการรวบรวม; พวกเขาจะได้รับแบบเดียวกับที่พวกเขาเก็บไว้.

คุณสามารถอ่านทั้งหมดเกี่ยวกับสถาปัตยกรรมและโครงสร้างได้ที่ หน้าเอกสารคู่มือ Nuxt JS.

ตอนนี้มาสร้างสิ่งที่น่าสนใจ …

สร้างแอพร้านหนังสือ

เราจะสร้างแอพร้านหนังสือที่ผู้ใช้สามารถเพิ่มหนังสือที่พวกเขาอ่านไปยังหมวดหมู่ที่พวกเขาต้องการ มันจะมีลักษณะเช่นนี้.

ดังนั้นเราจะมีเลย์เอาต์ง่าย ๆ ข้างต้นมีเพียง 3 คอลัมน์ที่มีส่วนต่างๆของหนังสือ เมื่อเร็ว ๆ นี้อ่านหนังสือหนังสือที่ชอบและใช่ที่สุดของหนังสือที่ดีที่สุด (ฉันจะสารภาพฉันไม่รู้ว่าจะเรียกส่วนนั้นว่าอะไร)

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

ก่อนอื่นเราทำการติดตั้ง Nuxt:

npm ติดตั้ง create-nuxt-app

ประการที่สองหลังจากติดตั้ง Nuxt ตอนนี้คุณสามารถสร้างโครงการด้วยคำสั่ง,

create-nuxt-app bookStore

ฉันเลือกที่จะตั้งชื่อแอปของฉัน “bookStore” คุณสามารถตั้งชื่อของคุณให้เย็นขึ้นได้ ^ _ ^

จากนั้นให้เดินผ่านการแจ้งที่เหลือป้อนรายละเอียด,

ชื่อผู้แต่งพิมพ์ชื่อหรือกด Enter เพื่อเก็บค่าเริ่มต้น

เลือกผู้จัดการแพ็คเกจไม่ว่าคุณจะพอใจกับอะไรทั้งคู่ก็โอเค

เลือกเฟรมเวิร์ก UI สำหรับโครงการนี้ฉันจะใช้ Vuetify จากนั้นอีกครั้งกรอบงาน UI ใด ๆ ที่คุณพอใจจะทำได้ดี.

เลือกเฟรมเวิร์กเซิร์ฟเวอร์ที่กำหนดเอง เราไม่ต้องการอะไรเลยฉันจะไม่เลือกเลย

โมดูลพิเศษเลือกสิ่งที่คุณต้องการหรือเลือกทั้งสองอย่างเราจะไม่ใช้มันสำหรับแอปนี้.

ผ้าสำลีเป็นสิ่งสำคัญ ไปกับ ESLint กันเถอะ.

ในขณะที่การทดสอบมีความสำคัญเราจะไม่มองว่าในวันนี้ไม่มีเลย

โหมดการแสดงผลใช่แล้ว SSR.

หมายเหตุ: การเลือก SSR ไม่ได้หมายความว่าเราไม่ได้รับประโยชน์จากการมีสปาแอปยังคงเป็นสปา แต่ใช้ SSR ตัวเลือกอื่นหมายถึงเพียงแค่ SPA และไม่มี SSR.

กด Enter และย้ายไป,

และโครงการของเรากำลังสร้าง,

หลังจากการสร้างตอนนี้เราสามารถไปที่ไดเรกทอรีและเรียกใช้

การพัฒนาเส้นด้าย

หากคุณใช้ npm เป็นผู้จัดการแพ็คเกจให้ใช้,

npm รัน dev

โดยค่าเริ่มต้นแอพจะทำงานที่ localhost: 3000 เยี่ยมชมลิงค์ในเบราว์เซอร์ของคุณและคุณควรเห็นหน้า Nuxt เริ่มต้น.

ตอนนี้เริ่มต้นด้วยการสร้างส่วนประกอบที่เราต้องการ เราจะมีการ์ดแสดงข้อมูลหนังสือแต่ละเล่มและเราจะมีรูปแบบที่มีรูปแบบเพื่อป้อนข้อมูลหนังสือใหม่หรือแก้ไขที่มีอยู่.

ในการสร้างองค์ประกอบเพียงแค่สร้างไฟล์ใหม่ในโฟลเดอร์ส่วนประกอบ นี่คือรหัสสำหรับส่วนประกอบบัตรของฉัน.

// BookCard.vue

{{ชื่อหนังสือ}}
{{bookAuthor}}
{{bookDescription}}

ส่งออกเริ่มต้น {
อุปกรณ์ประกอบฉาก: ["ชื่อหนังสือ", "bookAuthor", "bookDescription"]
};

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

ตอนนี้เป็นองค์ประกอบต่อไปโมดัล.

//BookModal.vue

เพิ่มหนังสือ

เพิ่ม

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

ส่งออกเริ่มต้น {
ข้อมูล () {
กลับ {
ประเภท: "",
หัวข้อ: "",
ผู้เขียน: "",
คำอธิบาย: "",
};
},
}

นอกจากนี้ยังมีเมนูแบบเลื่อนลง “เลือกหมวดหมู่” ที่คาดว่าจะมีข้อมูล “หมวดหมู่” เราจะเพิ่มเข้าไปในข้อมูล.

ส่งออกเริ่มต้น {
ข้อมูล () {
กลับ {
เปิด: เท็จ,
ประเภท: "",
หัวข้อ: "",
ผู้เขียน: "",
คำอธิบาย: "",
หมวดหมู่: ["เพิ่งอ่านหนังสือ", "หนังสือเล่มโปรด", "ที่สุดของที่สุด"]
};
},
}

ตอนนี้เราต้องการวิธีสลับเปิดและปิด modal ของเราสำหรับตอนนี้เราเพิ่งจะมีคุณสมบัติข้อมูล ‘open’ ดังกล่าวข้างต้น เราจะพิจารณาอย่างใกล้ชิดต่อไป.

มาสร้างหน้าดูของเรากันอย่างรวดเร็วโดยที่เราจะมีสามกริด / คอลัมน์หนึ่งหน้าสำหรับแต่ละส่วนของหนังสือ มาเรียกหน้า index.vue ดูรหัสด้านล่าง.

//index.vue

เพิ่งอ่านหนังสือ

หนังสือเล่มโปรด

ที่สุดของที่สุด

ตอนนี้เรามีกริดของเราแล้วเราต้องเพิ่มส่วนประกอบการ์ดของเราในแต่ละตารางเพื่อเพิ่มหนังสือทุกเล่ม ดังนั้นเราจะนำเข้าส่วนประกอบ BookCard.vue ของเรา.

เพิ่งอ่านหนังสือ

แก้ไข
ลบ

หนังสือเล่มโปรด

แก้ไข
ลบ

ที่สุดของที่สุด

แก้ไข
ลบ

ตอนนี้เราได้นำเข้าส่วนประกอบของ BookCard และผูกอุปกรณ์ประกอบฉากกับผลลัพธ์จากลูป สิ่งนี้ทำให้มั่นใจได้ว่าสำหรับทุกรายการที่เพิ่มเข้าไปในส่วนใด ๆ จะมีการ์ดที่สร้างขึ้นสำหรับมัน นอกจากนี้ในแต่ละการ์ดเราจะรวมปุ่มเพื่อแก้ไขหรือลบการ์ด.

ตอนนี้เราต้องนำเข้าการ์ดจากสคริปต์และกำหนดอาร์เรย์ที่จะเก็บบันทึกสำหรับแต่ละหมวดหมู่.

นำเข้า BookCard จาก "@ / ชิ้นส่วน / BookCard";

ส่งออกเริ่มต้น {
ส่วนประกอบ: {
BookCard,
},
ข้อมูล () {
กลับ {
หนังสือเล่มล่าสุด: [],
favouriteBooks: [],
ที่สุดของที่สุด: []
};
},
};

ต่อไปเราต้องมีปุ่มในส่วนหัวที่จะเปิดขึ้นเป็นกิริยาช่วยเมื่อใดก็ตามที่เราต้องการเพิ่มหนังสือ เราจะทำสิ่งนี้ในไฟล์ “default.vue” เราจะเพิ่มปุ่มในส่วนหัวของแถบแอปเริ่มต้น.

เพิ่มหนังสือ

ต่อไปเราต้องสร้างเมธอด openModal ในส่วนของสคริปต์ ในแอป Vue JS ทั่วไปมีบัสเหตุการณ์ที่ช่วยให้คุณสื่อสารกับส่วนประกอบอื่นและแม้กระทั่งส่งผ่านข้อมูลใน Nuxt JS ยังมีบัสเหตุการณ์และคุณยังสามารถสร้างมันขึ้นมาได้เหมือนกัน ดังนั้นเราจะใช้ Event Bus เพื่อส่งผ่านข้อมูลเปิด modal ในหน้า index.vue (ซึ่งเรายังไม่ต้องนำเข้า) จากไฟล์ layout / default.vue.

มาดูกันว่ามันทำอย่างไร.

หากต้องการสร้าง Global Event Bus ให้เปิดไฟล์ในไดเรกทอรีรากของโครงการตั้งชื่อ eventBus.js และวางรหัสด้านล่าง.

นำเข้า Vue จาก ‘vue’

export const eventBus = new Vue ()

ใช่เลย ตอนนี้เราสามารถใช้มัน.

นำเข้า {eventBus} จาก "@ / eventBus";
วิธีการ: {
openModal () {
eventBus. $ ปล่อย ("เปิด Add-หนังสือกิริยา");
}
}

ต่อไปเราจะกลับไปที่องค์ประกอบ BookModal ของเราและฟังเมื่อเหตุการณ์ที่เกิดขึ้น Busus ส่งเสียง ‘open-add-book-modal’ เราจะเพิ่มสิ่งนี้ลงในส่วนของสคริปต์.

นำเข้า {eventBus} จาก "@ / eventBus";

สร้าง () {
eventBus. $ บน ("เปิด Add-หนังสือกิริยา", this.open = จริง);
},

ตอนนี้เราสามารถเปิดและปิดคำกริยาของเราได้ แต่ยังไม่ได้เพิ่มหนังสือใด ๆ มาเพิ่มวิธีการใน Modal ของเราเพื่อให้มันบันทึกสิ่งที่ถูกเพิ่มลงในสถานะ (จำไว้ว่าเราไม่ได้ใช้ฐานข้อมูลหรือที่จัดเก็บในตัวเครื่อง) เราเพิ่มสิ่งนี้ถัดจาก ‘สร้างแล้ว ()’

วิธีการ: {
saveBook () {
ให้ cardData = {
ชื่อ: this.title,
ผู้แต่ง: this.author,
คำอธิบาย: this.description,
หมวดหมู่: this.category
};
eventBus. $ ปล่อย ("บันทึกหนังสือ", cardData);
this.open = false;
}
}

ต่อไปเราต้องการวิธีเติมข้อมูลคำกริยาเมื่อเราแก้ไขข้อมูลจากการ์ดใด ๆ ดังนั้นให้ทำการปรับเปลี่ยนบางอย่างกับ ‘สร้าง ()’

สร้าง () {
eventBus. $ บน ("เปิด Add-หนังสือกิริยา", ข้อมูล => {
ถ้า (ข้อมูล) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = จริง
});
},

ตอนนี้ BookModal มีลักษณะเช่นนี้โดยรวม,

//BookModal.vue

เพิ่มหนังสือ

เพิ่ม

นำเข้า {eventBus} จาก "@ / eventBus";
ส่งออกเริ่มต้น {
ข้อมูล () {
กลับ {
เปิด: เท็จ,
ประเภท: "",
หัวข้อ: "",
ผู้เขียน: "",
คำอธิบาย: "",
หมวดหมู่: ["เพิ่งอ่านหนังสือ", "หนังสือเล่มโปรด", "ที่สุดของที่สุด"]
};
},
สร้าง () {
eventBus. $ บน ("เปิด Add-หนังสือกิริยา", ข้อมูล => {
ถ้า (ข้อมูล) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = จริง
});
},
วิธีการ: {
saveBook () {
ให้ cardData = {
ชื่อ: this.title,
ผู้แต่ง: this.author,
คำอธิบาย: this.description,
หมวดหมู่: this.category
};
eventBus. $ ปล่อย ("บันทึกหนังสือ", cardData);
this.open = false;
}
}
};

ต่อไปเราสามารถกลับไปที่หน้า index.vue เพื่อนำเข้าส่วนประกอบ BookModal เราจะเพิ่มสิ่งนี้ลงในส่วนของสคริปต์.

นำเข้า BookCard จาก "@ / ชิ้นส่วน / BookCard";
นำเข้า BookModal จาก "@ / ชิ้นส่วน / BookModal";
นำเข้า {eventBus} จาก "@ / eventBus";

ส่งออกเริ่มต้น {
ส่วนประกอบ: {
BookCard,
BookModal
},
ข้อมูล () {
กลับ {
หนังสือเล่มล่าสุด: [],
favouriteBooks: [],
ที่สุดของที่สุด: []
};
},

นอกจากนี้ในร่างกายเราจะเพิ่ม,

เราต้องการวิธีในการแก้ไขและลบการ์ด ในเทมเพลตก่อนหน้านี้ฉันผ่านการแก้ไขและลบเมธอดไปยังปุ่มตามที่แสดงไว้ด้านล่างแล้วเช่นกันฉันส่งผ่านอาร์กิวเมนต์ที่จำเป็นสำหรับแต่ละวิธี.

แก้ไขลบ

มาสร้างวิธีกันเถอะ.

วิธีการ: {
ลบ (หมวดหมู่ดัชนี) {
ถ้า (หมวดหมู่ === "เพิ่งอ่านหนังสือ") {
this.recentBooks.splice (ดัชนี, 1);
}
ถ้า (หมวดหมู่ === "หนังสือเล่มโปรด") {
this.favouriteBooks.splice (ดัชนี, 1);
}
ถ้า (หมวดหมู่ === "ที่สุดของที่สุด") {
this.bestOfTheBest.splice (ดัชนี, 1);
}
},
แก้ไข (รายการดัชนี) {
ถ้า (item.category === "เพิ่งอ่านหนังสือ") {
eventBus. $ ปล่อย ("เปิด Add-หนังสือกิริยา", สิ่งของ);
this.recentBooks.splice (ดัชนี, 1);
}
ถ้า (item.category === "หนังสือเล่มโปรด") {
eventBus. $ ปล่อย ("เปิด Add-หนังสือกิริยา", สิ่งของ);
this.favouriteBooks.splice (ดัชนี, 1);
}
ถ้า (item.category === "ที่สุดของที่สุด") {
eventBus. $ ปล่อย ("เปิด Add-หนังสือกิริยา", สิ่งของ);
this.bestOfTheBest.splice (ดัชนี, 1);
}
}
}

โปรดจำไว้ว่า BookModal กำลังเปล่งออกมาและมีเหตุการณ์ที่เรียกว่า save-book เราต้องการผู้ฟังสำหรับเหตุการณ์นั้นที่นี่.

สร้าง () {
eventBus. $ บน ("บันทึกหนังสือ", cardData => {
ถ้า (cardData.category === "เพิ่งอ่านหนังสือ") {
this.recentBooks.push (cardData);
}
ถ้า (cardData.category === "หนังสือเล่มโปรด") {
this.favouriteBooks.push (cardData);
}
ถ้า (cardData.category === "ที่สุดของที่สุด") {
this.bestOfTheBest.push (cardData);
}
});
},

ตอนนี้ในหน้าตาเดียวหน้า index.vue ของเรามีหน้าตาแบบนี้

เพิ่งอ่านหนังสือ

ดู

แก้ไข
ลบ

หนังสือเล่มโปรด

แก้ไข
ลบ

ที่สุดของที่สุด

แก้ไข
ลบ

นำเข้า BookCard จาก "@ / ชิ้นส่วน / BookCard";
นำเข้า BookModal จาก "@ / ชิ้นส่วน / BookModal";
นำเข้า {eventBus} จาก "@ / eventBus";

ส่งออกเริ่มต้น {
ส่วนประกอบ: {
BookCard,
BookModal
},
ข้อมูล () {
กลับ {
หนังสือเล่มล่าสุด: [],
favouriteBooks: [],
ที่สุดของที่สุด: []
};
},
สร้าง () {
eventBus. $ บน ("บันทึกหนังสือ", cardData => {
ถ้า (cardData.category === "เพิ่งอ่านหนังสือ") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}
ถ้า (cardData.category === "หนังสือเล่มโปรด") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
ถ้า (cardData.category === "ที่สุดของที่สุด") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
วิธีการ: {
ลบ (หมวดหมู่ดัชนี) {
ถ้า (หมวดหมู่ === "เพิ่งอ่านหนังสือ") {
this.recentBooks.splice (ดัชนี, 1);
}
ถ้า (หมวดหมู่ === "หนังสือเล่มโปรด") {
this.favouriteBooks.splice (ดัชนี, 1);
}
ถ้า (หมวดหมู่ === "ที่สุดของที่สุด") {
this.bestOfTheBest.splice (ดัชนี, 1);
}
},
แก้ไข (รายการดัชนี) {
ถ้า (item.category === "เพิ่งอ่านหนังสือ") {
eventBus. $ ปล่อย ("เปิด Add-หนังสือกิริยา", สิ่งของ);
this.recentBooks.splice (ดัชนี, 1);
}
ถ้า (item.category === "หนังสือเล่มโปรด") {
eventBus. $ ปล่อย ("เปิด Add-หนังสือกิริยา", สิ่งของ);
this.favouriteBooks.splice (ดัชนี, 1);
}
ถ้า (item.category === "ที่สุดของที่สุด") {
eventBus. $ ปล่อย ("เปิด Add-หนังสือกิริยา", สิ่งของ);
this.bestOfTheBest.splice (ดัชนี, 1);
}
}
}
};

ถ้าคุณได้มาไกลขนาดนี้เยี่ยมมาก !!! คุณเจ๋งมาก!

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

มาดูกันว่า.

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

ลองเพิ่มปุ่มดูอย่างรวดเร็วและใช้เพื่อไปที่หน้า ใช่แทนที่และใช้งานได้.

ดู

ต่อไปเราจะสร้างโฟลเดอร์แบบไดนามิกโดยนำหน้าชื่อด้วยเครื่องหมายขีดล่าง เช่น _title และภายในโฟลเดอร์นั้นเราจะมีไฟล์ index.vue ที่แสดงผลเมื่อเราไปที่เส้นทางนั้น.

สำหรับการสาธิตเราจะเข้าถึงคุณสมบัติ params ภายในไฟล์เท่านั้น.

// _title / index.vue

{{$ route.params.title}}

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

สำหรับบทเรียนนี้!

รหัสที่สมบูรณ์สำหรับสิ่งนี้สามารถพบได้ในนี้ กรุ. คุณยินดีที่จะมีส่วนร่วมในรหัส หากคุณมีความสนใจในการเรียนรู้กรอบฉันจะแนะนำนี้ แน่นอน Udemy.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map