一 前端部分 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