un7.13:如何在VS-Code中实现增删改查？

随着VS-Code的广泛使用，越来越多的人意识到了它的便利性，越来越多的人直接将后台代码省去，结合node.js来实现代码一体化的功能，这样不仅能够减少代码的使用，还能节约内存，使电脑运行的更为流利，今天，我就来给大家讲一讲如何在VS-Code中实现一套完整的增删改查。

所需软件：IDEA、VS-Code、Redis。

一、完成后台代码，在之前的后台代码中我只改动了一点，就是在controller的remove方法里边传参的时候，加上了RequestBody注解，代码如下：

    @PostMapping("/remove")
    public AjaxResult remove(@RequestBody String id){
        int rows=channelService.deleteChannelById(id);
        return toAjax(rows);//如果rows>0，成功
    }

二、打开vs-code，实现新增功能。

1、打开channel.js文件，将新增方法写好，注意接口的路径，代码如下：

//新增channel
export function addChannel(data){
        return request({
            url: '/basic/channel/add', //请求的路径
            method: 'post',  //请求方式get、post
            params: data  //请求的参数
        });
    }

2、打开index.vue文件，将addChannel导入，在之前导入的方法中加逗号隔开即可，代码如下：

import {listChannel,addChannel,removeChannel,getChannel,editChannel} from '@/api/basic/channel';  //导入请求后台接口的js文件

3、在视图层添加新增的按钮，并将行和列写出，代码如下：

        
            新增
        
    
        
            
            
            
              
            

 4、创建handleAdd函数，通过查询api，弹出窗口用el-dialog，代码如下：

在业务层写
//点击新增按钮是触发，弹出新增栏目的模态窗口el-dialog
        handleAdd(){
            // this.resetForm("form");//重置表单
            this.form.id = null,
            this.form.channelName = null,
            this.form.isShow = null,
            this.title = "添加栏目";
            this.open = true;//打开对话框
        },



在视图层写

            

                确定
                取消
            

5、提交表单，此段代码需要写在sumitForm方法中，代码如下：

​
submitForm{
addChannel(this.form).then(response => {
                console.log(response);
                if(response.code == 200){//添加成功
                    this.$modal.msgSuccess(response.msg);//magSuccess成功的提示
                }else{//添加失败
                    this.$modal.msgError(response.msg);//失败的提示
                }
                this.open = false;//关闭对话框
                this.getList();//刷新列表
                })

          }
​

三、删除功能。

1、打开channel.js文件，发送删除请求，代码如下：

//根据id删除channel
export function removeChannel(id){
        return request({
            url: '/basic/channel/remove', //请求的路径
            method: 'post',  //请求方式get、post
            data: id  //请求的参数
        });
    }

2、将removeChannel导入，用逗号隔开即可，代码如下：

import {listChannel,addChannel,removeChannel,getChannel,editChannel} from '@/api/basic/channel';  //导入请求后台接口的js文件

3、在视图层添加删除按钮，给数据传入id，代码如下：

4、在业务层创建函数，名字和@click中的一样，然后将id传入，进行判断，如果返回值为200，删除成功，否则失败，在VS-Code中，成功和失败的提示都有，直接调用即可，代码如下：

      //删除
        handleDelete(id){
            removeChannel(id).then(response => {
                console.log(response);
                if(response.code == 200){//删除成功
                    this.$modal.msgSuccess(response.msg);//magSuccess成功的提示
                }else{//删除失败
                    this.$modal.msgError(response.msg);//失败的提示
                }
                this.getList();//刷新列表
            })
        }

四、修改功能，修改分为两步，第一步是获取数据，第二步是修改。

1、打开channel.js文件，首先发送的是获取数据的请求，再发送修改请求，代码如下：

//根据id查询channel列表
export function getChannel(id){
        return request({
            url: '/basic/channel/get_info?id='+id, //请求的路径
            method: 'get',  //请求方式get、post
        });
    }

//修改channel
export function editChannel(data){
        return request({
            url: '/basic/channel/edit', //请求的路径
            method: 'post',  //请求方式get、post
            params: data  //请求的参数
        });
    }

