由于提供整个源代码库是不现实的，我将提供一个简化的示例，展示如何使用Java语言、Vue.js、Element UI和MySQL创建一个简单的CRUD应用。
假设我们正在创建一个简单的用户管理系统。
- 首先，我们需要在MySQL数据库中创建一个用户表：
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`email` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
- 接下来，我们将创建一个简单的Spring Boot后端：
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> getAllUsers() {
return userService.findAll();
}
@PostMapping
public User createUser(@RequestBody User user) {
return userService.save(user);
}
@GetMapping("/{id}")
public User getUserById(@PathVariable(value = "id") Long userId) {
return userService.findById(userId);
}
@PutMapping("/{id}")
public User updateUser(@PathVariable(value = "id") Long userId, @RequestBody User userDetails) {
return userService.update(userId, userDetails);
}
@DeleteMapping("/{id}")
public ResponseEntity<?> deleteUser(@PathVariable(value = "id") Long userId) {
userService.deleteById(userId);
return ResponseEntity.ok().build();
}
}
- 前端Vue.js部分，我们将使用Element UI来创建一个简单的CRUD界面：
<template>
<el-button @click="handleCreate">添加用户</el-button>
<el-table :data="users" style="width: 100%">
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
<el-button @click="handleDelete(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
users: [],
};
},
methods: {
fetchUsers() {
axios.get('/api/users').then(response => {
this.users = response.data;
});
},
handleCreate() {
// 打开创建用户的对话框
},
handleEdit(user) {
// 打开编辑用户的对话框并填充数据
},
handleDelete(userId) {
axios.delete(`/api/users/${userId}`).then(response => {
this.fetchUsers();
});
}
},
created() {
this.fetchUsers();
}
};
</script>
这个简化的示例展示了如何使用Vue.js和Element UI创建一