SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五]

這篇具有很好參考價(jià)值的文章主要介紹了SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五]。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

SSM–功能實(shí)現(xiàn)

實(shí)現(xiàn)功能09-帶條件查詢分頁(yè)顯示列表

需求分析/圖解

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

思路分析

完成后臺(tái)代碼從dao -> serivce -> controller , 并對(duì)每層代碼進(jìn)行測(cè)試
完成前臺(tái)代碼，使用axios 發(fā)送http 請(qǐng)求，完成帶條件查詢分頁(yè)顯示

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

修改FurnService.java 和FurnServiceImpl.java , 增加條件查詢

修改FurnService.java

public List<Furn> findByCondition(String name);

修改FurnServiceImpl.java

@Override
    public List<Furn> findByCondition(String name) {

        FurnExample furnExample = new FurnExample();
        //通過(guò)Criteria 對(duì)象可以設(shè)置查詢條件
        FurnExample.Criteria criteria = furnExample.createCriteria();

        //判斷name是有具體的內(nèi)容
        if (StringUtils.hasText(name)) {
            criteria.andNameLike("%" + name + "%");
        }
        //說(shuō)明:如果name沒(méi)有傳值null ,"", "   ", 依然是查詢所有的記錄
        return furnMapper.selectByExample(furnExample);
    }

修改FurnController.java , 處理帶條件分頁(yè)查詢

/**
     * 根據(jù)家居名進(jìn)行分頁(yè)查詢-條件
     *
     * @param pageNum
     * @param pageSize
     * @return
     */
    @ResponseBody
    @RequestMapping("/furnsByConditionPage")
    public Msg listFurnsByConditionPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                        @RequestParam(defaultValue = "5") Integer pageSize,
                                        @RequestParam(defaultValue = "") String search) {

        PageHelper.startPage(pageNum, pageSize);
        List<Furn> furnList = furnService.findByCondition(search);

        PageInfo pageInfo = new PageInfo(furnList, pageSize);

        //將pageInfo封裝到Msg對(duì)象，返回
        return Msg.success().add("pageInfo", pageInfo);
    }

使用Postman 測(cè)試，是否通過(guò)

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

修改HomeView.vue , 完成帶條件分頁(yè)查詢

< !--功能區(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=" 請(qǐng)輸入關(guān)鍵字" style="width: 20%"
            clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="list">檢索</el-button>
</div>

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

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

========修改list 方法，請(qǐng)求帶條件分頁(yè)的API 接口=

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

測(cè)試分頁(yè)條件查詢

啟動(dòng)項(xiàng)目后臺(tái)服務(wù)furns_ssm
啟動(dòng)項(xiàng)目前臺(tái)ssm_vue

帶條件分頁(yè)查詢顯示效果

測(cè)試帶條件分頁(yè)查詢顯示效果, 瀏覽器: http://localhost:9875/
SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

實(shí)現(xiàn)功能10-添加家居表單前端校驗(yàn)

需求分析/圖解

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

說(shuō)明: 參考element-plus 表單驗(yàn)證

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

思路分析

完成前臺(tái)代碼，使用ElementPlus 的表單rules 驗(yàn)證即可
參考ElementPlus 的表單驗(yàn)證文檔

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

修改HomeView.vue , 增加表單驗(yàn)證處理代碼

==增加對(duì)表單各個(gè)字段的校驗(yàn)規(guī)則=

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

==指定將創(chuàng)建的規(guī)則應(yīng)用到form 表單, 注意名稱要對(duì)應(yīng)=
<!-- 添加家居的彈窗
說(shuō)明:

? 1.el-dialog ：v-model=“dialogVisible” 表示對(duì)話框, 和dialogVisible 變量雙向綁定,控制是否顯示對(duì)話框

? 2.el-form :model=“form” 表示表單,數(shù)據(jù)和form 數(shù)據(jù)變量雙向綁定

? 3.el-input v-model=“form.name” 表示表單的input 空間，名字為name 需要和后臺(tái)Javabean 屬性一致

–>

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

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

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

修改Homeview.vue 當(dāng)表單驗(yàn)證不通過(guò)時(shí)，不提交表單
修改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ù)校驗(yàn)是否
        this.$refs['form'].validate((valid) => {
            if (valid) {
                //=======說(shuō)明======
                //1. 將form 表單提交給/api/save 的接口
                //2. /api/save 等價(jià)http://localhost:10001/save
                //3. 如果成功，就進(jìn)入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: "驗(yàn)證失敗，不提交"
                })
                return false
            }
        })
    }
}

