备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

MP实战系列(十三)之批量修改操作(前后台异步交互)

2018-07-23 1257
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： MyBatis的批量操作其实同MyBatis基本是一样的。并无多大区别，要说区别，除了封装的方法之外，主要就是注解方面的区别，比如@TableId、@TableField、@TableName等等区别。

MyBatis的批量操作其实同MyBatis基本是一样的。并无多大区别，要说区别，除了封装的方法之外，主要就是注解方面的区别，比如@TableId、@TableField、@TableName等等区别。

示例描述:

本次描述的是批量相关的操作，主要是批量修改等操作。

项目讲解:如何批量修改开锁方式？

准备环境和IDE工具:MySQL5.7+Maven3以上+JDK8或者JDK7+SSM框架+tomcat8或者tomcat7应用服务器+Eclipse。

本文核心:主要是Controller代码和数据传输对象和js文件中的test2()方法内的ajax。

其他的只是附加的，便于博主我个人以后回顾比较个人代码风格是否有所进步。我的理想是写一手优雅的代码。

注意:特别是有经验的开发者们，本文核心代码可用供你们参考

一、准备实体


@TableName("`lock`")
public class LockEntity implements Serializable {
    private static final long serialVersionUID = 1L;

    /**
     * 
     */
    private Integer id;

    @TableId
    private String lock_no;

    @TableField("house_code")
    private String houseCode;
 
    @TableField("room_code")
    private String roomCode;
  
    @TableField("install_time")
    private String installTime;

    @TableField("lock_kind")
    private Integer lockKind;
 
    private Integer power;
   
    @TableField("power_update_time")
    private String powerUpdateTime;

    @TableField("comu_status")
    private String comuStatus;

    @TableField("comu_status_update_time")
    private String comuStatusUpdateTime;
 
    private String region;
   
    private String address;
   
    @TableField("guarantee_time_start")
    private String guaranteeTimeStart;
 
    @TableField("guarantee_time_end")
    private String guaranteeTimeEnd;

    private Integer doorsensor;
  
    private String description;
 
    @TableField("hardware_version")
    private String hardwareVersion;
    
  
    private Integer type;
    

    @TableField("verify_code")
    private String verifyCode;
    
   
    private String no;

    @TableField("housing_code")
    private String housingCode;
    
 
    @TableField("first_open_way")
    private String firstOpenWay;
    

    @TableField("laster_open_way")
    private String lasterOpenWay;
  
    @TableField(value="node_no",exist=false)
    private String nodeNo;
   
    @TableField(value="user_id")
    private String userId;
    

    private Integer status;
    
    
    @TableField(exist=false)
    private String name;

    
   set get方法省略.... 
  }

 

二、编写DAO

public interface LockDao extends BaseMapper<LockEntity> {
    /**
     * 批量更新门锁开锁方式
     * @param lock
     * @return
     */
    public void updateLockOpenLockWayInfo(@Param ("lock") List<LockEntity> lock);
    
    
}

 

xml代码:

    
    <!-- 批量更新门锁开锁方式 -->
    <update id="updateLockOpenLockWayInfo" parameterType="java.util.List">
        <foreach collection="lock" item="lock" index="index" separator=";">
        update `lock`
        <set>
           first_open_way=#{lock.firstOpenWay},
           laster_open_way=#{lock.lasterOpenWay}
        </set>
        where id=#{lock.id}
    </foreach>      
        
    </update>

 

三、编写Service代码

public interface LockService extends IService<LockEntity> {

    /**
     * 批量更新门锁开锁方式
     * @param lock
     * @return
     */
    public void updateLockOpenLockWayInfo(@Param ("lock") List<LockEntity> lock);



    
}

 

四、编写Service实现类

@Service("lockService")
public class LockServiceImpl extends ServiceImpl<LockDao, LockEntity> implements LockService {


    @Override
    public void updateLockOpenLockWayInfo(List<LockEntity> lock) {
        // TODO Auto-generated method stub
        lockDao.updateLockOpenLockWayInfo(lock);
    }


}

 

五、Controller代码

@RestController
@RequestMapping("/lock")
public class LockController {

