IDEAVueSpringBoot前后端分离项目搭建实战指南1. 开发环境准备与工具选择工欲善其事必先利其器。在开始前后端分离项目开发前我们需要先搭建好开发环境。对于Java全栈开发者来说IDEA无疑是最强大的集成开发环境之一。它不仅支持Java后端开发还能完美配合前端框架如Vue.js。必备工具清单IntelliJ IDEA Ultimate社区版虽然免费但缺少对JavaScript框架的专业支持Node.jsVue CLI的运行环境建议安装LTS版本JDK 8Spring Boot 2.x推荐使用JDK 8或11MySQL 5.7关系型数据库的选择PostmanAPI接口测试工具提示安装Node.js后建议配置淘宝镜像以加速npm包下载npm config set registry https://registry.npm.taobao.org环境变量配置是新手常踩的坑。以Windows系统为例需要确保JAVA_HOME指向JDK安装目录Node.js和npm已加入系统PATHMySQL的bin目录也在PATH中验证环境是否配置成功java -version node -v npm -v mysql --version2. Vue前端项目初始化详解现代前端开发已经离不开脚手架工具。Vue CLI让我们能够快速搭建规范化的项目结构。不同于简单的命令行操作我们需要深入理解每个配置选项的意义。项目创建关键步骤在合适位置创建项目目录例如mkdir my-project cd my-project使用Vue CLI创建项目vue create vue-frontend在交互式界面中选择Manually select features然后勾选以下核心功能BabelES6语法转换Router前端路由管理Vuex状态管理CSS Pre-processorsCSS预处理器Linter/Formatter代码规范检查配置选择建议选择Vue 3版本路由模式选择history需后端配合选择Sass/SCSS作为CSS预处理器代码规范选择ESLint Prettier将配置保存在package.json创建完成后项目结构如下vue-frontend ├── public/ # 静态资源 ├── src/ # 源代码 │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ ├── router/ # 路由配置 │ ├── store/ # Vuex状态管理 │ ├── views/ # 页面组件 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── .env # 环境变量 └── package.json # 项目配置在IDEA中打开前端项目时需要配置JavaScript支持安装Vue.js插件配置ESLint规则设置文件模板新建.vue文件时自动生成基础结构3. Spring Boot后端项目搭建后端项目我们采用Spring Initializr来初始化。IDEA内置了Spring Initializr支持可以方便地创建项目。创建Spring Boot项目步骤在IDEA中选择File New Project选择Spring Initializr配置Project SDK选择JDK 8或11选择默认的initializr服务输入项目元数据Group、Artifact等选择依赖项Spring WebWeb MVC支持Lombok简化POJO编写MyBatis FrameworkORM框架MySQL Driver数据库连接完成创建后等待Maven下载依赖项目结构说明springboot-backend ├── src/main/java │ └── com/example/demo │ ├── config/ # 配置类 │ ├── controller/ # 控制器 │ ├── service/ # 业务层 │ ├── mapper/ # MyBatis映射 │ ├── entity/ # 实体类 │ └── DemoApplication.java # 启动类 ├── src/main/resources │ ├── static/ # 静态资源 │ ├── templates/ # 模板文件 │ └── application.yml # 配置文件 └── pom.xml # Maven配置关键配置示例# application.yml server: port: 8081 servlet: context-path: /api spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/demo_db?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 username: root password: yourpassword jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true4. 前后端联调与跨域解决方案前后端分离开发最大的挑战之一是跨域问题。我们需要在后端配置CORS支持同时前端也需要正确配置代理。后端CORS配置// 在config包下创建WebMvcConfig.java Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .maxAge(3600); } }前端代理配置vue.config.jsmodule.exports { devServer: { proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }接口开发示例// UserController.java RestController RequestMapping(/api/user) public class UserController { Autowired private UserService userService; GetMapping(/{id}) public ResultUser getUser(PathVariable Long id) { return Result.success(userService.getById(id)); } PostMapping public ResultVoid addUser(RequestBody User user) { userService.save(user); return Result.success(); } }前端调用示例// 在Vue组件中 import axios from axios; export default { methods: { async getUser(id) { try { const response await axios.get(/api/user/${id}); console.log(response.data); } catch (error) { console.error(获取用户失败:, error); } } } }5. 数据库配置深度解析与避坑指南数据库配置是项目成功运行的关键环节也是最容易出问题的地方。以下是常见问题及解决方案MySQL连接问题排查表问题现象可能原因解决方案连接超时数据库服务未启动启动MySQL服务拒绝访问用户名/密码错误检查application.yml配置时区错误未设置serverTimezone添加?serverTimezoneAsia/ShanghaiSSL警告未禁用SSL添加useSSLfalse编码问题未指定字符集添加characterEncodingutf8实体类与表映射示例Data TableName(sys_user) // MyBatis-Plus注解 public class User { TableId(type IdType.AUTO) private Long id; private String username; private String password; TableField(nick_name) // 字段名映射 private String nickName; private LocalDateTime createTime; }MyBatis映射文件示例!-- UserMapper.xml -- mapper namespacecom.example.demo.mapper.UserMapper resultMap idBaseResultMap typecom.example.demo.entity.User id columnid propertyid/ result columnusername propertyusername/ result columnpassword propertypassword/ result columnnick_name propertynickName/ result columncreate_time propertycreateTime/ /resultMap select idselectById resultMapBaseResultMap SELECT * FROM sys_user WHERE id #{id} /select /mapper事务管理最佳实践Service public class UserServiceImpl implements UserService { Autowired private UserMapper userMapper; Transactional(rollbackFor Exception.class) Override public void updateUser(User user) { userMapper.updateById(user); // 其他数据库操作... } }6. 项目优化与生产环境准备当项目开发完成后我们需要考虑如何优化和部署。以下是一些关键优化点前端优化配置生产环境变量.env.productionVUE_APP_BASE_API/api VUE_APP_ENVproduction构建生产版本npm run build配置Nginx反向代理server { listen 80; server_name yourdomain.com; location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8081; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }后端优化配置多环境application-dev.yml, application-prod.yml启用GZIP压缩server: compression: enabled: true mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json min-response-size: 1024添加接口文档Swagger或Knife4jConfiguration EnableSwagger2 public class SwaggerConfig { Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage(com.example.demo.controller)) .paths(PathSelectors.any()) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title(API文档) .description(前后端分离项目接口文档) .version(1.0) .build(); } }数据库优化建议添加合适的索引配置连接池参数spring: datasource: hikari: maximum-pool-size: 20 minimum-idle: 5 idle-timeout: 30000 max-lifetime: 1800000 connection-timeout: 30000定期备份数据7. 常见问题快速排查手册开发过程中难免会遇到各种问题这里总结了一些常见问题的解决方法前端常见问题npm install失败清除缓存npm cache clean --force删除node_modules后重新安装检查网络连接必要时使用代理组件样式不生效检查是否使用了scoped样式确认CSS预处理器已正确配置检查样式引入顺序路由跳转问题确认路由模式hash/history检查路由守卫配置确保后端已配置404回退后端常见问题启动报Bean创建失败检查ComponentScan是否包含相关包确认依赖已正确引入查看是否有循环依赖MyBatis映射失败检查mapper.xml文件位置确认MapperScan配置正确检查实体类字段与数据库列名映射事务不生效确认方法为public检查是否抛出了RuntimeException确认Transactional注解位置正确数据库连接问题时区设置确保数据库和应用的时区一致在连接字符串中添加serverTimezoneAsia/ShanghaiSSL警告生产环境应配置正式SSL证书开发环境可添加useSSLfalse禁用连接池耗尽增加连接池大小检查是否有连接未关闭优化慢查询