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

红太狼 2023-10-11 17:52 64阅读 0赞

随着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、添加功能。

添加前

![f0c821fef1d844f780a35d653794cd3a.png][]

添加后

![f4cc42a7ffcd4321842a91ead8d3d12b.png][]

2、修改功能。

修改前

![df35ddd5bffe4bc4ac00817ca8ce2a19.png][]

修改后

![8bb06a7a751a450bbac2669c0b136099.png][]

3、删除功能。

删除前

![5536c9e0af9d4816901b99c115250869.png][]

删除后

![1138ea2f41a049039abf92eca082e2bf.png][]

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

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~~

[f0c821fef1d844f780a35d653794cd3a.png]: https://img-blog.csdnimg.cn/f0c821fef1d844f780a35d653794cd3a.png
[f4cc42a7ffcd4321842a91ead8d3d12b.png]: https://img-blog.csdnimg.cn/f4cc42a7ffcd4321842a91ead8d3d12b.png
[df35ddd5bffe4bc4ac00817ca8ce2a19.png]: https://img-blog.csdnimg.cn/df35ddd5bffe4bc4ac00817ca8ce2a19.png
[8bb06a7a751a450bbac2669c0b136099.png]: https://img-blog.csdnimg.cn/8bb06a7a751a450bbac2669c0b136099.png
[5536c9e0af9d4816901b99c115250869.png]: https://img-blog.csdnimg.cn/5536c9e0af9d4816901b99c115250869.png
[1138ea2f41a049039abf92eca082e2bf.png]: https://img-blog.csdnimg.cn/1138ea2f41a049039abf92eca082e2bf.png