ดาวน์โหลด ecommerce management system - ดาวน์โหลดซอร์สโค้ด ecommerce management system

ecommerce management system

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

ระบบการจัดการแบ็กเอนด์องค์ประกอบ

ระบบการจัดการแบ็กเอนด์อีคอมเมิร์ซที่ใช้ Vue โดยใช้โมเดลการพัฒนาการแยกส่วนหน้าและส่วนหลัง สแต็คเทคโนโลยีส่วนหน้าที่ใช้ในโปรเจ็กต์ ได้แก่ Vue, vue-router, Element-UI, Axios, Echarts เป็นต้น

การเลือกใช้เทคโนโลยี

กองเทคโนโลยีส่วนหน้า:

วิว
Vue-เราเตอร์
องค์ประกอบ-UI
แอ็กซิออส
อีชาร์ท

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

ประเด็นทางเทคนิคที่เกี่ยวข้องกับฟังก์ชัน

1. เข้าสู่ระบบของผู้ใช้

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

2.เค้าโครงหน้าแรก

เค้าโครง
- ใช้เค้าโครงหน้าของหน้าแรกผ่านไลบรารีองค์ประกอบ Element-UI
- ใช้ <el-menu> เพื่อใช้แถบการนำทางด้านข้าง และเพิ่มแอตทริบิวต์ activePath ไปยัง sessionStorage เพื่อให้แถบนำทางถูกเน้นไว้
- ไอคอนในแถบนำทางด้านข้างใช้ไลบรารีไอคอนเวกเตอร์ Iconfont Alibaba
คำขอข้อมูล
- ร้องขอข้อมูลอินเทอร์เฟซผ่าน Axios และเพิ่มโทเค็นให้กับตัวดักคำขอ axios เพื่อให้แน่ใจว่าได้รับอนุญาตให้รับข้อมูล
- ใช้แถบความคืบหน้า NProgress เพื่อแสดงความคืบหน้าในการโหลดหน้า (คำขอข้อมูล)

3. การจัดการผู้ใช้-รายชื่อผู้ใช้

ใช้ <el-form> เพื่อเพิ่มแบบฟอร์มผู้ใช้ ปรับแต่งกฎการตรวจสอบแบบฟอร์ม และใช้การรีเซ็ตแบบฟอร์มและการยืนยันล่วงหน้าก่อนส่ง
ใช้ slot-scope เพื่อรับข้อมูลส่วนประกอบและปรับแต่งเทมเพลตการแสดงผล

4.การจัดการสิทธิ์

รายการบทบาท
- ใช้ v-for loop สามเลเยอร์เพื่อแสดงสิทธิ์ระดับที่หนึ่ง สอง และสามของบทบาทตามลำดับ
- ใช้การควบคุมแผนผัง <el-tree> เพื่อแสดงรายการสิทธิ์ที่สามารถกำหนดบทบาทได้
รายการสิทธิ์

5.การจัดการสินค้าโภคภัณฑ์

รายการสินค้า
- ใช้ตัวกรองร่วม Vue.filter เพื่อกำหนดรูปแบบการแสดงผลของอ็อบเจ็กต์ Date เอง
เพิ่มสินค้า
- ใช้ส่วนประกอบแถบขั้นตอน <el-steps> เพื่อแนะนำผู้ใช้ในการกรอกแบบฟอร์มเพิ่มผลิตภัณฑ์ตามกระบวนการ
- ใช้คอมโพเนนต์ <el-upload> เพื่อให้ผู้ใช้สามารถอัปโหลดรูปภาพผลิตภัณฑ์ได้
- ใช้โปรแกรมแก้ไข Rich Text vue-quill-editor เพื่อให้ผู้ใช้สามารถกรอกเนื้อหาผลิตภัณฑ์ได้
- ใช้ <el-form> เพื่อกรอกแบบฟอร์มการเพิ่มผลิตภัณฑ์ ปรับแต่งกฎการตรวจสอบแบบฟอร์ม และใช้การยืนยันล่วงหน้าก่อนส่งแบบฟอร์ม
พารามิเตอร์การจำแนกประเภท
การจำแนกประเภทผลิตภัณฑ์
- ใช้ส่วนประกอบตารางต้นไม้ vue-table-with-tree-grid เพื่อแสดงการจัดหมวดหมู่ผลิตภัณฑ์ระดับที่หนึ่ง สอง และสาม

