w blog

W-Blog

อธิบาย

บล็อกส่วนตัวของ back -end โดยใช้ Spring Boot 2.x, Nuxtjs ที่แผนกต้อนรับและ Vue โดยใช้ Vue ในพื้นหลัง

บทนำสั้น ๆ

1. การเชื่อมโยง

   • Gitee Link:
     • API: https://gitee.com/windsnowli/w-blog-api api
     • แผนกต้อนรับ: https://gitee.com/windsnowli/vue-ssr-blog
     • backstage: https://gitee.com/windsnowli/vue-admin-blog
   • ลิงค์ GitHub:
     • API: https://github.com/WindSnowLi/w-blog-api api
     • แผนกต้อนรับ: https://github.com/WindSnowLi/vue-ssr-blog
     • backstage: https://github.com/WindSnowLi/vue-admin-blog

2. โครงการบล็อกส่วนตัวที่เรียบง่ายแบ่งออกเป็นสามส่วน:前台后台และ api

   • API: ปลายด้านหลังขึ้นอยู่กับ SpringBoot ส่วนใหญ่อาศัย Mybatis , Mybatis-Redis , Redis , fastjson , DruidDataSource , Lombok , java-jwt , aliyun-sdk-oss , knife4j ฯลฯ ฐานข้อมูลใช้ MySQL8.0+

   • แผนกต้อนรับ: รูปแบบ nuxtJs ของแผนกต้อนรับเป็นเทมเพลต BizBlog บนอินเทอร์เน็ต

   • Backstage: Vue-Element-Admin ที่ใช้โดย UI พื้นหลังนั้นใช้โดยตรง

3. ตัวอย่าง: อาหารสีเขียว -CAI DOG

การเริ่มต้นในท้องถิ่น

เริ่มต้นทีละโครงการ

API: API ที่ร้องขอโดยแผนกต้อนรับและพื้นหลังใช้โครงการเดียวกัน

1. git clone https://gitee.com/WindSnowLi/w-blog-api.git หรือ git clone https://github.com/WindSnowLi/w-blog-api.git โคลน

2. mvn clean install dependency:tree

3. สร้างฐานข้อมูลและตั้งค่าเป็นการเข้ารหัส UTF8 ( utf8mb4 )

4. ปรับเปลี่ยนการตั้งค่าสิ่งแวดล้อม

   • แก้ไขข้อมูลการกำหนดค่าฐานข้อมูลในสภาพแวดล้อมการพัฒนา application-dev.yml และสภาพแวดล้อมการผลิต application-prod.yml ;;
   • แก้ไขข้อมูลที่เกี่ยวข้องกับ Redis ใน redis.properties ;
   • หมายเหตุ: knife4j เปิดใช้งานเฉพาะในสภาพแวดล้อมการพัฒนา

5. mvn clean package -Dmaven.test.skip=true และสร้างแพ็คเกจ jar

6. java -jar 生成的包名.jar เรียกใช้สภาพแวดล้อมการกำหนดค่าการพัฒนาและการดำเนินการครั้งแรกจะเริ่มต้นฐานข้อมูลโดยอัตโนมัติ (สภาพแวดล้อมการผลิตสามารถระบุไฟล์การกำหนดค่าที่โหลด --spring.profiles.active="prod" )))

7. เยี่ยมชม http://127.0.0.1:9000/doc.html ดูเอกสาร api

8. ขอแนะนำให้ใช้แนวคิดในการเปิดโฟลเดอร์โครงการเพื่อประมวลผลการพึ่งพาและอำนวยความสะดวกในการดำเนินการโดยอัตโนมัติ

แผนกต้อนรับส่วนหน้า

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.git หรือ git clone https://github.com/WindSnowLi/vue-ssr-blog.git โครงการโคลน
2. การติดตั้งการติดตั้ง npm install
3. สามารถแก้ไขที่ host ในไฟล์ config/sitemap.xml เพื่อสร้างแผนที่การเข้าถึง
4. คุณสามารถแก้ไขหมายเลขพอร์ตได้ใน nuxt.config.js
5. คุณสามารถแก้ไข BASE_URL ใน script ในไฟล์ package.json เพื่อระบุที่อยู่ api ด้านหลัง
6. npm run build Compilation
7. npm start การดำเนินการในพื้นที่

หลังเวที

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.git git clone https://github.com/WindSnowLi/vue-admin-blog.git โคลนโครงการโคลนไปยังพื้นที่ท้องถิ่น
2. การติดตั้งการติดตั้ง npm install
3. npm run dev ใช้อินเตอร์เฟสตัวอย่างข้อมูลแบบอะนาล็อก
4. แก้ไขที่อยู่ของที่อยู่ VUE_APP_BASE_API ในไฟล์ .env.production เป็นที่อยู่ของ api ด้านหลัง
5. npm run build:prod Compile
6. ไฟล์ที่คอมไพล์ใต้โฟลเดอร์ dist สามารถวางไว้ใต้เซิร์ฟเวอร์ http (คุณสามารถใช้ npm เพื่อติดตั้ง http-server ) สำหรับการเข้าถึง

การเริ่มต้นการรวม Docker

1. git clone https://gitee.com/WindSnowLi/w-blog.git หรือ git clone https://github.com/WindSnowLi/w-blog.git w-blog
2. สวิตช์ cd w-blog เป็นไดเรกทอรีรูท w-blog
3. sh ./step-1-clone.sh โคลน w-blog-api , vue-ssr-blog , คลังสินค้า vue-admin-blog เพื่อรูทไดเรกทอรี
4. แก้ไขการกำหนดค่าที่เกี่ยวข้องของแต่ละโครงการ
   1. โครงการ w-blog-api
      1. แก้ไขข้อมูลการกำหนดค่าฐานข้อมูลในสภาพแวดล้อมการพัฒนา application-dev.yml และสภาพแวดล้อมการผลิต application-prod.yml ;;
      2. แก้ไขข้อมูลที่เกี่ยวข้องกับ Redis ใน redis.properties ;
      3. หมายเหตุ: knife4j เปิดใช้งานเฉพาะในสภาพแวดล้อมการพัฒนา
      4. redis可自行安装หรือคุณสามารถระบุการตั้งค่าที่เกี่ยวข้องของ docker-compose.yml
   2. โครงการ vue-ssr-blog
      1. สามารถแก้ไขที่ host ในไฟล์ config/sitemap.xml เพื่อสร้างแผนที่การเข้าถึง
      2. คุณสามารถแก้ไขหมายเลขพอร์ตได้ใน nuxt.config.js
      3. คุณสามารถแก้ไข BASE_URL ใน script ในไฟล์ package.json เพื่อระบุที่อยู่ api ด้านหลัง
   3. โครงการ vue-admin-blog
      1. แก้ไขที่อยู่ของที่อยู่ VUE_APP_BASE_API ในไฟล์ .env.production เป็นที่อยู่ของ api ด้านหลัง
5. sh ./step-2-build.sh การติดตั้งการติดตั้งเพื่อสร้างไฟล์ที่เกี่ยวข้อง
6. แก้ไขการแมปพอร์ตที่เกี่ยวข้องและการแมปพับของ docker-compose.yml
7. docker-compose up -d สร้าง docker镜像และ Runs

จอแสดงผลอินเตอร์เฟส

แผนกต้อนรับส่วนหน้า

หลังเวที

ใบอนุญาต

มิกซ์

ลิขสิทธิ์ (c) 2021 Windsnowli