springboot+mybatisplus+vue怎么在一个页面显示两个表

在Spring Boot + Mybatis Plus + Vue的组合中，你可以通过以下步骤来在一个页面显示两个表：

1. 在后端Java代码中，使用Mybatis Plus的Mapper接口操作数据库来查询两个表的数据，然后将数据以JSON格式返回给前端Vue页面。

2. 在前端Vue页面中，通过Vue的异步组件和axios库来发送请求，获取后端返回的数据，然后使用Vue的模板语法和数据绑定来渲染页面，显示两个表的数据。

下面是一个简单的示例代码：

在Java代码中，使用Mybatis Plus的Mapper接口操作数据库来查询两个表的数据：

@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库来发送请求，获取后端返回的数据：

<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的模板语法和数据绑定来渲染页面，显示用户信息和用户角色信息的表格。