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

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

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

實現(xiàn)功能09- 切換數(shù)據(jù)源為Druid

代碼實現(xiàn)

1. 切換數(shù)據(jù)源為druid ， 修改pom.xml 和創(chuàng)建配置文件com\nlc\furn\config\DruidDataSourceConfig.java

上面建項目的時候就已經(jīng)導(dǎo)入了就不用導(dǎo)入了，這里只是提醒一下

<!-- 引入druid 依賴-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.1.17</version>
</dependency>

@Configuration
@Slf4j
public class DruidDataSourceConfig {
 
    //配置/注入DruidDataSource
 
    @ConfigurationProperties("spring.datasource")
    @Bean
    public DataSource dataSource() {
        DruidDataSource druidDataSource = new DruidDataSource();
        log.info("數(shù)據(jù)源={}", druidDataSource.getClass());
        return druidDataSource;
    }
}

2. 完成測試, 看看數(shù)據(jù)源是否切換成Druid

實現(xiàn)功能10-帶條件查詢分頁顯示列表

需求分析/圖解

思路分析

1. 完成后臺代碼從mapper -> service -> controller , 并對代碼進行測試
2. 完成前臺代碼，使用axios 發(fā)送http 請求，完成帶條件查詢分頁顯示

代碼實現(xiàn)

1. 修改FurnController.java , 增加處理帶條件分頁查詢

   /**
     * @param pageNum  顯示第幾頁
     * @param pageSize 每頁顯示幾條記錄
     * @param search   檢索條件: 家居名 , 默認(rèn)是“”, 表示不帶條件檢索，正常分頁
     * @return
     */
    @GetMapping("/furnsBySearchPage")
    public Result listFurnsByConditionPage(
            @RequestParam(defaultValue = "1") Integer pageNum,
            @RequestParam(defaultValue = "5") Integer pageSize,
            @RequestParam(defaultValue = "") String search) {
 
        //先創(chuàng)建QueryWrapper, 可以將我們的檢索條件封裝到QueryWrapper
        QueryWrapper<Furn> queryWrapper = Wrappers.query();
        //判斷search 是否有內(nèi)容
        if (StringUtils.hasText(search)) {
            queryWrapper.like("name", search);
        }
 
        Page<Furn> page = furnService.page(new Page<>(pageNum, pageSize), queryWrapper);
 
        return Result.success(page);
    }

2. 在數(shù)據(jù)庫/表中增加測試數(shù)據(jù), 方便進行條件查詢

INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)1' , '螞蟻家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)2' , '螞蟻家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)3' , '螞蟻家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)4' , '螞蟻家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)5' , '螞蟻家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)6' , '螞蟻家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)7' , '螞蟻家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '簡約沙發(fā)8' , '螞蟻家居' , 180 , 666 , 7 );

3. 使用Postman 完成測試http://localhost:10000/furnsBySearchPage?search=沙發(fā)

4. 修改HomeView.vue , 完成帶條件分頁查詢

< !--功能區(qū)域-->
    <div style="margin: 10px 0">
        <i class="el-icon-add-location"></i>
        <el-button type="primary" @click="add">新增</el-button>
</div>
 
< !--搜索區(qū)域-->
    <div style="margin: 10px 0">
        <el-input v-model="search" placeholder=" 請輸入關(guān)鍵字" style="width: 20%"
            clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="list">檢索</el-button>
</div>

=======在數(shù)據(jù)池，增加search 變量=

修改list 方法，請求帶條件分頁的API 接口===

    list() {//顯示家居信息,
      // request.get("/api/furns").then(res => {
      //   console.log("res=", res)
      //   //將返回的數(shù)據(jù)和tableData綁定
      //   this.tableData = res.data
      // })
      //分頁查詢 + 帶條件
      request.get("/api/furnsBySearchPage2", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        // console.log("res=", res)
        //將返回的數(shù)據(jù)和tableData綁定
        this.tableData = res.data.records
        //修改total
        this.total = res.data.total
      })
    }

