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

โครงการ BAI_SHOP

1. บทนำโครงการ

การแนะนำโปรเจ็กต์: โปรเจ็กต์นี้ใช้โมเดลการพัฒนาการแยกส่วนหน้าและส่วนหลัง vue_api_server เป็นไฟล์โค้ดส่วนหลัง vue_shop เป็นไฟล์โค้ดการพัฒนาส่วนหน้า และ vue_shop_server เป็นไฟล์โค้ดการผลิตส่วนหน้า การรัน vue_shop_server โดยตรงจะง่ายกว่า vue_shop มาก

กองเทคโนโลยีโครงการส่วนหน้า แสดงให้เห็น
วิว กรอบการทำงานที่ก้าวหน้าสำหรับการสร้างส่วนต่อประสานกับผู้ใช้
Vue-เราเตอร์ vue-router คือ ผู้จัดการเส้นทางอย่างเป็นทางการของ vue.js
องค์ประกอบ-UI ElementUI Element เป็นไลบรารีส่วนประกอบที่ใช้ Vue 2.0 ที่เตรียมไว้สำหรับนักพัฒนา นักออกแบบ และผู้จัดการผลิตภัณฑ์ โดยจะมีทรัพยากรด้านการออกแบบที่สนับสนุนเพื่อช่วยให้เว็บไซต์ของคุณเป็นรูปเป็นร่างได้อย่างรวดเร็ว
แอ็กซิออส axios เป็นไลบรารี Http แบบ Promise ที่สามารถใช้ในสภาพแวดล้อมและเบราว์เซอร์ node.js
อีชาร์ท พูดง่ายๆ ก็คือ ECharts เป็นปลั๊กอินที่ใช้โดยฐานข้อมูลแบ็กเอนด์เพื่อแมปข้อมูลกับกราฟิกในกระบวนการพัฒนาโปรแกรมอินเทอร์เน็ต
กองเทคโนโลยีโครงการแบ็กเอนด์ แสดงให้เห็น
โหนด js nodejs เป็นภาษาที่พัฒนาด้วย C++ ที่ทำงานบนฝั่งเซิร์ฟเวอร์ สามารถเขียนโปรแกรมพื้นหลังของเว็บไซต์และพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์ได้
ด่วน Express เป็น เฟรมเวิร์กการพัฒนาเว็บแอปพลิเคชันที่เรียบง่ายและยืดหยุ่นซึ่งใช้แพลตฟอร์ม Node.js มีชุดคุณสมบัติอันทรงพลังที่จะช่วยคุณสร้างแอปพลิเคชันบนเว็บและอุปกรณ์มือถือต่างๆ
ว้าว json web token เป็นมาตรฐานแบบเปิดที่ใช้ json ซึ่งนำไปใช้เพื่อส่งการอ้างสิทธิ์ในสภาพแวดล้อมแอปพลิเคชันบนเว็บ
MySQL ฐานข้อมูล
สืบเนื่อง Sequelize.js ช่วยให้เข้าถึงฐานข้อมูล MySQL, MariaDB, SQLite และ PostgreSQL ได้อย่างง่ายดายโดยการแมปรายการฐานข้อมูลกับอ็อบเจ็กต์ หรืออ็อบเจ็กต์กับรายการฐานข้อมูล กล่าวโดยย่อคือ ORM (Object-Relational-Mapper) Sequelize.js เขียนด้วย JavaScript ทั้งหมดและเหมาะสำหรับสภาพแวดล้อม Node.js

2. คำอธิบายเอกสาร

