一般的增删改查

最新推荐文章于 2023-05-07 08:00:00 发布
最新推荐文章于 2023-05-07 08:00:00 发布
阅读量169 收藏
点赞数
分类专栏： Vue 文章标签： Vue CRUD
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37879526/article/details/102554383
版权

<template>

<div>

     <el-row :gutter="20">

  <el-col :span="6"><div class="grid-content bg-purple">

    Recipe ID :<el-input id="in1" v-model="rname"></el-input> 

    </div></el-col>

  <el-col :span="6"><div class="grid-content bg-purple">

    Site No: <el-input id="in2" v-model="count"></el-input>

    </div></el-col>

    <el-col :span="6"><div class="grid-content bg-purple">

    Owner: <el-input id="in3" v-model="owner"></el-input>

    </div></el-col>

</el-row>

<el-row :gutter="20"  v-loading="loading">

  <el-col :span="6"><div class="grid-content  "></div></el-col>

  <el-col :span="2"><div class="grid-content  ">

    <el-button type="info" @click="createtable">add</el-button>

    </div></el-col>

    <el-col :span="2"><div class="grid-content  ">

    <el-button type="info" @click="querytable">query</el-button>

    </div></el-col>

  <el-col :span="2"><div class="grid-content  ">

    <el-button type="info" v-on:click="clear">clear</el-button>   

    </div></el-col>

</el-row>

<!-- <div v-if="addvisable"> -->

<div>

<el-table id="savetable" 

      :data="tableData"

      style="width: 65%">

      <el-table-column

        label="Recipe Name"

        width="200">

        <template slot-scope="scope">

        <span style="margin-left: 10px">{{ scope.row.RECIPENAME }}</span>

      </template>

      </el-table-column>

      <el-table-column

        label="Site"

        width="100">

        <template slot-scope="scope">

        <span style="margin-left: 10px">{{ scope.row.SITENAME }}</span>

      </template>

      </el-table-column>

       <el-table-column

        label="OWNER"

        width="120">

        <template slot-scope="scope">

        <el-input  placeholder="请输入工号" v-model="scope.row.OWNER"></el-input>

      </template>

      </el-table-column>

      <el-table-column width="200" label="X">

        

        <template slot-scope="scope">

        <el-input  placeholder="请输入X坐标" v-model="scope.row.COORDINATEX"></el-input>

      </template>

      </el-table-column>

      <el-table-column width="200" label="Y">

        <template slot-scope="scope">

        <el-input  placeholder="请输入X坐标" v-model="scope.row.COORDINATEY"></el-input>

      </template>

      </el-table-column>

    </el-table>

    <el-row :gutter="20">

  <el-col :span="6"><div class="grid-content  "></div></el-col>

  <el-col :span="2"><div class="grid-content  ">

    <el-button type="info" @click="savedata">save</el-button>

    </div></el-col>

  <el-col :span="2"><div class="grid-content  ">

    <el-button type="info" v-on:click="clear2">clear</el-button>   

    </div></el-col>

</el-row>

</div>

 

<div>

<!-- <div v-if="queryvisable"> -->

    <el-table id="queryData" 

      :data="queryData"

      style="width: 80%">

      <el-table-column

        label="Recipe Name"

        width="200"

        prop="RECIPENAME">

        

      </el-table-column>

      <el-table-column

        label="Site"

        width="100"

        prop="SITENAME">

      </el-table-column>

      <el-table-column

        label="COORDINATE"

        width="120"

        prop="COORDINATE">

      </el-table-column>

      <el-table-column width="120" label="Owner">

      <template slot-scope="scope">

        <el-input  placeholder="请输入工号" v-model="scope.row.OWNER"></el-input>

      </template>

      </el-table-column>

      <el-table-column width="200" label="Time"

      prop="CREATETIME">

      </el-table-column>

      <el-table-column width="100" label="X">

      <template slot-scope="scope">

        <el-input  placeholder="请输入X坐标" v-model="scope.row.COORDINATEX"></el-input>

      </template>

      </el-table-column>

      <el-table-column width="100" label="Y">

      <template slot-scope="scope">

        <el-input  placeholder="请输入y坐标" v-model="scope.row.COORDINATEY"></el-input>         

      </template>

      </el-table-column>

      <el-table-column label="操作">

      <template slot-scope="scope" v-if="scope.$index+1==queryData.length">

        <el-button

          size="mini"

          type="danger"

          @click="handleDelete(scope.$index, scope.row)">删除</el-button>

          <el-button

          size="mini"

          type="success"

          @click="handleAdd(scope.$index, scope.row)">添加</el-button>

      </template>

    </el-table-column>

    </el-table>

    <el-row :gutter="20">

        <el-col :span="6"><div class="grid-content  "></div></el-col>

        <el-col :span="2"><div class="grid-content  ">

          <el-button type="info" @click="changedata">change</el-button>

          </div></el-col>

      </el-row>

