豆宝社区开源项目：Vue2+SpringBoot2全栈可运行代码包（含MySQL建库脚本）

本文还有配套的精品资源，点击获取

简介：一套开箱即用的社区类应用源码，前端用Vue 2.x实现页面交互与路由管理，后端基于Spring Boot 2.x搭建RESTful接口，数据库采用MySQL，附带完整doubao.sql初始化脚本。项目结构规范，包含标准Maven配置（pom.xml）、跨平台启动脚本（mvnw/mvnw.cmd）、JWT登录鉴权、用户注册登录、发帖、评论等核心社区功能。前后端代码物理分离，前端位于独立vue目录，后端Java代码集中在src/main/java下，配套README.md说明本地运行步骤和基础配置方式。支持跨域访问，适合用于学习前后端协作开发、接口调试、Spring Security权限控制、Vue组件通信及MySQL表结构设计，无需修改即可在本地完成前后端联调与部署验证。

1. 项目概述：这不是一个“玩具项目”，而是一套能跑通社区闭环的生产级教学样本

你有没有遇到过这样的情况：网上搜了一堆“Vue+SpringBoot社区项目”，下载下来，解压双击IDEA，结果报错一堆——前端说找不到axios，后端说数据库连接失败，README里写的“npm run dev”根本起不来，更别说登录发帖了。我试过不下二十个所谓“开源社区模板”，八成卡在第一步：环境配不齐，依赖装不对，路径写错了，或者干脆就是作者自己都没本地跑通就打包上传了。直到我拿到这个“豆宝社区”压缩包，解压、导入、建库、启动，前后不到十五分钟，首页就刷出来了，注册账号、登录、发第一条帖子、评论、刷新页面数据还在——那一刻我才意识到，这真不是又一个半成品Demo，而是一套经过真实联调验证、结构清晰、边界明确、连新手都能照着走通的全栈教学样本。

它叫“豆宝社区”，名字听着有点萌，但代码一点都不含糊。关键词很直白：豆宝社区、Vue2、SpringBoot2、MySQL、JWT鉴权——这五个词就是它的技术DNA，也是你打开它的全部钥匙。它不追求最新潮的Vue3 Composition API，也不上Spring Boot 3的JDK17，而是稳稳踩在Vue 2.6.x + Spring Boot 2.7.x + JDK8/11这个被企业大量沿用、文档最全、坑最少的黄金组合上。前端是独立的vue/目录，不是嵌在后端src/main/resources/static里的静态资源；后端是标准Maven结构，src/main/java下包路径规整，com.doubao.*前缀一目了然；数据库脚本doubao.sql不是空壳，而是包含用户表、帖子表、评论表、点赞关系表的完整ER模型，字段命名规范（比如user_id、post_content、created_time），有索引、有外键约束、有默认值，甚至预置了几条测试数据。它解决的核心问题，从来不是“炫技”，而是“让学习者第一次真正理解：接口怎么定义、前端怎么调、token怎么传、跨域怎么破、数据库怎么初始化、错误怎么定位”。适合谁？刚学完Vue基础想练手的前端同学；刚撸完Spring Boot入门教程却不知道怎么接前端的后端新人；正在带实习生的团队Leader，需要一套无争议、无歧义、能直接当教学靶子的项目；还有那些准备跳槽、想快速复现一个“可展示、可讲解、可调试”的个人作品集的开发者。它不承诺“一键部署上线”，但它保证“本地启动零障碍”。

2. 整体架构设计与选型逻辑：为什么是Vue2+SB2+MySQL+JWT？这不是妥协，而是精准卡位

很多人看到标题里的“Vue2”和“SpringBoot2”，第一反应是“过时了”。但如果你真去翻过一线中小企业的技术栈年报，就会发现：Vue2在存量管理后台、内部工具系统中占比仍超60%；Spring Boot 2.x在金融、政务、制造业等对稳定性要求极高的领域，仍是主力版本。这套选型，恰恰不是技术保守，而是教学场景下的精准卡位——它避开了Vue3的响应式原理重构、Composition API的学习曲线，也绕开了Spring Boot 3的Jakarta EE迁移、Spring Security 6的权限模型变更这些容易让初学者迷失的“新概念沼泽”。我们来拆解它的四层架构选择逻辑：

