在做英雄管理器的案例总结

 2019-11-30

　　在做英雄管理器这个案例的时候，一定要先写好需求分析：

　　　　　一、写出要实现什么功能，需要做什么交互（也就是要做什么事件）

　　　　　　　　例如这个案例里面   在首页页面要实现： 1、当页面一加载后就查询了所有的数据    2、点击删除按钮事件 

　　　　　　　　　　　　　　　　   在添加数据的页面要实现： 3.文件的预览（固定格式)   4.点击新增按钮文件的提交上传(固定格式）跳转

　　　　　　　　　　　　　　　　   在编辑数据页面要实现：5.点击编辑按钮编辑页面上显示对应的英雄数据信息   6.文件的预览  7.点击保存按钮文件的提交上传 保存跳转

　　　　　二、实现这个交互事件后，具体要怎么一步步实现　

　　　　　　　　　1.1 ajax发送请求，获得服务器返回回来的数据（JS对象）

　　　　　　　　　1.2 将返回之后的数据 通过模板引擎渲染到页面上

　　　　　　　　　2.1 为这个删除按钮注册点击事件，这里会遇到一个问题(注意点)，我们所点的这个删除按钮是通过ajax请求的回来动态添加，所以我们要用 事件的委托：给这个点击的按钮的父级元素 注册点击事件，委托者为这个按钮（$(‘点击按钮的父亲元素’).on('click',‘点击的按钮’，function(){})

　　　　　　　　　2.2 获取这个所点击按钮对应的id： 这里也会遇到一个问题(注意点)：ajax返回回来的数据里有对应的英雄的id名，我们要获取这个id的话，就要通过自定义属性data-id来存储这个id，把这个自定义类名写在模板引擎的英雄列表对应的编辑按钮里，让他的值 为{{ v.id }} 获取了ajax返回回来的id ，然后点击哪一个编辑按钮就能通过attr获取当前的id   $(this).attr(‘data-id’）  这里要提醒一下：css操作的是css样式属性 ，attr操作的是html属性 和 自定义属性

　　　　　　　　　2.3 ajax发送删除请求，发送id给服务器，服务器返回相应的数据   当状态码为204时 删除成功，刷新页面

 if (backData.code == 204) {
            alert('删除成功');
　　　　　　　//刷新
            window.location.reload();
          }

 文件预览：　　　       3.1  给file表单注册 onchange事件 (只要用户选择了文件就会执行)

    　　　　　　　　　   3.2  获取用户选择的文件信息　　　　

   　　　　　　　　　 3.3  将文件信息转化url路径

　　　　　　　　　　 3.4   设置img标签的src为图片的url路径

 $('#heroIcon').change(function () {
     //1.2 获取用户选择的图片
     var file = this.files[0];
     //1.3 将文件转为src路径
     var url = URL.createObjectURL(file);
     //1.4 将url路径赋值给img标签的src
     $('.preview').attr('src', url);
   });

 文件提交上传：　　　　4.  ***文件上传一定要使用formData处理文件

    $('.btn-add').on('click',function(e){
      //禁用表单默认提交事件
      e.preventDefault();
      console.log('点击新增按钮');
      //创建FormData对象：参数是表单dom对象($('form')[0]通常下标取第一个元素的)
      var fd = new FormData($('form')[0])
      $.ajax({
        url:'http://127.0.0.1:4399/hero/add',
        type:'post',
        dataType:'json',
        data:fd,
        contentType: false,
        processData: false,
        success: function(backData){
          console.log(backData);
          if(backData.code==201)
          alert('新增成功');
          window.location.href = './index.html';
        }
      });
    });

  　　　　　　　　　　　5.1 获取首页传递过来的 id(页面间传值) 的方法： 在首页模板引擎模板中给编辑按钮的跳转后面加上  ?id={{ v.id }}，这样可以通过window.location.href 得到所点击的编辑按钮跳转页面的url值,再通过字符串的切割方法split('=')切割= 得到地址和id 通过下标[1]获得      这里说明一下    页面间传值 ：sessionStorage：适合传多个数据   window.location.href : 适合传少量数据

 <button onclick="location.href='./edit.html?id={{ v.id}}'" class="btn btn-primary">编辑</button>

var id = window.location.href.split('=')[1];

　　　　　　　　　　　　5.2  ajax发送请求英雄详情  根据id获取点击的英雄信息

   $.ajax({
     url:'http://127.0.0.1:4399/hero/id',
     type:'get',
     dataType:'json',
     data:{id:id},
     success: function(backData){
        console.log(backData);
        //数据返回之后 渲染页面
        $('#heroName').val(backData.data.name);
        $('#skillName').val(backData.data.skill);
        $('.preview').attr('src',backData.data.icon);// 添加图片预览
        // $('#heroId').val(id);// input隐藏域 获取id
     }
   });

　　　　　　　　　　　　 5.3  文件预览 格式跟过程3类似

   //1.给file表单元素注册onchange事件
   $('#heroIcon').change(function () {
     //1.2 获取用户选择的图片
     var file = this.files[0];
     //1.3 将文件转为src路径
     var url = URL.createObjectURL(file);
     //1.4 将url路径赋值给img标签的src
     $('.preview').attr('src', url);
   });

　　　　　　　　　　　　5.4 文件提交上传 

  $('.btn-save').on('click',function(e){
    //禁用表单默认提交事件
    e.preventDefault();
    //创建FormData对象：参数是表单dom对象 jq对象转成dom对象 通常取第一个元素的下标
    var fd = new FormData($('form')[0]);

    // 如果不传id的话会 出现400的错误 传参错误
    // 通过 append 主动添加 id
    fd.append('id',id);

    $.ajax({
      url:'http://127.0.0.1:4399/hero/update',
      type:'post',
      dataType:'json',
      data:fd,
      contentType: false,
      processData: false,
      success: function(backData){
        console.log(backData);
        if (backData.code==202) {
            alert('修改成功,已保存');
            window.location.href = './index.html';
        }
      }
    });
  });

　　　　　　　　　这里我们会 遇到一个问题 (注意点): 服务器会提示有一个参数没有传,这样类似问题的解决方法:  分析原因: FormData只能获取表单元素,不能获取id值,所以解决问题方案从两方面入手:(1)要么手动主动添加一个参数,  使用append的主动给fd(FormData对象)添加  (这个最常用)   fd.append('id',id);   (2)要么就在表单中添加一个input隐藏域        

  <!-- 隐藏input ： 用户看不见，但是formdata可以获取到 -->
  <input type="hidden" id="heroId" name="id" /> //写在html表单中

　$('heroId').val(id); //放在ajax请求英雄详情中渲染页面中 见5.2

　以上四个问题注意点汇总: 1.当所点击的是按钮等不触发事件: 如果该按钮是通过ajax请求动态得到添加的,就要用 on方法的委托事件

　　　　　　　　　　　　　　　2. 获得 ajax请求返回数据的id : 自定义一个属性 通过模板引擎 v.id获得返回的id  再通过attr操作自定义属性对应的获取id值

　　　　　　　　　　　　　　　3. 获得一个页面传递过来的id值(页面间传值) :   通过字符串切割spilt('=') 模板引擎获取来的 window.location.href='地址?id={{v.id}}'

　　　　　　　　　　　　　　　4. 少传参: 通过append给fd主动添加这个参数

 

 

　　　补充： 关于加载loading效果  

　　　　　　1. 设置一个遮罩栏，遮罩栏里面放着jgif图片，默认隐藏

  <!-- 遮罩层  HTML结构 -->
  <div class="cover" style="display: none">
    <img class="loading" src="./img/loading01.gif" alt="" />
  </div>

　　　　　　2. 当事件执行ajax数据返回之后，替换默认的gif图片

   //    ajax数据返回之后 使用服务器返回的gif 替换 cover默认的gif
            $('.cover>img').attr('src',backData.data.skillGif);

　　　　　　3. 点击遮罩栏给其设置一个消失动画 ： 注意：将图片在修改成loading图片(gif) 这个要放在遮罩栏做完淡出的动画之后执行 即放在动画之后的回调函数中

  // 点击遮罩栏 ,遮罩栏消失(淡出)
      $('.cover').click(function () {
        $(this).fadeOut(function () {
          // 将图片在修改成loading图片(gif) 这个要放在遮罩栏做完淡出的动画之后执行
          // 所以放在fadeOut 的回调函数中
          $('.cover>img').attr('src','./img/loading01.gif');
        });
      })

 

 

 

 

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Leoragelovexer