mybatisplus+in查询使用

在Spring Boot + Mybatis Plus + Vue的组合中，你可以通过以下步骤来在一个页面显示两个表： 1. 在后端Java代码中，使用Mybatis Plus的Mapper接口操作数据库来查询两个表的数据，然后将数据以JSON格式返回给前端Vue页面。 2. 在前端Vue页面中，通过Vue的异步组件和axios库来发送请求，获取后端返回的数据，然后使用Vue的模板语法和数据绑定来渲染页面，显示两个表的数据。 下面是一个简单的示例代码： 在Java代码中，使用Mybatis Plus的Mapper接口操作数据库来查询两个表的数据： ```java @Service public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService { @Autowired private UserMapper userMapper; @Autowired private RoleMapper roleMapper; @Override public List<UserRoleVO> getUserRoleList() { List<UserRoleVO> userRoleList = new ArrayList<>(); List<User> userList = userMapper.selectList(null); for (User user : userList) { UserRoleVO userRoleVO = new UserRoleVO(); BeanUtils.copyProperties(user, userRoleVO); Role role = roleMapper.selectById(user.getRoleId()); userRoleVO.setRoleName(role.getRoleName()); userRoleList.add(userRoleVO); } return userRoleList; } } ``` 在前端Vue页面中，使用异步组件和axios库来发送请求，获取后端返回的数据： ```vue <template> <div> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Role</th> </tr> </thead> <tbody> <tr v-for="(item, index) in userRoleList" :key="index"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.roleName}}</td> </tr> </tbody> </table> </div> </template> <script> import axios from 'axios' export default { name: 'UserList', data () { return { userRoleList: [] } }, created () { this.getUserRoleList() }, methods: { getUserRoleList () { axios.get('/api/userRoleList').then(response => { this.userRoleList = response.data }).catch(error => { console.log(error) }) } } } </script> ``` 在这个示例中，我们通过Java代码实现了查询用户信息和用户角色信息的逻辑，并将查询结果转换为`UserRoleVO`对象列表返回给前端。然后在前端Vue页面中，我们通过异步组件和axios库发送请求，获取后端返回的`UserRoleVO`对象列表，并使用Vue的模板语法和数据绑定来渲染页面，显示用户信息和用户角色信息的表格。

好的，您需要在后端使用Mybatis-Plus来操作数据库，同时使用Spring Boot框架来搭建后端接口。在前端，您需要使用Vue框架和ElementUI组件库进行开发，同时使用Easypoi来实现Excel导出。 以下是详细步骤和代码： 后端： 1. 在pom.xml中添加Mybatis-Plus和Easypoi的依赖 ``` <!-- Mybatis-Plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.2</version> </dependency> <!-- Easypoi --> <dependency> <groupId>cn.afterturn</groupId> <artifactId>easypoi-base</artifactId> <version>4.1.1</version> </dependency> ``` 2. 定义实体类和Mapper类 ``` // 实体类，对应数据库中的一张表 @Data public class User { private Long id; private String name; private Integer age; private List<Role> roles; // 一对多关系，一个用户对应多个角色 } @Data public class Role { private Long id; private String name; } // Mapper类 public interface UserMapper extends BaseMapper<User> { List<User> selectUsers(); // 查询所有用户和对应的角色 } ``` 3. 在ServiceImpl类中实现查询方法 ``` @Service public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService { @Override public List<User> getUsersWithRoles() { return baseMapper.selectUsers(); } } ``` 4. 在Controller类中定义接口 ``` @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @GetMapping("/list") public List<User> getUsers() { return userService.getUsersWithRoles(); } } ``` 5. 在Controller类中实现Excel导出接口 ``` @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; ... @GetMapping("/export") public void exportUsers(HttpServletResponse response) throws IOException { // 查询所有用户和对应的角色 List<User> userList = userService.getUsersWithRoles(); // 定义表头和数据 ListExportParams params = new ListExportParams("用户列表", "Sheet1"); LinkedHashMap<String, String> headers = new LinkedHashMap<>(); headers.put("name", "名称"); headers.put("age", "年龄"); headers.put("roles.name", "角色"); // 用"."来表示一对多关系 params.setHeaders(headers); List<Map<String, Object>> data = EasyPoiUtils.list2Map(userList); // 导出Excel Workbook workbook = ExcelExportUtil.exportExcel(params, headers, data); response.setContentType("application/vnd.ms-excel"); response.setHeader("Content-Disposition", "attachment;filename=users.xlsx"); response.flushBuffer(); workbook.write(response.getOutputStream()); } } ``` 前端： 1. 安装Vue和ElementUI ``` npm install vue npm install element-ui ``` 2. 在组件中使用ElTable和ElTableColumn来展示数据 ``` <template> <div> <el-table :data="users"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="角色"> <template slot-scope="scope"> <span v-for="(role, index) in scope.row.roles" :key="index">{{ role.name }}</span> </template> </el-table-column> </el-table> <el-button type="primary" @click="exportUsers">导出Excel</el-button> </div> </template> <script> import axios from 'axios' export default { data() { return { users: [] } }, created() { this.getUsers() }, methods: { getUsers() { axios.get('/user/list').then(response => { this.users = response.data }) }, exportUsers() { window.open('/user/export', '_blank') } } } </script> ``` 以上就是详细的步骤和代码，希望能帮助到您。