首先是前端框架选Vue2而非Vue3。Vue2的Options API（data、methods、computed、mounted）结构清晰，生命周期钩子命名直白（created、mounted、destroyed），配合Vue Router 3的beforeEach全局守卫和Vuex 3的状态管理，整个前端流程像一条笔直的公路：用户点击登录按钮 → 触发login()方法 → 调用this.$http.post('/api/auth/login', data) → 成功后把返回的token存入localStorage → 跳转到首页 → 在路由守卫里检查token有效性 → 失效则重定向到登录页。这种线性思维，对刚脱离jQuery时代的开发者极其友好。而Vue3的setup()函数、ref/reactive、onMounted等API，虽然更灵活，但初学者很容易陷入“为什么我要先ref再.value”、“为什么computed要写成函数”这类底层困惑，反而模糊了“业务逻辑怎么组织”这个核心目标。

其次是后端框架锁定Spring Boot 2.7.x。这个版本是Spring Boot 2系列的最终稳定版，对JDK8完全兼容，同时支持JDK11，Maven插件生态成熟（spring-boot-maven-plugin 2.7.18），内嵌Tomcat 9.0.x性能稳定。更重要的是，它搭配的是Spring Security 5.7.x——这是JWT鉴权方案最成熟的版本。Security 5.7将HttpSecurity配置从XML时代彻底转向Java Config，authorizeRequests().antMatchers("/api/auth/**").permitAll()这种链式写法，比Security 6的authorizeHttpRequests()新语法更直观，也更容易对应到“哪些接口公开、哪些需要认证”这种朴素的安全需求。而且，它的自动配置机制（如@EnableWebSecurity）和starter依赖（spring-boot-starter-security、spring-boot-starter-data-jpa）开箱即用，不需要你手动配置FilterChainProxy或DataSourceTransactionManager。

第三是数据库选用MySQL而非H2或PostgreSQL。doubao.sql脚本里明确写了CREATE DATABASE IF NOT EXISTS doubao DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;，并为每张表指定了ENGINE=InnoDB。为什么强调这个？因为InnoDB支持事务、行级锁、外键约束——这正是社区应用的核心需求：用户发帖时，要保证“插入帖子记录”和“更新用户发帖数统计”这两个操作要么都成功，要么都失败；评论点赞时，要避免并发导致的重复计数。而H2内存数据库虽然启动快，但无法模拟真实MySQL的字符集问题（比如emoji存储失败）、索引失效场景（如LIKE '%关键词%'无法走索引）、主从同步延迟等典型线上问题。用MySQL，就是让你从第一天就面对真实世界的约束。

最后是鉴权方案采用JWT而非Session。项目里LoginController.java返回的是{"code":200,"msg":"登录成功","data":{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}}，前端把这个token存在localStorage，后续每个请求的Header里都带上Authorization: Bearer <token>。为什么选JWT？因为它完美匹配前后端分离架构：后端不用维护session状态，所有用户信息都编码在token payload里（如{ "userId": 123, "username": "zhangsan", "exp": 1735689600 }），前端可以随时解析查看（用jwt-decode库），调试时一眼就能看出token是否过期、用户ID是否正确。而传统Session需要后端存储（Redis或内存），还要处理sessionId的传递、过期清理、集群共享等问题，对初学者来说，光是搞懂Cookie SameSite策略就能卡半天。JWT在这里不是为了“高大上”，而是为了“看得见、摸得着、改得动”。

提示：别急着升级版本。我见过太多人把Vue2项目强行升级到Vue3，结果Router守卫逻辑全乱，Vuex状态丢失，最后发现是router.push()的参数格式变了。学习阶段，稳定压倒一切。等你把这套流程跑熟了，再去看Vue3的Migration Build，那才是水到渠成。

3. 核心模块解析与实操要点：从数据库建模到JWT拦截器，每一行代码都有它的理由

现在我们钻进代码细节。别被目录树里那些.gitignore.hoist-conflict-*或新建文本文档 (2).txt干扰，它们是下载过程中的临时文件，直接删掉。真正的骨架就三块：doubao.sql数据库脚本、vue/前端目录、src/main/java/com/doubao/后端源码。我们按数据流顺序，从底向上拆解。

3.1 数据库建模：doubao.sql不只是建表，它是业务规则的具象化