    private static Logger logger = Logger.getLogger(LockController.class);

    @Autowired
    private LockService lockService;

    

    /**
     * 批量修改开锁方式
     * @param openLockWayQueryVoy
     * @return
     */
    @PostMapping(value="/updateLockOpenLockWayInfo",produces="application/json;charset=utf-8")
    public Object batchUpdateLockOpenLockWayInfo(@RequestBody OpenLockWayQueryVo openLockWayQueryVo) {

        
        Integer ids[]=openLockWayQueryVo.getIds();
        String items[]=openLockWayQueryVo.getItems();
        String items2[]=openLockWayQueryVo.getItems2();
        JSONObject json = new JSONObject();    
        
        try {
            String str="";
            for (int i = 0; i < items.length; i++) {
                if(items[i].equals("on")) {
                    items[i]="0";
                }else if(items[i].equals("0")) {
                    items[i]="1";
                }
                str+=items[i];
                logger.info("items[i]:"+str);
                
            }
            String str2="";
            for (int j = 0; j < items2.length; j++) {
                if(items2[j].equals("on")) {
                    items2[j]="0";
                }else if(items2[j].equals("0")) {
                    items2[j]="1";
                }
                str2+=items2[j];
                logger.info("items2[i]:"+str2);
                
            }
            
            String first=str+"00000";
            logger.info("first:"+first);
            
            String laster=str2+"00000";
            logger.info("laster:"+laster);
            
            for (int i = 0; i < ids.length; i++) {
                logger.info("ids[i]:"+ids[i]);
                LockEntity lockEntity = new LockEntity();
                lockEntity.setId(ids[i]);
                lockEntity.setFirstOpenWay(first.substring(0,8));
                lockEntity.setLasterOpenWay(laster.substring(0,8));
                List<LockEntity> list = new ArrayList<LockEntity>();
                list.add(lockEntity);
                
                //批量修改方法调用
                lockService.updateLockOpenLockWayInfo(list);
                
            }
            json.put("returnMsg", "批量修改成功");
            json.put("returnCode", "000000");
        } catch (Exception e) {
            e.printStackTrace();
            json.put("returnMsg", "批量修改失败");
            json.put("returnCode", "111111");
        }
        
    
        
        return json;
        

    }
}

 

六、编写数据传输对象

 

public class OpenLockWayQueryVo{

    
    Integer ids[];
 
    String items[];
    
    String items2[];
    
    set get方法此处省略....
    
}

 

七、前端HTML代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<!--     <script src="../js/tologin.js"></script> -->
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link type="image/x-icon" href="/../images/fav.ico?rel=1522142498852" rel="shortcut icon"/>
    <link rel="stylesheet" href="../fonticon/iconfont.css?rel=1522142498852" />
    <link rel="stylesheet" href="../css/normalize.min.css?rel=1522142498852"/>
    <link rel="stylesheet" href="../css/app.min.css?rel=1522142498852"/>
    <link rel="stylesheet" href="../css/lock-css.min.css?rel=1522142498852"/>
    <link rel="stylesheet" href="../css/node-css.min.css?rel=1522142498852"/>
    <link rel="stylesheet" href="../css/common.min.css?rel=1522142498852"/>
    <link rel="stylesheet" href="../js/limarquee/liMarquee.css"/>
    <link rel="stylesheet" href="../css/ammeter-css.min.css"/>
    <link rel="stylesheet" href="../layui/css/modules/layer/default/layer.css" media="all">
    
    
