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

คำนำ

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

เนื่องจากโปรเจ็กต์นี้ได้รับการปรับแต่งตามความต้องการที่แท้จริง ดังนั้นโปรเจ็กต์นี้จึงสอดคล้องกับโปรเจ็กต์แบ็คเอนด์ด้วย (พอร์ทัลโปรเจ็กต์จะแสดงอยู่ด้านล่าง) ซึ่งฉันเองก็สร้างให้เสร็จสมบูรณ์เช่นกัน บนเฟรมเวิร์ก Express ของ Node และฐานข้อมูลใช้ Mysql สำหรับผู้ที่ศึกษาเฉพาะโปรเจ็กต์ส่วนหน้านี้ โปรเจ็กต์จะใช้เซิร์ฟเวอร์แบ็คเอนด์ระยะไกลตามค่าเริ่มต้น และพอร์ทัลเอกสารอินเทอร์เฟซจะอยู่ด้านล่าง (ตามเอกสารออนไลน์ของ ApiFox) สำหรับพาร์ทเนอร์ที่ต้องการใช้บริการแบ็กเอนด์ในเครื่อง คุณสามารถดูโปรเจ็กต์แบ็กเอนด์ได้

โปรเจ็กต์นี้ใช้บัคเก็ตตระกูล Vue , Vuex และ Vue-router เป็นหลัก UI ใช้ Element-Ui และเครื่องมือ build ใช้ Vue-cli แน่นอนว่ายังมีโปรเจ็กต์ที่สร้างจาก webpack อีกด้วย หากคุณต้องการทราบข้อมูลเพิ่มเติม คุณสามารถเปลี่ยนไปใช้สาขา Webpack ได้ สำหรับการกำหนดค่าเฉพาะ โปรดดู README ใต้สาขา Webpack

โปรเจ็กต์นี้จะถูกเก็บรักษาไว้เป็นเวลานาน หากคุณมีคำถามใด ๆ โปรดแจ้งโดยตรงใน ปัญหา หากคุณพบปัญหาและมีวิธีแก้ปัญหาที่ดี PR ก็ยินดีต้อนรับ

PS: เซิร์ฟเวอร์ระยะไกลให้การทดสอบเท่านั้น และแบ็กเอนด์ไม่มีข้อจำกัดมากเกินไป การกรองและตรวจสอบ ทุกคนเล่นได้เพียงเล็กน้อย แต่เซิร์ฟเวอร์ขัดข้องและฉันต้องรีสตาร์ทด้วยตนเอง มันลำบากมาก~

?พอร์ทัล

  • ที่อยู่สาธิตโครงการออนไลน์ คลิกฉันอย่างหนัก (รหัสผ่านบัญชีเริ่มต้นคือรูท รูท ชื่อโดเมนกำลังถูกลงทะเบียนใหม่ การเข้าถึง IP เต็มเล็กน้อย และการโหลดแบบ Lazy Loading จะช้ามาก~)

  • โครงการให้ที่อยู่เอกสารอินเทอร์เฟซระยะไกล คลิกฉันอย่างหนัก

  • ตรงกับที่อยู่โครงการแบ็กเอนด์ คลิกฉันอย่างหนัก

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

เทคโนโลยี แสดงให้เห็น เวอร์ชัน เว็บไซต์อย่างเป็นทางการ
วิว กรอบงาน JavaScript แบบก้าวหน้า ?https://vuejs.org/
Vue-เราเตอร์ การจัดการเส้นทาง ?https://router.vuejs.org/
วูเอกซ์ การจัดการรัฐทั่วโลก ?https://vuex.vuejs.org/
องค์ประกอบ-Ui กรอบงาน UI ?https://element.eleme.io
แอ็กซิออส ไลบรารีคำขอเครือข่ายตามสัญญา ?https://www.axios-http.cn/
อีชาร์ต ไลบรารีแผนภูมิภาพ ?https://echarts.apache.org/
น้อย ภาษาส่วนขยาย CSS ที่เข้ากันได้แบบย้อนหลัง ?https://less.bootcss.com/

สภาพแวดล้อมการพัฒนา: Windows, Node(v16.18.0), Npm(v8.19.2)