打开doubao.sql，你会发现它不是简单地CREATE TABLE user (...)。它是一个完整的初始化流程：

-- 第一步：创建数据库并切换
CREATE DATABASE IF NOT EXISTS doubao DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE doubao;

-- 第二步：建用户表，注意关键字段
CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `username` varchar(50) NOT NULL UNIQUE COMMENT '用户名，唯一',
  `password` varchar(100) NOT NULL COMMENT 'BCrypt加密后的密码',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `avatar_url` varchar(255) DEFAULT NULL COMMENT '头像地址',
  `post_count` int DEFAULT '0' COMMENT '发帖数，冗余字段提升查询效率',
  `created_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updated_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_username` (`username`) USING BTREE -- 为登录查询加速
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户表';

-- 第三步：建帖子表，外键关联用户
CREATE TABLE `post` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `title` varchar(200) NOT NULL COMMENT '标题',
  `content` text NOT NULL COMMENT '正文，TEXT类型支持长文本',
  `user_id` bigint NOT NULL COMMENT '作者ID，外键',
  `like_count` int DEFAULT '0' COMMENT '点赞数',
  `comment_count` int DEFAULT '0' COMMENT '评论数',
  `status` tinyint DEFAULT '1' COMMENT '状态：1-正常，0-已删除（软删除）',
  `created_time` datetime DEFAULT CURRENT_TIMESTAMP,
  `updated_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`) USING BTREE,
  CONSTRAINT `fk_post_user_id` FOREIGN KEY (`user_id`) REFERENCES `user` (`id`) ON DELETE CASCADE -- 级联删除：用户删了，他的帖子也自动删
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='帖子表';

看到这里，你应该明白几个设计意图：第一，post_count和like_count是冗余字段，不是每次查帖子都要JOIN user再COUNT()，而是用户发帖/点赞时，后端代码里直接UPDATE user SET post_count = post_count + 1 WHERE id = ?，用空间换时间；第二，status字段实现软删除，而不是DELETE FROM post，这样历史数据可追溯，管理员也能恢复误删内容；第三，FOREIGN KEY加了ON DELETE CASCADE，这是数据库层面的强一致性保障，比后端代码里手动删帖子更可靠。执行这个脚本前，记得在MySQL客户端里先SET FOREIGN_KEY_CHECKS = 0;（如果之前有残留表），再SOURCE /path/to/doubao.sql，否则外键约束可能报错。

3.2 后端核心：Spring Security + JWT拦截器，如何让“未登录不能发帖”变成一行配置

后端安全控制的核心，在com.doubao.config.SecurityConfig.java。它不是一个大杂烩类，而是职责单一的配置类：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder(); // 密码必须BCrypt加密，和SQL脚本里insert的$2a$10$...格式匹配
    }

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.csrf().disable() // 前后端分离，禁用CSRF（它依赖Cookie，而JWT用Header）
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) // 完全无状态，不创建HttpSession
            .and()
            .authorizeRequests()
                .antMatchers("/api/auth/**").permitAll() // /api/auth/login 和 /api/auth/register 公开
                .antMatchers(HttpMethod.GET, "/api/posts/**").permitAll() // 所有GET帖子接口公开（游客可看）
                .antMatchers("/api/**").authenticated() // 其他所有/api/下的接口，必须登录
            .and()
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class); // 在登录过滤器前插入JWT校验

        return http.build();
    }

    @Bean
    public JwtAuthenticationFilter jwtAuthenticationFilter() {
        return new JwtAuthenticationFilter(); // 这个自定义Filter是关键
    }
}

重点看JwtAuthenticationFilter。它继承OncePerRequestFilter，确保每个请求只执行一次。核心逻辑在doFilterInternal方法：

@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response,
                                FilterChain filterChain) throws ServletException, IOException {
    String authHeader = request.getHeader("Authorization"); // 从Header取Authorization
    if (authHeader != null && authHeader.startsWith("Bearer ")) {
        String token = authHeader.substring(7); // 截取Bearer后面的token字符串
        try {
            Long userId = jwtUtil.getUserIdFromToken(token); // 解析token，拿到userId
            User userDetails = userService.findById(userId); // 根据userId查用户详情
            UsernamePasswordAuthenticationToken authentication =
                new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
            SecurityContextHolder.getContext().setAuthentication(authentication); // 把用户信息塞进Spring Security上下文
        } catch (Exception e) {
            // token无效、过期、签名错误，一律不设置Authentication，后续authenticated()检查会失败
        }
    }
    filterChain.doFilter(request, response); // 放行，让请求继续往后走
}