<title>批量修改开锁方式</title>
<style>
    #menu li[data-body='lockList'],#menu li[data-body='nodeList'],#menu li[data-body='index']{
        display: none;
    }
    .yw_list table th {
        font-size: 12px;
        background-color: #dcdcdc;
        height: 36px;
        line-height: 36px;
    }
    .yw_list table td {
        text-align: center;
        font-size: 12px;
        color: #1f2f3e;
        height: 38px;
        word-break: break-all;
        word-wrap: break-word;
        line-height: 20px;
        border:1px #ddd solid;
    }
    .yw_list table tr:nth-child(odd){background:#f3f3f3;}
    .yw_list table tr:nth-child(even){background:#fff;}
</style>
    <script src="../js/baiduTemplate.js"></script>
<body>

<div class="warper" data-body="userManage">

    <!--s: sidebar-->
<div class="sidebar" id="sidebar">
  <a href="javascript:;" id="showBar"><i class="iconfont icon-icon-test15"></i></a>
  <div class="user-pic">
    <div class="user-picn">
      <span id="applytop-div-wrap-user" class="applytop-div-wrap" style="background: url('../images/3-30.png') no-repeat center; -webkit-background-size: cover;-moz-background-size: cover;-ms-background-size: cover;background-size: cover;">
      </span>
      <span class="png6"></span>
    </div>
    <p id="sidebarName"></p>
  </div>
  <ul class="menu" id="menu">
    <!--<li data-body="home" style="display: none;"><a class="png6" href="home.html"><em class="iconfont icon-pingtai" style="position: relative;right: -4px;"></em><span>平台主页</span></a></li>-->
    <li data-body="lockList" style="display: block;"><a class="png6" href="lockList.html"><em class="iconfont icon-icon-test" style="position: relative;right: -4px;"></em><span>智能门锁</span></a></li>
    <li data-body="nodeList" style="display: block;"><a class="png6" href="nodeList.html"><em class="iconfont icon-icon-test2"></em><span>智能网关</span></a></li>
    <li data-body="ammeterList" style="display: none;"><a class="png6" href="ammeterList.html"><em class="iconfont icon-dianbiao1"  style="vertical-align:middle;font-size:25px"></em><span>智能电表</span></a></li>
    <li data-body="userManage" class="menu-f" style="display:none;"><a class="png6" href="userManageList.html"><em class="iconfont icon-guanli" style="font-size: 1.8em;position:relative;top:4px;"></em><span style="padding-left:5px;">审批管理</span></a></li>
    <li data-body="mySet"><a href="mySet.html"><em class="iconfont icon-icon-test1"></em><span>个人中心</span></a></li>
    <li data-body="index" class="menu-f" style="display: block;"><a class="png6" href="index.html"><em class="iconfont icon-icon-test11"></em><span>统计分析</span></a></li>
  </ul>
</div><!--e: sidebar-->

<!--s: toper-->
<div class="toper">
  <div class="icon"><img src="../images/3-30.png" width="80" height="60" alt=""></div>
  <div class="loginout" >
    <a class="png6" href="javascript:;" id="link_loginOut"><i class="iconfont icon-icon-test9"></i><span id="exit">退出</span></a>
  </div>
</div><!--e: toper-->

<!--通知-->
<div id="pageInfo"><div class="dowebok" id="marTxt"></div></div>

  <!--s: container-->
  <div class="container" id="container">

    <div class="h60"></div>

    <!--s: main-->
    <div class="main">

        <h2 class="titpos"><span class="curpage">批量修改管理</span></h2>
      <!--s: part-3-->

        <h3 class="clrfix subtit subtitmargin combox" style="padding:10px 0 10px 30px;">
            <i class="fl subtit-l" id="yw_9">
                <input id="houseCode" type="text" class="add_ftxt" placeholder="房源编号" style="width:214px;background:#f3f3f3" maxlength="45">
                 <input id="roomCode" type="text" class="add_ftxt" placeholder="房间编号" style="width:214px;background:#f3f3f3" maxlength="45">
                <a class="addbtn red" id="J_addSearch_hong" href="javascript:;" style="margin-right:50px;margin-left:8px;">搜索</a>
                <button class="layui-btn" style="float:right;" onclick="test()">开锁方式批量设置</button>
            </i>
            <span class="fr wordicos" style="margin-top:7px; display: none;">
                <span class="word_w" id="locknum_1">共 <span class="red" id="rows"></span> 条数据</span>
            </span>
        </h3>

      <div id="user_search" class="clrfix part-s part-3 combox" style="display: none;">

        <ul class="ful lockmnglist lockmnglist2" id="forSelect1"></ul>

      </div><!--e: part-3-->

        <div id="yw_list" class="clrfix part-s yw_list combox">
            <span style="line-height: 40px;">数据列表</span>
            <table class="alert-tb tdh60" width="100%" cellpadding="0" cellspacing="0" border="0">
                <thead>
                <tr>
                    <tr>
                    <th width="60">选择</th>
                    <th>门锁编码</th>
                    <th>房源编码</th>
                    <th width="150">房间编码</th>
                    <th width="100">门锁类型</th>
                    <th width="100">是否支持门磁</th>
                    <th width="100">通信状态</th>
                     <th width="100">电池电量</th>
                     <th width="100">安装地址</th>
                    <th width="100">安装时间</th>
                    <th width="100">运营商</th>
                    <th width="100">网关</th>
                    <th width="100">操作</th>            
                </tr>
                </thead>
                <tbody id="list">
                    
                </tbody>
            </table>
        </div>
      <!--s: pages-->
    

    </div><!--e: main-->

    <div class="h60"></div>

  </div><!--e: container-->


</div>


<!--s: over-->
<div class="over" id="over"></div>
<!--e: over-->

<!--s: dialog-->
<div class="msg" id="msg">
    <div class="msgtit" style="background:#e70012"><p style="color:#fff;"></p><a href="javascript:;" title="点击关闭">X</a></div>
    <div class="msgcon">
        <div class="msginner">
            <div tabindex="5" class="confirm"></div><!--alert confirm dialog-->
        </div>
    </div>
</div>
<!--js-->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/jquery.cookie.min.js"></script>
<script src="../js/common/common.js"></script>
<script src="../layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/lock/companyLockList.js"></script>
<div id="ldings" class="ldings">
    <span></span>
</div>

</body>
</html>

 

八、主要核心js代码


   
   function test2(){
       var ids = [];//定义一个门锁编号空数组
       
       //初次开锁方式空数组
       var items = [];
       
       //后续开锁方式空数组
       var items2=[]
      
     $("input[name='lock_id']:checked").each(function(i){//把所有被选中的复选框的值存入数组
         ids[i] =$(this).val();
         
     });
          
               
     $("input[name='first_way']").each(function() {
        
         items.push($(this).val());

     });
     
     $("input[name='laster_way']").each(function() {
            
         items2.push($(this).val());

     });


             
    var first = $('input[name="first_way"]:checked').length;
    var laster = $('input[name="laster_way"]:checked').length;
    
    if(first<2){
        layui.use('layer', function(){
              var layer = layui.layer;
              
              layer.alert("初次开锁方式至少选择两种");
        });
        
        return false;
    }else if(laster<2){
        
        layui.use('layer', function(){
              var layer = layui.layer;
              
              layer.alert("后续开锁方式至少选择两种");
        });
      
      return false;
    }else{
        
        var data = {
                ids:ids,
                items:items,
                items2:items2
        }
        $.ajax({

            url: "/lms/lock/updateLockOpenLockWayInfo",
            type: "POST",
            contentType: 'application/json;charset=utf-8',
            data : JSON.stringify(data),
            dataType : 'json',            
            success: function(data){
                if(data.returnCode=="000000"){
                  layui.use('layer', function(){
                    var layer = layui.layer;
                    
                    layer.msg(data.returnMsg,{icon:1});
              });
                  setTimeout(() => {
                      
                      closeLayui();
                }, 800);
                }else{
                  layui.use('layer', function(){
                      var layer = layui.layer;
                      
                      layer.alert(data.returnMsg,{icon:5});
                });
                }
            },error:function(XMLHttpRequest, textStatus, errorThrown){
               // 状态码
                 alert(XMLHttpRequest.status);
                  // 状态
                  alert(XMLHttpRequest.readyState);
                  // 错误信息   
                  alert(textStatus);
            }

          });
       
        
        return true;
    }
         
        
   }
   
  
   //关闭layui弹框
   function closeLayui(){
       parent.layer.closeAll()
       location.reload();
  }

 

小结：通过上述例子，即可完成批量修改功能。

 

文章标签：
JavaScript
前端开发
Web App开发
数据格式
JSON
youcongtech
目录
相关文章
夏志121
|
4月前
|
前端开发
SSM整合-前后台协议联调（列表功能、添加功能、添加功能状态处理、修改功能、删除功能）
SSM整合-前后台协议联调（列表功能、添加功能、添加功能状态处理、修改功能、删除功能）
夏志121
35 0
技术小达人
|
6月前
|
存储 前端开发 JavaScript
带你读《现代Javascript高级教程》二十一、前端跨页面通信：实现页面间的数据传递与交互（2）
带你读《现代Javascript高级教程》二十一、前端跨页面通信：实现页面间的数据传递与交互（2）
技术小达人
65 0
前端歌谣
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
前端歌谣
39 0
前端歌谣
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
前端歌谣
33 0
前端歌谣
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
前端歌谣
39 0
漏刻有时
|
9月前
|
测试技术 API PHP
php对接小鹅通API开发高级实战案例解析:小鹅通实战开发之合并用户user_id批量同步
php对接小鹅通API开发高级实战案例解析:小鹅通实战开发之合并用户user_id批量同步
漏刻有时
171 0
游客oetevljcjdk52
|
算法 调度
十八、同步
十八、同步
游客oetevljcjdk52
58 0
猪痞恶霸
|
JavaScript 小程序 计算机视觉
记录一次小程序卡片组件封装的实战
来分析一下我这次所做项目的需求，首先重要的是卡片内部的布局需要卡片组件需要应用在两个场景下，每个场景的部分文本内容有区别，所以需要进行文本控制，而又要考虑到文本长度的问题，所以需要对文本内容进行一些处理，整理一下得出以下三个点
猪痞恶霸
142 0
记录一次小程序卡片组件封装的实战
_揽
|
移动开发 大数据
页面埋点H5 大数据uniapp 按需要更改代码就行
页面埋点H5 大数据uniapp 按需要更改代码就行
_揽
320 0
q7s2kces74wvy
|
前端开发 数据库 数据安全/隐私保护
总结项目功能特点（后台系统1）| 学习笔记
快速学习 总结项目功能特点（后台系统1）
q7s2kces74wvy
122 0
总结项目功能特点（后台系统1）| 学习笔记

热门文章

最新文章

  • 1
    阿里云各个地域节点测试IP（国内+海外）Ping值延迟测试（全解析）
  • 2
    基于Flink的实时日志分析系统实践
  • 3
    阿里云的SLB，植入cookie和重写cookie有什么区别？
  • 4
    uni-app 开源资源汇总
  • 5
    一文了解阿里云对象存储OSS
  • 6
    SQL SERVER中的OLEDB等待事件
  • 7
    kindle3使用技巧
  • 8
    sd卡无法写操作
  • 9
    普京顾问警告或征收科技税 谷歌苹果可能受创
  • 10
    CIO：传统企业如何做好转型？
  • 1
    手动给docusaurus添加一个搜索
    17
  • 2
    深入白盒测试：代码级透视与质量保证
    16
  • 3
    网络安全与信息安全：防御前线的关键技术与意识
    17
  • 4
    云端守卫：融合云计算与网络安全的未来之路
    16
  • 5
    nginx 配置代理ip访问https的域名配置
    17
  • 6
    基于Java的中国传统面食介绍网站的设计与实现(源码+lw+部署文档+讲解等)
    28
  • 7
    Python搭建代理IP池实现存储IP的方法
    25
  • 8
    外部中断的使用方法
    23
  • 9
    基于Java的快递信息管理系统的设计与实现(源码+lw+部署文档+讲解等)
    22
  • 10
    深入理解MySQL中的UPDATE JOIN语句
    45

    • 相关课程

    更多
  • 函数计算的功能与使用入门

    • 相关电子书

    更多
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践
  • 函数计算最佳实践：快速开发一个分布式 Puppeteer 网页截图服务

    • 相关实验场景

    更多
  • 使用交互方式创建数据表
  • 使用Count功能批量创建资源
  • 3分钟创建Serverless Job 定时获取新闻热搜
  • 函数计算进阶-IP查询工具开发
    • 下一篇
    阿里云oss简介和使用流程