spring boot + Vue.js实现表格分页

最新推荐文章于 2024-05-29 09:13:35 发布

lillllllll

最新推荐文章于 2024-05-29 09:13:35 发布

阅读量423

点赞数

分类专栏： SpringBoot Web开发 Java EE开发文章标签： vuejs spring boot

本文链接：https://blog.csdn.net/lillllllll/article/details/103208306

版权

Java EE开发同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

SpringBoot Web开发

8 篇文章 0 订阅

订阅专栏

前台页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <meta charset="UTF-8"> -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- <script src="../js/vee-validate.js"></script> -->
<!-- <script src="https://unpkg.com/vee-validate@2.0.0"></script> -->
<script src="https://unpkg.com/vee-validate@2.2.15/dist/vee-validate.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
Vue.use(VeeValidate);
</script>
<title></title>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<button onclick="clearB()" class="btn btn-primary btn-xs"
					id="insertButton" style="width: 120px; height: 30px"
					data-toggle="modal" data-target="#userInsertAndUpdateDialog">添加用户</button>
				<div class="modal fade" id="userInsertAndUpdateDialog"
					data-backdrop="static" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content" id="contenter">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
							</div>
							<div class="modal-body">
								<form class="form-horizontal" id="user_form"
									th:action="@{/user}" method="get">
									<div class="form-group">
										<label for="id" class="col-sm-2 control-label">用户代码</label>
										<div class="col-sm-10">
											<input type="text" th:readonly="true" class="form-control"
												id="user_id" placeholder="客户代码" name="id" />
										</div>
									</div>
									<div class="form-group">
										<label for="user_name" class="col-sm-2 control-label">用户名</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="user_name"
												v-validate="'required'" placeholder="客户名称" name="name" /> <span
												style="color: red" v-show="errors.has('name')">{{'不能为空'}}</span>
										</div>
									</div>

									<div class="form-group">
										<label for="user_age" class="col-sm-2 control-label">年&nbsp&nbsp&nbsp&nbsp龄</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="user_age"
												placeholder="年龄" name="age" />
										</div>
									</div>
								</form>

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal" onclick="clear()">关闭</button>
								<button type="button" id="modifybutton" class="btn btn-primary"
									v-on:click="addUser">添加</button>
							</div>
						</div>
					</div>
				</div>
				<table class="table" id="usertable">
					<thead>
						<tr>
							<th>编号</th>
							<th>用户名</th>
							<th>年龄</th>
							<th>状态</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(user,index) in userlist"
							v-bind:class="{success: index % 2 !=0,info: index % 2 ==0}"
							@click="change">
							<td>{{user.id}}</td>
							<td>{{user.name}}</td>
							<td>{{user.age}}</td>
							<td>default</td>
						</tr>
						<tr>
							<td rowspan="2"></td>
						</tr>
					</tbody>
				</table>
				<div id=pager>
					<nav class="pagination" role="navigation" aria-label="pagination">
						<ul class="pagination">
							<li v-bind:class="{disabled:page.isFirstPage}"><a
								v-on:click="gopage(1)" href="#">首页</a></li>

							<li v-bind:class="{disabled:page.isFirstPage}"><a
								v-on:click="gopage(page.current - 1)" href="#">上一页</a></li>

							<li v-if="page.navigateFirstPage > 1"><a href="#">&hellip;</a></li>

							<li v-for="(item,index) in page.navigatepageNums"
								v-bind:class="{active:item==page.current}"><a
								v-on:click="gopage(item)" href="#">{{item}}</a></li>

							<li v-if="page.navigateLastPage < page.totalPages"><a
								href="#">&hellip;</a></li>

							<li v-bind:class="{disabled:page.isLastPage}"><a
								v-on:click="gopage(page.current + 1)" href="#">下一页</a></li>
							<li v-bind:class="{disabled:page.isLastPage}"><a
								v-on:click="gopage(page.totalPages)" href="#">末页</a></li>
						</ul>
					</nav>
				</div>

			</div>
			<!-- "row clearfix"> -->
		</div>
		<!-- col-md-12 column" -->
	</div>
	<!-- container -->

	<script>
Vue.use(VeeValidate);
 new Vue({
	  el: '#contenter',
	  data:{
		ccc: "test",	    
	  },
	  methods:{
		  addUser:function(){
				$.post("/user/insert", $("#user_form").serialize(), function(
						data) {
					if (data == "OK") {
						alert("添加成功！");
						window.location.reload();
					} else {
						alert("添加失败！");
						window.location.reload();
					}
				});	    	   
	      }
	  }
	 });
 
var mm=new Vue({
  el: '#usertable',
  data:{
	userlist:null
  },
  
  mounted () {
   $.post('/user/vue',{cpage:1},function(data) {
	         mm.userlist=data.rows;
	         pager.page=data;	        
		});       
  },
  methods:{	  		 
	  change:function(){		  
		  this.isActive=!this.isActive;
		 // alert(this.isActive);
	  },
	  created: function(){
          //中文验证提示
          this.$validator.localize('zh_CN', dictionary);
      },     
  }
});

var pager=new Vue({
	  el: '#pager',
	  data:{
		cpage:1,	
		page: null,
		userlist:null,
	    isActive:true
	  }, 

	  methods:{	  
			gopage:function(pp){  
				if (pp>this.page.totalPages)
				   pp=this.page.totalPages;
				if (pp<=0)
				   pp=1;				
			  $.post('/user/vue',{cpage:pp},function(data) {
			         mm.userlist=data.rows;
			         pager.page=data;			
			        
				});       
		   },		  
		 }
	});