6. การจัดการคำสั่งซื้อ-รายการสั่งซื้อ

ใช้ส่วนประกอบไทม์ไลน์ <el-timeline> เพื่อแสดงข้อมูลโลจิสติกส์ของคำสั่งซื้อ

7. ข้อมูลสถิติ-รายงานข้อมูล

ใช้ Echarts เพื่อแสดงรายงานข้อมูลแหล่งที่มาของผู้ใช้

การพึ่งพาโครงการ

กำลังรันการพึ่งพา

axios => ส่งคำขอ
echarts => แผนภูมิ
element-ui => ไลบรารีส่วนประกอบ Element-UI
lodash => การคัดลอกแบบลึกและการรวมวัตถุ
nprogress => แถบความคืบหน้า
vue-quill-editor => โปรแกรมแก้ไข Rich Text
vue-table-with-tree-grid => ตารางต้นไม้

การพึ่งพาการพัฒนา

babel => การแปลงไวยากรณ์ ES6
eslint/babel-eslint => ตรวจสอบไวยากรณ์
sass/sass-loader => ไวยากรณ์ sass
babel-plugin-transform-remove-console => ลบคอนโซลออกจากสภาพแวดล้อมการใช้งานจริง
@babel/plugin-syntax-dynamic-import => การโหลดเส้นทางที่ขี้เกียจ

การเพิ่มประสิทธิภาพโครงการ

1.จัดทำรายงานการบรรจุภัณฑ์

ดูรายงานบรรจุภัณฑ์ผ่านแผงการแสดงภาพ Vue UI และวิเคราะห์วิธีเพิ่มประสิทธิภาพ/บีบอัดไฟล์ที่มีขนาดใหญ่เกินไป

2. กำหนดค่า Webpack

ระบุไฟล์รายการบรรจุภัณฑ์ที่แตกต่างกันสำหรับโหมดการพัฒนาและโหมดการเปิดตัวผ่าน chainWebpack
1. ไฟล์รายการโหมดการพัฒนา src/main-dev.js
2. ไฟล์รายการโหมดวางจำหน่าย src/main-prod.js
ในสภาพแวดล้อมการใช้งานจริง ไลบรารีของบริษัทอื่นบางแห่งที่มีขนาดใหญ่เกินไปจะถูกนำมาใช้โดยใช้ CDN
ตามค่าเริ่มต้น แพ็คเกจการพึ่งพาของบริษัทอื่นที่นำเข้าผ่านไวยากรณ์การนำเข้าจะถูกบรรจุและรวมเป็นไฟล์เดียวกันในที่สุด ส่งผลให้เกิดปัญหาที่ขนาดไฟล์เดียวใหญ่เกินไปหลังจากบรรจุภัณฑ์สำเร็จ
เพื่อแก้ไขปัญหาข้างต้น คุณสามารถกำหนดค่าการขึ้นต่อกันที่จำเป็นต้องโหลดทรัพยากร CDN ภายนอกผ่านโหนด externals ของ Webpack แพ็คเกจการพึ่งพาของบุคคลที่สามใด ๆ ที่ประกาศในภายนอกจะไม่ถูกบรรจุ
ปรับแต่งเนื้อหาหน้าแรกของสภาพแวดล้อมที่แตกต่างกันผ่านปลั๊กอิน (เช่น ใช้การนำเข้าเพื่อนำเข้าแพ็คเกจที่ต้องพึ่งพาในโหมดการพัฒนา และใช้ CDN เพื่อนำเข้าในโหมดรีลีส)
```
 // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} ) 
```
```
 
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % > 
```

3. การโหลดเส้นทางที่ขี้เกียจ

เมื่อทำการบรรจุโปรเจ็กต์ แพ็คเกจ js ที่มีขนาดใหญ่เกินไปจะส่งผลต่อความเร็วในการโหลดหน้า
ใช้ปลั๊กอิน @babel/plugin-syntax-dynamic-import และเปลี่ยนเส้นทางให้โหลดตามความต้องการ ส่วนประกอบที่เกี่ยวข้องจะถูกโหลดเมื่อมีการเข้าถึงเส้นทางเท่านั้น