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

悠悠 2022-05-19 04:39 136阅读 0赞

前端使用的是vue2，组件库使用的是vux。

实现上拉获取更多的界面：

![70][]

![70 1][]

到底的时候，会显示没有更多数据了

## 前端的代码： ##

<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);
        }

然后就大功告成啦！

[70]: /images/20220519/22482b72739149cfa0ea25c593cd0961.png
[70 1]: /images/20220519/71762d522ca844b38d85634ffb599622.png