</div>

</div>

 

</template>

<script>

 export default {

   data() {

        return {

          tableData: [],

          count:'',

          rname:'',

          isvisable:false,

          queryData:[],

          loading:false,

          addvisable:false,

          queryvisable:false,

          owner:''

        }

      },

    methods:{

      clear:function(){

          this.rname='';

          this.count='';

      },

      clear2:function()

      {

        let _this=this;

        for(var i=0;i<_this.tableData.length;i++)

        {

          _this.tableData[i]["COORDINATEX"]="";

          _this.tableData[i]["COORDINATEY"]="";

        }

      },

      createtable:function(){

          let _this=this;

 

        let url = this.URL_PREFIX + "/ReqRpt216/checkrecipeisexist";

        var checkvalue=0;

        $.ajax({

                    url: url,

                    type: "post",

                    contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式

                    dataType: "json",

                    data: {RecipeName:_this.rname} ,

                    success: function (data,status) {

                        if(data=="exist")

                          {

                            alert("该RecipeName已经存在，请重新输入");

                            checkvalue=1;

                          }

                    },

                    error:function (data,status)

                    {

                        alert("系统错误，请重新输入或联系IT");

                    },

                    async: false

            });

 

          if(checkvalue!=0)

          {

            return ;

          }


 

          var reg = /^[1-9]\d*$/;

          if(_this.rname==""||_this.rname==null)

          {

            alert("请先输入RecipeName再查询");

            return;

          }

          if(!reg.test(_this.count))

          {

            alert("Site No 请输入数字");

            return;

          }

          if(_this.owner=="")

          {

            alert("Owner请输入工号");

            return;

          }

          var a=new Array(Number( _this.count));

          for(var i=0;i<Number( _this.count);i++)

          {

            var o=new Object();

            o.RECIPENAME=_this.rname;

            o.SITENAME="Site"+(i+1);

            o.OWNER=_this.owner;

            o.CREATETIME='';

            o.COORDINATEX='';

            o.COORDINATEY='';

            a[i]=o;

          }

          _this.tableData=a;

          _this.addvisable=true;

          _this.queryvisable=false;

      },

      savedata:function(){

        let _this=this;

        if(_this.tableData.length==0)

        {

          alert("请先添加数据再进行保存！");

          return;

        }

        let url = this.URL_PREFIX + "/ReqRpt216/savecoordinate";

        var date=new Date();

 

          var year=date.getFullYear();

          var month=date.getMonth();

          var day=date.getDate();

 

            var hour=date.getHours();

            var minute=date.getMinutes();

            var second=date.getSeconds();

 

            if (hour<10) {

              hour='0'+hour;

            }

            if (minute<10) {

              minute='0'+minute;

            }

            if(second<10)

            {

              second='0'+second;

            }

            var nowtime=year+'-'+(month+1)+'-'+day+' '+hour+':'+minute+':'+second;

        for(var i=0;i<_this.tableData.length;i++)

        {

          if(_this.tableData[i]["OWNER"]==""||_this.tableData[i]["COORDINATEX"]==""||_this.tableData[i]["COORDINATEY"]=="")

          {

            alert("有栏位的值未输入");

            return;

          }

          _this.tableData[i]["CREATETIME"]=nowtime;

          _this.tableData[i]["COORDINATEX"]=Number(_this.tableData[i]["COORDINATEX"]);

          _this.tableData[i]["COORDINATEY"]=Number(_this.tableData[i]["COORDINATEY"]);

        }

        

 

        let savedata={savelist:_this.tableData};

          $.ajax({

                    url: url,

                    type: "post",

                    contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式

                    dataType: "json",

                    data: savedata ,

                    success: function (data,status) {

                        if(data=="exist")

                          {

                            alert("该RecipeName已经存在，请重新输入");

                          }else

                          {

                            alert("添加成功");

                          }

                        

                    },

                    error:function (data,status)

                    {

                        alert("系统错误，请重新输入或联系IT");

                    },

                    async: false

            });

      },

      querytable:function(){

        let _this=this;

       if(_this.rname=="")

       {

         alert("请先输入RecipeName再查询");

         return;

       }

 

      _this.loading=true;

        let url = this.URL_PREFIX + "/ReqRpt216/querycoordinate";

        $.ajax({

                    url: url,

                    type: "post",

                    contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式

                    dataType: "json",

                    data: {RecipeName:_this.rname} ,

                    success: function (data,status) {

                        if(data=='nodata')

                        {

                          alert("该RecipeName没有Coordinate，请先添加再查询");

                        }else

                        {

                          _this.queryData=JSON.parse(data);

                          _this.queryvisable=true;

                        }

                    },

                    error:function (data,status)

                    {

                        alert("系统错误，请重新输入或联系IT");

                    },

                    async: false

            });

         _this.addvisable=false;

      _this.loading=false;

      },

      changedata:function(){

 

            var date=new Date();

 

          var year=date.getFullYear();

          var month=date.getMonth();

          var day=date.getDate();

 

            var hour=date.getHours();

            var minute=date.getMinutes();

            var second=date.getSeconds();

 

            if (hour<10) {

              hour='0'+hour;

            }

            if (minute<10) {

              minute='0'+minute;

            }

            if(second<10)

            {

              second='0'+second;

            }

            var nowtime=year+'-'+(month+1)+'-'+day+' '+hour+':'+minute+':'+second;

 

            let _this=this;

            let url = this.URL_PREFIX + "/ReqRpt216/changecoordinate";

            var needchangearray=new Array();

            //queryData

            for(var i=0;i<_this.queryData.length;i++)

            {

              if((_this.queryData[i]["COORDINATEX"]==null&&_this.queryData[i]["COORDINATEY"]!=""&&_this.queryData[i]["COORDINATEY"]!=null)||(_this.queryData[i]["COORDINATEY"]==null&&(_this.queryData[i]["COORDINATEX"]!=""&&_this.queryData[i]["COORDINATEX"]!=null)) )

              {

                  alert("x坐标和y坐标同时需要输入或者不输入");

                        return;

              }

              if((_this.queryData[i]["COORDINATEX"]==""&&_this.queryData[i]["COORDINATEY"]!=""&&_this.queryData[i]["COORDINATEY"]!=null)||(_this.queryData[i]["COORDINATEY"]==""&&(_this.queryData[i]["COORDINATEX"]!=""&&_this.queryData[i]["COORDINATEX"]!=null)) )

              {

                  alert("x坐标和y坐标同时需要输入或者不输入");

                        return;

              }

              if(_this.queryData[i]["COORDINATEX"]!=""&&_this.queryData[i]["COORDINATEX"]!=null)

              {

                _this.queryData[i]["CREATETIME"]=nowtime;

                needchangearray.push(_this.queryData[i]);

              }

              if(_this.queryData[i]["COORDINATE"]=="")

              {

                if(!(_this.queryData[i]["COORDINATEX"]!=""&&_this.queryData[i]["COORDINATEX"]!=null))

                {

                   alert("新增的Site需要输入xy坐标");

                        return;

                }

                if(!(_this.queryData[i]["COORDINATEX"]!=""&&_this.queryData[i]["COORDINATEX"]!=null))

                {

                   alert("新增的Site需要输入xy坐标");

                        return;

                }

              }

            }

            if(needchangearray.length==0)

            {

              alert("请先输入想要修改的值，再修改！");

              return;

            }

 

            let changedata={changelist:needchangearray};

            $.ajax({

                    url: url,

                    type: "post",

                    contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式

                    dataType: "json",

                    data: changedata ,

                    success: function (data,status) {

                        if(data=="success")

                        {

                          alert("修改成功");

                        }else

                        {

                          alert("操作失败");

                        }

                    },

                    error:function (data,status)

                    {

                        alert("系统错误，请重新输入或联系IT");

                    }

            });

 

      },

      handleDelete:function(index, row) {

        let _this=this;

         let url = this.URL_PREFIX + "/ReqRpt216/deletecoordinate";

         $.ajax({

                    url: url,

                    type: "post",

                    contentType: "application/x-www-form-urlencoded; ", //默认，表单提交格式

                    dataType: "json",

                    data: {RECIPENAME:row.RECIPENAME,SITENAME:row.SITENAME} ,

                    success: function (data,status) {

                        if(data=='success')

                        {

                          alert("删除成功");

                        }else

                        {

                         alert("操作失败");

                        }

                    },

                    error:function (data,status)

                    {

                        alert("系统错误，请重新操作或联系IT");

                    },

                    async: false

            });

            for(var i=_this.queryData.length;i>0;i--)

            {

              if(_this.queryData[i-1]["SITENAME"]==row.SITENAME)

              {

                _this.queryData.splice(i-1,1);

                return;

              }

            }

      },

      handleAdd:function(index, row){

          let _this=this;

          var o=JSON.parse(JSON.stringify(_this.queryData[Number(index)]));

          o.SITENAME="Site"+(index+2);

          console.log(o.SITENAME);

          o.COORDINATE="";

          _this.queryData.push(o);

 

      }

      

    }

}

 