คำอธิบายไฟล์ 1.vue_api_server

  • ไดเร็กทอรีไฟล์การกำหนดค่า config
    • ไฟล์การกำหนดค่าเริ่มต้น default.json (ซึ่งมีการกำหนดค่าฐานข้อมูล การกำหนดค่า jwt)
  • dao data access layer ซึ่งจัดเก็บการดำเนินการเพิ่มเติม การลบ การแก้ไข และการสืบค้นของฐานข้อมูล
    • วิธีการเข้าถึงฐานข้อมูลสาธารณะที่จัดทำโดย DAO.js
  • models เก็บไฟล์โมเดล ORM ฐานข้อมูลเฉพาะ
  • โมดูลโมดูลโครงการ modules
    • authorization.js โมดูลการตรวจสอบสิทธิ์ API
    • โมดูลฐานข้อมูล database.js (การโหลดฐานข้อมูลขึ้นอยู่กับการโหลดไลบรารี nodejs-orm2)
    • passport.js สร้างขึ้นจากโมดูลการเข้าสู่ระบบของหนังสือเดินทาง
    • resextra.js API อินเทอร์เฟซผลลัพธ์การส่งคืนแบบรวม
  • โมดูลของบริษัทอื่นที่โปรเจ็กต์ node_modules ขึ้นอยู่กับ
  • routes ที่รวมเส้นทาง
    • api จัดให้มีอินเทอร์เฟซ api
    • mapp มีอินเทอร์เฟซแอพมือถือ
    • mweb ให้บริการเว็บไซต์บนมือถือ
  • ชั้นบริการ services รหัสตรรกะทางธุรกิจถูกเขียนในเลเยอร์นี้ และข้อมูลที่ได้รับผ่านอินเทอร์เฟซที่แตกต่างกันจะถูกแปลงเป็นข้อมูลที่ต้องการโดยส่วนหน้าแบบรวม
  • ไฟล์รายการโครงการหลักของ app.js
  • ไฟล์การกำหนดค่าโปรเจ็กต์ package.json

คำอธิบายไฟล์ 2.vue_shop

  • dist folder โฟลเดอร์ที่สร้างขึ้นหลังจากการบรรจุภัณฑ์ของโครงการ (สำหรับสภาพแวดล้อมการใช้งานจริง)

    • ประกอบด้วย css , fonts , img , js , favicon.ico และ index.html
    • เพียงเริ่มต้นเซิร์ฟเวอร์แบบธรรมดา ติดตั้งโปรเจ็กต์ รันเซิร์ฟเวอร์ และเข้าถึงพอร์ตเริ่มต้น
    • วิธีรันโปรเจ็กต์ vue แบบแพ็กเกจ: https://www.cnblogs.com/zhujiabin/p/10557982.html

  • โฟลเดอร์ public เก็บทรัพยากรแบบคงที่

    • มีไฟล์ favicon.ico และ index.html

  • โฟลเดอร์ src คือโฟลเดอร์ที่เก็บโปรแกรมต้นทาง

    • assets : จัดเก็บไฟล์ทรัพยากรขนาดใหญ่ของโครงการ เช่น รูปภาพ แบบอักษร ฯลฯ

    • components : เก็บส่วนประกอบย่อยของโปรเจ็กต์ vue

    • plugins : ส่วนประกอบ element-ui ที่แนะนำโดยโครงการ

    • router : การกำหนดเส้นทางโครงการ index.js

    • tools : คลาสเครื่องมือโครงการ

    • App.vue : คอมโพเนนต์รูต vue

    • main.js : ทางเข้าเว็บ

  • ไฟล์การกำหนดค่าอื่น ๆ

    • .browserslistrc : การกำหนดค่านี้สามารถแชร์เบราว์เซอร์เป้าหมายและเวอร์ชัน nodejs ในเครื่องมือส่วนหน้าต่างๆ เครื่องมือเหล่านี้สามารถกำหนดค่าได้โดยอัตโนมัติตามเบราว์เซอร์เป้าหมาย
    • .editorconfig : ช่วยให้นักพัฒนากำหนดและรักษารูปแบบการเขียนโค้ดที่สอดคล้องกันในโปรแกรมแก้ไขและ IDE ต่างๆ
    • .eslintignore : ตั้งค่าไฟล์ที่ไม่ได้รับการยืนยันโดย eslint ( ESLint เป็นปลั๊กอินและกำหนดค่ากฎไวยากรณ์ JavaScript และเครื่องมือตรวจสอบรูปแบบโค้ดได้)
    • .eslintrc.js : ไฟล์การกำหนดค่า eslint
    • .gitignore : ตั้งค่าไฟล์ที่ถูกละเว้นโดย git
    • .prettierrc : เมื่อเราใช้การจัดรูปแบบคลิกขวา มันจะช่วยให้เรากรอกสัญลักษณ์ให้สมบูรณ์โดยอัตโนมัติ อย่างไรก็ตาม สัญลักษณ์บางตัวจะรายงานข้อผิดพลาดทางไวยากรณ์ใน eslint แล้วเราต้องทำอย่างไร คุณสามารถกำหนดค่าไฟล์ผ่าน .prettierrc
    • babel.config.js : ไฟล์คอนฟิกูเรชัน Babel ( Babel เป็น กลุ่มเครื่องมือที่ใช้เป็นหลักในการแปลงโค้ดเวอร์ชัน ECMAScript 2015+ ให้เป็นไวยากรณ์ JavaScript ที่เข้ากันได้แบบย้อนหลัง เพื่อให้สามารถทำงานในเบราว์เซอร์เวอร์ชันปัจจุบันและเก่ากว่าหรือสภาพแวดล้อมอื่น ๆ )

