完全开源！一款基于 SpringBoot + Vue 构建的社区平台！
<p>大家好，我是 <code>Java陈序员</code>。</p><p>在如今互联网时代，拥有一个个人专属的社区平台，用于技术交流或者兴趣分享圈子，是一件很酷的事~</p>
<p>今天，给大家介绍一款基于 SpringBoot + Vue 构建的社区平台，帮助你快速构建个人社区平台！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>OpenIsle</code> —— 一个使用 SpringBoot 和 Vue3 构建的全栈开源社区平台，提供用户注册、登录、贴文发布、评论交互等完整功能，可用于项目社区或直接打造自主社区站点。</p>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/OpenIsle/img-20250906152833.png"></p>
<p><strong>功能特色</strong>：</p>
<ul>
<li><strong>灵活的登录体系</strong>：支持 JWT 认证及 Google、GitHub、Discord 等多平台 OAuth 登录，可通过环境变量可调整密码强度、登录方式、保护码等多种配置，兼顾安全性与便捷性</li>
<li><strong>丰富的内容管理</strong>：支持分类、标签的贴文管理以及草稿保存功能；支持嵌套评论、指定贴文或评论的点赞/抖弹系统；集成 OpenAI 提供的 Markdown 格式化功能</li>
<li><strong>社区互动机制</strong>：支持用户关注、私信功能和实时通知系统（含浏览器推送），还具备用户成就与勋章体系</li>
<li><strong>实用功能集成</strong>：支持全局搜索功能；支持图片上传，默认使用腾讯云 COS 扩展；支持自定义头像</li>
</ul>
<p><strong>技术栈</strong>：</p>
<ul>
<li>后端：SpringBoot + JPA</li>
<li>前端：Vue3 + Nuxt</li>
</ul>
<h2 id="功能体验">功能体验</h2>
<ul>
<li><strong>登录</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/OpenIsle/img-20250906172243.png"></p>
<ul>
<li><strong>首页</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/OpenIsle/img-20250906172414.png"></p>
<ul>
<li><strong>帖子</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/OpenIsle/img-20250906172544.png"></p>
<ul>
<li><strong>评论区</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/OpenIsle/img-20250906172627.png"></p>
<ul>
<li><strong>发帖</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/OpenIsle/img-20250906172740.png"></p>
<ul>
<li><strong>个人主页</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/OpenIsle/img-20250906172756.png"></p>
<h2 id="本地开发">本地开发</h2>
<h3 id="前置工作">前置工作</h3>
<p>1、先克隆或下载项目源码</p>
<pre><code class="language-bash">git clone https://github.com/nagisa77/OpenIsle.git
</code></pre>
<p>2、环境依赖</p>
<ul>
<li>后端开发环境：JDK 17+、MySQL8</li>
<li>前端开发环境：Node.JS 20+</li>
</ul>
<h3 id="启动后端服务">启动后端服务</h3>
<p>1、在 IDEA 中导入 <code>backend/</code> 文件夹</p>
<p>2、在 MySQL 中创建数据库 <code>openisle</code></p>
<pre><code class="language-sql">CREATE DATABASE `openisle` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
</code></pre>
<p>3、修改配置文件 <code>backend/src/main/resources/application.properties</code> 中的数据库连接配置信息</p>
<pre><code class="language-properties">spring.datasource.url=${MYSQL_URL:jdbc:mysql://localhost:3306/openisle}
spring.datasource.username=${MYSQL_USER:root}
spring.datasource.password=${MYSQL_PASSWORD:password}
spring.jpa.hibernate.ddl-auto=update
</code></pre>
<p>4、运行主启动类 <code>com.openisle.OpenIsleApplication</code> 启动服务</p>
<h3 id="启动前端服务">启动前端服务</h3>
<p>1、进入前端工程文件夹</p>
<pre><code class="language-bash">cd frontend_nuxt/
</code></pre>
<p>2、配置环境变量，拷贝配置文件重命名为 <code>.env</code>, 并修改参数 <code>NUXT_PUBLIC_API_BASE_URL</code> 为 <code>NUXT_PUBLIC_API_BASE_URL=http://localhost:8080</code></p>
<pre><code class="language-bash">cp .env.example .env
</code></pre>
<p>3、安装依赖</p>
<pre><code class="language-bash">npm install
</code></pre>
<p>4、运行服务</p>
<pre><code class="language-bash">npm run dev
</code></pre>
<p>5、浏览器访问</p>
<pre><code class="language-bash">http://localhost:3000/
</code></pre>
<p>如果你想搭建一个技术交流社区或者是兴趣爱好圈子，<code>OpenIsle</code> 都能满足需求。你可以根据自身需求，对其进行定制化开发，打造一个独一无二的社区空间~</p>
<pre><code class="language-bash">项目地址：https://github.com/nagisa77/OpenIsle
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/github/img-20250608222400.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/19165552
頁:
[1]