??前言
本篇博文是關(guān)于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分離)【五】，希望你能夠喜歡

??個(gè)人主頁(yè)：晨犀主頁(yè)
??個(gè)人簡(jiǎn)介：大家好，我是晨犀，希望我的文章可以幫助到大家，您的滿意是我的動(dòng)力????
??歡迎大家：這里是CSDN，我總結(jié)知識(shí)的地方，歡迎來到我的博客，感謝大家的觀看??
如果文章有什么需要改進(jìn)的地方還請(qǐng)大佬不吝賜教 先在此感謝啦??

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分離)【五】

實(shí)現(xiàn)功能07-刪除家居信息

需求分析/圖解

思路分析

1. 完成后臺(tái)代碼從mapper -> service -> controller , 并對(duì)代碼進(jìn)行測(cè)試
2. 完成前臺(tái)代碼，使用axios 發(fā)送http 請(qǐng)求，刪除數(shù)據(jù), 將數(shù)據(jù)綁定顯示

代碼實(shí)現(xiàn)

1. 修改FurnController.java , 處理刪除請(qǐng)求, 并使用Postman 完成測(cè)試

    //增加方法[接口],根據(jù)id,返回對(duì)應(yīng)的家居信息
    //如何設(shè)計(jì)? 依然使用url占位符+@PathVariable
    @GetMapping("/find/{id}")
    public Result findById(@PathVariable Integer id) {
        Furn furn = furnService.getById(id);
        log.info("furn={}", furn);
        return Result.success(furn);//返回成功的信息-攜帶查詢到furn信息
    }

2. 修改HomeView.vue , 編寫handleDel 方法, 完成刪除并測(cè)試

//處理刪除方法
handleDel(id) {
    request.delete("/api/del/" + id).then(res => {
        if (res.code === 200) {
            this.$message({
                type: "success",
                message: "刪除成功"
            })
        } else {
            this.$message({
                type: "error",
                message: res.msg
            })
        }
        this.list() // 刷新列表
    })
}
    //響應(yīng)刪除點(diǎn)擊
    <template #default="scope">
    <el-button size="mini" @click="handleEdit(scope.row)" type="primary">編輯</el-button>
    <!--增加popcomfirm 控件，確認(rèn)刪除-- >
    <el-popconfirm
        title="確定刪除嗎？" @confirm="handleDel(scope.row.id)" >
            <template #reference>
                <el-button size="small" type="danger">刪除</el-button>
            </template>
    </el-popconfirm>
    </template >

3. 完成測(cè)試測(cè)試

實(shí)現(xiàn)功能08-分頁(yè)顯示列表

需求分析/圖解

說明

1. 顯示共多少記錄
2. 可以設(shè)置每頁(yè)顯示幾條
3. 點(diǎn)擊第幾頁(yè)，顯示對(duì)應(yīng)數(shù)據(jù)

思路分析

1. 后臺(tái)使用MyBatis-plus 分頁(yè)插件完成查詢
2. 修改FurnController , 增加處理分頁(yè)顯示代碼
3. 完成前臺(tái)代碼，加入分頁(yè)導(dǎo)航，并將分頁(yè)請(qǐng)求和后臺(tái)接口結(jié)合

代碼實(shí)現(xiàn)

1. 創(chuàng)建com/nlc/furn/config/MybatisPlusConfig.java 配置類，引入mybatis-plus 分頁(yè)插件

@Configuration
public class MybatisPlusConfig {
 
