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

小格子衬衫

已于 2022-08-22 08:35:57 修改

阅读量1.6k

点赞数 2

分类专栏： ruoyi VS-Code idea 文章标签：大数据

于 2022-07-13 20:22:50 首次发布

本文链接：https://blog.csdn.net/m0_64818669/article/details/125770757

版权

idea 同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

ruoyi

7 篇文章 5 订阅

订阅专栏

VS-Code

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在VS-Code中利用Node.js实现一套完整的增删改查功能，涉及后台代码修改、前端Vue组件交互及数据操作。通过创建和导入API接口，设置按钮事件，实现表格数据的展示、新增、编辑和删除功能，并提供了详细的代码示例。

摘要由CSDN通过智能技术生成

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

       //重置搜索表单
        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

<!-- 视图层 -->
<template>
    <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-form-item label="栏目名" prop="channelName">
        <el-input placeholder="请输入栏目名" v-model="queryParam.channelName" clearable></el-input>
    </el-form-item>
    <el-form-item label="显示" prop="isShow">
        <el-select placeholder="请选择" v-model="queryParam.isShow" size="small" clearable>
            <el-option v-for="s in showList" :label="s.label" :value="s.value" :key="s.value"></el-option>
        </el-select>
    </el-form-item>
    <el-button @click="handQuery" type="primary" size="mini" icon="el-icon-search">搜索</el-button>
    <el-button @click="resetQuery" size="mini" icon="el-icon-refresh">重置</el-button>
    </el-form>
    <!--整行和整列-->
    <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-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleUpdate(scope.row.id)" type="text" icon=“el-icon-edit” size="mini">修改</el-button>
                    <el-button @click="handleDelete(scope.row.id)" type="text" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页器-->
        <pagination :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize" layout="prev,pager,next" :total="queryParam.total" @pagination="getList"></pagination>
        <!--对话框,让对话框显示出来-->
        <el-dialog :title="title" width="500px" append-to-body :visible.sync="open">
            <el-form label-width="80px" :model="form" ref="form">
                <el-form-item label="栏目名">
                    <el-input v-model="form.channelName" placeholder="请输入栏目名"></el-input>
                </el-form-item>
                <el-form-item label="显示">
                    <el-select v-model="form.isShow" placeholder="请选择" size="mini">
                        <el-option v-for="s in showList" :label="s.label" :value="s.value" :key="s.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!--对话框的两个按钮-->
            <div slot="footer">
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<!-- 业务层 -->
<script>
// 如果是导入多个文件，在花括号内用逗号隔开即可
import {listChannel,addChannel,removeChannel,getChannel,editChannel} from '@/api/basic/channel';  //导入请求后台接口的js文件

export default {
    //数据（变量的声明）
    data(){
        return{
                title:null,
                open: false,//控制对话框的打开
                channelList: null,
                queryParam: {  //查询的参数
                channelName: null,  //channel名称，和后台项目中channel实体类的属性对应，建议直接复制粘贴
                isShow: null, //是否显示，0=不显示；1显示
                //用于分页器的变量
                pageNum: 1,  //页码
                pageSize: 5,  //每页显示的条数
                total: 0  //总条数
          },
        //表单属性
        form:{
            id: null,
            channelName: null,  //channel名称，和后台项目中channel实体类的属性对应，建议直接复制粘贴
            isShow: null //是否显示，0=不显示；1显示
        },
            //下拉列表中显示的内容
            showList:[
                {label:'隐藏',value:0},
                {label:'显示',value:1}
            ]
        }
    },
    //页面初始化函数，相当于uniapp中的onShow
    created(){
        this.getList();
    },  
    //函数
    methods:{
        /*查询channel列表*/
        getList(){

            listChannel(this.queryParam).then(response => {
                console.log(response);//打印数据
                this.channelList = response.rows;//请求一个rows，得到一个集合
                this.queryParam.total = response.total;//请求一个总条数，得到一个变量函数
            });
        },
        //表格数据条件搜索
        handQuery(){
                this.queryParam.pageNum = 1;//给分页器归位
                this.getList();
            },
        //重置搜索表单
        resetQuery(){
                this.resetForm("queryForm");//重置表单
                this.handQuery();//刷新请求
        },
        //点击新增按钮是触发，弹出新增栏目的模态窗口el-dialog
        handleAdd(){
            // this.resetForm("form");//重置表单
            this.form.id = null,
            this.form.channelName = null,
            this.form.isShow = null,
            this.title = "添加栏目";
            this.open = true;//打开对话框
        },
        //提交表单
        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();//刷新列表
                })
            }  
        },
        cancel(){
            this.open = false;//关闭对话框
        },
        //修改
        handleUpdate(id){
            this.title = "修改栏目";
            this.open = true;//弹出对话框
            getChannel(id).then(response => {
                this.form = response.data;//表单数据回填
            });
        },
        //删除
        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();//刷新列表
            })
        }
    }
}
</script>

<!-- 样式表 -->
<style>

</style>

end~~