这段代码解释了“为什么登录后能发帖”：当你在前端调用axios.post('/api/posts', {title:'hello'})时，请求头自动带上Authorization: Bearer xxx；这个Filter截获请求，解析出你的userId=123，查出User{id=123, username='zhangsan', authorities=[ROLE_USER]}，然后放进SecurityContextHolder；等到PostController.createPost()方法执行时，Spring Security的@PreAuthorize("hasRole('USER')")注解就会从上下文中取出这个用户，并检查角色——匹配成功，放行；如果不带token或token错误，SecurityContextHolder里是空的，authenticated()检查失败，直接返回401 Unauthorized。整个过程，没有session，没有cookie，全是Header和Filter的协作。

3.3 前端交互：Vue组件如何与后端API“说同一种语言”

前端代码在vue/目录下，结构是标准Vue CLI 3.x生成的：

vue/
├── public/
│   └── index.html
├── src/
│   ├── api/          # 所有API请求封装
│   │   ├── auth.js   # 登录/注册
│   │   ├── post.js   # 帖子相关
│   │   └── comment.js # 评论相关
│   ├── components/   # 可复用组件（Header、Footer、PostItem）
│   ├── router/       # Vue Router配置
│   │   └── index.js  # 路由守卫在这里
│   ├── store/        # Vuex状态管理
│   │   └── index.js  # 存token、用户信息
│   ├── App.vue
│   └── main.js       # 入口，配置axios全局拦截器

最关键的，是main.js里对axios的配置：

import axios from 'axios'

// 设置基础URL
axios.defaults.baseURL = 'http://localhost:8080/api' // 后端Spring Boot默认端口