คำอธิบายไฟล์ 3.vue_shop_server

  • ไฟล์โปรเจ็กต์สภาพแวดล้อมการใช้งานจริงที่แพ็กเกจโดย vue_shop ในโฟลเดอร์ dist
  • ประกอบด้วย css , fonts , img , js , favicon.ico และ index.html
    • เมื่อรันโปรเจ็กต์ ให้ลบแพ็คเกจการพึ่งพา node_modules ก่อน จากนั้นป้อนไดเร็กทอรี vue_shop_server และดำเนินการ npm install เพื่อดาวน์โหลดแพ็คเกจการพึ่งพาใหม่อีกครั้ง
    • หลังจากดาวน์โหลดแพ็คเกจการพึ่งพาแล้ว ให้รันคำสั่ง nodemon app.js ในหน้าต่าง doc และไปที่ http://localhost:3000 เพื่อดูส่วนหน้าของโปรเจ็กต์
  • เซิร์ฟเวอร์ไฟล์ app.js รันไฟล์รายการซึ่งมีการกำหนดค่าพื้นฐานบางอย่างสำหรับเซิร์ฟเวอร์

3. ข้อควรระวังในการดำเนินโครงการ

1. ดาวน์โหลดและแตก BAI_SHOP.zip

2. เข้าสู่โฟลเดอร์ vue_api_server/db และนำเข้าไฟล์ฐานข้อมูล mydb.sql ภายใต้โฟลเดอร์ db ไปยังฐานข้อมูล mysql

3. หลังจากนำเข้าข้อมูลสำเร็จแล้ว ให้เปิดไฟล์ default.json ในโฟลเดอร์ config และกำหนดค่า db_config ในนั้น

4. เปิดหน้าต่างคำสั่ง doc ป้อนไดเร็กทอรี vue_api_server และรันคำสั่ง npm install เพื่อโหลดการขึ้นต่อกันที่จำเป็นสำหรับโปรเจ็กต์

5. หลังจากโหลดการขึ้นต่อกันแล้ว ให้รัน nodemon app.js เพื่อรัน

6. เปิดหน้าต่างคำสั่ง doc ใหม่ ป้อนไดเร็กทอรี vue_shop และรันคำสั่ง npm install เพื่อโหลดการขึ้นต่อกันที่จำเป็นสำหรับโปรเจ็กต์

7. หลังจากโหลดการขึ้นต่อกันแล้ว ให้รันคำสั่ง npm run serve ในหน้าต่างปัจจุบันเพื่อรันโปรเจ็กต์ เมื่อระบบแจ้งให้ Compiled successfully in xxxxms ให้เปิดเบราว์เซอร์แล้วไปที่ localhost:8080

8. Postscript: โดยทั่วไปแล้ว โปรเจ็กต์ในโหมดการพัฒนาดำเนินไปได้สำเร็จ! หมายเหตุ: คุณต้องมีสภาพแวดล้อม nodejs ก่อน! และคุณต้องติดตั้งโค้ดการพึ่งพา nodemon ทั่วโลก: npm install nodemon -g

หากคุณต้องการเมานต์โปรเจ็กต์ในโหมดการใช้งานจริง โปรดดู คำอธิบายไฟล์ vue_shop และคำอธิบายไฟล์ vue_shop_server ด้านบน โฟลเดอร์ dist คือไฟล์หลังจากแพ็กเกจ vue แล้ว คุณจะต้องเมาต์มันบนเซิร์ฟเวอร์เท่านั้น

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