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、在视图层添加新增的按钮，并将行和列写出，代码如下：

<el-row>
        <el-col>
            <el-button @click="handleAdd" type="primary" icon="el-icon-plus" size="mini">新增</el-button>
        </el-col>
    </el-row>
        <el-table :data="channelList" stripe>
            <el-table-column label="ID" prop="id" align="center"></el-table-column>
            <el-table-column label="栏目名称" prop="channelName" align="center"></el-table-column>
            <el-table-column label="显示" prop="isShow" align="center">
              <template slot-scope="scope">
                     {{scope.row.isShow == 0? '隐藏':'显示'}}
              </template>
            </el-table-column>
</el-table>

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;//打开对话框
        },



在视图层写
<!--对话框的两个按钮-->
            <div slot="footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>

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，代码如下：

<el-table-column label="操作" align="center">
      <template slot-scope="scope">
           <el-button @click="handleDelete(scope.row.id)" type="text" icon="el-icon-delete" size="mini">删除</el-button>
      </template>
</el-table-column>

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、在视图层添加修改按钮，代码如下：

<el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleDelete(scope.row.id)" type="text" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </el-table-column>

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、重置搜索表单，否则你点击添加的时候，会直接显示获取的数据。