// 请求拦截器：每次发请求前，自动把token塞进Header
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}` // 和后端Filter解析逻辑严格对应
  }
  return config
})

// 响应拦截器：统一处理401错误
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 清空本地token，跳转到登录页
      localStorage.removeItem('token')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

再看src/api/post.js里一个典型的发帖方法：

export function createPost(data) {
  return axios.post('/posts', data) // 注意：这里是'/posts'，因为baseURL已经设为'http://localhost:8080/api'
}

而在components/CreatePost.vue里调用它：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.title" placeholder="标题" />
    <textarea v-model="form.content" placeholder="内容" />
    <button type="submit">发布</button>
  </form>
</template>

<script>
import { createPost } from '@/api/post'

export default {
  data() {
    return {
      form: { title: '', content: '' }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const res = await createPost(this.form) // 调用API
        this.$message.success('发布成功！')
        this.$router.push(`/post/${res.data.id}`) // 跳转到新帖子详情页
      } catch (error) {
        this.$message.error('发布失败：' + error.response?.data?.msg || '网络错误')
      }
    }
  }
}
</script>

这里体现了前后端协作的精髓：前端只关心“我要发什么数据（title/content）”，后端只关心“我收到了什么数据，该怎么存”。中间的协议（HTTP Method、URL Path、Header Key、Status Code）是双方约定好的契约。createPost(this.form)这一行，背后是axios拼接URL、添加Header、发送JSON、等待响应、抛出错误的完整链路。而error.response?.data?.msg能取到后端返回的{"code":500,"msg":"标题不能为空","data":null}，说明后端Controller里做了参数校验（@NotBlank注解），并统一包装了错误响应体。这种“契约驱动”的开发模式，才是工程化的起点。

4. 实操全流程：从零开始，15分钟完成本地启动与功能验证

现在，我们把前面所有的理论，变成键盘上的真实操作。整个过程，我建议你严格按顺序执行，不要跳步，尤其不要在没建库前就启动后端——那只会看到满屏红色ERROR。

4.1 环境准备：确认三件套已就位

你需要提前装好：
- JDK 8 或 JDK 11：在命令行输入java -version，输出类似openjdk version "11.0.20"即可。Spring Boot 2.7.x不支持JDK17。
- Node.js 14.x 或 16.x：输入node -v，输出v14.21.3或v16.20.2。Vue2 CLI 3.x对Node版本有要求，太高（如18.x）会报错。
- MySQL 5.7 或 8.0：输入mysql --version，确认已安装。推荐用Docker快速启动：docker run -d --name mysql-doubao -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root -e MYSQL_DATABASE=doubao -d mysql:8.0。

注意：Windows用户请确保mvnw.cmd和mvnw两个启动脚本都在根目录。Mac/Linux用户只需用./mvnw，Windows用mvnw.cmd。这是Maven Wrapper，它会自动下载对应版本的Maven，无需你单独安装Maven。

4.2 数据库初始化：执行doubao.sql的正确姿势

1. 打开MySQL客户端（命令行或Navicat/MySQL Workbench）。
2. 如果用命令行，先登录：mysql -u root -p，输入密码root（如果你用的是Docker命令，密码就是root）。
3. 创建数据库（如果还没建）：CREATE DATABASE doubao DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
4. 切换数据库：USE doubao;
5. 执行SQL脚本：SOURCE /path/to/your/download/doubao.sql;（把/path/to/...替换成你实际的路径）。如果报错ERROR 1064，大概率是脚本开头有BOM头或编码问题，用VS Code打开doubao.sql，右下角点“UTF-8”，选“Save with Encoding” → “UTF-8”，再保存一次。
6. 验证：执行SELECT COUNT(*) FROM user;，应该返回0（因为脚本里只建表，没插测试用户，需要你注册）；执行SHOW TABLES;，应该看到user, post, comment, like_record等表名。

4.3 后端启动：修改配置，运行mvnw

1. 打开IDEA或VS Code，打开项目根目录（就是有pom.xml的那个文件夹）。
2. 找到src/main/resources/application.yml，检查数据库配置：
   yaml spring: datasource: url: jdbc:mysql://localhost:3306/doubao?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: root # 改成你MySQL的实际密码
   如果你用的是Docker，localhost要改成host.docker.internal（Mac/Windows）或宿主机IP（Linux）。
3. 在IDEA里，右键com.doubao.DoubaoApplication.java → Run 'DoubaoApplication'；或者在终端进入项目根目录，执行：
   bash ./mvnw spring-boot:run # Mac/Linux mvnw.cmd spring-boot:run # Windows
4. 等待控制台输出Started DoubaoApplication in X.XXX seconds，并且最后一行是Tomcat started on port(s): 8080 (http)，说明后端启动成功。此时访问http://localhost:8080/api/auth/test（一个内置的测试接口），应该返回{"code":200,"msg":"test ok","data":null}。

4.4 前端启动：进入vue/目录，npm install再npm run serve

1. 打开一个新的终端窗口（不要关掉后端那个）。
2. 进入vue/目录：cd vue
3. 安装依赖：npm install（如果卡在node-sass，可以先npm install node-sass@4.14.1再npm install，Vue2 CLI 3.x兼容这个版本）。
4. 启动前端：npm run serve
5. 等待输出App running at: - Local: http://localhost:8081/，说明前端已就绪。
6. 打开浏览器，访问http://localhost:8081，首页应该正常显示。点击右上角“注册”，填入用户名、密码、邮箱，提交。此时后端控制台会打印INSERT INTO user ...的日志，数据库user表里多了一条记录。
7. 注册完，用刚注册的账号登录。登录成功后，前端会把token存入localStorage，你可以按F12打开开发者工具 → Application → Local Storage → http://localhost:8081，看到token字段。
8. 点击“发帖”，填写标题和内容，点击发布。打开Network面板，找到POST /api/posts请求，Headers里能看到Authorization: Bearer eyJhbGciOi...，Preview里能看到返回的帖子ID。刷新页面，帖子列表里就出现了你的新帖。

整个流程走通，意味着你已经完成了从数据库建模、后端API开发、前端页面渲染、JWT鉴权、跨域通信的全链路验证。这不是“Hello World”，而是真实的社区功能闭环。

5. 常见问题与排查技巧实录：那些让我重启三次IDEA的坑，现在都给你列明白了

在帮十几个学员部署这个项目的过程中，我整理了一份高频问题清单。这些问题，90%都源于环境差异或操作细节疏忽，而不是代码本身有Bug。我把它们按发生阶段分类，并附上我的“秒级定位法”。

5.1 后端启动失败：Failed to configure a DataSource

现象：IDEA控制台一启动就报红，核心错误是Consider defining a bean of type 'javax.sql.DataSource' in your configuration.，后面跟着一堆Caused by: java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver。

原因与解法：
- Driver类找不到：pom.xml里mysql-connector-java依赖版本太低（如5.1.47），而MySQL 8.0要用8.0.33。打开pom.xml，找到<artifactId>mysql-connector-java</artifactId>，把<version>改成8.0.33，然后右键项目 → Maven → Reload project。
- 数据库URL格式错误：MySQL 8.0强制要求serverTimezone参数。检查application.yml里的url，必须包含?serverTimezone=Asia/Shanghai，且useSSL=false（如果没配SSL证书）。
- 密码错误或数据库不存在：application.yml里password写错了，或者doubao数据库根本没创建。用MySQL客户端手动连一下：mysql -u root -p -h localhost -P 3306 doubao，能连上说明配置没问题。

5.2 前端无法访问后端API：CORS error

现象：前端页面空白，F12看Console报Access to XMLHttpRequest at 'http://localhost:8080/api/auth/login' from origin 'http://localhost:8081' has been blocked by CORS policy.

原因与解法：
- 后端跨域配置被覆盖：SecurityConfig.java里http.cors()没开。在filterChain()方法里，http.csrf().disable()下面，加上.cors().configurationSource(corsConfigurationSource())，并新增一个@Bean方法：
java @Bean public CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.setAllowedOrigins(Arrays.asList("http://localhost:8081")); // 前端地址 configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS")); configuration.setAllowCredentials(true); configuration.addAllowedOrigin("http://localhost:8081"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; }
- 前端axios baseURL写错：检查vue/src/main.js，axios.defaults.baseURL必须是http://localhost:8080/api，不能少http://，也不能写成/api（那是相对路径，会变成http://localhost:8081/api，请求发给了前端自己）。

5.3 登录成功但无法发帖：403 Forbidden

现象：登录接口返回200，token也存进了localStorage，但点“发帖”按钮，Network里POST /api/posts返回403。

原因与解法：
- JWT Filter没生效：检查SecurityConfig.java里addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)这行，UsernamePasswordAuthenticationFilter.class必须拼写正确（注意大小写），且jwtAuthenticationFilter()方法返回的Bean必须是JwtAuthenticationFilter实例，不能是new JwtAuthenticationFilter()（那样就不是Spring管理的Bean了）。
- token过期或格式错误：登录后，立刻打开F12 → Application → Local Storage，复制token值，粘贴到https://jwt.io解码。看payload里exp（过期时间）是不是过去的时间戳；看userId是不是数字，而不是字符串"123"（后端jwtUtil.getUserIdFromToken()方法里用了Long.parseLong()，如果是字符串会抛异常，Filter就静默失败了）。

5.4 页面样式错乱或组件不渲染

现象：首页加载出来，但导航栏没了，或者帖子列表是空白的，Console里报[Vue warn]: Property or method "posts" is not defined on the instance。

原因与解法：
- Vue CLI版本冲突：vue/package.json里"vue-cli-service"版本如果是^4.5.0，而你全局装了Vue CLI 5.x，会导致构建失败。解决方案：删除vue/node_modules和vue/package-lock.json，然后npm install重新装，确保装的是vue-cli-service@4.5.15。
- ESLint校验阻断：vue/src/main.js里如果有console.log()，ESLint会报错阻止编译。在vue/vue.config.js里加：
js module.exports = { lintOnSave: false // 关闭保存时校验 }

我把这些坑总结成一张速查表，方便你随时对照：

实操心得：每次遇到问题，先做三件事：1. 看后端控制台最后一屏日志（不是最上面，是启动完成后你操作时的日志）；2. 看前端Network面板里具体哪个请求失败、状态码多少、Response里是什么内容；3. 打开F12的Console，看有没有JS报错。90%的问题，答案就在这三个地方。别一上来就怀疑代码有Bug，先怀疑自己的环境和操作。

6. 二次开发与能力延伸：从“能跑”到“能改”，这才是项目真正的价值

现在，你已经能让豆宝社区在本地跑起来了。但这只是起点。这个项目的真正价值，在于它为你提供了一个“可触摸、可修改、可验证”的沙盒。接下来，我分享几个我带学员做的、真正提升工程能力的实战练习，每一个都紧扣关键词，且都有明确的产出目标。

6.1 给帖子加富文本编辑器：Vue2 + wangEditor实战

原项目里，发帖用的是纯<textarea>，用户体验差。我们可以集成wangEditor（Vue2兼容版）。步骤很简单：
1. 在vue/目录下，npm install wangeditor@4.7.12（注意必须是4.x，5.x只支持Vue3）。
2. 在components/CreatePost.vue里：
```vue