    /**
     * 梳理
     * 1、注入MybatisPlusInterceptor 對(duì)象/bean
     * 2. 在MybatisPlusInterceptor bean 加入分頁(yè)插件 PaginationInnerInterceptor
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //這里分頁(yè)需要指定數(shù)據(jù)庫(kù)類型,因?yàn)椴煌腄B,分頁(yè)SQL語(yǔ)句不同
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

2. 修改FurnController.java 增加分頁(yè)查詢處理

    /**
     * @param pageNum  顯示第幾頁(yè) ,默認(rèn)1
     * @param pageSize 每頁(yè)顯示幾條記錄 , 默認(rèn)5
     * @return
     */
    //分頁(yè)查詢的接口/方法
    @GetMapping("/furnsByPage")
    public Result listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                  @RequestParam(defaultValue = "5") Integer pageSize) {
 
        //這里通過page方法，返回Page對(duì)象, 對(duì)象中就封裝了分頁(yè)數(shù)據(jù)
        Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize));
        //這里我們注意觀察，返回的page數(shù)據(jù)結(jié)構(gòu)是如何的?這樣你才能指定在前端如何綁定返回的數(shù)據(jù)
        return Result.success(page);
    }

3. 為方便觀察SQL, 配置MyBatis-Plus 日志輸出, 修改D:\nlc_springboot_vue_temp\springboot_furns\src\main\resources\application.yml

mybatis-plus:
  configuration:
    #這里我們配置輸出底層的sql,方便我們觀察sql
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

4. 使用Postman 進(jìn)行測(cè)試， 看看分頁(yè)查詢是否OK , 瀏覽器輸入http://localhost:10000/furnsByPage

------看后端sql--------

==> Preparing: SELECT COUNT(*) FROM furn
==> Parameters:
<== Columns: COUNT(*)
<== Row: 5
<== Total: 1
==> Preparing: SELECT id,name,maker,price,sales,stock FROM furn LIMIT ?
==> Parameters: 3(Long)
<== Columns: id, name, maker, price, sales, stock 

<== Row: 1, 北歐風(fēng)格小桌子, 熊貓家居, 180.00, 666, 7
<== Row: 2, 簡(jiǎn)約風(fēng)格小椅子, 熊貓家居, 180.00, 666, 7
<== Row: 3, 典雅風(fēng)格小臺(tái)燈, 螞蟻家居, 180.00, 666, 7
<== Total: 3

5. 修改HomeView.vue , 完成分頁(yè)導(dǎo)航顯示、分頁(yè)請(qǐng)求

//增加element-plus 分頁(yè)控件
<div style="margin: 10px 0">
    <el-pagination
@size-change="handlePageSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5,10]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
 
:total="total">
</el-pagination>
</div >
</div >
</template >
    //增加分頁(yè)初始化數(shù)據(jù)
    data() {
    return {
        currentPage: 1,
        pageSize: 5,
        total: 10,
        //修改list(), 換成分頁(yè)請(qǐng)求數(shù)據(jù)
        list() { //請(qǐng)求顯示家居列表-不帶檢索
            request.get("/api/furnsByPage", {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize
 
                }
            }).then(res => {
                //綁定tableData, 顯示在表格
                this.tableData = res.extend.pageInfo.list
                this.total = res.extend.pageInfo.total
            })
        }
//增加方法, 處理記錄的變化, 這兩個(gè)方法是和分頁(yè)控件綁定的.
//處理每頁(yè)顯示多少條記錄變化
handlePageSizeChange(pageSize) {
            this.pageSize = pageSize
            this.list()
        }
        ,
        //處理當(dāng)前頁(yè)變化, 比如點(diǎn)擊分頁(yè)連接,或者go to 第幾頁(yè)
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum
            this.list()
        }

完成測(cè)試

啟動(dòng)項(xiàng)目后臺(tái)服務(wù)springboot-furn， 啟動(dòng)項(xiàng)目前臺(tái)springboot_vue， 瀏覽器輸入： http://localhost:10000/

分頁(yè)顯示效果

● 測(cè)試分頁(yè)顯示效果, 瀏覽器: http://localhost:10000/

文章到這里就結(jié)束了，如果有什么疑問的地方請(qǐng)指出，諸大佬們一起來評(píng)論區(qū)一起討論??
希望能和諸大佬們一起努力，今后我們一起觀看感謝您的閱讀??
如果幫助到您不妨3連支持一下，創(chuàng)造不易您們的支持是我的動(dòng)力??文章來源地址http://www.zghlxwxcb.cn/news/detail-690889.html

到了這里，關(guān)于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分離)【五】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！