WEB应用开发综合实训day10

本节实训内容为layui行工具栏使用和SSM框架增删改查功能补充，以及一部分ajax异步传输的内容。
总结这十天的内容：往项目中添加新功能的步骤大致是
1.前端找到所需的layui的模块
2.编写对应的后端接口和传值功能
3.编写后端controller-service-dao-修改mapper文件
4.调试运行
(任何xml配置文件都非常重要！！！一旦出错不会提示，要注意标点符号)
会每天实时更新最新进度项目到服务器上，有需要的可以访问测试链接: http://hbuas.top:8082/ManageMusic/index.

1. 批量删除

   • artistlist.js

     if(data.length === 0){
         layer.msg('请选择一行');
     } else {
         //将前端选中的所有id存放到数组中，传到后端
         var ids = [];
         for(var i=0;i<data.length;i++){
             ids.push(data[i].aId)
         }
         //向后端传递数组
         $.ajax({
             url:"artist/deleteBatch",
             type:"post",
             data:{
                 ids:ids
             },
             traditional:true,// 使用ajax传递数组，设置traditional为true,传递普通数据不需要
             // contentType:"application/json,charset=utf-8",//传入参数的类型
             // dataType:"application/json,charset=utf-8",//返回参数的类型
             success:function (res) {
                 if(res.msg=="success"){
                     window.location.reload()
                 }
             }
         })
     }
     break;
     

   • 后端

     -------------------------ArtistController---------------------------------
     /**
          * 批量删除
     */
     @RequestMapping("/deleteBatch")
     @ResponseBody
     public ResultVo deleteBatch(Integer [] ids){
         ResultVo resultVo = artistService.deleteBatch(ids);
         return resultVo;
     }
     -------------------------TbArtistMapper---------------------------------
     <delete id="deleteBatch">
         delete from tb_artist where a_id in
         <foreach collection="ids" item="id" open="(" close=")" separator=",">
           #{id}
     	</foreach>
     </delete>
     

2. 根据id删除歌手

   删除所有歌手相关的中间表数据

   • artistlist.js

     layer.confirm("确定要删除当前行数据嘛？",function (index) {
         //后端删除数据
         $.ajax({
             type:"post",
             url:"artist/deleteOne",
             data:{
                 id:data.aId
             },
             success:function (res) {
                 if(res.msg=="success"){
                     //关闭当前窗口
                     layer.close(index);
                     //通过dom操作删除当前tr的数据
                     obj.del()
                 }
             }
         })
     })
     

   • 后端

     --------------------------ArtistServiceImpl--------------------------
     @Override
     public ResultVo deleteOne(Integer id) {
         try {
             tbArtistMapper.deleteByPrimaryKey(id);
             Integer [] ids = {id};
             //歌曲歌手中间表(根据歌手id批量删除)
             tbMusicArtistMapper.deleteBatchByAId(ids);
             return ResultVo.getSuccessVo("success");
         }catch (Exception e){
             e.printStackTrace();
             TransactionAspectSupport.currentTransactionStatus()
                 .setRollbackOnly();
             return ResultVo.getFailVo("fail");
         }
     }
     

3. 更新歌手信息

   • artistlist.js

     table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
         // console.log(obj.value); //得到修改后的值
         // console.log(obj.field); //当前编辑的字段名
         // console.log(obj.data); //所在行的所有相关数据
         $.ajax({
             url:"artist/update",
             type:"post",
             data:{
                 value:obj.value,
                 id:obj.data.aId
             },
             success:function (res) {
                 console.log(res)
             }
         })
     });
     

   • 后端

     @Override
     public ResultVo update(String value, Integer id) {
         try {
             TbArtist tbArtist = new TbArtist();
             tbArtist.setaName(value);
             tbArtist.setaId(id);
             tbArtistMapper.updateByPrimaryKey(tbArtist);
             return ResultVo.getSuccessVo("success");
         }catch (Exception e){
             e.printStackTrace();
         TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();
             return ResultVo.getFailVo("fail");
         }
     }
     --------------------------TbArtistMapper.xml--------------------------
     <update id="updateByPrimaryKey" parameterType="com.qianfeng.pojo.TbArtist">
         update tb_artist
         <set>
           	<if test="aName!=null">
             a_name=#{aName}
             </if>
         </set>
         where a_id = #{aId,jdbcType=INTEGER}
     </update>
     

4. 查看歌手详情

   • artistlist.js

     //监听行工具栏事件
     table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
         var data = obj.data //获得当前行数据
         ,layEvent = obj.event; //获得 lay-event 对应的值
         if(layEvent === 'detail'){
             //将当前歌手的id传递到后端中
             //跳转传参
             window.location.href="artistDetail?id="+data.aId
         } else if(layEvent === 'delete'){
            ...
         }
     });
     

   • PageController

     /**
          * 接收前端传递的id,查询对应的歌手，然后返回歌手详情页面
     */
     @RequestMapping("/artistDetail")
     public String detail(Integer id, Model model){
         TbArtist artist = artistService.getArtistById(id);
         //将歌手传递到前端页面
         model.addAttribute("artist",artist);
         return "artist/artist_detail";
     }
     ---------------------------ArtistServiceImpl-----------------------------
     /*
         * 这里是使用thymeleaf进行同步请求传值，不是典型前后端分离接口，所以可以不封装成resultVo返回
          */
     @Override
     public TbArtist getArtistById(Integer id) {
         try{
             TbArtist artist = tbArtistMapper.selectByPrimaryKey(id);
             return artist;
         }catch (Exception e){
             e.printStackTrace();
             return null;
         }
     }