iBlog

Persiapan lingkungan

• Node.js v14.15.5
• MongoDB v4.2.17

Instal basis data MongoDB

Masuk ke situs resminya untuk mendownload, versinya 4.2.17, platformnya Windows, dan paket instalasinya dalam format msi.

pengembangan proyek

1. Kloning proyek secara lokal:

$ git clone [email protected]:miqilin21/vue-blog.git
$ cd vue-blog
$ pnpm i

2. Instal dependensi proyek front-end, back-end (admin, web) dan back-end (server):

$ pnpm install-all

3. Jalankan proyek front-end, back-end (admin, web) dan back-end (server):

$ pnpm serve-all

4. Buka pratinjau browser:

http://localhost:8080 membuka halaman lokal front-end; http://localhost:8088 membuka halaman lokal latar belakang.

Harap daftarkan pengguna saat login sebagai admin backend untuk pertama kalinya. Setelah login, Anda dapat menyembunyikan tombol registrasi untuk mencegah kebocoran akun login.

Sistem manajemen backend

• Tambahkan kategori baru

• Daftar kategori (menambah, menghapus, mengubah, memeriksa)

• Tambahkan artikel baru

• Daftar artikel (menambah, menghapus, mengubah, memeriksa)

• Daftar komentar artikel

• Tambahkan tautan teman

• Daftar tautan ramah (tambah, hapus, ubah, periksa)

• Daftar pesan

• Daftar pengguna pesan

• Integrasi editor penurunan harga

• Fungsi unggah gambar

• Tambahkan pengguna baru

• Daftar pengguna (menambah, menghapus, mengubah, memeriksa)

• Penambahan universal, penghapusan, modifikasi dan implementasi antarmuka kueri (middleware resourceMiddleware)

• Fungsi pendaftaran masuk

• Fungsi keluar

• Tambahkan verifikasi jwt (1. Pencarian nama pengguna 2. Verifikasi kata sandi 3. Token pengembalian)

• Tambahkan interseptor http (permintaan, respons)

sistem blog

• UI halaman beranda blog
• Implementasi antarmuka halaman beranda blog
• UI halaman arsip blog
• Implementasi antarmuka halaman arsip blog
• UI halaman tag blog
• Implementasi antarmuka halaman tag blog
• UI halaman posting blog
• Implementasi antarmuka halaman artikel blog
• UI halaman tautan teman blog
• Implementasi antarmuka halaman tautan teman blog
• UI halaman pesan blog
• Implementasi antarmuka halaman pesan blog

Catatan konfigurasi

1. Untuk membalas komentar orang lain di halaman komentar, kotak surat QQ Anda digunakan untuk pemberitahuan yang disinkronkan. Anda perlu mengkonfigurasi kotak surat di server/plugins/sendEmail.js . Cara mendapatkan kode otorisasi kotak surat QQ ditunjukkan pada gambar di bawah ini ( pada halaman akun pengaturan kotak surat QQ).

2. Konfigurasi akun utama untuk komentar (akun utama digunakan untuk balasan email, jadi email akun yang dibuat untuk komentar harus sama dengan email untuk kode otorisasi kotak surat QQ pada langkah sebelumnya sekaligus komentar). akun perlu disetel di web/src/commentConfig.js (Perhatikan bahwa topNickName harus konsisten dengan nama panggilan akun utama yang dibuat oleh komentar. topParentId dapat diperoleh dari halaman latar belakang). itu harus dikonfigurasi ulang.
3. Mengenai pengunggahan gambar latar belakang: defaultnya adalah mengunggah ke lokal. Metode ini memiliki persyaratan yang lebih tinggi untuk server. Tentu saja, kecepatan pemuatan front-end akan terpengaruh. Anda dapat memilih untuk menggunakan OSS Alibaba Cloud untuk pengunggahan dan penyimpanan. Anda perlu menambahkan server/routes/admin/index.js , beri komentar pada kode untuk unggahan gambar lokal, dan terakhir isi konfigurasi oss Alibaba Cloud Anda.

Pengemasan dan penerapan proyek

• Pengemasan proyek web dan admin (jalankan perintah pnpm build-all di direktori root)
• Pembelian nama domain
• Resolusi nama domain
• pembelian server cloud linux
• instalasi git, penambahan kunci ssh
• manajemen proses pm2
• konfigurasi ngnix
• konfigurasi mongodb
• Migrasikan data mongodb dari lokal ke server
• Qiniuyun cdn akselerasi gratis untuk seluruh situs

Untuk penerapan server online, silakan merujuk ke panduan ini.

Sistem manajemen backend blog

sistem blog

Selamat Datang Bintang, Masalah

• Bintang Anda adalah motivasi saya untuk pembaruan dan pemeliharaan berkelanjutan! ! !
• Jika ada masalah saat penggunaan, silakan laporkan Masalah

Daftar Yang Harus Dilakukan

• Optimalisasi kinerja, gambar perlu dikompresi dan dimuat sebelumnya
• Tambahkan fungsi pencarian ke halaman posting blog
• Masalah kompatibilitas browser, adaptasi seluler. Saya hanya menggunakan pengembangan browser Google Chrome komputer saya sendiri dan efek adaptasi ponsel. Saya belum mencoba metode lain, namun tidak disarankan untuk menggunakan terminal seluler.
• Memecahkan masalah SEO Vue dan masalah jitter saat menyegarkan halaman rendering. Kami akan melakukan pra-render Vue untuk saat ini. Kami tidak menutup kemungkinan melakukan rendering sisi server Vue atau rendering sisi server nuxt.js di masa mendatang.
• Atur kode dan bagi menjadi beberapa komponen. Buat strukturnya lebih jelas dan kurangi jumlah kode
• Refactor seluruh proyek menggunakan skrip ketikan
• Fungsi-fungsi menarik akan ditambahkan secara bertahap saat saya memikirkannya, dan terus dikembangkan...