WeBlog 项目教程

WeBlog 项目教程

WeBlog 📗 Spring Boot + Vue 3.2 + Vite 前后端分离博客~ 感谢点个 Star 呀~ 项目地址: https://gitcode.com/gh_mirrors/we/WeBlog

1. 项目介绍

WeBlog 是一款由 Spring Boot + Vue 3.2 + Vite 4.3 开发的前后端分离个人博客系统。该项目适合作为 Java 毕业设计项目，支持博客 Markdown 格式发布与编辑、文章分类、文章标签的管理、博客基本信息的设置以及社交主页的跳转等功能。

主要技术栈

• 后端: Spring Boot, Mybatis Plus, MySQL, Spring Security, JWT, Minio, Guava 等
• 前端: Vue 3.2, Vite 4.3, Element Plus, vue-router, vuex, md-editor-v3, windicss, axios, Echarts 等

项目结构

• weblog-springboot: 后端项目
• weblog-vue3: 前端项目
• sql: 数据库初始化脚本（包括表结构以及相关初始化数据）

2. 项目快速启动

2.1 环境准备

• JDK 1.8
• Maven 3.6.3
• Node.js 18.15.0
• MySQL 5.7

2.2 后端项目启动

1. 克隆项目

   git clone https://github.com/weiwosuoai/WeBlog.git
   cd WeBlog/weblog-springboot
   

2. 配置数据库

   在 MySQL 中创建一个名为 weblog 的数据库，并执行以下 SQL 脚本：

   -- 创建表结构
   source path/to/schema.sql
   -- 初始化数据
   source path/to/data.sql
   

3. 配置 application.yml

   修改 src/main/resources/application.yml 中的数据库连接信息：

   spring:
     datasource:
       url: jdbc:mysql://localhost:3306/weblog?useSSL=false&serverTimezone=UTC
       username: your_username
       password: your_password
   

4. 启动项目

   mvn spring-boot:run
   

   项目启动后，访问 http://localhost:8080。

2.3 前端项目启动

1. 进入前端项目目录

   cd ../weblog-vue3
   

2. 安装依赖

   npm install
   

3. 启动项目

   npm run dev
   

   项目启动后，访问 http://localhost:3000。

3. 应用案例和最佳实践

3.1 个人博客搭建

WeBlog 适合作为个人博客系统，支持 Markdown 格式的文章发布与编辑，方便用户快速搭建自己的博客网站。

3.2 毕业设计项目

由于 WeBlog 采用了前后端分离的架构，技术栈较为先进，适合作为 Java 毕业设计项目。学生可以通过该项目深入学习 Spring Boot、Vue 3 等技术。

3.3 企业内部知识库

WeBlog 的分类管理和标签管理功能，使其适合作为企业内部的知识库系统，方便员工管理和分享知识。

4. 典型生态项目

4.1 Spring Boot 生态

WeBlog 后端采用了 Spring Boot 框架，可以与 Spring Cloud、Spring Security 等生态项目结合，扩展为微服务架构或增加安全认证功能。

4.2 Vue 3 生态

前端采用了 Vue 3 框架，可以与 Vue Router、Vuex 等生态项目结合，进一步扩展前端功能，如增加用户权限管理、多语言支持等。

4.3 数据库生态

WeBlog 使用 MySQL 作为数据库，可以与 Redis、Elasticsearch 等数据库结合，增加缓存、全文搜索等功能。

---

通过以上步骤，您可以快速启动并使用 WeBlog 项目。希望本教程对您有所帮助！

WeBlog 📗 Spring Boot + Vue 3.2 + Vite 前后端分离博客~ 感谢点个 Star 呀~ 项目地址: https://gitcode.com/gh_mirrors/we/WeBlog