BAI_SHOP

โครงการ 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 แล้ว คุณจะต้องเมาต์มันบนเซิร์ฟเวอร์เท่านั้น