WhiteJotter

---

Ini adalah proyek pemisahan front-end dan back-end sederhana, terutama dikembangkan menggunakan teknologi Vue.js + SpringBoot.

Selain digunakan sebagai latihan pengantar, saya juga berharap proyek ini dapat digunakan sebagai perancah untuk beberapa proyek Web umum guna membantu Anda menyederhanakan proses pembuatan situs web. Disebut white jotter karena dimulai dari 0 dan berangsur-angsur membaik seiring berjalannya waktu.

Repo Bagian Depan：https://github.com/realdonald1994/WhiteJotter_Vue

Repo Backend：https://github.com/realdonald1994/WhiteJotter

Selamat bergabung dengan White Jotter!

Tampilan keseluruhan

1. Rumah

Sebagai halaman tampilan, termasuk bahan referensi utama pengembangan proyek ini, update terkini dan Slogan

2. Perpustakaan

Menyediakan fungsi tampilan informasi buku dan film

3. Jotter

Memberikan catatan, fungsi tampilan posting blog

4. Manajemen latar belakang

Termasuk dasbor, manajemen konten, manajemen pengguna dan otoritas, dll.

5.Tentang Saya

Pengenalan pribadi dan tautan terkait

Arsitektur

• Aplikasi

• Teknologi

Tumpukan Teknologi

1. Tumpukan Teknologi Frontend

1.Vue.js
2.ElemenUI
3.aksio
4.Vuex

2. Tumpukan Teknologi Backend

1. Sepatu Bot Musim Semi
2.Data Musim Semi + JPA
3.MySQL
4.Shiro

3. Basis Data

1.Mysql

4. Pelayan

1.Centos7
2.Nginx
3.DFS Cepat

5. Tes

1.Juni
2.Lelucon

Penyebaran

1.clone proyek ke lokal

ujung depan:

git clone https://github.com/realdonald1994/WhiteJotter_Vue

bagian belakang:

git clone https://github.com/realdonald1994/WhiteJotter

2.Buat database white_jotter di mysql, jalankan proyek, dan data akan disuntikkan secara otomatis.

Port Redis adalah 6379 (port default), dan kata sandinya kosong.

3. Basis data dikonfigurasi dalam file application.properties di direktori src main resources proyek backend, dan versi mysql adalah 8.0.15.

4.Jalankan proyek backend di IntelliJ IDEA. Untuk memastikan proyek berjalan dengan sukses, Anda dapat mengklik kanan pom.xml dan memilih maven-> mengimpor kembali dan memulai ulang proyek

Pada titik ini, server berhasil dimulai, pada saat yang sama, jalankan proyek front-end, kunjungi http: // localhost: 8080 , Anda dapat masuk ke halaman login, akun default adalah admin , kata sandinya adalah 123

Jika ingin melakukan pengembangan sekunder, silahkan lanjutkan melihat langkah kelima dan keenam.

5.Masukkan direktori root proyek front-end, dan masukkan perintah berikut secara berurutan pada baris perintah:

# Install dependencies
  npm install

# Start the project at localhost: 8080
  npm run dev

Karena penerusan port telah dikonfigurasi di proyek wj-front untuk meneruskan data ke SpringBoot, setelah proyek dimulai, masukkan http: // localhost: 8080 di browser untuk mengakses proyek front-end kami, Semua permintaan meneruskan data ke SpringBoot melalui penerusan porta (perhatikan bahwa Anda tidak boleh menutup proyek SpringBoot saat ini).

6. Terakhir, Anda dapat menggunakan WebStorm dan alat lainnya untuk membuka proyek wj-front dan melanjutkan pengembangan. Setelah pengembangan selesai, ketika proyek akan online, Anda masih masuk ke direktori wj-front , lalu jalankan perintah berikut:

 npm run build

Setelah perintah berhasil dijalankan, folder dist dibuat di bawah direktori wj-front, dan dua file assets dan index.html di folder tersebut dapat disalin ke nginx. Kemudian masuk ke direktori root backend dan jalankan baris perintah：

 mvn clean install

Terakhir, masukkan baris perintah java -jar xxx.jar di direktori target yang baru dibuat. Mulai server back-end.

Masukkan baris perintah di bawah file nginx: start nginx . Mulai server ujung depan.

Memperbarui

2020

08-20 Tambahkan Redis
06-09 Tambahkan Unit Test dengan Vue test utils dan Jest
06-04 Gunakan gzip untuk mengatasi pemuatan halaman web yang lambat
06-02 Proyek diterapkan di server cloud dan situs web dipublikasikan untuk pertama kalinya ?
05-29 Pisahkan proyek front-end dan back-end
04-20 Gunakan editor penurunan harga sumber terbuka untuk mencapai tampilan artikel dan modul manajemen

...