w blog

w-blog

menggambarkan

Blog pribadi yang menggunakan Spring Boot 2.x di backend, nuxtJs di frontend, dan vue di backend

Perkenalan

1. Link

   • Tautan Gite:
     • api: https://gitee.com/windsnowli/w-blog-api
     • Meja depan: https://gitee.com/windsnowli/vue-ssr-blog
     • Bagian belakang: https://gitee.com/windsnowli/vue-admin-blog
   • Tautan GitHub:
     • api: https://github.com/WindSnowLi/w-blog-api
     • Meja depan: https://github.com/WindSnowLi/vue-ssr-blog
     • Bagian belakang: https://github.com/WindSnowLi/vue-admin-blog

2. Proyek blog pribadi sederhana dibagi menjadi tiga bagian:前台,后台, dan api .

   • api: Backend didasarkan pada SpringBoot . Terutama mengandalkan Mybatis , Mybatis-Redis , Redis , fastjson , DruidDataSource , Lombok , java-jwt , aliyun-sdk-oss , knife4j , dll. Basis datanya menggunakan MySQL8.0+

   • Meja depan: Gaya utama meja depan berasal dari template BizBlog di Internet. Saya nuxtJs tahu dari mana asalnya.

   • Backend: vue-element-admin yang digunakan di UI backend pada dasarnya digunakan secara langsung.

3. Contoh: Makanan hijau - Cai Dog

Mulai secara lokal

Mulai proyek demi proyek

api: Api yang diminta oleh frontend dan backend menggunakan proyek yang sama

1. git clone https://gitee.com/WindSnowLi/w-blog-api.git atau git clone https://github.com/WindSnowLi/w-blog-api.git untuk mengkloning proyek secara lokal

2. mvn clean install dependency:tree

3. Buat database dan atur ke pengkodean UTF8 ( utf8mb4 )

4. Ubah pengaturan lingkungan

   • Memodifikasi informasi konfigurasi database di lingkungan pengembangan application-dev.yml dan lingkungan produksi application-prod.yml ;
   • Ubah informasi terkait Redis di redis.properties ;
   • Catatan: knife4j hanya diaktifkan di lingkungan pengembangan.

5. mvn clean package -Dmaven.test.skip=true melewatkan pengujian dan menghasilkan paket jar

6. java -jar 生成的包名.jar digunakan untuk menjalankan lingkungan konfigurasi pengembangan. Basis data akan secara otomatis diinisialisasi saat dijalankan pertama kali (lingkungan produksi dapat menentukan file konfigurasi yang akan dimuat --spring.profiles.active="prod" )

7. Kunjungi http://127.0.0.1:9000/doc.html untuk melihat dokumentasi api

8. Disarankan untuk menggunakan IDEA untuk membuka folder proyek guna menangani dependensi secara otomatis dan memfasilitasi pengoperasian.

meja depan

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.git atau git clone https://github.com/WindSnowLi/vue-ssr-blog.git mengkloning proyek ke lokal
2. npm install dependensi instalasi
3. Alamat host di file config/sitemap.xml dapat dimodifikasi untuk menghasilkan peta akses.
4. Nomor port di nuxt.config.js dapat diubah
5. Anda dapat mengubah BASE_URL dalam script di file package.json untuk menentukan alamat api backend.
6. npm run build
7. npm start dijalankan secara lokal

Di belakang panggung

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.git atau git clone https://github.com/WindSnowLi/vue-admin-blog.git mengkloning proyek ke lokal
2. npm install dependensi instalasi
3. npm run dev menggunakan antarmuka pratinjau data simulasi
4. Ubah alamat VUE_APP_BASE_API di file .env.production ke alamat api backend
5. npm run build:prod kompilasi
6. File yang dikompilasi dalam folder dist dapat ditempatkan di bawah server http (Anda dapat menggunakan npm untuk menginstal http-server ) untuk akses.

Integrasi Docker dimulai

1. git clone https://gitee.com/WindSnowLi/w-blog.git atau git clone https://github.com/WindSnowLi/w-blog.git clone repositori w-blog ke lokal
2. cd w-blog untuk beralih ke direktori root w-blog
3. sh ./step-1-clone.sh clone w-blog-api , vue-ssr-blog , vue-admin-blog repositori ke direktori root
4. Ubah konfigurasi yang terkait dengan setiap proyek
   1. proyek w-blog-api
      1. Memodifikasi informasi konfigurasi database di lingkungan pengembangan application-dev.yml dan lingkungan produksi application-prod.yml ;
      2. Ubah informasi terkait Redis di redis.properties ;
      3. Catatan: knife4j hanya diaktifkan di lingkungan pengembangan.
      4. redis可自行安装, atau Anda dapat menentukan pengaturan yang relevan docker-compose.yml
   2. proyek vue-ssr-blog
      1. Alamat host di file config/sitemap.xml dapat dimodifikasi untuk menghasilkan peta akses.
      2. Nomor port di nuxt.config.js dapat diubah
      3. Anda dapat mengubah BASE_URL dalam script di file package.json untuk menentukan alamat api backend.
   3. proyek vue-admin-blog
      1. Ubah alamat VUE_APP_BASE_API di file .env.production ke alamat api backend
5. sh ./step-2-build.sh menginstal dependensi dan menghasilkan file terkait
6. Ubah pemetaan port dan pemetaan folder yang relevan dari docker-compose.yml
7. docker-compose up -d buat docker镜像dan jalankan

Tampilan antarmuka

meja depan

Di belakang panggung

Lisensi

MIT

Hak Cipta (c) 2021 WindSnowLi