0基础搭建java+vue2前后端分离项目

下面我用实战角度一步一步教你创建一个前后端分离项目✅ 前端Vue2✅ 后端JavaSpring Boot✅ 前后端完全分离✅ 适合新手 可长期维护一、整体项目结构推荐这是一个标准、清晰、可扩展的结构MyProject/ ← 根目录Git 仓库 ├── my-project-ui/ ← Vue2 前端 │ ├── src/ │ ├── public/ │ ├── package.json │ └── vue.config.js │ └── my-project-system/ ← Spring Boot 后端 ├── src/ ├── pom.xml └── application.yml✅一个仓库两个项目​✅ 前端 / 后端互不影响✅ 非常适合学习和生产环境二、创建前端项目Vue21️⃣ 创建前端目录mkdir MyPproject cd my-project mkdir my-project-ui cd my-project-ui2️⃣ 创建 Vue2 项目确保已安装 Vue CLIvue create .选择✅ Vue 2✅ Babel✅ ESLint可选完成后npm run serve浏览器访问http://localhost:8080成功页面3️⃣ 配置前端代理解决跨域编辑vue.config.jsmodule.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true, pathRewrite: { ^/api: } } } } }✅ 前端请求统一用/api三、创建后端项目Java Spring Boot1️⃣ 创建后端目录回到根目录cd .. mkdir my-project-backend cd my-project-backend2️⃣ 创建 Spring Boot 项目最简单方式✅ 方式一Spring Initializr推荐访问 https://start.spring.io填写ProjectMavenLanguageJavaSpring Boot默认Groupcom.exampleArtifactmy-project-backendNamemy-project-backendPackagingJarJava8 或 11✅ DependenciesSpring WebSpring Boot DevTools可选下载 → 解压到my-project-backend3️⃣ 启动类示例SpringBootApplication public class MyProjectBackendApplication { public static void main(String[] args) { SpringApplication.run(MyProjectBackendApplication.class, args); } }4️⃣ 写一个测试接口RestController RequestMapping(/hello) public class HelloController { GetMapping public String hello() { return Hello from Spring Boot!; } }5️⃣ 配置后端端口application.ymlserver: port: 8082启动后端mvn spring-boot:run访问http://localhost:8082/hello✅ 后端 OK四、前端调用后端接口Vue2在 Vue 组件中axios.get(/api/hello) .then(res { console.log(res.data) })✅ 实际访问的是http://localhost:8082/hello五、前后端联调流程重点Vue (8080) ↓ /api/hello Proxy ↓ Spring Boot (8082)✅ 无跨域问题✅ 开发体验最好六、生产环境部署简要前端打包npm run build生成dist/后端静态资源托管可选Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/**) .addResourceLocations(classpath:/static/); }七、Git 管理建议根目录.gitignore# Frontend my-project-frontend/node_modules/ # Backend my-project-backend/target/提交一次git init git add . git commit -m init frontend backend