vue nodejs elementUI mysql express demo

vue-nodejs-elementUI-mysql-express-demo

Proyek pemisahan front-end dan back-end Vue+nodejs, pelajari cara menggunakannya, termasuk operasi entri dasar. Termasuk proses implementasi mulai dari pembuatan proyek hingga penerapan akhir dan ringkasan beberapa masalah yang dihadapi selama proses tersebut.

Alamat pratinjau proyek: Alamat pratinjau--aixiaodou.cn

Alamat komentar dan diskusi: Blog pribadi-- https://blog.csdn.net/qq_32442967/article/details/103459148

Alamat basis data: express-demo/doc/demo2.sql

basis data MySQL

Basis datanya adalah demo2

Buat database demo2> jalankan pernyataan sql

Ubah konfigurasi koneksi database model/connDb.js di proyek demo ekspres

express-demo-web: proyek web front-end

 # 安装依赖
npm install

# 运行项目
npm run dev

demo-ekspres: proyek nodejs backend

 # 安装依赖
npm install

# 运行项目
npm start

---

Proyek ini adalah proyek tingkat awal, menggunakan mode pemisahan ujung depan (vue) dan belakang (nodejs).

Teknologi yang terutama digunakan:

• Bagian depan: vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
• Bagian belakang: nodejs+ ekspres+ jsonwebtoken
• Basis data: mysql
• Lingkungan penerapan: nginx
• Server penerapan: linux centos7

Pengenalan fungsi yang ada:

1. Modul pengunduhan alat toolsDown: menanyakan daftar dari database dan menampilkannya berdasarkan kategori
2. login, daftar login, registrasi, modul logout: Halaman beranda & halaman pengunduhan alat dapat dipratinjau tanpa login, dan halaman daftar pengguna akan terlihat setelah login. Simpan sessionToken di cookie dan userId setelah login di penyimpanan lokal. Tergantung apakah Anda login atau tidak, tampilkan login atau avatar di pojok kanan atas.
3. modul daftar pengguna userManage: paging, pencarian fuzzy, fungsi pengeditan dan penghapusan pengguna
4. antarmuka tautan teman_link teman: memasukkan tautan teman dan memasukkan informasi ke dalam database
5. Statistik jumlah unduhan perangkat lunak
6. Fungsi modifikasi dan penghapusan pengguna

---

V 1.0.2 Unduh statistik/verifikasi registrasi login (item 5-6)

1. Optimalkan verifikasi Token
2. Statistik jumlah unduhan perangkat lunak
3. Fungsi modifikasi dan penghapusan pengguna

V 1.0.1 Menerapkan fungsi dasar (item 1-4) - terutama mencatat beberapa masalah yang dihadapi

ujung depan

1. Kontrol apakah halaman hanya dapat diakses setelah login: menilai apakah ada login berdasarkan token, konfigurasikan tautan referensi router
2. Simpan userId yang diperoleh setelah masuk ke penyimpanan lokal. Saat memperoleh informasi pengguna, bawa userId untuk mendapatkan informasi pengguna yang login dan tampilkan avatar di sudut kanan atas.

bagian belakang

1. Nodejs terhubung ke database MySQL. Jika kumpulan koneksi digunakan, koneksi harus dilepaskan setelah digunakan, jika tidak, jumlah maksimum koneksi akan terlampaui

menyebarkan

1. Setelah nginx menyebarkan proyek vue, tidak ada masalah dengan akses normal, tetapi masalah 404 akan muncul saat menyegarkan.
2. nodejs berjalan secara permanen di linux menggunakan tautan referensi selamanya

---

V 1.0.0 Membuat proyek front-end dan back-end

ujung depan

1. Gunakan vue-cli+ webpack untuk menghasilkan proyek vue
2. Konfigurasikan router, penyimpanan, utils, aksio, elemenUI, nomor port...

bagian belakang

1. Gunakan express untuk menghasilkan tautan referensi proyek nodejs
2. Instal paket ketergantungan jsonwebtoken, buat token, dan kembalikan tautan referensi front-end setelah login berhasil.
3. Instal paket ketergantungan database mysql

Memecahkan masalah lintas domain proyek pemisahan front-end dan back-end (mengatur header permintaan) Tautan referensi

• Front-end: meminta interseptor di axios, mengatur sessionToken, digunakan sebagai verifikasi back-end untuk menentukan apakah itu server yang diizinkan
• Backend: Setel header permintaan di app.js - tambahkan app.all()
• Backend: Karena header permintaan sessionToken yang disesuaikan, untuk permintaan lintas domain yang kompleks, akan ada pra-permintaan opsi, dan permintaan dengan opsi metode dengan cepat diproses dan dikembalikan 200

basis data

1. Buat database > tabel [pengguna, tools_down, link_teman]
2. Data uji simulasi