今天我们来创建一个简单的用户管理示例，包含基本的增删改查功能。
主要感受下vue+sprint的前后端架构的基本实现。
1. 首先创建后端实体类和控制器：
package com.example.entity;
public class User {
private Long id;
private String username;
private String email;
// 构造函数
public User() {}
public User(Long id, String username, String email) {
this.id = id;
this.username = username;
this.email = email;
}
// getter和setter
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
} 
2. 创建控制器：
package com.example.controller;
import com.example.entity.User;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicLong;
@RestController
@RequestMapping("/api/users")
public class UserController {
private final ConcurrentHashMap<Long, User> users = new ConcurrentHashMap<>();
private final AtomicLong idGenerator = new AtomicLong();
@GetMapping
public List<User> getAllUsers() {
return new ArrayList<>(users.values());
}
@GetMapping("/{id}")
public User getUser(@PathVariable Long id) {
return users.get(id);
}
@PostMapping
public User createUser(@RequestBody User user) {
user.setId(idGenerator.incrementAndGet());
users.put(user.getId(), user);
return user;
}
@PutMapping("/{id}")
public User updateUser(@PathVariable Long id, @RequestBody User user) {
user.setId(id);
users.put(id, user);
return user;
}
@DeleteMapping("/{id}")
public void deleteUser(@PathVariable Long id) {
users.remove(id);
}
} 
3. 在Vue前端创建用户管理组件：
<template>
<div class="user-management">
<h2>用户管理</h2>
<!-- 添加调试信息 -->
<p>用户数量: {
{ users.length }}</p>
<!-- 用户表单 -->
<div class="user-form">
<input v-model="user.username" placeholder="用户名">
<input v-model="user.email" placeholder="邮箱">
<button @click="saveUser">{
{ user.id ? '更新' : '创建' }}</button>
</div>
<!-- 用户列表 -->
<div class="user-list">
<div v-if="users.length === 0">暂无用户数据</div>
<div v-for="item in users" :key="item.id" class="user-item">
<span>{
{ item.username }} - {
{ item.email }}</span>
<div class="actions">
<button @click="editUser(item)">编辑</button>
<button @click="deleteUser(item.id)">删除</button>
</div>
</div>
</div>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
name: 'UserManagement',
data() {
return {
users: [],
user: {
id: null,
username: '',
email: ''
}
}
},
created() {
console.log('组件已创建')
this.fetchUsers()
},
methods: {
async fetchUsers() {
try {
console.log('正在获取用户列表...')
this.users = await request.get('/api/users')
console.log('获取到的用户列表:', this.users)
} catch (error) {
console.error('获取用户列表失败:', error)
}
},
async saveUser() {
try {
if (this.user.id) {
await request.put(`/api/users/${this.user.id}`, this.user)
} else {
await request.post('/api/users', this.user)
}
this.resetForm()
this.fetchUsers()
} catch (error) {
console.error('保存用户失败:', error)
}
},
async deleteUser(id) {
try {
await request.delete(`/api/users/${id}`)
this.fetchUsers()
} catch (error) {
console.error('删除用户失败:', error)
}
},
editUser(user) {
this.user = { ...user }
},
resetForm() {
this.user = {
id: null,
username: '',
email: ''
}
}
}
}
</script>
<style scoped>
.user-management {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.user-form {
margin-bottom: 20px;
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.user-form input {
margin-right: 10px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.user-form button {
padding: 8px 15px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.user-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 5px;
background-color: white;
border: 1px solid #eee;
border-radius: 4px;
}
.actions button {
margin-left: 10px;
padding: 5px 10px;
background-color: #666;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.actions button:first-child {
background-color: #42b983;
}
</style> 
4. 在Vue路由中添加这个组件并且添加默认重定向：
import { createRouter, createWebHistory } from 'vue-router'
import UserManagement from '@/components/UserManagement.vue'
const routes = [
{
path: '/',
redirect: '/users'
},
{
path: '/users',
name: 'UserManagement',
component: UserManagement
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router 
5. 修改Vue项目的主页面来显示用户管理组件
<template>
<div id="app">
<nav>
<router-link to="/users">用户管理</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
text-decoration: none;
padding: 10px;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
6. main.js中引入UserManagement组件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
确保UserManagement.vue的路径正确。检查文件是否在正确的位置：vue_web/src/components/UserManagement.vue
7. 安装 vue-router 依赖
cd vue_web
npm install vue-router@48. 启动后端服务
9. 启动前端服务
npm run serve
10. 打开本地页面
扫描二维码关注公众号，回复：
17631979 查看本文章