?แนะนำฟังก์ชั่น

ฟังก์ชั่นทางเทคนิค

  • ✅การโหลดเส้นทางอย่างขี้เกียจ
  • ✅การควบคุมการอนุญาต (โทเค็น)
  • ✅การแสดงภาพข้อมูล
  • ✅อิงตามคำขอของ Axios การควบคุมการสกัดกั้นการตอบสนอง และการจัดการคำขอแบบรวมศูนย์
  • ✅การจัดการแบบรวมศูนย์ของข้อมูลสถานะที่นำมาใช้ซ้ำได้และข้อมูลที่ซับซ้อนตาม Vuex
  • ✅Bagcrumbs, แคชส่วนประกอบ, แคชบันทึกทั่วโลก
  • สร้างเส้นทางและแถบนำทางแบบไดนามิกขึ้นอยู่กับการอนุญาตของผู้ใช้
  • รูปแบบที่ตอบสนอง
  • ✅การเพิ่มประสิทธิภาพบรรจุภัณฑ์ (มีสาขา webpack ให้)
  • ที่จะดำเนินต่อไป...

ฟังก์ชั่นทางธุรกิจ

  • การแสดงข้อมูล

    • ✅ภาพรวมข้อมูลพื้นฐาน
    • ✅การวิเคราะห์หมวดหมู่สินค้าคงคลัง
    • ✅สถิติยอดขาย ต้นทุน และกำไร
    • ✅ กรอกสถิติการสั่งซื้อ

  • คลังสินค้า

    • ✅เพิ่มลงสินค้าคงคลัง
    • ✅สอบถามเงื่อนไขการบันทึกการจัดเก็บ

  • ออกจากโกดัง

    • ✅เพิ่มห้องสมุดขาออก
    • ✅สอบถามเงื่อนไขบันทึกการจัดส่ง
    • ✅เปลี่ยนสถานะการจัดส่ง

  • การจัดการลูกค้า

    • ✅เพิ่มลูกค้า
    • ✅แก้ไขลูกค้า

  • การจัดการผู้ใช้

    • การควบคุมการอนุญาต
    • การปรับเปลี่ยนข้อมูล

รันโครงการ

1️⃣ดึงไฟล์โครงการ

โคลนคอมไพล์ https://github.com/Hyrmm/wms-client

2️⃣สลับไปที่ไดเรกทอรีโครงการ

cd wms-ไคลเอนต์

3️⃣ติดตั้งแพ็คเกจการพึ่งพา

ติดตั้ง npm

4️⃣รันโครงการ

  • ใช้อินเทอร์เฟซบริการแบ็กเอนด์ออนไลน์ระยะไกล

    เรียกใช้บริการ NPM

  • หากต้องการใช้อินเทอร์เฟซบริการแบ็กเอนด์ในเครื่อง คุณต้องร่วมมือกับพอร์ทัลโปรเจ็กต์แบ็กเอนด์

    npm รันในเครื่อง

?การแสดงธุรกิจ

โครงสร้างโครงการ 

 ├── src
│   ├── App.vue
│   ├── api
│   ├── assets
│   ├── components
│   │   ├── AgentFail
│   │   ├── Breadcrumb
│   │   ├── PagiNation
│   │   ├── TableFilter
│   │   └── ViewFilter
│   ├── main.js
│   ├── mixin
│   ├── pages
│   │   ├── home
│   │   └── login
│   ├── router
│   ├── store
│   ├── utils
│   └── view
│       ├── Client
│       │   ├── Add
│       │   ├── Modify
│       │   └── index.vue
│       ├── Setting
│       ├── Store
│       ├── StoreIn
│       │   ├── Add
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│       │   ├── Order.vue
│       │   ├── Recording
│       │   └── index.vue
│       ├── StoreOut
│       │   ├── Add
│       │   ├── Modify
│       │   ├── Recording
│       │   └── index.vue
│       └── index
│           ├── Order.vue
│           ├── Sales.vue
│           ├── Store.vue
│           └── index.vue
├── jsconfig.json
├── package-lock.json
├── package.json
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด