平台做网站点击,免费外域网域名,设计手机商城网站建设,高端网站建设费用情况目录
分页组件使用
API
组件代码示例
使用思路#xff1a;
前端示例代码
html script
后端示例代码
Controller
Impl
xml
总结 分页组件使用
使用Arco Design之前需要配置好搭建前端环境可以看我另外一篇文章#xff1a;
手把手教你 创建Vue项目并引入Arco Desi…目录
分页组件使用
API
组件代码示例
使用思路
前端示例代码
html script
后端示例代码
Controller
Impl
xml
总结 分页组件使用
使用Arco Design之前需要配置好搭建前端环境可以看我另外一篇文章
手把手教你 创建Vue项目并引入Arco Design组件库
Arco Design Vue - a-pagination API 详细的可以可以点击此网站查看具体用法 查看源代码 API 组件代码示例
本代码是一个小项目的示例 使用思路 首先获取好总的条数 也就是实例代码中的 --- :totaltotal对total进行属性绑定其次获取当前页数 --- :currentcurrentPage 最后就是获取每页显示多少页 --- :page-sizepageSize还有就是创建页面改变触发的函数 --- changehandleChange 前端示例代码
省略了很多代码就放了关键的分页组件代码。
html
templatea-pagination changehandleChange:totaltotal :currentcurrentPage :page-sizepageSize show-total/
/template script
script setup
import {ref } from vue;
import {useRouter} from vue-router
import axios from axios;
import {message} from ant-design-vue;
import qs from qs;// 查询参数响应式变量
const searchParam ref({keyword: ,internshipMonthDuration: ,weekDay: ,educationalRequirements: ,employmentOpportunities: ,corporateLevel: ,}
)const items ref([])
//定义变量保存分页器的当前页数
let currentPage ref(1);
//定义变量保存分页器的每页显示多少条 这里我设置了一个每页显示8条
let pageSize ref(8);
//定义变量保存数据总条目数
let total ref();// 根据条件从后端获取数据总条数
const getRecordCount () {// 使用qs.stringify() 是将js对象转换为字符串let data qs.stringify(searchParam.value);axios.get(http://localhost:8080/v1/Psearch/selectRecordCount? data).then((res) {if (res.data.code 2000) {console.log(查询的条数为 res.data.data)total.value res.data.data;} else {message.error(加载失败 res.data.msg)}});
}// 加载数据
const loadData () {console.log(LoadData执行 当前查询条件searchParam.value searchParam.value);getRecordCount();console.log(total total.value)//定义变量保存分页器的当前页数 放入查询条件中searchParam.value.currentPage currentPage.value;//定义变量保存分页器的每页显示多少条 放入查询条件中searchParam.value.pageSize pageSize.value;let data qs.stringify(searchParam.value)//分页条件查询axios.get(http://localhost:8080/v1/Psearch/selectAllRecords? data).then((res) {if (res.data.code 2000) {console.log(查询的记录为 res.data.data)items.value res.data.data;for (const element of items.value) {if (element.educationalRequirements 10) {element.educationalRequirements 大专;} else if (element.educationalRequirements 20) {element.educationalRequirements 本科;} else if (element.educationalRequirements 30) {element.educationalRequirements 研究生;}}} else {message.error(加载失败 res.data.msg)}});
}//页面变化更新数据 点击指定页码时,page是指代这个指定的页码
const handleChange (page) {//点击其他页时候更新当前页码currentPage.value page;
}
/script 注意!!!!!! 必须要加这个 handleChange(page) 函数不然即时分页了点击指定页码 不会跳转到指定页码 const handleChange (page) { //点击其他页时候更新为点击的指定页码 currentPage.value page; } 不设置这个函数更新当前页码点击了不会跳转到第二页 后端示例代码
Controller
RestController
RequestMapping(/v1/Psearch/)
Slf4j
public class PracticeSearchController {Autowiredprivate PracticeSearchService practiceSearchService;GetMapping(selectRecordCount)public JsonResult selectRecordCount(PracticeSearchRecordsParam practiceSearchRecordsParam){log.info(前端传入搜索参数{},practiceSearchRecordsParam);Integer count practiceSearchService.selectRecordCount(practiceSearchRecordsParam);log.info(后端返回搜索记录的总条数为:{},count);return JsonResult.ok(count);}GetMapping(selectAllRecords)public JsonResult selectAllRecords(PracticeSearchListParam practiceSearchListParam){log.info(前端传入搜索参数{},practiceSearchListParam);ListPracticeSearchVO recordsList practiceSearchService.selectAllRecords(practiceSearchListParam);return JsonResult.ok(recordsList);}}
Impl
Slf4j
Service
public class PracticeSearchServiceImpl implements PracticeSearchService {Autowiredprivate PracticeSearchMapper practiceSearchMapper;/*** 根据查询参数获取实践搜索记录的数量。** param param 实践搜索的参数对象用于指定查询条件。* return 返回实践搜索记录的总数。*/Overridepublic Integer selectRecordCount(PracticeSearchRecordsParam param) {// 调用实践搜索Mapper接口根据参数查询实践搜索记录的数量ListPracticeSearchVO list practiceSearchMapper.selectRecordCount(param);// 记录查询到的记录数用于日志记录和问题排查log.info(查询记录数 list.size());// 返回查询到的记录数return list.size();}/*** 根据实践搜索参数查询所有记录。** param practiceSearchListParam 实践搜索列表参数包含分页和过滤条件。* return 返回符合条件的实践搜索结果列表。*/Overridepublic ListPracticeSearchVO selectAllRecords(PracticeSearchListParam practiceSearchListParam) {// 获取分页大小Integer pageSize practiceSearchListParam.getPageSize();// 获取当前页码Integer currentPage practiceSearchListParam.getCurrentPage();// 计算数据库查询的起始位置以实现分页查询 (前端传过来的页码是从第一页开始的所以currentPage要减 1,数据库分页是从第 0 页开始)currentPage (currentPage - 1) * (pageSize - 1);// 更新当前页码用于后续的分页处理practiceSearchListParam.setCurrentPage(currentPage);// 日志记录查询的分页信息log.info(pageSize {} currentPage {}, pageSize, currentPage);// 调用Mapper查询所有符合条件的记录ListPracticeSearchVO list practiceSearchMapper.selectAllRecords(practiceSearchListParam);// 日志记录查询结果log.info(查询到的所有记录 {}, list);// 返回查询结果return list;}
}xml
?xml version1.0 encodingUTF-8 ?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//EN http://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecn.tedu.search.mapper.PracticeSearchMapperselect idselectRecordCount resultTypecn.tedu.search.pojo.vo.PracticeSearchVOSELECT r.title_name,r.corporate_name,r.corporate_level,r.photo_show,p.salary,p.welfare,p.job_detail,p.educational_requirements,p.employment_opportunities,c.cover_photo,c.company_sizeFROM recruitment_information rINNER JOIN position_detail p ON r.id p.recruitment_information_idINNER JOIN company c ON r.company_id c.idWHERE p.job_type 实习if testkeyword ! null and keyword ! AND (r.title_name LIKE CONCAT(%, #{keyword}, %)OR r.corporate_name LIKE CONCAT(%, #{keyword}, %)OR p.job_detail LIKE CONCAT(%, #{keyword}, %))/ifif testinternshipMonthDuration ! null and internshipMonthDuration ! AND p.internship_month_duration #{internshipMonthDuration}/ifif testeducationalRequirements ! null and educationalRequirements ! AND p.educational_requirements #{educationalRequirements}/ifif testemploymentOpportunities ! null and employmentOpportunities ! AND p.employment_opportunities #{employmentOpportunities}/ifif testcorporateLevel ! null and corporateLevel ! AND r.corporate_level #{corporateLevel}/ifif testweekDay ! nullAND p.week_day #{weekDay}/if/selectselect idselectAllRecords resultTypecn.tedu.search.pojo.vo.PracticeSearchVOSELECT r.title_name,r.corporate_name,r.corporate_level,r.photo_show,p.salary,p.welfare,p.job_detail,p.educational_requirements,p.employment_opportunities,c.cover_photo,c.company_sizeFROM recruitment_information rINNER JOIN position_detail p ON r.id p.recruitment_information_idINNER JOIN company c ON r.company_id c.idWHERE p.job_type 实习if testkeyword ! null and keyword ! AND (r.title_name LIKE CONCAT(%, #{keyword}, %)OR r.corporate_name LIKE CONCAT(%, #{keyword}, %)OR p.job_detail LIKE CONCAT(%, #{keyword}, %))/ifif testinternshipMonthDuration ! null and internshipMonthDuration ! AND p.internship_month_duration #{internshipMonthDuration}/ifif testeducationalRequirements ! null and educationalRequirements ! AND p.educational_requirements #{educationalRequirements}/ifif testemploymentOpportunities ! null and employmentOpportunities ! AND p.employment_opportunities #{employmentOpportunities}/ifif testcorporateLevel ! null and corporateLevel ! AND r.corporate_level #{corporateLevel}/ifif testweekDay ! nullAND p.week_day #{weekDay}/ifLIMIT #{currentPage},#{pageSize}/select
/mapper注 使用分页 SQL 假设 每页显示10条数据 查询第一页的10条记录 select * user limit 0 10 (查询第1条到第10条) or select * user limit 10 (查询第1条到第10条) 查询第二页的10条记录 select * user limit 10 10 (查询第11条到第20条) limit 后面两个参数的具体含义 LIMIT #{currentPage},#{pageSize} limit 当前页数* 每页显示的条数(起始数据条数), 每页最大显示的记录数(从起始数据的下一条开始的偏移量) 在MyBatis中LIMIT之后的语句不允许的变量不允许进行算数运算会报错。 如 LIMIT (#{currentPage}-1)*#{pageSize},#{pageSize}; // 错误 LIMIT ${(currentPage-1)*pageSize},${pageSize}; 正确 总结 确定好需要显示的条数(total)。当前页数(currentPage),可以指定好默认是第0页本文示例代码是从第1页开始。每页显示多少条记录(pageSize ) --- 一开始就要定义不然页面加载数据时候就要报错。创建好页面变化时触发的函数 handleChange()更新点击后的页码。 演示一下最终效果啦