2、将getChannel和editChannel一起导入，中间用逗号隔开，代码如下：

import {listChannel,addChannel,removeChannel,getChannel,editChannel} from '@/api/basic/channel';  //导入请求后台接口的js文件

3、在视图层添加修改按钮，代码如下：

4、在业务层创建函数，名字和@click中的一样，然后将id传入，回填表单数据，代码如下：

        //修改
        handleUpdate(id){
            this.title = "修改栏目";
            this.open = true;//弹出对话框
            getChannel(id).then(response => {
                this.form = response.data;//表单数据回填
            });
        },

5、进行判断，如果返回值为200，删除成功，否则失败，在VS-Code中，成功和失败都已经封装，直接调用即可，代码如下：

         //修改
            var params = {
                id: this.form.id,
                channelName: this.form.channelName,
                isShow: this.form.isShow
            }
            editChannel(params).then(response => {
                console.log(response);
                if(response.code == 200){//修改成功
                    this.$modal.msgSuccess(response.msg);//magSuccess成功的提示
                }else{//修改失败
                    this.$modal.msgError(response.msg);//失败的提示
                }
                this.open = false;//关闭对话框
                this.getList();//刷新列表
                })

在这里要说一下，其实新增和修改的方法归到数据库的时候是一样的，都是走的sumitForm方法，所以我用了判断的方式去写，如果数据库中的数据为空，就走添加方法，如果数据库有此条数据，那么我会自动获取到并回填，然后走修改方法，判断的代码如下：

        //提交表单
        submitForm(){
            console.log("栏目名："+this.form.channelName);
            console.log("是否显示"+this.form.isShow);
            if(this.form.id == null){//添加
                addChannel(this.form).then(response => {
                console.log(response);
                if(response.code == 200){//添加成功
                    this.$modal.msgSuccess(response.msg);//magSuccess成功的提示
                }else{//添加失败
                    this.$modal.msgError(response.msg);//失败的提示
                }
                this.open = false;//关闭对话框
                this.getList();//刷新列表
                })
            }else{//修改
            var params = {
                id: this.form.id,
                channelName: this.form.channelName,
                isShow: this.form.isShow
            }
            editChannel(params).then(response => {
                console.log(response);
                if(response.code == 200){//修改成功
                    this.$modal.msgSuccess(response.msg);//magSuccess成功的提示
                }else{//修改失败
                    this.$modal.msgError(response.msg);//失败的提示
                }
                this.open = false;//关闭对话框
                this.getList();//刷新列表
                })
            }  
        },

5、重置搜索表单，否则你点击添加的时候，会直接显示获取的数据。

       //重置搜索表单
        resetQuery(){
                this.resetForm("queryForm");//重置表单
                this.handQuery();//刷新请求
        },

五、测试。

1、添加功能。

添加前

添加后

2、修改功能。

修改前

修改后

 3、删除功能。

删除前

删除后

截止到目前为止，增删改查功能全部实现，现附上完整代码。

channel.js

//发送网络请求，相当于uni-app里的uni.request()
import request from '@/utils/request';
//查询channel列表
export function listChannel(query){
    return request({
        url: '/basic/channel/list', //请求的路径
        method: 'get',  //请求方式get、post
        params: query  //请求的参数
    });
}

//新增channel
export function addChannel(data){
        return request({
            url: '/basic/channel/add', //请求的路径
            method: 'post',  //请求方式get、post
            params: data  //请求的参数
        });
    }

//根据id删除channel
export function removeChannel(id){
        return request({
            url: '/basic/channel/remove', //请求的路径
            method: 'post',  //请求方式get、post
            data: id  //请求的参数
        });
    }
//根据id查询channel列表
export function getChannel(id){
        return request({
            url: '/basic/channel/get_info?id='+id, //请求的路径
            method: 'get',  //请求方式get、post
        });
    }

//修改channel
export function editChannel(data){
        return request({
            url: '/basic/channel/edit', //请求的路径
            method: 'post',  //请求方式get、post
            params: data  //请求的参数
        });
    }

index.vue

end~~