vue store
1.0.0
Liburan musim dingin tahun 2020 sangatlah istimewa karena sekolah belum dimulai akibat epidemi pneumonia virus corona yang baru. Saya ingat saya menggunakan waktu luang saya untuk mempelajari Vue.js dan Node.js semester lalu. Saya selalu ingin membuat proyek lengkap untuk berlatih, tetapi sebelumnya saya tidak punya banyak waktu di sekolah. Sekarang saya punya waktu, saya ingin mengerjakan proyek untuk mengkonsolidasikan apa yang telah saya pelajari sebelumnya.
Setelah banyak pertimbangan, akhirnya saya memutuskan untuk membuat proyek e-commerce meniru Xiaomi Mall. Mungkin sudah lama sekali, dan saya hampir melupakan banyak hal yang saya pelajari sebelumnya. Saat mengerjakan proyek ini, pada dasarnya saya mengikuti dokumen resmi dan melakukannya sedikit demi sedikit. Tidak dapat dipungkiri akan terjadi berbagai hal di dalam negeri yang menghambat kemajuan proyek. Sekarang hampir selesai, mari kita bagikan kepada para pemula untuk memulai.
Front-end dan back-end proyek ini dipisahkan. Front-end diimplementasikan dengan mengacu pada Xiaomi Mall. Namun, ini tidak ada hubungannya dengan situs resmi Xiaomi Produk Xiaomi, silakan kunjungi mal resmi Xiaomi.
Ini adalah front-end dari proyek ini. Silakan pindah ke server toko untuk back-end.
Front-end telah diterapkan di Alibaba Cloud. Anda dipersilakan untuk mengunjungi http://101.132.181.9/ (tidak kompatibel dengan perangkat seluler, silakan gunakan komputer untuk mengakses).
Backend juga telah diterapkan di Alibaba Cloud, dan alamat antarmuka telah diubah menjadi alamat online. Frontend yang berjalan secara lokal juga dapat mengakses backend secara normal.
Saya berada di tahun ketiga studi sarjana dan akan mulai magang musim panas ini. Saya mungkin tidak memiliki banyak kebebasan di masa depan, tetapi saya akan memperbarui dan meningkatkan proyek ini dari waktu ke waktu langsung di Masalah.
Jika menurut Anda proyek ini bagus, Anda dapat mengklik
Stardi pojok kanan atas untuk mendukungnya. Terima kasih! ^_^
Front-end dan back-end proyek ini dipisahkan. Front-end didasarkan pada Vue + Vue-router + Vuex + Element-ui + Axios , dan diimplementasikan dengan mengacu pada Xiaomi Mall. Backend diimplementasikan berdasarkan Node.js(Koa框架) + Mysql .
Front-end berisi 11 halaman: beranda, login, registrasi, semua produk, halaman detail produk, tentang kami, koleksi saya, keranjang belanja, halaman penyelesaian pesanan, halaman pesanan saya dan penanganan kesalahan.
Ini mengimplementasikan tampilan produk, permintaan klasifikasi produk, pencarian kata kunci produk, tampilan informasi detail produk, login, registrasi, keranjang belanja pengguna, penyelesaian pesanan, pesanan pengguna, daftar favorit pengguna dan fungsi penanganan kesalahan.
Back-end mengadopsi model MVC, dan antarmuka, lapisan kontrol, dan lapisan persistensi data yang sesuai dirancang sesuai dengan modul data yang dibutuhkan oleh front-end. Server toko alamat pengiriman backend.
Ujung depan: Vue + Vue-router + Vuex + Element-ui + Axios
Backend: Node.js , Koa框架
Basis Data: Mysql
Halaman ini menggunakan Dialog elemen-ui untuk mencapai efek memunculkan kotak dialog topeng. Tombol登录diatur di komponen root App.vue, dan apakah kotak login ditampilkan dikontrol melalui status showLogin di vuex .
Desain ini dimaksudkan agar pengguna dapat login dengan mengklik tombol di halaman, atau kotak login dapat muncul secara otomatis setelah pengguna mengakses halaman yang memerlukan verifikasi login atau backend mengembalikan prompt yang memerlukan verifikasi login, sehingga mengurangi lompatan halaman dan menyederhanakan operasi pengguna.
Input data oleh pengguna seringkali tidak dapat diandalkan, sehingga informasi login diverifikasi di bagian depan dan belakang proyek ini. Bagian depan didasarkan pada metode verifikasi formulir elemen-ui dan memiliki aturan verifikasi yang disesuaikan untuk verifikasi.
Halaman ini juga menggunakan Dialog elemen-ui untuk mencapai efek memunculkan kotak dialog topeng. Tombol注册diatur dalam komponen root App.vue, dan nilai yang diteruskan melalui komponen induk-anak mengontrol apakah kotak registrasi ditampilkan. .
Input data oleh pengguna seringkali tidak dapat diandalkan, sehingga informasi pendaftaran juga diverifikasi di bagian depan dan belakang proyek ini. Bagian depan didasarkan pada metode verifikasi formulir elemen-ui dan memiliki aturan verifikasi yang disesuaikan untuk verifikasi.
Beranda terutama untuk menampilkan produk, dengan carousel yang menampilkan produk yang direkomendasikan dan produk populer yang ditampilkan berdasarkan kategori.
Halaman semua produk mengintegrasikan semua tampilan produk, kueri klasifikasi produk, dan tampilan hasil pencarian produk berdasarkan kata kunci.
Halaman detail produk terutama menampilkan informasi detail produk tertentu, di mana pengguna dapat menambahkan produk favoritnya ke keranjang belanja atau daftar favorit.
Keranjang belanja diimplementasikan menggunakan vuex, dan efek halaman mengacu pada keranjang belanja Xiaomi Mall.
Untuk proses implementasi lebih detail, silakan lihat: Menerapkan Keranjang Belanja Xiaomi Mall Berbasis Vuex
Setelah pengguna memilih produk yang akan dibeli di keranjang belanja dan mengklik tombol "Pergi ke Checkout", dia akan dibawa ke halaman ini. Di sini pengguna memilih alamat pengiriman, mengonfirmasi informasi yang relevan tentang pesanan, dan kemudian mengonfirmasi pembelian.
Pengguna dapat menambahkan produk favoritnya ke daftar favorit dengan mengklik tombol Tambah Suka di halaman detail produk.
Menampilkan semua pesanan yang dilakukan oleh pengguna.
Melihat:
1. Clone project
git clone https://github.com/hai-27/vue-store.git
2. Project setup
cd vue-store
npm install
3. Compiles and hot-reloads for development
npm run serve
4. Compiles and minifies for production
npm run build
halaman depan
Semua produk
keranjang belanja
koleksi saya
pesanan saya
Masuk
daftar
Penulis hai-27
8 Maret 2020
