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

7 篇文章 5 订阅
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~~

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小格子衬衫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值