JavaWeb 进阶：Vue.js 与 Spring Boot 全栈开发实战（Java 开发者视角）

JavaWeb 进阶：Vue.js 与 Spring Boot 全栈开发实战（Java 开发者视角）_java springboot+vue-CSDN博客

作为一名 Java 开发工程师，当你掌握了 HTML、CSS 和 JavaScript 的基础后，是时候接触现代前端框架了。Vue.js 以其简洁的 API、渐进式的设计和优秀的中文文档，成为众多 Java 开发者入门前端框架的首选。

Vue.js 让你能快速构建响应式、组件化的单页应用（SPA），与你的 Java 后端（Spring Boot）完美配合，打造现代化的全栈应用。

本文将从 Java 开发者的角度，系统讲解 Vue.js 的核心概念、语法，并通过一个完整的 Vue + Spring Boot 用户管理项目，带你实现前后端分离的全栈开发。

---

🧱 一、为什么 Java 开发者要学 Vue.js？

1. 前后端分离是主流：现代 Web 开发普遍采用前后端分离架构，Java 负责提供 RESTful API，Vue 负责前端展示与交互。
2. 提升开发效率：Vue 的组件化、数据绑定、虚拟 DOM 等特性，极大提升了前端开发效率和代码可维护性。
3. 更好的用户体验：单页应用（SPA）提供接近原生应用的流畅体验。
4. 全栈能力：掌握 Vue 让你具备独立开发小型全栈项目的能力，拓宽职业发展路径。
5. 生态成熟：Vue 拥有庞大的生态系统（Vue Router, Vuex/Pinia, Vite, Element Plus 等）。

🔍 核心思想：Vue 的核心是 “数据驱动视图”。你只需关注数据（data），视图（DOM）会自动更新。

---

🧠 二、Vue.js 核心概念速览

✅ 1. 创建 Vue 应用

1.  
   // 使用 Vue 3 (推荐)
2.  
   import { createApp } from 'vue'
3.  
    
4.  
   const app = createApp({
5.  
   data() {
6.  
   return {
7.  
   message: 'Hello Vue!'
8.  
   }
9.  
   }
10.  
    })
11.  
     
12.  
    app.mount('#app')

AI写代码

 

1.  
   <div id="app">
2.  
   {{ message }} <!-- 插值表达式，自动响应数据变化 -->
3.  
   </div>

AI写代码

 

✅ 2. 响应式数据绑定

1.  
   data() {
2.  
   return {
3.  
   count: 0,
4.  
   user: {
5.  
   name: '张三',
6.  
   email: 'zhangsan@example.com'
7.  
   }
8.  
   }
9.  
   }

AI写代码

 

1.  
   <p>计数: {{ count }}</p>
2.  
   <button @click="count++">+1</button> <!-- @click 是 v-on:click 的简写 -->
3.  
    
4.  
   <p>姓名: <input v-model="user.name"></p> <!-- v-model 双向绑定 -->
5.  
   <p>邮箱: {{ user.email }}</p>

AI写代码

 

✅ 3. 条件渲染与列表渲染

1.  
   <!-- v-if / v-else -->
2.  
   <div v-if="isLoggedIn">
3.  
   <p>欢迎回来！</p>
4.  
   </div>
5.  
   <div v-else>
6.  
   <p>请登录</p>
7.  
   </div>
8.  
    
9.  
   <!-- v-for 列表渲染 -->
10.  
    <ul>
11.  
    <li v-for="user in users" :key="user.id">
12.  
    {{ user.name }} - {{ user.email }}
13.  
    </li>
14.  
    </ul>

AI写代码

 

✅ 4. 事件处理

1.  
   <button @click="handleClick">点击我</button>
2.  
   <button @click="increase(5)">增加5</button>

AI写代码

 

1.  
   methods: {
2.  
   handleClick() {
3.  
   this.count++
4.  
   },
5.  
   increase(num) {
6.  
   this.count += num
7.  
   }
8.  
   }

AI写代码

 

✅ 5. 组件化（Component）

Vue 的核心是将 UI 拆分为独立、可复用的组件。

