西安seo托管_永州网站开发_北京网站优化_全面网络推广营销策划

前后端数据跨域连接（分页查询并显示）

一、后端添加分页查询

1. 分页查询核心就是：每页需要显示多少条记录(pageSize)，当前查看第几页(pageNum);MySQL提供了分页函数limit m,n

select * from table limit (pageNum-1)*pageSize, pageSize;

修改之后代码：

2. UserService类添加selectPage方法

public List selectPage(Integer pageNum, Integer pageSize) {
return userMapper.selectPage(pageNum,pageSize);
}

3. 在UserController类，添加接口findPage

    //分页查询//接口路径user/page?pageNum=1&pageSize=10//RequestParam接受前台传过来的第几页，每页显示数
@GetMapping("/page")
public List<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize){pageNum=(pageNum-1)*pageSize;return userService.selectPage(pageNum,pageSize);}

用postman 测试报错

Parameter 'pageNum' not found. Available parameters are [arg1, arg0, param1, param2]

原因 mapper 中 没加@param注解
修改后

结果

二、 后端获取总记录数

1.UserMapper接口添加查询记录总数的方法selectTotal

 // 记录总数@Select("select count(*) from sys_user")Integer selectTotal();

修改之前Controller代码

 public Map<String,Object> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize){pageNum=(pageNum-1)*pageSize;List<UserEntity> data=userService.selectPage(pageNum,pageSize);Integer total=userMapper.selectTotal();Map<String,Object> res=new HashMap<>();res.put("data",data);res.put("total",total);return res;}

结果如图所示

跨域处理

本文在后端处理，项目新建一个文件夹存储设置如图所示

代码如下：

package com.example.demo.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter(){CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedOrigin("*");corsConfiguration.addAllowedMethod("*");UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**",corsConfiguration);return new CorsFilter(source);}}

前端测试如下

代码如下：

// An highlighted block
<template><div class="home"><el-container style="height: 100%; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)" ><el-menu :default-openeds="['1', '3']" background-color=rgb(48,65,86)text-color=#cccactive-text-color=redstyle="min-height:100%; overflow-x:hidden"router=""><div style="height:60px; line-height:60px; text-align:center"><img src="../assets/logo.png" style="width:20px;position:relative;top:5px;margin-right:5px"/><b style="color:white">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid red; line-height:60px"><el-dropdown style="width:100px; cursor:pointer"><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left:5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown>       </el-header><el-main style="text-align: left;"><div style="padding:10px"><el-input style="width:250px" suffix-icon="el-icon-search" placeholder="请输入名称搜索"></el-input><el-input style="width:250px" suffix-icon="el-icon-email" placeholder="请输入邮箱搜索"></el-input><el-input style="width:250px" suffix-icon="el-icon-position" placeholder="请输入地址搜索"></el-input><el-button style="margin-left:5px" type="primary">搜索</el-button></div>    <div style="margin:10px"><el-button type="primary">新增<i class="el-icon-circle-plus"></i></el-button><el-button type="danger">批量删除<i class="el-icon-remove"></i></el-button><el-button type="primary">导入<i class="el-icon-bottom"></i></el-button><el-button type="primary">导出<i class="el-icon-top"></i></el-button> </div><el-table:data="tableData"stripestyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-column fixed="right" label="操作">                         <template slot-scope="scope"><el-button type="success" size="small" icon="el-icon-edit">编辑</el-button><el-button type="danger" size="small"  icon="el-icon-delete">删除</el-button></template></el-table-column> </el-table><div style="padding:10px"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[5, 10, 15, 20]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination>
</div></el-main></el-container></el-container></div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',created(){//请求分页查询数据fetch("http://localhost:8080/user/").then(res=>res.json()).then(res=>{//查看跨域返回数据console.log(res)})},data(){const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item)}}
}
</script>

运行后结果如下

修改界面
修改代码如下

<template><div style="height:100%;"><el-container style="height: 100%; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']" style="min-height:100%; overflow-x:hidden"background-color=rgb(48,65,86)text-color=#cccactive-text-color=red><div style="height:60px; line-height:60px; text-align:center"><img src="../assets/logo.png" style="width:20px;position:relative;top:5px;margin-right:5px"/><b style="color:white">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid red; line-height:60px"><el-dropdown style="width:100px; cursor:pointer"><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left:5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown>       </el-header><el-main><div style="padding:10px"><el-input style="width:250px" suffix-icon="el-icon-search" placeholder="请输入名称搜索"></el-input><el-input style="width:250px" suffix-icon="el-icon-email" placeholder="请输入邮箱搜索"></el-input><el-input style="width:250px" suffix-icon="el-icon-position" placeholder="请输入地址搜索"></el-input><el-button style="margin-left:5px" type="primary">搜索</el-button></div><div style="margin:10px"><el-button type="primary">新增<i class="el-icon-circle-plus"></i></el-button><el-button type="danger">批量删除<i class="el-icon-remove"></i></el-button><el-button type="primary">导入<i class="el-icon-bottom"></i></el-button><el-button type="primary">导出<i class="el-icon-top"></i></el-button></div><el-table :data="tableData"><el-table-column prop="id" label="ID " width="80"></el-table-column><el-table-column prop="username" label="姓名 " width="80"></el-table-column><el-table-column prop="email" label="邮箱" width="120"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="nickname" label="昵称"></el-table-column><el-table-column prop="address" label="地址"></el-table-column>         <el-table-column fixed="right" label="操作" width="240">                         <template slot-scope="scope"><el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button><el-button type="danger" size="small"  icon="el-icon-delete">删除</el-button></template></el-table-column>         </el-table><div style="padding:10px"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 15, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></el-main></el-container></el-container></div></template><script>// @ is an alias to /srcimport HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',methods: {handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},data(){    return {tableData:[],total:0,pageNum:1,pageSize:5}},created(){//请求分页查询数据this.load();},methods: {edit(row){console.log(row);},  handleSizeChange(val) {/*传递过来当前是第几页*/console.log(`每页 ${val} 条`);this.pageSize=val;  //获取当前每页显示条数this.load();},handleCurrentChange(val) {/*传递过来当前是第几页*/console.log(`当前页: ${val}`);this.pageNum=val;   //获取当前第几页this.load();},//将请求数据封装为一个方法load() {//请求分页查询数据fetch("http://localhost:8080/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"").then(res=>res.json()).then(res=>{console.log(res)this.tableData=res.datathis.total=res.total})}},}</script><style>  .el-main {text-align: left;}</style>

结果如图所示

解决maven 窗口消失

点击右键 添加为maven 项目即可 。