在作英雄管理器的案例總結

 2019-11-30

　　在作英雄管理器這個案例的時候，必定要先寫好需求分析：

　　　　　1、寫出要實現什麼功能，須要作什麼交互（也就是要作什麼事件）

　　　　　　　　例如這個案例裏面   在首頁頁面要實現： 一、當頁面一加載後就查詢了全部的數據    二、點擊刪除按鈕事件 

　　　　　　　　　　　　　　　　   在添加數據的頁面要實現： 3.文件的預覽（固定格式)   4.點擊新增按鈕文件的提交上傳(固定格式）跳轉

　　　　　　　　　　　　　　　　   在編輯數據頁面要實現：5.點擊編輯按鈕編輯頁面上顯示對應的英雄數據信息   6.文件的預覽  7.點擊保存按鈕文件的提交上傳 保存跳轉

　　　　　2、實現這個交互事件後，具體要怎麼一步步實現　

　　　　　　　　　　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主動添加這個參數