1.  
   <!-- UserCard.vue (子组件) -->
2.  
   <template>
3.  
   <div class="user-card">
4.  
   <h3>{{ user.name }}</h3>
5.  
   <p>{{ user.email }}</p>
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    export default {
11.  
    props: ['user'] // 接收父组件传递的数据
12.  
    }
13.  
    </script>

AI写代码

 

1.  
   <!-- App.vue (父组件) -->
2.  
   <template>
3.  
   <div>
4.  
   <UserCard v-for="user in users" :key="user.id" :user="user" />
5.  
   </div>
6.  
   </template>
7.  
    
8.  
   <script>
9.  
   import UserCard from './components/UserCard.vue'
10.  
     
11.  
    export default {
12.  
    components: {
13.  
    UserCard
14.  
    },
15.  
    data() {
16.  
    return {
17.  
    users: [
18.  
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
19.  
    { id: 2, name: '李四', email: 'lisi@example.com' }
20.  
    ]
21.  
    }
22.  
    }
23.  
    }
24.  
    </script>

AI写代码

 

---

🚀 三、Vue 3 + Spring Boot 全栈项目实战：用户管理系统

我们将构建一个简单的用户管理系统，前端使用 Vue 3 + Vite + Element Plus，后端使用 Spring Boot。

✅ 1. 项目结构

1.  
   frontend/ (Vue 项目)
2.  
   ├── src/
3.  
   │ ├── components/
4.  
   │ │ └── UserList.vue
5.  
   │ ├── views/
6.  
   │ │ └── UserManagement.vue
7.  
   │ ├── App.vue
8.  
   │ ├── main.js
9.  
   │ └── api/ (API 调用封装)
10.  
    │ └── userApi.js
11.  
    └── ...
12.  
     
13.  
    backend/ (Spring Boot 项目)
14.  
    ├── src/main/java/com/example/demo/
15.  
    │ ├── controller/UserController.java
16.  
    │ ├── service/UserService.java
17.  
    │ ├── repository/UserRepository.java
18.  
    │ ├── entity/User.java
19.  
    │ └── DemoApplication.java
20.  
    └── ...

AI写代码

 

✅ 2. Spring Boot 后端 API

实体类 User.java

1.  
   @Entity
2.  
   @Table(name = "users")
3.  
   public class User {
4.  
   @Id
5.  
   @GeneratedValue(strategy = GenerationType.IDENTITY)
6.  
   private Long id;
7.  
   private String name;
8.  
   private String email;
9.  
    
10.  
    // Constructors, Getters, Setters
11.  
    }

AI写代码

 

Controller UserController.java

1.  
   @RestController
2.  
   @RequestMapping("/api/users")
3.  
   @CrossOrigin(origins = "http://localhost:5173") // 允许前端域名访问（开发环境）
4.  
   public class UserController {
5.  
    
6.  
   @Autowired
7.  
   private UserService userService;
8.  
    
9.  
   // GET: 获取所有用户
10.  
    @GetMapping
11.  
    public ResponseEntity<List<User>> getAllUsers() {
12.  
    List<User> users = userService.findAll();
13.  
    return ResponseEntity.ok(users);
14.  
    }
15.  
     
16.  
    // POST: 创建用户
17.  
    @PostMapping
18.  
    public ResponseEntity<User> createUser(@RequestBody User user) {
19.  
    User savedUser = userService.save(user);
20.  
    return ResponseEntity.status(HttpStatus.CREATED).body(savedUser);
21.  
    }
22.  
     
23.  
    // PUT: 更新用户
24.  
    @PutMapping("/{id}")
25.  
    public ResponseEntity<User> updateUser(@PathVariable Long id, @RequestBody User userDetails) {
26.  
    User updatedUser = userService.update(id, userDetails);
27.  
    if (updatedUser != null) {
28.  
    return ResponseEntity.ok(updatedUser);
29.  
    } else {
30.  
    return ResponseEntity.notFound().build();
31.  
    }
32.  
    }
33.  
     
34.  
    // DELETE: 删除用户
35.  
    @DeleteMapping("/{id}")
36.  
    public ResponseEntity<Void> deleteUser(@PathVariable Long id) {
37.  
    boolean deleted = userService.deleteById(id);
38.  
    if (deleted) {
39.  
    return ResponseEntity.noContent().build();
40.  
    } else {
41.  
    return ResponseEntity.notFound().build();
42.  
    }
43.  
    }
44.  
    }