=修改add()==

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

完成測(cè)試

啟動(dòng)項(xiàng)目后臺(tái)服務(wù)furns_ssm
啟動(dòng)項(xiàng)目前臺(tái)ssm_vue

測(cè)試頁(yè)面效果

測(cè)試當(dāng)表單驗(yàn)證不通過(guò)，不提交表單. 瀏覽器: http://localhost:9875/

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

實(shí)現(xiàn)功能11-添加家居表單后端校驗(yàn)

需求分析/圖解

為什么前端校驗(yàn)了，后端還需要校驗(yàn)?-使用Postman 添加數(shù)據(jù), 破前端校驗(yàn)機(jī)制

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

后端校驗(yàn)-需求分析, 當(dāng)后端校驗(yàn)沒(méi)有通過(guò)，會(huì)出現(xiàn)灰色框提示, 后臺(tái)不真正入庫(kù)數(shù)據(jù)

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

思路分析

后臺(tái)使用JSR303 數(shù)據(jù)校驗(yàn)，引入hibernate-validator.jar ,學(xué)SpringMVC 講過(guò)
前臺(tái)使用ElementPlus 進(jìn)行數(shù)據(jù)綁定,并顯示錯(cuò)誤信息

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

修改pom.xml 引入hibernate-validator jar 文件

<!-- JSR303 數(shù)據(jù)校驗(yàn)支持
	引入hibernate-validator
-->
<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-validator</artifactId>
    <version>6.1.0.Final</version>
</dependency>

修改Furn.java , 使用hibernate-validator

public class Furn {
    private Integer id;

    @NotEmpty(message = "請(qǐng)輸入家居名")
    private String name;

    @NotEmpty(message = "請(qǐng)輸入制造廠商")
    private String maker;

    @NotNull(message = "請(qǐng)輸入數(shù)字")
    @Range(min = 0, message = "價(jià)格不能小于0")
    private BigDecimal price;

    @NotNull(message = "請(qǐng)輸入數(shù)字")
    @Range(min = 0, message = "銷量不能小于0")
    private Integer sales;

    @NotNull(message = "請(qǐng)輸入數(shù)字")
    @Range(min = 0, message = "庫(kù)存不能小于0")
    private Integer stock;

}

3.修改FurnController.java , 對(duì)save 方法進(jìn)行完善

 @PostMapping("/save")
    @ResponseBody
    public Msg save(@Validated @RequestBody Furn furn, Errors errors) {

        Map<String, Object> map = new HashMap<>();

        List<FieldError> fieldErrors = errors.getFieldErrors();
        for (FieldError fieldError : fieldErrors) {
            map.put(fieldError.getField(), fieldError.getDefaultMessage());
        }

        if (map.isEmpty()) {//說(shuō)明后端校驗(yàn)通過(guò),因?yàn)闆](méi)有發(fā)現(xiàn)校驗(yàn)錯(cuò)誤
            furnService.save(furn);
            //返回成功msg
            return Msg.success();
        } else {
            //校驗(yàn)失敗，把校驗(yàn)錯(cuò)誤信息封裝到Msg對(duì)象，并返回
            return Msg.fail().add("errorMsg", map);
        }

    }

修改HomeView.vue , 顯示服務(wù)器校驗(yàn)返回的提示信息
===在數(shù)據(jù)池，增加顯示錯(cuò)誤信息變量