測試分頁條件查詢

啟動項目后臺服務(wù)springboot-furn
啟動項目前臺springboot_vue
瀏覽器輸入： http://localhost:10000/

帶條件分頁查詢顯示效果

實現(xiàn)功能11-家居表單前端校驗

需求分析/圖解

說明: 參考element-plus 表單驗證

思路分析

1. 完成前臺代碼，使用ElementPlus 的表單rules 驗證即可
2. 參考ElementPlus 的表單驗證文檔

代碼實現(xiàn)

1. 修改HomeView.vue , 增加表單驗證處理代碼

==增加對表單各個字段的校驗規(guī)則=

tableData: [],
    rules: {
    name: [
        { required: true, message: '請輸入稱家居名', trigger: 'blur' }
    ],
        maker: [
            { required: true, message: '請輸入稱制造商', trigger: 'blur' }
        ],
            price: [
                { required: true, message: '請輸入價格', trigger: 'blur' },
                { pattern: /^(([1-9]\d*)|(0))(\.\d+)?$/, message: '請輸入數(shù)字', trigger: 'blur' }
            ],
                sales: [
                    { required: true, message: '請輸入銷量', trigger: 'blur' },
                    { pattern: /^(([1-9]\d*)|(0))$/, message: '請輸入數(shù)字', trigger: 'blur' }
                ],
                    stock: [
                        { required: true, message: '請輸入庫存', trigger: 'blur' },
                { pattern: /^(([1-9]\d*)|(0))$/, message: '請輸入數(shù)字', trigger: 'blur' }
                    ]
}

==指定將創(chuàng)建的規(guī)則應(yīng)用到form 表單, 注意名稱要對應(yīng)=

<!-- 添加家居的彈窗
    說明:
    1. el-dialog ：v-model="dialogVisible" 表示對話框, 和dialogVisible 變量雙向綁定,控制是否顯示對話框
    2. el-form :model="form" 表示表單,數(shù)據(jù)和form 數(shù)據(jù)變量雙向綁定
    3. el-input v-model="form.name" 表示表單的input 空間， 名字為name 需要和后臺Javabean 屬性一致
-->

2. 測試，就可以看到驗證規(guī)則生效了【是光標(biāo)離開輸出框時，出現(xiàn)校驗效果，因為是trigger:‘blur’ 事件】, 但是用戶提交還是能成.

3. 修改HomeView.vue 當(dāng)表單驗證不通過時，給出提示信息, 不提交表單

修改save()===

save() {
    //增加處理修改邏輯
    if (this.form.id) {
        request.put("/api/update", this.form).then(res => {
            if (res.code === 200) {//如果code 為200
                this.$message({ //彈出更新成功的消息框
                    type: "success",
                    message: "更新成功"
                })
            } else {
                this.$message({//彈出更新失敗信息
                    type: "error",
                    message: res.msg
                })
            }
            this.list() //刷新列表
            this.dialogVisible = false
        })
    } else {//添加
        //表單數(shù)據(jù)校驗是否
        this.$refs['form'].validate((valid) => {
            if (valid) {
                //=======說明======
                //1. 將form 表單提交給/api/save 的接口
                //2. /api/save 等價http://localhost:10001/save
                //3. 如果成功，就進入then 方法
                //4. res 就是返回的信息
                //5. 查看Mysql 看看數(shù)據(jù)是否保存
                request.post("/api/save", this.form).then(res => {
                    this.dialogVisible = false
                    this.list()
                })
            } else {
                this.$message({//彈出更新失敗信息
                    type: "error",
                    message: "驗證失敗，不提交"
                })
                return false
            }
        })
    }
}

=修改add()==

add() {
    this.dialogVisible = true
    this.form = {}
    this.$refs['form'].resetFields()//將添加驗證提示消息，清空
}

完成測試

啟動項目后臺服務(wù)springboot-furn
啟動項目前臺springboot_vue
瀏覽器輸入： http://localhost:10000/

測試頁面效果

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

到了這里，關(guān)于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分離)【六】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！