ssm+vue實現分頁功能

項目效果圖:

項目結構圖：

爲了方便你們練習，項目沒有過多的代碼，只有與分頁相關的代碼，並且分頁功能使用的是PageHelper插件，因此實現分頁功能超級簡單。相關操做步驟及思路：
一、pom.xml文件引入PageHelper的jar包座標
二、spring配置文件注入分頁插件信息
三、dao層直接查詢的是全部的數據
四、service層先設置分頁查詢的條件，好比當前頁多少，每頁顯示多少條，而後再查詢所有，返回的是一個Page對象
五、contraller層，獲取頁面傳過來的參數（當前頁，每頁顯示多少條數據），而後調用service層的方法，返回一個page對象，根據這個page對象再封裝一個PageInfo對象，最後把PageInfo轉成json格式返回頁面便可。

項目環境：

前端：vue

後端：ssm（spring+springmvc+mybatis）

數據庫：mysql

若是你在運行這個代碼的過程當中有遇到問題，請加小編vi信xxf960513，我拉你進對應學習羣！！幫助你快速掌握這個功能代碼！

後端代碼

一、pom.xml文件引入PageHelper的jar包座標

<!--分頁插件座標-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.2</version>
   </dependency>

二、spring配置文件注入分頁插件信息

<!--整合mybatis到spring中-->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="typeAliasesPackage" value="com.javaxxf.pojo"/>
        <!--分頁插件-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>
    </bean>

三、dao層直接查詢的是全部的數據

ZiLiaoDao.java

@Component
public interface ZiLiaoDao {
    @Select("SELECT * FROM ziliao")
    public abstract List<ZiLiao> findAll();

}

四、service層先設置分頁查詢的條件，好比當前頁多少，每頁顯示多少條，而後再查詢所有，返回的是一個Page對象

ZiLiaoServiceImpl.java

@Service
public class ZiLiaoServiceImpl  implements ZiLiaoService {

    @Autowired
    private ZiLiaoDao ziLiaoDao;
    /**
     *
     * @author xuxiaofei
     * @date 2021/8/13 上午10:54
     * @param currentPage  當前頁
     * @param pageSize   每頁條數
     * @return com.github.pagehelper.Page
     */
    public Page findAll(Integer currentPage, Integer pageSize) {
        //設置分頁
        Page page= PageHelper.startPage(currentPage,pageSize);
        // 查詢所有
        List<ZiLiao> all = ziLiaoDao.findAll();
        return  page;
    }

}

五、contraller層，獲取頁面傳過來的參數（當前頁，每頁顯示多少條數據），而後調用service層的方法，返回一個page對象，根據這個page對象再封裝一個PageInfo對象，最後把PageInfo轉成json格式返回頁面便可。

ZiLiaoController.java

@RestController
public class ZiLiaoController {
@Autowired
private ZiLiaoService ziLiaoService;
@RequestMapping("findAll")
public String getAll(Integer currentPage, Integer pageSize) throws IOException {
//分頁查詢
Page page = ziLiaoService.findAll(currentPage, pageSize);
//封裝PageInfo
PageInfo info = new PageInfo(page);
//將info轉成json，響應給客戶端
String json = new ObjectMapper().writeValueAsString(info);
return json;
 }
}

前端代碼

index.html

methods:{
            //分頁查詢功能
            selectByPage(){
                axios.post("findAll","currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
                    .then(resp => {
                        //將查詢出的數據賦值tableData
                        this.tableData = resp.data.list;
                        //設置分頁參數
                        //當前頁
                        this.pagination.currentPage = resp.data.pageNum;
                        //總條數
                        this.pagination.total = resp.data.total;
                    })
            },
            //改變每頁條數時執行的函數
            handleSizeChange(pageSize) {
                //修改分頁查詢的參數
                this.pagination.pageSize = pageSize;
                //從新執行查詢
                this.selectByPage();
            },
            //改變頁碼時執行的函數
            handleCurrentChange(pageNum) {
                //修改分頁查詢的參數
                this.pagination.currentPage = pageNum;
                //從新執行查詢
                this.selectByPage();
            }
        },
        mounted(){
            //調用分頁查詢功能
            this.selectByPage();
        }

完整源碼下載地址：https://gitee.com/xuxiaofei19...

若是你在運行這個代碼的過程當中有遇到問題，請加小編vi信xxf960513，！幫助你快速掌握這個功能代碼！