</script>
</body>
</html>

后台java代码：

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired  //注入，xml方式
	private UserMapper userMapper;
        @RequestMapping("/vue")
	@ResponseBody
	PageVue getuserbyid(Integer cpage) {				
		System.out.println("cpage= "+cpage);
		//cpage当前页号
		if (cpage==null) {			
			cpage=1;
		}
		int pageSize=5;   //页面显示行数，自行设置
		int navigatePages=6;//滑动窗口中格子个数，自行设置
		int total=userMapper.getTotal();
		
		int startrow=(cpage-1)*pageSize;		
		List<User> rows=userMapper.selectusersPage(startrow, pageSize);		
	List<String> columns=userMapper.getUserColumn();		
		PageVue<User> page =new PageVue<User>(total, pageSize, navigatePages, cpage, rows,columns);
	    return page;		 
	}

	@RequestMapping("/insert")
	@ResponseBody
	String insert(User user) {		
		int num=userMapper.insert(user);
		 if(num > 0){
		        return "OK";
		    }else{
		        return "FAIL";
		    }
	}

}

分页类，具体实现思路见这篇博客https://blog.csdn.net/lillllllll/article/details/102636208

package com.demo.dao;
import java.util.List;
import java.util.Map;
public class PageVue<T> {   
	private int totalRows;	//总行数
	private int current;    //当前页	
	private int totalPages; //总页数
	private int pageSize;     // 每页行数
	private List<String>  tableColumns;
	public List<String> getTableColumns() {
		return tableColumns;
	}
	public void setTableColumns(List<String> tableColumns) {
		this.tableColumns = tableColumns;
	}
	private List<T> rows;     // 结果集，储存一个页面的数据记录
	private int[] navigatepageNums;	//所有导航页号
	private int navigatePages; //导航页码数，即滑动窗口个数
	
    //导航条上的第一页
    private int navigateFirstPage;
    //导航条上的最后一页
    private int navigateLastPage;	    
    //是否为第一页
    private boolean isFirstPage = false;  
	//是否为最后一页
    private boolean isLastPage = false;

    
    //构造函数
    public PageVue(int totalRows,int pageSize,int navigatePages, int current, List<T> rows,List<String>  tableColumns) {
    	//设置5个属性
    	this.totalRows=totalRows;
    	this.pageSize=pageSize;
    	this. navigatePages=navigatePages;
    	this.current=current;
    	this.rows=rows;  
    	this.tableColumns=tableColumns;
    	//设置8个属性
    	this.calcProperties();
    }
    //计算滑动窗口中的页号，不止一种生成策略，这里采用
    //http://git.oschina.net/free/Mybatis_PageHelper提供的方案来实现
   private int[] calcNavigatepageNums() {
        //当总页数小于或等于导航页码数时
        if (totalPages <= navigatePages) {
            navigatepageNums = new int[totalPages];
            for (int i = 0; i < totalPages; i++) {
                navigatepageNums[i] = i + 1;
            }
        } else { //当总页数大于导航页码数时
            navigatepageNums = new int[navigatePages];
            int startNum = current - navigatePages / 2;
            int endNum = current + navigatePages / 2;

            if (startNum < 1) {
                startNum = 1;
                //(最前navigatePages页
                for (int i = 0; i < navigatePages; i++) {
                    navigatepageNums[i] = startNum++;
                }
            } else if (endNum > totalPages) {
                endNum = totalPages;
                //最后navigatePages页
                for (int i = navigatePages - 1; i >= 0; i--) {
                    navigatepageNums[i] = endNum--;
                }
            } else {
                //所有中间页
                for (int i = 0; i < navigatePages; i++) {
                    navigatepageNums[i] = startNum++;
                }
            }
        }
        return navigatepageNums;
    }
	
	//设置8个属性
    private void calcProperties() {
    	this.totalPages=(int) Math.ceil((double)totalRows/pageSize);
        this.isFirstPage = current == 1;
        this.isLastPage = current == totalPages || totalPages == 0;
//        this.hasPreviousPage = current > 1;
//        this.hasNextPage = current < totalPages;
        this.navigatepageNums=calcNavigatepageNums();
        //计算滑动窗口第一格的页号、最后一格页号
        if (navigatepageNums != null && navigatepageNums.length > 0) {
            this.navigateFirstPage = navigatepageNums[0];
            this.navigateLastPage = navigatepageNums[navigatepageNums.length - 1];   
        }
    }

    //getters setters
   ................
    
}

UserMapper接口，用MyBatis访问数据库

package com.demo.dao;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Repository;

import com.entity.User;
@Mapper
public interface UserMapper {
	List<User> queryAllUser();
	List<User> findnameandage(String name, int age);
	List<User> findnameandageMap(Map map);
	List<User> selectusersPage(int startrow,int num);
	int getTotal();
	@Select("select * from user where id=#{id}")
	User getUserById(Integer id);
	@Update("update user set name=#{name}, age=#{age} where id=#{id}")
	int update(User user);
	@Delete("delete from user where id=#{id}")
	int delete(int id);
	@Insert("insert into user (name,age) value(#{name},#{age})")
	int insert(User user);
	@Select("select COLUMN_NAME from information_schema.COLUMNS where TABLE_SCHEMA = (select database()) and table_name = 'user'")
	List<String> getUserColumn();
}

package com.entity;

public class User {
	private Integer id;
	private String name;
	private int age;

        //getters,setters
        //......

}

运行效果如下：

添加记录效果：

lillllllll

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
spring boot + Vue.js实现表格分页

前台页面<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"><head><meta ...
复制链接

扫一扫

专栏目录