前端使用的是vue2,组件库使用的是vux。
实现上拉获取更多的界面:
到底的时候,会显示没有更多数据了
前端的代码:
<template>
<div>
<Header></Header>
<scroller lock-x height="600px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
<div>
<group>
<div v-for="l in loginLog">
<cell title="id" :value="l.id"></cell>
</div>
</group>
<div v-if="hasLog == 0">
<load-more :show-loading="false" tip="上拉获取更多"></load-more>
</div>
<div v-if="hasLog == 1">
<load-more :show-loading="true" tip="loading"></load-more>
</div>
<div v-if="hasLog == 2">
<load-more :show-loading="false" tip="没有更多数据了"></load-more>
</div>
</div>
</scroller>
<Footer></Footer>
</div>
</template>
<script >
import Footer from './Footer'
import Header from '../Header'
import {Group , Cell, Scroller,LoadMore} from 'vux'
import { getLoginLog } from '../../api/api'
export default {
data(){
return{
onFetching: false,
logNum:10,
loginLog:[],
hasLog:0
}
},
components:{
Group,Cell,Header,Footer,Scroller,LoadMore
},
methods:{
onScrollBottom () {
if (this.onFetching) {
// do nothing
} else {
this.onFetching = true
this.hasLog = 1 //loading true
setTimeout(() => {
this.logNum += 10
var params = {logNum:this.logNum}
getLoginLog(params).then((response) => {
if (response.code == '000') {
this.hasLog = false;
console.log(response.message);
this.loginLog = response.result;
this.hasLog = 2 //没有更多数据了 false
}
console.log(response.message);
this.loginLog = response.result;
});
this.onFetching = false
}, 2000)
}
}
},
created(){
var params = {logNum:this.logNum}
getLoginLog(params).then((response) => {
console.log(response.result);
this.loginLog = response.result;
});
}
}
</script>
<style >
</style>
这里使用的是vux已经封装好了的scroller组件,刷新事件是用onFetching决定的。稍加改动就可以了,我是使用的hasLog控制的提示文字的状态。
后台的代码
SQL语句:由于这个项目使用的是sqlserver数据库,在SQL Server中要实现SQL分页,需要使用子查询来获取上一页的数据进行对比,进而获取最新的数据。使用子查询获取分页数据的语法格式如下:
"SELECT TOP [pageSize] * FROM [table] WHERE id NOT IN( SELECT TOP [preNum] id FROM [table] ORDER BY ID DESC ) ORDER BY ID DESC"
在navicat中测试了语句是没问题的,然后我写在mybatis中,却报错“'@P0' 附近有语法错误”。
网上查了之后发现错误原因是 在sqlserver中,Top后面是不允许使用问号占位符的,‘@P0’附近有语法错误就是由此引起的。解决方案:将Top后面的占位符改为具体数值,或者拼接字符串
因为我使用的是 #{}的写法,所以的sql语句中的确有 ? 的占位符。查找之后,发现mybatis 的sql语句中,赋值有2种方法: #{} 和 ${} ,他们获得的结果是一样的,只是 ${} 会有sql语句注入的问题。所以优先使用 #{} ,这里是因为行不通所以使用${} 。代码如下:
<select id="showLog" resultMap="BaseResultMap" parameterType="java.util.Map">
SELECT TOP ${pageSize} * FROM lyg_login_log
WHERE id NOT IN
(SELECT TOP ( ${pageSize} * ${pageNum}-1 ) id FROM lyg_login_log ORDER BY id DESC)
ORDER BY id DESC;
</select>
在前后台整合的时候,我发现一个问题:下拉和翻页其实是不一样的,下拉是包括之前的内容,而翻页是不包括的,所以做下拉刷新的时候,是要改一下SQL语句的。
应该是 SELECT TOP ${index} * FROM lyg_login_log ORDER BY id DESC;
由于要实现提示“没有更多数据的功能”,所以需要知道表中row的值,
获取表中条目数的SQL语句是:select count(id) from login_log
然后在controller中,可以这么写:
@RequestMapping(value = "getLoginLog",method = RequestMethod.POST)
@ResponseBody
public JsonResult showLog (@RequestBody HashMap<String,Object> map){ //logNum
// map.put("logNum",10);
//查询表中总条目数
int countRow = loginLogService.countRow();
//获得前端需要的条目数
String logNum = map.get("logNum").toString();
int i = Integer.parseInt(logNum);
//若总条目数小于需求数
if (countRow < i){
List<LoginLog> loginLogs = loginLogService.showLog(map);
return new JsonResult(JsonResult.FAILURECODE,"没有更多数据了 "+countRow,loginLogs);
}
List<LoginLog> loginLogs = loginLogService.showLog(map);
return new JsonResult(JsonResult.SUCCESSCODE,"成功",loginLogs);
}
然后就大功告成啦!