结合Laiui+Vue+axios进行分页

结合Laiui+Vue+axios进行分页

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 导入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 导入layui.css -->
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<!-- 导入layui.js -->
		<script src="layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/infoStyle.css" />

	</head>
	<body>
		<div class="content">
			<div class="content-left">
				<ul class="content-left-ul">
					<li v-for="info in infodata">
						<div class="content-left-ul-li-contentdiv">
							<a :href="info.gsInfoLink" class="imglink">
								<img :src="info.gsInfoAdress">
							</a>
							<div class="content-left-ul-li-contentdiv-title">
								<a :href="info.gsInfoLink">{{info.gsInfoTitle}}</a>
								<span>{{info.gsInfoDate}}</span>
							</div>
							<div class="info">
								<span>{{info.gsClassifyName}}</span>
								{{info.gsInfoContent}}
							</div>
						</div>
					</li>
				</ul>
				<div class="content-left-laypage">
					<div id="test1"></div>
				</div>
			</div>
		</div>
		<script>
			var gameStrategy = new Vue({
				el: '#bigdiv',
				data: {
					infodata: {},
					infocount: null
				},
				mounted() {
					this.pagination1()
				},
				methods: {
					pagination1(page, rows) {
						axios.get("http://localhost:8080/getGameInfo", {
							params: {
								page: page,
								rows: rows
							},
						}).then((response) => {
							this.infodata = response.data.gsGameInfoList
							this.infocount = response.data.pageCount
							initPage(this.infocount);
						})
					},
					pagination(page, rows) {
						axios.get("http://localhost:8080/getGameInfo", {
							params: {
								page: page,
								rows: rows
							},
						}).then((response) => {
							this.infodata = response.data.gsGameInfoList
							this.infocount = response.data.pageCount
						})
					}
				}

			})

			function initPage(conunt) {
				layui.use('laypage', function() {
					var laypage = layui.laypage;
					//执行一个laypage实例
					laypage.render({
						elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
							,
						count: conunt //数据总数，从服务端得到
							,
						first: '首页',
						last: '尾页',
						jump: function(obj, first) {
							console.log(obj)
							if (!first) {
								gameStrategy.pagination(obj.curr, obj.limit)

							}
						}
					});
				});
			}
		</script>
	</body>
</html>

Layui下载地址：https://www.layui.com/

IDEA：

1.Controll层

@Controller
public class TestController {
    @Resource
    GsGameInfoService gsGameInfoService;

    @RequestMapping(value = "/getGameInfo")
    @ResponseBody
    public GameInfoResqVo getGameInfo(
                                        @RequestParam(defaultValue="1") Integer page,
                                        @RequestParam(defaultValue="10") Integer rows){
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Date date = new Date();
        PageInfo<GsGameInfo> resultpage=gsGameInfoService.selectByUpdateAndClassifyName(simpleDateFormat.format(date),"资讯",page,rows);

        GameInfoResqVo gameInfoResqVo = new GameInfoResqVo();
        gameInfoResqVo.setPageCount((int) resultpage.getTotal());
        gameInfoResqVo.setGsGameInfoList(resultpage.getList());

        return gameInfoResqVo;
    }
  }

2.Service层：

@Service
public class GsGameInfoServiceImpl implements GsGameInfoService {
    @Resource
    GsGameInfoMapper gsGameInfoMapper;


    @Override
    public PageInfo<GsGameInfo> selectByUpdateAndClassifyName(String date, String name,Integer page,Integer rows) {
        PageHelper.startPage(page,rows);
        List<GsGameInfo> infolist = gsGameInfoMapper.selectByUpdateAndClassifyName(date,name);
        PageInfo<GsGameInfo> pageresult= new PageInfo<>(infolist);
        return pageresult;
    }
}

3.pojo层

@Data
public class GameInfoResqVo {
    Integer pageCount;
    List<GsGameInfo> gsGameInfoList;
}
posted @ 2020-11-01 09:01  龙吟九枭  阅读(566)  评论(0)    收藏  举报