JAVA开发学习-day22
1. 查询与分页
1.1 前端
在表单上方添加两个输入框和查询按钮，用于查询数据
<el-input v-model="checkObj.name" style="width: 150px" placeholder="请输入查询的姓名" />
<el-input v-model="checkObj.phoneNumber" style="width: 150px" placeholder="请输入查询的手机号" />
<el-button type="primary" @click="checkData">查询</el-button>
在表单下面添加分页组件
<!-- current-page当前页数 -->
<!-- size:每页的条数 -->
<el-pagination:page-size = "checkObj.size":current-page="checkObj.page"background layout="prev, pager, next" :total="total" @current-change="checkData" />
checkObj对象用于接收输入框中输入的数据和当前的页码，checkData为点击查询按钮或点击分页执行的方法，total为查询数据的总行数
定义checkObj对象和total
<script>const total = ref(100)const checkObj = ref({size:3,page:1})
</script>
实现checkData方法，参数为val，当点击查询按钮时val不是number类型，点击分页按钮时val为number类型，由val的类型来判断点击的是哪一个按钮
<script>
const checkData = async (val) => {//获取当前页数if(typeof val == 'number'){checkObj.value.page = val;}//查询数据let result = await easyapi.getSearch('/api/member', checkObj.value)//更新表格中的数据tableData.value = result.data.list;total.value = result.data.count;
}
</script>
将onMounted中的实现改为调用checkData方法
<script>
onMounted(async function () {checkData();
})
</script>
1.2 后端
因为接收的数据包括具体的数据对象的属性值和分页的数据，所以先在util包中创建工具类Page
public class Page {private int size;private int page = -1;private int start;public int getSize() {return size;}public void setSize(int size) {this.size = size;}public int getPage() {return page;}public void setPage(int page) {this.page = page;}public int getStart() {//查询的起始位置及页码-1乘以每页的大小return (page - 1) * size;}public void setStart(int start) {this.start = start;}
}
在接收多个参数时，Mapper实现方法的参数必须要使用@Param标识符来起别名，在.xml文件中也必须使用规定的别名
@Mapper
public interface IMemberDao {//返回查询的对象List<Member> getMember(@Param("member") Member member,@Param("page") Page page);//返回查询的总页数int getMemberCount(@Param("member") Member member);
}
在.xml文件中实现sql语句
<sql id="getMemberWhere"><where><if test="member.name != null and member.name != ''"><bind name="nameLike" value="'%' + member.name + '%'"/>name like #{nameLike}</if><if test="member.phoneNumber != null and member.phoneNumber != ''"><bind name="phoneNumberLike" value="'%' + member.phoneNumber + '%'"/>and phoneNumber like #{phoneNumberLike}</if>and isDel = 0</where>
</sql><select id="getMember" resultType="com.easy.bean.Member">select * from members<include refid="getMemberWhere"></include><if test="page.page >=0 and page.size > 0">limit #{page.start}, #{page.size}</if>
</select><select id="getMemberCount" resultType="int">select count(*) from members<include refid="getMemberWhere"></include>
</select>
当我们的sql语句需要复用时，可以在<sql>标签中写下需要服用的语句，当需要使用时，使用<include>标签，将refid设置为<sql>标签的id就可以复用sql语句
Service层的实现省略
Controller实现
@RestController
public class MemberController {@AutowiredIMemberService memberS;@GetMapping("member")public CommonResult getMember(Member member, Page page){List<Member> list = memberS.getMember(member,page);int count = memberS.getMemberCount(member);//使用map来存储查询的列表和总行数HashMap map = new HashMap<>();map.put("list", list);map.put("count", count);return CommonResult.success(map);}
}
由此实现了分页和查询
