一个页面查询两种表时,最好使用联合查询(图片上传)

一个页面查询两种表时,最好使用联合查询

首页表:

在这里插入图片描述

详情表

在这里插入图片描述
查询时两张表的这些字段需要拿到,故使用联合查询很方便,没有代码冗余,不适用联合查询,而是单独两张表各查一遍,这样一来,代码肯定是冗余的,二来,查询进行两次,会很耗资源。

前台页面如下:

在这里插入图片描述
mapper文件里 的SQL语句:

<!--根据id全部查询-->
    <select id="getId" resultMap="ResultMap">
        SELECT
            *
        FROM
            wx_main_home h
        LEFT JOIN wx_main_detail d ON d.home_id = h.id
        WHERE
            h.id = #{id}
    </select>

先在数据库里试一下:

果不其然,查出来了
在这里插入图片描述
说明我们的查询语句是没问题的,一般在开发时,最好在数据库中试试,这样可以保证SQL出错的概率为零;

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在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的模板语法和数据绑定来渲染页面,显示用户信息和用户角色信息的格。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

皮皮攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值