springboot+mybatisplus+vue一个页面显示两个表示例代码

好的，以下是一个简单的示例代码：

1. 实体类

@TableField(exist = false)
private String name; // 表示该字段不是数据库表中的字段

@TableField(exist = false)
private Integer age; // 表示该字段不是数据库表中的字段

2. Mapper层

@Mapper
public interface UserMapper extends BaseMapper<User> {
    @Select("SELECT id, name, age FROM user")
    List<User> getUserList();
}

@Mapper
public interface OrderMapper extends BaseMapper<Order> {
    @Select("SELECT id, user_id, product_name, price FROM order")
    List<Order> getOrderList();
}

3. Service层

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> getUserList() {
        return userMapper.getUserList();
    }
}

@Service
public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements OrderService {
    @Autowired
    private OrderMapper orderMapper;

    @Override
    public List<Order> getOrderList() {
        return orderMapper.getOrderList();
    }
}

4. Controller层

@RestController
@RequestMapping("/api")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping("/userList")
    public List<User> getUserList() {
        return userService.getUserList();
    }
}

@RestController
@RequestMapping("/api")
public class OrderController {
    @Autowired
    private OrderService orderService;

    @GetMapping("/orderList")
    public List<Order> getOrderList() {
        return orderService.getOrderList();
    }
}

5. 前端页面

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>用户ID</th>
                    <th>用户名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in userList" :key="user.id">
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.age }}</td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th>订单ID</th>
                    <th>用户ID</th>
                    <th>商品名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="order in orderList" :key="order.id">
                    <td>{{ order.id }}</td>
                    <td>{{ order.user_id }}</td>
                    <td>{{ order.product_name }}</td>
                    <td>{{ order.price }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            userList: [],
            orderList: []
        }
    },
    mounted() {
        this.getUserList()
        this.getOrderList()
    },
    methods: {
        getUserList() {
            axios.get('/api/userList')
                .then(res => {
                    this.userList = res.data
                })
                .catch(err => {
                    console.error(err)
                })
        },
        getOrderList() {
            axios.get('/api/orderList')
                .then(res => {
                    this.orderList = res.data
                })
                .catch(err => {
                    console.error(err)
                })
        }
    }
}
</script>

以上代码仅供参考，实际应用时需要根据具体的业务场景进行调整。