AI写代码

 

✅ 3. Vue 前端调用 API

封装 API 调用 api/userApi.js

1.  
   import axios from 'axios'
2.  
    
3.  
   // 创建 axios 实例
4.  
   const apiClient = axios.create({
5.  
   baseURL: 'http://localhost:8080/api', // Spring Boot 后端地址
6.  
   headers: {
7.  
   'Content-Type': 'application/json'
8.  
   }
9.  
   })
10.  
     
11.  
    export default {
12.  
    // 获取所有用户
13.  
    getUsers() {
14.  
    return apiClient.get('/users')
15.  
    },
16.  
    // 创建用户
17.  
    createUser(userData) {
18.  
    return apiClient.post('/users', userData)
19.  
    },
20.  
    // 更新用户
21.  
    updateUser(id, userData) {
22.  
    return apiClient.put(`/users/${id}`, userData)
23.  
    },
24.  
    // 删除用户
25.  
    deleteUser(id) {
26.  
    return apiClient.delete(`/users/${id}`)
27.  
    }
28.  
    }

AI写代码

 

组件 UserManagement.vue

1.  
   <template>
2.  
   <div class="user-management">
3.  
   <h2>用户管理</h2>
4.  
    
5.  
   <!-- 添加用户表单 -->
6.  
   <el-form :model="newUser" label-width="80px" @submit.prevent="addUser">
7.  
   <el-form-item label="姓名">
8.  
   <el-input v-model="newUser.name" />
9.  
   </el-form-item>
10.  
    <el-form-item label="邮箱">
11.  
    <el-input v-model="newUser.email" />
12.  
    </el-form-item>
13.  
    <el-form-item>
14.  
    <el-button type="primary" @click="addUser">添加用户</el-button>
15.  
    </el-form-item>
16.  
    </el-form>
17.  
     
18.  
    <!-- 用户列表 -->
19.  
    <el-table :data="users" style="width: 100%">
20.  
    <el-table-column prop="id" label="ID" width="80" />
21.  
    <el-table-column prop="name" label="姓名" />
22.  
    <el-table-column prop="email" label="邮箱" />
23.  
    <el-table-column label="操作">
24.  
    <template #default="scope">
25.  
    <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
26.  
    <el-button size="small" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
27.  
    </template>
28.  
    </el-table-column>
29.  
    </el-table>
30.  
    </div>
31.  
    </template>
32.  
     
33.  
    <script>
34.  
    import userApi from '@/api/userApi' // 引入 API
35.  
     
36.  
    export default {
37.  
    data() {
38.  
    return {
39.  
    users: [], // 存储用户列表
40.  
    newUser: { name: '', email: '' } // 新用户表单数据
41.  
    }
42.  
    },
43.  
    mounted() {
44.  
    this.fetchUsers() // 页面加载后获取用户列表
45.  
    },
46.  
    methods: {
47.  
    // 获取用户列表
48.  
    async fetchUsers() {
49.  
    try {
50.  
    const response = await userApi.getUsers()
51.  
    this.users = response.data
52.  
    } catch (error) {
53.  
    console.error('获取用户失败:', error)
54.  
    // 处理错误（如显示提示）
55.  
    }
56.  
    },
57.  
    // 添加用户
58.  
    async addUser() {
59.  
    if (!this.newUser.name || !this.newUser.email) {
60.  
    // 简单验证
61.  
    return
62.  
    }
63.  
    try {
64.  
    const response = await userApi.createUser(this.newUser)
65.  
    this.users.push(response.data) // 将新用户添加到列表
66.  
    this.newUser = { name: '', email: '' } // 重置表单
67.  
    } catch (error) {
68.  
    console.error('添加用户失败:', error)
69.  
    }
70.  
    },
71.  
    // 删除用户
72.  
    async deleteUser(id) {
73.  
    try {
74.  
    await userApi.deleteUser(id)
75.  
    this.users = this.users.filter(user => user.id !== id) // 从列表中移除
76.  
    } catch (error) {
77.  
    console.error('删除用户失败:', error)
78.  
    }
79.  
    },
80.  
    // 编辑用户 (简化版，实际项目可能用对话框)
81.  
    editUser(user) {
82.  
    // 实现编辑逻辑...
83.  
    console.log('编辑用户:', user)
84.  
    }
85.  
    }
86.  
    }
