前端vue+element/后端ssm+pageHelper实现列表页(带翻页)

一 前端部分 vue+element

之前写jsp, 列表页翻页是通过向后端传递页码, 然后重新加载该页面实现的

现在改为vue, 需要换一种思维方式, 通过axios传递页码到后端重新获取当前页的列表信息, 然后使用this.$set(target, key, value)修改table中加载的数据(如果只是用双向绑定的话, 数据改变了, 但是vue不会重新加载页面上的数据, 必须使用set)

elementUI的table简化了数据的读取和加载, <el-table :data="memberList"> :data绑定了数据

<template>
    <div class="Member">
      <div class="title">
        <span>用户列表</span>
      </div>

      <div class="content">
          <div class="block">
          <el-table :data="memberList" border style="width:70%" stripe>  //memberList是存放信息的list, 和data中绑定
            <el-table-column prop="id" label="序号" width="50px"></el-table-column>
            <el-table-column prop="name" label="名字" width="200px"></el-table-column>   
            </el-table>
              <el-pagination
              @current-change="handleCurrentChange"  //点击页码的事件, 切换到对应分页
              background
              :page-size="page.pageSize"
              layout="total,  prev, pager, next"  //这里控制分页部分显示 总行数, 向前按钮, 页码, 向后按钮
              :total="page.total"
              :current-page="page.pageNum"></el-pagination>
          </div>
        </el-form>
      </div>
    </div>
</template>

<script>
export default {
  name:'Member',
  data(){
    return{
      memberList:[],
      page:{
        total:1,
        pageSize:10,
        pageNum:1,
      }

    }
  },
  methods:{
    handleCurrentChange(val){
      this.page.pageNum=val;
      this.getData();  //调用getData刷新页面上table和分页模块的数据
    },
    getData(){
      var self = this;  //axios中this指向发生变化, 用self来代替目前this
      var pageNum = {"pageNum":self.page.pageNum}; //想后端传递需要的页码
      self.$http.post(this.HOST+"MemberInfo/list",pageNum, {headers: {"Content-Type": "application/json"}})
      .then(res=>{
          self.$set(self,"memberList",res.data.memberList.list)  //table数据更新, 注意着4行的self.$set()中内容, 我们要改变的memberList是在data下面, 所以target参数是"self",key是"memberList";pageSize是在data的page下面, 所以target是self.page, key是"pageSize"
          self.$set(self.page,"pageSize",res.data.memberList.pageSize)
          self.$set(self.page,"total",res.data.memberList.total)
          self.$set(self.page,"pageNum",res.data.memberList.pageNum)
      })
      .catch(err => {
          console.log(err);
      })
    }
  },
  created:function(){
    this.getData();   //首次进入页面的时候也去获取一次table的data, page.pageNum设置了初始值是1
  }
}
</script>

二 后端部分 ssm+pageHelper分页插件

后端采用的是ssm, 翻页插件使用的是pageHelp, pageHelper的pageInfo类中list存放的是列表数据, pageSize是每页条数, total是总数, pageNum是当前页码. 

后端ssm的controller代码如下:

@Controller
@RequestMapping(value="MemberInfo")
public class MemberController {
	private int pageSize=10;   //固定每页显示10行数据
	
	@Autowired
	MemberService memberService;
	
	@RequestMapping(value="/list")
	public @ResponseBody String list(@RequestBody Map<String,Object> map){  //前端传回来的是一个json对象, 这边使用一个map进行接收, 采用@RequestBody注解
		JSONObject obj=new JSONObject();
		PageInfo memberList = memberService.list(Integer.parseInt(map.get("pageNum")+""),pageSize);
		obj.put("memberList", memberList);
		return obj.toString();   //返回的也是一个json字符串
	}
}

后端ServiceImpl代码如下:

@Service
public class MemberServiceImpl implements MemberService {  //MemberService接口部分我就不写了
	@Autowired
	MemberMapper memberMapper;
	public PageInfo list(int pageNum, int pageSize) {
		// TODO Auto-generated method stub
		PageHelper.startPage(pageNum,pageSize);   //pageHelper配置页码和每页数量
		List<Map<String, Object>> list = dsmemberMapper.list();  //查询数据, 页面limit部分会由pageHelper拦截并添加上去, 这边不用考虑.
		PageInfo pageInfo = new PageInfo(list);  //将查询结果放入PageInfo类中, 该类包含一些页面信息, 详见官方文档说明, 这里是为了向前端传递页码等信息
		return pageInfo;
	}

}

后端mapper的xml:

<mapper namespace="com.system.mapper.DsmemberMapper">
    <!--这里不需要控制查询第几条到第几条, pageHelper会帮我们做的, 按照ServiceImpl中设置-->
    <!--mapper的class我就不写了-->
    	<select id="list" resultType="java.util.Map">
			SELECT * FROM member;
    	</select>
    </mapper>

pagehelper分页插件的简单配置和使用见前一篇ssm使用pageHelper