Unduhan ecommerce management system - pengunduhan kode sumber ecommerce management system

ecommerce management system

Kategori lainnya

1.0.0

Unduh

Sistem manajemen backend elemen

Sistem manajemen backend e-commerce berdasarkan Vue, menggunakan model pengembangan pemisahan front-end dan back-end. Tumpukan teknologi front-end yang digunakan dalam proyek ini termasuk Vue, vue-router, Element-UI, Axios, Echarts, dll.

Pemilihan teknologi

Tumpukan teknologi front-end:

Lihat
Vue-router
Elemen-UI
aksio
grafik

fungsi bisnis

Poin teknis terkait fungsi

1. Login pengguna

Setelah pengguna berhasil login, klien mengingat dan mempertahankan status loginnya melalui sessionStorage dan token .
Kontrol izin akses pengguna melalui penjaga navigasi rute router.beforeEach . Mencegah pengguna yang belum login mencoba mengakses halaman lain selain halaman login melalui URL.

2. Tata letak halaman beranda

tata letak
- Terapkan tata letak halaman beranda melalui pustaka komponen Element-UI .
- Gunakan <el-menu> untuk mengimplementasikan bilah navigasi samping, dan tambahkan atribut activePath ke sessionStorage agar bilah navigasi tetap disorot.
- Ikon di bilah navigasi samping menggunakan perpustakaan ikon vektor Iconfont Alibaba.
permintaan data
- Minta data antarmuka melalui Axios dan tambahkan token ke pencegat permintaan axios untuk memastikan izin untuk mendapatkan data.
- Gunakan bilah kemajuan NProgress untuk menampilkan kemajuan pemuatan halaman (permintaan data).

3. Manajemen pengguna-daftar pengguna

Gunakan <el-form> untuk menambahkan formulir pengguna, menyesuaikan aturan verifikasi formulir, dan menerapkan pengaturan ulang formulir dan pra-verifikasi sebelum pengiriman.
Gunakan slot-scope untuk mendapatkan data komponen dan menyesuaikan template rendering.

4.Manajemen izin

daftar peran
- Gunakan loop v-for tiga lapis untuk merender izin tingkat pertama, kedua, dan ketiga dari peran tersebut.
- Gunakan kontrol pohon <el-tree> untuk menampilkan daftar izin yang dapat ditetapkan peran.
Daftar izin

5.Manajemen komoditas

Daftar produk
- Gunakan filter global Vue.filter untuk menyesuaikan format tampilan objek Tanggal.
Tambahkan produk
- Gunakan komponen bilah langkah <el-steps> untuk memandu pengguna mengisi formulir penambahan produk sesuai dengan prosesnya.
- Gunakan komponen <el-upload> untuk memungkinkan pengguna mengunggah gambar produk.
- Gunakan editor teks kaya vue-quill-editor untuk memungkinkan pengguna mengisi konten produk.
- Gunakan <el-form> untuk melengkapi formulir penambahan produk, menyesuaikan aturan verifikasi formulir, dan menerapkan pra-verifikasi sebelum pengiriman formulir.
Parameter klasifikasi
Klasifikasi produk
- Gunakan komponen tabel pohon vue-table-with-tree-grid untuk menampilkan klasifikasi produk tingkat pertama, kedua, dan ketiga.

6. Manajemen pesanan-daftar pesanan

Gunakan komponen timeline <el-timeline> untuk menampilkan informasi logistik pesanan.

7. Data statistik-laporan data

Gunakan Echarts untuk menampilkan laporan data sumber pengguna.

Ketergantungan proyek

Menjalankan dependensi

axios => Kirim permintaan
grafik => grafik
element-ui => Pustaka komponen Elemen-UI
lodash => penyalinan mendalam dan penggabungan objek
nprogress => bilah kemajuan
vue-quill-editor => Editor teks kaya
vue-table-with-tree-grid => tabel pohon

Ketergantungan pembangunan

babel => konversi sintaks ES6
eslint/babel-eslint => pemeriksaan sintaksis
sass/sass-loader => sintaksis sass
babel-plugin-transform-remove-console => Hapus konsol dari lingkungan produksi
@babel/plugin-syntax-dynamic-import => Pemuatan rute yang lambat

Optimalisasi proyek

1. Menghasilkan laporan pengemasan

Lihat laporan pengemasan melalui panel visualisasi Vue UI dan analisis cara mengoptimalkan/mengompresi file yang terlalu besar.

2. Konfigurasikan Webpack

Tentukan file entri pengemasan yang berbeda untuk mode pengembangan dan mode rilis melalui chainWebpack
1. File entri mode pengembangan src/main-dev.js
2. File entri mode rilis src/main-prod.js
Di lingkungan produksi, beberapa perpustakaan pihak ketiga yang terlalu besar akan diperkenalkan menggunakan CDN
Secara default, paket ketergantungan pihak ketiga yang diimpor melalui sintaks import pada akhirnya akan dikemas dan digabungkan ke dalam file yang sama, sehingga menimbulkan masalah yaitu ukuran file tunggal menjadi terlalu besar setelah pengemasan berhasil.
Untuk mengatasi masalah di atas, Anda dapat mengonfigurasi dependensi yang diperlukan untuk memuat sumber daya CDN eksternal melalui node externals Webpack. Paket ketergantungan pihak ketiga apa pun yang dideklarasikan di eksternal tidak akan dikemas.

Sesuaikan konten beranda lingkungan yang berbeda melalui plug-in (misalnya, gunakan import untuk mengimpor paket dependen dalam mode pengembangan, dan gunakan CDN untuk mengimpor dalam mode rilis)

 // Vue.config.js
config . plugin ( 'html' ) . tap ( args => {
    args [ 0 ] . isProd = true / false
    return args
} )

 <!-- index.html -->
< title > < %= htmlWebpackPlugin.options.isProd ? '' : 'dev-' % > Element后台管理系统</ title >
< % if(htmlWebpackPlugin.options.isProd) { % >
    此处为CDN引入的第三方资源
< % } % >

3. Pemuatan rute yang lambat

Saat mengemas proyek, paket js yang terlalu besar akan mempengaruhi kecepatan pemuatan halaman.
Gunakan plug-in @babel/plugin-syntax-dynamic-import dan ubah perutean untuk memuat sesuai permintaan. Komponen terkait hanya akan dimuat ketika rute diakses.