Springboot + vue + Element Ui 구현 프로세스를 기반으로 프런트 엔드와 백 엔드에서 분리 된 페이징 쿼리

페이징 쿼리
프런트 엔드에서 페이징 쿼리 의 출현은 일정량의 데이터가있는 페이지를보다 합리적으로 표시 할 수 있도록하는 것입니다. 동시에 Element Ui에서 제공하는 페이징 컴포넌트와 결합하여 데이터에 대해 더 많은 작업을 수행 할 수 있습니다. 프런트 엔드에 표시됩니다.

프런트 엔드 코드

  <!--分页组件-->
 <div style="display:inline-block;">
          <el-pagination
            style="padding-top: 15px"
            @size-change="findSizeChange"
            @current-change="findPage"
            :current-page.sync="pageNow"
            :page-sizes="[2,4,6,8,10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

 export default {
    
    
    name: "Users",
    data() {
    
    
      return {
    
    
       //每页显示的条数
        size: 4,
        //总条数
        total: 0,
        //当前页码
        pageNow: 1,
        },
        methods: {
    
    
      //用来处理每页显示记录发生变化的方法
      findSizeChange(size) {
    
    
        console.log("当每页条数改变的时候" + size);
        //将val赋值给size
        this.size = size;
        //重新去后台查询数据
        this.findAll()
      },
      //当前页码改变的时候
      findPage() {
    
    
        console.log(this.pageNow)
        this.findAll(this.pageNow, this.size)
      },
        //查询所有用户信息
      findAll(page, size) {
    
    
        var that = this
        //首次进入该页面时会是created调用这个方法，是不会进行传参的
        page = page ? page : this.pageNow;
        size = size ? size : this.size;
        // this.$http.get("http://localhost:8989/zs/user/findByPage?pageNow="+page+"&pageSize="+size).then(response => {
    
    
        this.$http.get("http://localhost:8989/zs/user/findByPage",{
    
    
          params:{
    
    
            pageNow:page,
            pageSize:size
          }}
        ).then(response => {
    
    
          that.userList = response.data.users;
          that.total = response.data.total;
        }).catch(err => {
    
    
          console.log(err )
        })
        // console.log("显示用户所有信息" + response.data.users);
      },

백엔드 코드 (여기서는 Springboot가 예로 사용됨)

dao 层

//分页查询
    List<UserInfo> findByPage(@Param("start") Integer start,@Param("rows") Integer rows);

매퍼 파일

<!--分页查询-->
    <select id="findByPage" resultType="UserInfo">
        select id,  username, sex, dept,   birth, email,  phoneNumber, status, address,  name
        from vue.zs_userinfo limit #{start},#{rows}
    </select>

서비스

public interface UserInfoService {
    
    
//分页查询
  List<UserInfo> findByPage(Integer start, Integer rows);
}
@Service
@Transactional
public class UserInfoServiceImpl implements UserInfoService {
    
    
 @Override
	public List<UserInfo> findByPage(Integer pageNow, Integer rows) {
    
    
    	int start = (pageNow-1)*rows;
    	return userInfoDao.findByPage(start,rows);
  }

제어 장치

  /**
  * 分页查询方法
  */
 @GetMapping("findByPage")
 public Map<String, Object> findByPage(String pageNow,String pageSize) {
    
    
   Map<String, Object> result = new HashMap<>();
   int page = 0;
   int size = 0;
   try {
    
    
     page = Integer.parseInt(pageNow);
     size = Integer.parseInt(pageSize);
   } catch (NumberFormatException e) {
    
    
     e.printStackTrace();
     /*result("error","类型转换错误！".);*/
   }

   //这里我们做一个初始化页面定义，防止空指针错误
   page = page <= 0 ? 1 : page;
   size = size <= 0 ? 4 : size;
   List<UserInfo> users = userInfoService.findByPage(page, size);
   Long totals = userInfoService.findTotals();
   result.put("users", users);
   result.put("total", totals);
   return result;
 }

효과 사진