data() {
    return {
    //存放錯(cuò)誤信息
    serverValidErrors: {},

====修改save()方法，顯示錯(cuò)誤提示

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ù)校驗(yàn)是否
        this.$refs['form'].validate((valid) => {
            if (valid) {
                //=======說(shuō)明======
                //1. 將form 表單提交給/api/save 的接口
                //2. /api/save 等價(jià)http://localhost:10001/save
                //3. 如果成功，就進(jìn)入then 方法
                //4. res 就是返回的信息
                //5. 查看Mysql 看看數(shù)據(jù)是否保存
                request.post("/api/save", this.form).then(res => {
                    if (res.code === 200) {
                        this.dialogVisible = false
                        this.list()
                    } else if (res.code === 400) {
                        this.serverValidErrors.name = res.extend.errorMsg.name;
                        this.serverValidErrors.sales = res.extend.errorMsg.sales;
                        this.serverValidErrors.price = res.extend.errorMsg.price;
                        this.serverValidErrors.maker = res.extend.errorMsg.maker;
                        this.serverValidErrors.stock = res.extend.errorMsg.stock;
                    }
                })
            } else {
                this.$message({//彈出更新失敗信息
                    type: "error",
                    message: "驗(yàn)證失敗，不提交"
                })
                return false
            }
        })
    }
}

==修改add()方法，清空錯(cuò)誤信息=

add() {
    this.dialogVisible = true
    this.form = {}
    this.$refs['form'].resetFields()//將上傳驗(yàn)證消息，清空
    this.serverValidErrors = {}
    },

修改對(duì)話框，顯示后臺(tái)返回的校驗(yàn)錯(cuò)誤信息

<!--添加家居的彈窗
說(shuō)明:
1. el-dialog ：v-model="dialogVisible" 表示對(duì)話框, 和dialogVisible 變量雙向綁定,控制是否
顯示對(duì)話框
2. el-form :model="form" 表示表單,數(shù)據(jù)和form 數(shù)據(jù)變量雙向綁定
3. el-input v-model="form.name" 表示表單的input 空間，名字為name 需要和后臺(tái)Javabean
屬性一致
-->
<el-dialog title="提示" v-model="dialogVisible" width="30%">
    <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家居名" prop="name">
            <el-input v-model="form.name" style="width: 60%"></el-input>
            {{ serverValidErrors.name }}
        </el-form-item>
        <el-form-item label="廠商" prop="maker">
            <el-input v-model="form.maker" style="width: 60%"></el-input>
            {{ serverValidErrors.maker }}
        </el-form-item>
        <el-form-item label="價(jià)格" prop="price">
            <el-input v-model="form.price" style="width: 60%"></el-input>
            {{ serverValidErrors.price }}
        </el-form-item>
        <el-form-item label="銷量" prop="sales">
            <el-input v-model="form.sales" style="width: 60%"></el-input>
            {{ serverValidErrors.sales }}
        </el-form-item>
        <el-form-item label="庫(kù)存" prop="stock">
            <el-input v-model="form.stock" style="width: 60%"></el-input>
            {{ serverValidErrors.stock }}
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">確定</el-button>
        </span>
    </template>
</el-dialog>

完成測(cè)試: 添加家居表單后端校驗(yàn)

啟動(dòng)項(xiàng)目后臺(tái)服務(wù)furns_ssm
使用Postman 進(jìn)行測(cè)試
1、通過(guò)Postman 發(fā)出添加請(qǐng)求

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

2、這時(shí), 后臺(tái)返回添加失敗的提示信息

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

啟動(dòng)項(xiàng)目前臺(tái)ssm_vue
瀏覽器： http://localhost:9875/
測(cè)試頁(yè)面效果
● 添加家居表單后端校驗(yàn), 瀏覽器: http://localhost:9875/

SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--功能實(shí)現(xiàn)[五],SSM,mybatis,spring,javascript,ajax

測(cè)試完畢后, 記得恢復(fù)valid 的正確寫(xiě)法。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-633520.html

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