หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ร้านค้า (อ้างอิงถึง Xiaomi Mall)

คำนำ

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

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

แสดงให้เห็น

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

นี่คือส่วนหน้าของโปรเจ็กต์นี้ โปรดย้ายไปยังเซิร์ฟเวอร์ร้านค้าสำหรับส่วนหลัง

ส่วนหน้าได้รับการปรับใช้บน Alibaba Cloud คุณสามารถไปที่ http://101.132.181.9/ (เข้ากันไม่ได้กับอุปกรณ์มือถือ โปรดใช้คอมพิวเตอร์ในการเข้าถึง)

แบ็กเอนด์ยังถูกปรับใช้บน Alibaba Cloud และที่อยู่อินเทอร์เฟซก็เปลี่ยนไปเป็นที่อยู่ออนไลน์ ฟรอนต์เอนด์ที่ทำงานในเครื่องยังสามารถเข้าถึงแบ็กเอนด์ได้ตามปกติ

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

หากคุณคิดว่าโครงการนี้ดี คุณสามารถคลิกติด Star ที่มุมขวาบนเพื่อสนับสนุนได้ ขอบคุณ! -

การแนะนำโครงการ

ส่วนหน้าและส่วนหลังของโปรเจ็กต์นี้แยกจากกัน ส่วนหน้าจะขึ้นอยู่กับ Vue + Vue-router + Vuex + Element-ui + Axios และนำไปใช้โดยอ้างอิงกับ Xiaomi Mall แบ็กเอนด์มีการใช้งานตาม Node.js(Koa框架) + Mysql

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

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

ส่วนแบ็คเอนด์ใช้โมเดล MVC และอินเทอร์เฟซ เลเยอร์ควบคุม และเลเยอร์การคงอยู่ของข้อมูลที่สอดคล้องกันได้รับการออกแบบตามโมดูลข้อมูลที่ต้องการโดยฟรอนต์เอนด์ เซิร์ฟเวอร์ร้านค้าที่อยู่จัดส่งแบ็กเอนด์

กองเทคโนโลยี

  • ส่วนหน้า: Vue + Vue-router + Vuex + Element-ui + Axios

  • แบ็กเอนด์: Node.js , Koa框架

  • ฐานข้อมูล: Mysql

โมดูลฟังก์ชัน

เข้าสู่ระบบ

เพจนี้ใช้ Dialog ของ element-ui เพื่อให้บรรลุผลของการเปิดกล่องโต้ตอบมาส์กขึ้นมา ปุ่ม登录ถูกตั้งค่าไว้ในคอมโพเนนต์รูทของ App.vue และจะมีการควบคุมกล่องล็อกอินผ่านสถานะ showLogin ใน vuex หรือไม่

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

ข้อมูลที่ผู้ใช้ป้อนมักจะไม่น่าเชื่อถือ ดังนั้นข้อมูลการเข้าสู่ระบบจึงได้รับการตรวจสอบทั้งส่วนหน้าและส่วนหลังของโปรเจ็กต์นี้ ส่วนหน้าจะขึ้นอยู่กับวิธีการตรวจสอบแบบฟอร์มของ element-ui และมีกฎการตรวจสอบที่กำหนดเองสำหรับการตรวจสอบ

ลงทะเบียน

หน้านี้ยังใช้ Dialog ของ element-ui เพื่อให้บรรลุผลของการเปิดกล่องโต้ตอบมาส์กขึ้นมา ปุ่ม注册ถูกตั้งค่าไว้ในองค์ประกอบรูทของ App.vue และค่าที่ส่งผ่านองค์ประกอบหลัก-รองจะควบคุมว่ากล่องการลงทะเบียนจะแสดงหรือไม่ .

ข้อมูลที่ผู้ใช้ป้อนมักจะไม่น่าเชื่อถือ ดังนั้นข้อมูลการลงทะเบียนจึงได้รับการตรวจสอบที่ส่วนหน้าและด้านหลังของโปรเจ็กต์นี้ด้วย ส่วนหน้าจะขึ้นอยู่กับวิธีการตรวจสอบแบบฟอร์มของ element-ui และมีกฎการตรวจสอบที่กำหนดเองสำหรับการตรวจสอบ

หน้าแรก

หน้าแรกมีไว้สำหรับแสดงผลิตภัณฑ์เป็นหลัก โดยมีภาพหมุนแสดงผลิตภัณฑ์แนะนำและผลิตภัณฑ์ยอดนิยมที่แสดงตามหมวดหมู่

สินค้าทั้งหมด

หน้าผลิตภัณฑ์ทั้งหมดรวมการแสดงผลิตภัณฑ์ทั้งหมด คำค้นหาการจัดหมวดหมู่ผลิตภัณฑ์ และการแสดงผลการค้นหาผลิตภัณฑ์ตามคำสำคัญ

รายละเอียดสินค้าหน้า

หน้ารายละเอียดผลิตภัณฑ์จะแสดงข้อมูลโดยละเอียดของผลิตภัณฑ์บางรายการเป็นหลัก โดยผู้ใช้สามารถเพิ่มผลิตภัณฑ์โปรดลงในตะกร้าสินค้าหรือรายการโปรดได้

ตะกร้าสินค้าของฉัน

ตะกร้าสินค้าถูกใช้งานโดยใช้ vuex และเอฟเฟกต์หน้าหมายถึงตะกร้าสินค้าของ Xiaomi Mall

สำหรับขั้นตอนการดำเนินการโดยละเอียด โปรดดูที่: การใช้ตะกร้าสินค้า Xiaomi Mall ตาม Vuex

การสั่งซื้อการชำระบัญชี

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

คอลเลกชันของฉัน

ผู้ใช้สามารถเพิ่มผลิตภัณฑ์ที่ชื่นชอบลงในรายการโปรดได้โดยคลิกปุ่มเพิ่มถูกใจในหน้ารายละเอียดสินค้า

คำสั่งซื้อของฉัน

แสดงคำสั่งซื้อทั้งหมดที่ผู้ใช้ทำไว้

รันโครงการ

สังเกต:

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

git clone https://github.com/hai-27/vue-store.git

2. Project setup

cd vue-store
npm install

3. Compiles and hot-reloads for development

npm run serve

4. Compiles and minifies for production

npm run build

ภาพหน้าจอของหน้า

หน้าแรก

สินค้าทั้งหมด

ตะกร้าสินค้า

คอลเลกชันของฉัน

คำสั่งซื้อของฉัน

เข้าสู่ระบบ

ลงทะเบียน

ผู้เขียน ไฮ-27

8 มีนาคม 2020

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