66、数据访问-crud实验-数据列表展示【补录】
以下是关于“数据访问-CRUD实验-数据列表展示”的讲解：
#### 实验目标
在Spring Boot项目中，使用MyBatis-Plus实现数据的基本CRUD操作，并将数据列表展示在前端页面上。
#### 实验步骤
1. **准备工作**
- 确保已完成MyBatis-Plus的整合，包括添加依赖、配置数据源、创建实体类和Mapper接口。
- 创建数据库表，例如`user`表，包含`id`、`username`、`password`等字段。
2. **编写Service层**
- 创建`UserService`接口，定义数据操作方法：
```java
public interface UserService {
List<User> getAllUsers(); // 获取所有用户
User getUserById(Long id); // 根据ID获取用户
boolean addUser(User user); // 添加用户
boolean updateUser(User user); // 更新用户
boolean deleteUser(Long id); // 删除用户
}
```
- 实现`UserServiceImpl`类，继承`ServiceImpl<UserMapper, User>`并重写方法：
```java
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
// 可直接使用MyBatis-Plus提供的方法
}
```
3. **编写Controller层**
- 创建`UserController`类，处理前端请求：
```java
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> getAllUsers() {
return userService.getAllUsers();
}
// 其他CRUD方法的映射
}
```
4. **前端页面展示**
- 使用Vue.js和Element UI框架构建前端页面。
- 安装Element UI：
```bash
npm install element-ui --save
```
- 在`main.js`中引入Element UI：
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
```
- 创建用户列表组件`UserList.vue`：
```html
<template>
<div>
<el-table :data="users" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<!-- 其他字段列 -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="editUser(scope.row)" type="text">编辑</el-button>
<el-button @click="deleteUser(scope.row.id)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
users: []
};
},
mounted() {
this.fetchUsers();
},
methods: {
fetchUsers() {
// 使用axios或其他HTTP客户端获取用户列表数据
// 示例代码：
axios.get('/users').then(response => {
this.users = response.data;
});
},
editUser(user) {
// 跳转到编辑页面或弹出编辑对话框
},
deleteUser(id) {
// 调用删除接口并刷新列表
}
}
};
</script>
```
5. **测试与验证**
- 启动Spring Boot应用。
- 访问前端页面，查看用户列表是否成功展示。
- 测试添加、编辑、删除功能是否正常工作。
#### 注意事项
- **前后端交互**：确保前后端接口的URL、请求方法、数据格式一致。
- **数据安全**：对用户输入进行校验，防止SQL注入等安全问题。
- **异常处理**：在Service层和Controller层添加适当的异常处理，提高系统的健壮性。
通过以上步骤，您可以在Spring Boot项目中实现数据列表的展示，并完成基本的CRUD操作。这为构建实际应用提供了基础，可根据需求进一步扩展功能。