87.  
    </script>
88.  
     
89.  
    <style scoped>
90.  
    .user-management {
91.  
    padding: 20px;
92.  
    }
93.  
    </style>

AI写代码

 

✅ 4. 项目运行

1. 启动后端：运行 DemoApplication.java，Spring Boot 应用启动在 http://localhost:8080。
2. 启动前端：
   1.  
      cd frontend
   2.  
      npm install
   3.  
      npm run dev
   AI写代码

    
   Vite 开发服务器启动在 http://localhost:5173。
3. 访问应用：浏览器打开 http://localhost:5173，即可看到用户管理界面，与后端进行数据交互。

---

⚠️ 四、关键配置与注意事项（Java 开发者视角）

✅ 1. 跨域问题（CORS）

前后端分离开发时，前端（http://localhost:5173）和后端（http://localhost:8080）端口不同，会遇到跨域问题。

解决方案：

• 后端配置（如上文 @CrossOrigin 注解或全局配置类）。
• 前端代理（在 vite.config.js 中配置代理，将 /api 请求代理到后端）：
  1.  
     // vite.config.js
  2.  
     export default defineConfig({
  3.  
     server: {
  4.  
     proxy: {
  5.  
     '/api': {
  6.  
     target: 'http://localhost:8080',
  7.  
     changeOrigin: true,
  8.  
     }
  9.  
     }
  10.  
      }
  11.  
      })
  AI写代码

   
  
  这样前端请求 /api/users 会被代理到 http://localhost:8080/api/users，避免跨域。

✅ 2. 项目部署

• 后端：将 Spring Boot 项目打包成 jar 或 war，部署到服务器（如 Tomcat）。
• 前端：使用 npm run build 生成静态文件（dist 目录），将 dist 目录下的文件部署到 Nginx、Apache 等 Web 服务器，或直接放在 Spring Boot 的 static 目录下（简单场景）。

✅ 3. 状态管理（Pinia）

对于复杂应用，组件间共享状态（如用户登录信息、购物车）变得困难。可以使用 Pinia（Vue 3 官方推荐的状态管理库）。

✅ 4. 路由（Vue Router）

实现单页应用（SPA）的页面跳转，需要使用 Vue Router。

---

📊 五、总结：Vue.js 核心要点

概念	关键技术	说明
核心	{{ }}, v-model, v-if, v-for, @click	基础指令
组件	<template>, <script>, <style>, props, emit	UI 拆分与复用
响应式	ref(), reactive(), computed, watch	数据驱动视图
生态	Vue Router (路由), Pinia (状态管理), Vite (构建工具)	完整解决方案
UI 框架	Element Plus, Ant Design Vue, Vuetify	快速构建美观界面
通信	Axios / Fetch API	调用后端 RESTful API

---

💡 结语

Vue.js 是 Java 开发者迈向全栈之路的绝佳选择。它学习曲线平缓，文档优秀，与 Spring Boot 配合得天衣无缝。

通过本文的实战，你已经掌握了：

• Vue.js 的核心语法和组件化思想
• 如何使用 Axios 与 Spring Boot 后端进行 RESTful 交互
• 前后端分离项目的开发与调试流程

不要停留在“会用”，要动手实践！ 尝试将你现有的 JavaWeb 项目前端部分用 Vue 重构，或者开发一个个人博客、后台管理系统。

掌握 Vue，你将解锁更广阔的 Web 开发世界！