How to obtain the Id for the delete operation of the Dark Horse Web project

Enterprise 2023-07-02 10:51:18 views: null

Directory ( If you don't want to read the analysis, you can go directly to the solution to find the answer )

Project scenario:

Problem Description

Error analysis:

solution:

All html codes for delete operations individually:

Attach all the html code after the project is completed

Project scenario:

提示：黑马新版web最后一个项目，Delete operations for adding, deleting, modifying and checking

Problem Description

难点：如何获取每一行的id传到servlet

Use the Delete annotation in BrandMapper to delete, and you need to return the id, which most people can't find 

    /**
     * 删除数据
     *
     * @param id
     */
    @Delete("delete from tb_brand where id=#{id}")
    void deleteId(int id);

Error analysis:

Tip: As a back-end person, the back-end code is not difficult, so it is attached below, and I will not explain it in detail.

           Only explain in detail the operation of the front end to obtain the id and return

axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteId",
                        data: this.brand.id
                    })

The id of the brand passed in cannot be obtained, and the params printed in the servlet shows that the data is null

 

solution:

(The front-end obtains the id method, and the code that requires the back-end to pass the id can be obtained by leaving a message)

1 Join (scope. $index , scope. row ) to get the information of each row

<el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" plain @click="deleteId(scope.$index, scope.row)">删除</el-button>

2. The delete method of method passes parameters

deleteId(index, row)

3. Modify data at axios asynchronous request data: row.id (request method is post)

axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteId",
                        data: row.id
                    })

In this way, the id of each row can be returned

At this time, print the params in the servlet again to show that the data is the id of the deleted data, and the id is obtained.

All html codes for delete operations individually:

<el-row>
<el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button type="danger" plain @click="deleteId(scope.$index, scope.row)">删除</el-button>
</el-row>
// 删除数据
            deleteId(index, row) {
                var _this = this;
                //发送ajax异步请求，删除数据
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteId",
                        data: row.id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //查询一次
                            _this.selectAll();
                            _this.$message({
                                message: '恭喜你，删除数据成功',
                                type: 'success'
                            });
                        } else {
                            _this.$message.error('删除数据失败，别玩了退游吧，捏麻麻滴');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

Attach all the html code after the project is completed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->

    <el-row>

        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button @click="addBrand" type="primary">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>


    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <!--
                                <el-row>
                                    <el-button type="primary">修改</el-button>
                                    <el-button type="danger" plain @click="deleteId">删除</el-button>
                                </el-row>
                -->
                <!--size="mini"-->
                <template slot-scope="scope">
                    <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button type="danger" plain @click="deleteId(scope.$index, scope.row)">删除</el-button>


                    <!--                &lt;!&ndash;修改数据对话框表单&ndash;&gt;-->
                    <el-dialog

                            title="修改品牌信息"
                            :visible.sync="centerVisible"
                            width="30%">

                        <el-form ref="form" :model="brand" label-width="80px">

                            <el-form-item label="品牌名称">
                                <el-input v-model="brand.brandName"></el-input>
                            </el-form-item>

                            <el-form-item label="企业名称">
                                <el-input v-model="brand.companyName"></el-input>
                            </el-form-item>

                            <el-form-item label="排序">
                                <el-input v-model="brand.ordered"></el-input>
                            </el-form-item>

                            <el-form-item label="备注">
                                <el-input type="textarea" v-model="brand.description"></el-input>
                            </el-form-item>

                            <el-form-item label="状态">
                                <el-switch v-model="brand.status"
                                           active-value="1"
                                           inactive-value="0"
                                ></el-switch>
                            </el-form-item>


                            <el-form-item>
                                <el-button @click="edit()" type="primary">提交</el-button>
                                <el-button @click="centerVisible = false">取消</el-button>
                            </el-form-item>
                        </el-form>

                    </el-dialog>
                </template>

            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        mounted() {
            this.selectAll();
        },
        methods: {
            //查询分页数据
            selectAll() {
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.brand
                }).then(resp=>{
                    //设置表格数据
                    this.tableData = resp.data.rows;
                    //表格总数
                    this.totalCount = resp.data.totalCount;
                    }
                )
                /*var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
                    data: this.brand
                }).then(function (resp) {
                    //设置表格数据
                    _this.tableData = resp.data.rows;
                    //表格总数
                    _this.totalCount = resp.data.totalCount;
                })*/
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
                //console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                //console.log(this.brand);
                this.selectAll();

            },
            // 添加数据
            addBrand() {

                //console.log(this.brand);
                var _this = this;
                //发送ajax异步请求，添加数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/add",
                    data: _this.brand
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //关闭窗口
                        _this.dialogVisible = false;
                        //查询一次
                        _this.selectAll();
                        _this.$message({
                            message: '恭喜你，添加数据成功',
                            type: 'success'
                        });
                    } else {
                        _this.$message.error('添加数据失败，请将排序改为数字，否则会受异次元力量的影响无法添加');
                    }
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.brand.id = row.id;
                this.centerVisible = true;
            },
            //修改数据的部分内容
            edit() {
                //console.log(this.brand);
                var _this = this;
                //发送ajax异步请求，添加数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/edit",
                    data: _this.brand,
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //关闭窗口
                        _this.centerVisible = false;
                        //查询一次
                        _this.selectAll();
                        _this.$message({
                            message: '恭喜你，修改数据成功',
                            type: 'success'
                        });
                    } else {
                        _this.$message.error('修改数据失败，请将排序改为数字，否则会受异次元力量的影响无法修改');
                    }
                })
            },

            // 删除数据
            deleteId(index, row) {
                var _this = this;
                //发送ajax异步请求，删除数据
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteId",
                        data: row.id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //查询一次
                            _this.selectAll();
                            _this.$message({
                                message: '恭喜你，删除数据成功',
                                type: 'success'
                            });
                        } else {
                            _this.$message.error('删除数据失败，别玩了退游吧，捏麻麻滴');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            deleteByIds() {
                //创建数组ID

                //从this.multipleSelection获取
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let selectionElement = this.multipleSelection[i];
                    this.selectedIds[i] = selectionElement.id;
                }

                //发送ajax请求
                var _this = this;
                //发送ajax异步请求，删除数据
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteByIds",
                        data: _this.selectedIds
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //查询一次
                            _this.selectAll();
                            _this.$message({
                                message: '恭喜你，批量删除数据成功',
                                type: 'success'
                            });
                        } else {
                            _this.$message.error('批量删除数据失败，你干了啥奇怪的事，捏麻麻滴');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

            //分页
            handleSizeChange(val) {
                //每页显示条数
                this.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.selectAll();

            }

        },
        data() {
            return {
                //总记录数
                totalCount: 100,
                // 当前页码
                currentPage: 1,
                //每页显示的条数
                pageSize: 5,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                centerVisible: false,
                // 品牌模型数据
                brand: {
                    id: "",
                    brandName: '',
                    companyName: '',
                    ordered: "",
                    description: "",
                    status: ''
                },
                //被选中的id数组
                selectedIds: [],
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        },

    })

</script>

</body>
</html>

Guess you like

Origin blog.csdn.net/qq_61649579/article/details/124492099
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com