Vux+ssm 实现上拉获取更多信息的功能（前端界面+后台逻辑代码）

前端使用的是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 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);
    }

然后就大功告成啦！