</script>

<style>

 .el-row {

    margin-bottom: 10px;

   

  }

  .el-col {

    border-radius: 4px;

  }

  .bg-purple-dark {

    background: #99a9bf;

  }

  .bg-purple {

    background: #d3dce6;

  }

  .bg-purple-light {

    background: #e5e9f2;

  }

  .grid-content {

    border-radius: 4px;

    min-height: 36px;

    margin-top:5px;

    padding-top: 5px; 

  }

  .row-bg {

    padding: 5px 0;

    background-color: #f9fafc;

  }

</style>

zq爱生活爱代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表的增删改查（CRUD）
apt1203JN的博客
05-26 2160
1、增加 语法： insert into table_name[(column[,column...])] values (value [,value...]); 增加进阶： 更新： 主键插入如果重复：（如果重复做更新，如果不重复做插入） insert into t7 values(1,”易烊千玺”) on duplicate key update name = ...
AJAX普通增删改查
antang9708的博客
11-18 75
引用文件 <link href="~/BootstrapSouce/css/bootstrap.css" rel="stylesheet" /><script src="~/BootstrapSouce/js/bootstrap.min.js"></script><script src="~/BootstrapSouce/js/jquery.m...
增删改查操作
weixin_42540643的博客
11-20 230
正常操作： 1，增save(){} from表单提交 2，删del(){} 3，改update(){} 4，查select(){}
程序员常用的”增删改查“你知道什么意思吗？
PHP1155的博客
03-10 2124
做一个完整的博客系统，发表一个博客文章是『增』，针对一篇博客发表评论是『增』，删除一个博客文章是『删』，修改一个文章内容是『改』，让一个博客能被用户订阅，这也是『增』，让热门博客能同时被100000个用户读到，这是『读』，让用户能够看到自己订阅的所有博客的文章时间线，这也是『读』，但是这些『读』就不那么容易——这算是进阶水平的增删改查。做个最土的个人笔记系统，增加一个笔记就是一个『增』，删除一个笔记就是一个『删』，修改一个笔记就是『改』，用户看自己的笔记就是『读』——超级简单的，入门级水平。
【MYSQL】基础的增删查改
m0_72964546的博客
05-07 1766
mysql的增删查改也叫做CRUD：即增加(Create)、查询(Retrieve)、更新(Update)、删除(Delete)四个单词的首字母缩写。
增删查改
weixin_44580278的博客
08-09 3664
增删查改 增删查改在所有的语言代码中都是最基础和重要的，增删查改在代码中担任着不可缺少的一部分，整个代码项目都是靠着增删查改。“增删查改”就如同字面意思一样，增：新增（insert）,删：删除（delete）,查：查询（select），改：修改（update）,代码做出来的东西大部分都是靠着“增删查改”来运行的！ 先说的就是增：新增（insert），最简单的意思就是用原来的数据来新增一条或多条新的数据，这就是新增。首先要有一个写一个模态框才能在模...
数据库的增删改查
xue1163的博客
08-11 2万+
一、数据库 数据库;存放数据的仓库 如果把数据存放在一个文本文件中,有很多的缺点: a.可以任意修改/删除/新增 b.检索不便 c.信息不安全 数据库系统;就能方便解决上述问题. 常用的数据库系统:MySal Oracle sQlserver… 二、数据库的增删改查操作 增删查改语句 增删查改的意思 ·增:新增记录insert .删:删除记录delete ·查:查询记录select ·改:修改记录update insert语句 insert语句对应的是"增”，也即新增数据 基本用法: inser
增删改查的更深理解
yhwu123的博客
07-15 302
views from rest_framework.response import Response from api import models from rest_framework.views import APIView from rest_framework.generics import GenericAPIView from api.ser import BookModelSerializer class BookAPIView(APIView): def get(self,re
常用的 增删改查
qq_46751773的博客
04-03 277
1增 1.1【插入单行】 insert [into] <表名> (列名) values (列值) 例：insert into Strdents (姓名,性别,出生日期) values (‘开心朋朋’,‘男’,‘1980/6/15’) 1.2【将现有表数据添加到一个已有表】 insert into <已有的新表> (列名) select <原表列名> from &...
基于Spring的Quartz动态定时任务增删改查
01-31
基于Spring的Quartz动态定时任务增删改查，代码简洁。后端采用SpringMvc+Spring+Mybatis+Quartz，前端采用Bootstrap框架，数据库采用MySQL；完成定时任务动态任务初始化，增删改查
Spring+Quartz 从数据库中获取定时任务和定时时间，动态实现对定时任务的增删改查
10-02
Spring+Quartz 从数据库中获取定时任务和定时时间，动态实现对定时任务的增删改查，部署到tomcat即可看到定时任务执行效果。本人亲测，可用！
关于增删查改的小总结
IT_abmin的博客
06-21 702
顾名思义： ·增-是添加的意思 ·删-是删除的意思 ·查-是查找的意思 ·改-是修改的意思 *在学C#中，运用最多的就是增删查改了，可以说它在C#使用中无处不在 1、增：新增 在页面添加新的数据，并保存到数据库里面 一、新增·页面操作 ①、打开新增的模态框 function abc(){ //清空表单 document.getElementById(“formClass”).resert(); //手动清空图片 $("#picture").attr(“src”,"") //根据ID来判断新增还是修改 $("
element radio ，单击取消
qq_32734639的博客
03-27 583
<el-radio-group v-model="baseInfoForm.cornerMarkId"> <el-row type="flex" :gutter="30"> <el-col v-for="item in corne...
informix数据库常用命令总结
lingyun1987的博客
03-24 1891
informix操作
数据库、表、基本增删改查
热门推荐
qq_39380737的博客
07-17 2万+
一、对数据库的操作 1.创建一个库 create database 库名 create database 库名 character set 编码 创建带有编码的 查看编码： 2.删除一个库 drop database 库名 3.使用库 use 库名 4.查看当前正在操作的库 二、对数据库表的操作 1.创建一张表 create table 表名( ...
如何做增删改查的业务
KuaiLeShiFu的博客
01-09 1501
1.背景 在web开发的后端开发，一定会遇到操作数据库的开发，包括增删改查。 2.如何做增删改查的业务 先设计表，设计模型 然后编写sql,执行查询计划，优化sql 最后用代码实现。 提前做基础的、最重要的、最复杂的 做了基础的，上层依赖它的就可以开展了。做了最重要的，后面的就是时间问题了，做了最复杂的，后面的风险就得到控制了， ，可以提前知晓风险，从而降低风险； 这
spring boot集成quartz实现定时任务的增删改查
Tina的博客
12-29 3195
整理一下很久之前写的quartz集成到spring boot代码，主要为了实现可视化操作定时任务，只添加了后台rest接口和代码，前台代码请自行处理。 1. 引入quartz &lt;dependency&gt; &lt;groupId&gt;org.quartz-scheduler&lt;/groupId&gt; &lt;artifactId&gt;quartz&lt;/a...
java crud是什么_java中增删改查(CRUD)总结
weixin_34404199的博客
02-16 3429
对于User表增删改查：1：save(保存方法) view(查询所有记录) update(更新方法) delete(删除方法) 通过method这个参数进行判断执行不同的操作2: 具体的实现：(1) save: 保存页面(user_save.jsp) 提交数据到后台的userSave方法 -> 获取提交的数据(getParameter) ->把获取的数据封装成一个User对象 -...
vue-springboot实现基本crud
浔者的博客
06-05 1235
本例项目目录大概为： 想实现点击编辑让update修改组件顶替list列表组件，list为header的子组件，但是能力有限，没有实现，有大佬知道可以评论告知一下。 由于要在update回显，要传当前emp数据和全部department数据，对于从后台获取数据获取并传过去又没搞定，我这里就把update放在list里面当子组件了，通过父子组件传过去了。 列表中数据如下，list怎么来的各位自己搞定 list.vue全部代码 <template> <div&gt.
springmvc增删改查思路
最新发布
06-04
在Spring MVC中，增删改查操作通常包括以下步骤： 1. 配置数据源：在Spring MVC中，我们需要配置数据源，以便能够连接到数据库并执行增删改查操作。 2. 创建实体类：我们需要创建一个实体类来表示数据表中的一行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值