vue中的增加删除修改接口请求数据操作

 

最近在加班加点,生活变成了997,再赶一个项目才发现自己的,前端技术是那么的差,很希望有时间来捋一下,实在没时间,那就去偷时间吧。 主要想弄清楚的是在vue项目上的增加删除和修改等功能。

一、向数据库增加一条记录

每条记录v-model双向绑定接口对应的字段,用来传数据。 另外还要在data:{} 里面定义需要实时显示的数据。 最后用post请求,我这里是封装了post的方法。 例如:

<el-dialog>
            <div class="dialog-content">
                <table class="form-table">
                    <tr>
                        <td width="20%"><span class="red">*</span>摄像头id</td>
                        <td><el-input type="text" v-model="addDevieData.camera_id"></el-input></td>
                    </tr>
                    
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="btn btn-green" @click="addDevice()">确 定</button>
                <button class="btn btn-orange" @click="addDialog = false">关 闭</button>
            </span>
        </el-dialog>

在data中定义数据:

data () {
            return {
                addDevieData: {
                    camera_id:'',  // 定义空属性
                },
}
}


addDevice() {
                const { camera_id } = this.addDevieData; // 定义参数
                          this.$commonReq
(“url”, {
                    	camera_id 
// 需要传递的参数,也可以不是对象。
                }, (result_data) => {
                    console.log(result_data)
                    this.$message.success('提交成功');
                 
                });
            },

二、向数据库修改一条记录

修改的时候首先要选择一条数据,根据一个Id来传值,请求修改的数据接口带一个Id参数然后把数据填到表格上,在按确定的时候,就是修改数据啦

modifyItem () {
                if (this.multipleSelection.length > 1 || this.multipleSelection.length == 0) {
                    this.$message("请选择一条记录"); return;
                };
                let { camera_id } = this.multipleSelection[0];
                this.$commonReq('/fireworks/device/camera/modify', { camera_id }, (result_data) => {
                    this.addDevieData.resetProperty(result_data);
                    const { channel_count, channel_num, ...others } = result_data;
                });
     },

三、向数据库删除一条记录

删除数据也是一样,我这里的删除是需要输入密码的,所以我带一个密码参数,删除数据的时候也需要一个Id,然后请求删除接口。


confirmDelItem (confirm_pwd) {
                //处理删除确认
         const camera = this.multipleSelection.map(({camera_id}) => camera_id).join(",");
                this.$commonReq("url", {
                    camera_id: camera,
                    confirm_pwd: confirm_pwd
         }, () => {
             this.$message.success('删除成功');
                    this.showDelWarning = false;
                    this.search();
         });
                
            },
本文为博主原创文章,知识共享,开源精神,转载注明出处。