Wechat Wecat

Kami Kucing

memperkenalkan

• Proyek obrolan instan berdasarkan Vue.js Family Bucket + WebSocket + Node.js + Koa2 + MongoDB
• Bagian fungsinya mengacu pada WeChat, dengan beberapa fungsi menarik ditambahkan. Komentar kode proyek sangat rinci, dan ini merupakan proyek pengantar full-stack yang bagus untuk mempelajari Vue, Node.js, dan koa.
• Front-end dan penerapan proyek diselesaikan secara independen. Jika ada ketidaksempurnaan dalam berbagai interaksi dan berbagai fungsi logika bisnis, silakan angkat.

Tampilan proyek

1. Masuk

2. Daftar

3. Ambil kata sandi

4. Pendaftaran berhasil, pilih avatar

5. Panel utama

6. Tambahkan teman

7. Panel informasi teman

8. Kirim pesan dan file

9. Panel multifungsi, kirim emotikon

10. Menu pengaturan yang dipersonalisasi

11. Halaman administrator, informasi pengguna

12. Kueri semua catatan obrolan

13. Detail riwayat obrolan

14. Dokumentasi API

Struktur direktori

1. server adalah servernya
2. publik adalah file statis
3. db adalah cadangan ekspor MongoDB
4. src adalah folder proyek

Tutorial instalasi

1. Kloning proyek git clone https://github.com/imzusheng/Wecat.git
2. direktori root proyek cd, instal dependensi npm install
3. Jalankan layanan npm run serve
4. cd ./server, lalu instal dependensi server npm install
5. Impor database mongorestore -d wecat ./db
6. Jalankan server npm run dev

akun percobaan

ID pengguna: [email protected]
kata sandi: a123456

TODO

• Masuk
• Cegah login duplikat
• Waktu masuk terakhir
• Lokasi login terkini (provinsi-kota-kabupaten)
• Daftar (verifikasi email)
• Ambil kata sandi (verifikasi email)
• Pilih avatar pengguna
• Keluar
• Obrolan antar rekan dengan teman
• Koneksi detak jantung WS dan koneksi ulang pemutusan
• Permintaan teman online dan offline
• Tambahkan teman dan verifikasi permintaan pertemanan
• Pemberitahuan permintaan pertemanan
• Pengingat pesan yang belum dibaca
• Cari pengguna
• Konfigurasi yang dipersonalisasi pengguna
• Pemuatan riwayat obrolan yang lambat
• Status masukan teman diperbarui secara real time
• Judul situs web menampilkan jumlah pesan yang belum dibaca secara real time
• Teman yang baru-baru ini Anda ajak ngobrol akan dipasangi pin di bagian atas
• Manajemen ujung belakang
• Unggah gambar dan file obrolan (banyak unggahan)
• Pratinjau dan unduh gambar dan file obrolan
• obrolan grup
• Kartu profil pengguna
• hapus teman
• Buat grup
• Kartu informasi kelompok
• Bergabunglah dengan grup
• Keluar dari grup

Tumpukan teknologi terkait

• VueCli 3
• Vuex
• Node.js
• Elemen-ui
• aksio
• MongoDB
• koa2
• soket web
• adalah

Catatan dan Ringkasan

• Unggah multi-file di beberapa bagian
• Dikerahkan di direktori non-root situs web dalam mode Vue Router History
• pemantauan keyboard js mengimplementasikan kombinasi tombol ctrl + enter untuk mengirim pesan
• Gunakan Modul ES6 untuk merangkum layanan Websocket Anda sendiri

tentang

• Surel [email protected]
• Alamat proyek
• Tentang saya
• github
• gitee