vue-element-ui前后端交互实现分页查询

大体思路：

①添加element-ui分页组件

②在data里定义几个参数用来存放当前页，每页条数，条目总数以及存放后端分页查询的结果

③后端使用分页查询，controller层接收当前页以及每页条数的参数

④前端编写方法发送请求到controller层调用分页查询的方法，并传参当前页及每页条数

⑤接收查询结果并存放进之前定义好的参数中

⑥给前端点击上下页等功能绑定事件，事件调用分页查询的方法并传参

前端：

①添加element-ui分页组件

②在data里定义几个参数用来存放当前页，每页条数，条目总数以及存放后端分页查询的结果

newsData:[], //存放接收后端的数据pageNum: 1, // 当前页 默认设值1pageSize: 5, // 每页显示条目 默认设置5total: '' ,// 条目总数

③后端使用分页查询，controller层接收当前页以及每页条数的参数

controller层

service层

④前端编写方法发送请求到controller层调用分页查询的方法，并传参当前页及每页条数

⑤接收查询结果并存放进之前定义好的参数中

loadPage(pageNum,pageSize) {let url = '/news/page';axios.get(url,{params:{// pageNum:this.pageNum,// pageSize:this.pageSizepageNum,pageSize}}).then(resp => {resp.data.list.getthis.newsData = resp.data.list;this.total = resp.data.total;// this.total = resp.data.list.total;console.log(resp.data);});}

⑥给前端点击上下页等功能绑定事件，事件调用分页查询的方法并传参

handleSizeChange(val) {this.pageSize = val;this.loadPage(this.pageNum,this.pageSize);console.log(`每页 ${val} 条`);},handleCurrentChange(val) {this.pageNum = val;this.loadPage(this.pageNum,this.pageSize);console.log(`当前页: ${val}`);},

功能展示：

我的前端代码：

发布新闻编辑立即创建重置取 消确 定删除new Vue({el:"#root",data(){return{newsData:[],pageNum: 1, // 当前页pageSize: 5, // 每页显示条目total: '' ,// 条目总数dialogFormVisible: false,form: {delivery: false,type: [],nid:'',ntid:'',ntitle:'',nauthor:'',ncreateDate:'',npicPath:'',ncontent:'',nmodifyDate:'',nsummary:''},rules: {nid: [{ required: true, message: '请输入新闻编号', trigger: 'blur' },{ min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }],ntid: [{ required: true, message: '请输入主题编号', trigger: 'blur' }],ntitle: [{ required: true, message: '请输入新闻标题', trigger: 'blur' }],nauthor: [{ required: true, message: '请输入新闻作者', trigger: 'blur' }],ncreateDate: [{ type: 'date', required: true, message: '请选择创建日期', trigger: 'change' }],npicPath: [{ required: true, message: '请输入图片路径', trigger: 'blur' }],ncontent: [{ required: true, message: '请输入新闻内容', trigger: 'blur' }],nmodifyDate: [{ type: 'date', required: true, message: '请选择修改时间', trigger: 'change' }],nsummary: [{ required: true, message: '请输入备注信息', trigger: 'blur' }],},formLabelWidth: '120px'}},methods: {onClose() {this.form = '';},clean() {// this.form = '';this.dialogFormVisible = true;// this.show();},show() {this.dialogFormVisible = true;},toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;},handleEdit(index, row) {console.log(index, row);},getDate(index){this.form = this.newsData[index];},handleDelete(index, row) {this.$confirm('是否确定删除此条数据','提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'// center: true}).then(() => {let url = `/news/delete/${row.nid}`;axios.delete(url).then(resp => {this.loadAll();console.log(resp.data);});this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});// console.log(index, row);},loadAll() {//then()回调函数,获取后台响应的数据let url = '/news/findAll';axios.get(url).then(resp => {this.newsData = resp.data;console.log(resp.data);});},loadUpdate() {let url = 'news/update';// let news = JSON.parse(this.form);axios.put(url, this.form).then(resp => {this.loadAll();console.log(resp.data);});},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},loadAdd() {let url = 'news/insert';axios.post(url,params).then(resp => {console.log(resp.data);});},handleSizeChange(val) {this.pageSize = val;this.loadPage(this.pageNum,this.pageSize);console.log(`每页 ${val} 条`);},handleCurrentChange(val) {this.pageNum = val;this.loadPage(this.pageNum,this.pageSize);console.log(`当前页: ${val}`);},loadPage(pageNum,pageSize) {let url = '/news/page';axios.get(url,{params:{// pageNum:this.pageNum,// pageSize:this.pageSizepageNum,pageSize}}).then(resp => {resp.data.list.getthis.newsData = resp.data.list;this.total = resp.data.total;// this.total = resp.data.list.total;console.log(resp.data);});}},created(){this.loadPage(this.pageNum,this.pageSize);// this.loadAll();}})