`` 3. 后端PostController.createPost()方法里，@RequestBody PostDTO dto的content字段接收的就是HTML字符串，直接存入MySQL的content字段（TEXT类型完全支持）。 **收获**：你学会了如何在Vue2项目里集成第三方UI组件，理解了mounted/beforeDestroy`生命周期的用途，也实践了前后端对富文本的协同处理。

6.2 实现帖子搜索功能：MySQL全文索引 + Spring Data JPA

用户想搜“Vue教程”，当前只能靠LIKE '%Vue%'，效率低。我们可以用MySQL全文索引：
1. 在MySQL里执行：
sql ALTER TABLE post ADD FULLTEXT(title, content); -- 为标题和内容建全文索引
2. 在后端PostRepository.java里，加一个自定义查询方法：
java public interface PostRepository extends JpaRepository<Post, Long> { @Query(value = "SELECT * FROM post WHERE MATCH(title, content) AGAINST(?1 IN NATURAL LANGUAGE MODE)", nativeQuery = true) List<Post> searchByKeyword(String keyword); }
3. 在PostService.java里暴露服务：
java public List<Post> searchPosts(String keyword) { return postRepository.searchByKeyword(keyword); }
4. 前端src/api/post.js里加searchPosts(keyword)方法，components/SearchBar.vue里调用。
收获：你亲手给数据库加了索引，写了原生SQL查询，理解了MATCH...AGAINST和LIKE的本质区别（前者用索引，后者全表扫描），也掌握了Spring Data JPA的@Query用法。

6.3 将JWT Token存入HttpOnly Cookie（增强安全性）

目前token存在localStorage，有XSS风险。我们可以改成存入HttpOnly Cookie：
1. 后端LoginController.login()里，登录成功后，不返回token，而是：
java Cookie cookie = new Cookie("AUTH_TOKEN", jwtUtil.generateToken(user)); cookie.setHttpOnly(true); cookie.setPath("/"); cookie.setMaxAge(3600); // 1小时 response.addCookie(cookie);
2. 前端main.js里，axios请求拦截器改为从Cookie读token（需引入js-cookie库）：
javascript import Cookies from 'js-cookie' axios.interceptors.request.use(config => { const token = Cookies.get('AUTH_TOKEN') if (token) { config.headers.Authorization = `Bearer ${token}` } return config })
收获：你实践了Web安全的核心原则——敏感信息不存前端JS可访问的地方，理解了HttpOnly的作用，并完成了前后端Cookie传输的完整链路。

这三个练习，没有一个是“为了炫技”，每一个都直指真实开发中的痛点：编辑体验、搜索性能、安全加固。当你做完，你就不再是一个“能跑Demo的人”，而是一个“知道问题在哪、方案怎么选、代码怎么写、效果怎么验”的合格开发者。豆宝社区的价值，正在于此——它是一块砖，你拿它垫脚，够得着更高的地方。

本文还有配套的精品资源，点击获取

简介：一套开箱即用的社区类应用源码，前端用Vue 2.x实现页面交互与路由管理，后端基于Spring Boot 2.x搭建RESTful接口，数据库采用MySQL，附带完整doubao.sql初始化脚本。项目结构规范，包含标准Maven配置（pom.xml）、跨平台启动脚本（mvnw/mvnw.cmd）、JWT登录鉴权、用户注册登录、发帖、评论等核心社区功能。前后端代码物理分离，前端位于独立vue目录，后端Java代码集中在src/main/java下，配套README.md说明本地运行步骤和基础配置方式。支持跨域访问，适合用于学习前后端协作开发、接口调试、Spring Security权限控制、Vue组件通信及MySQL表结构设计，无需修改即可在本地完成前后端联调与部署验证。

本文还有配套的精品资源，点击获取