案例分享-實現與后台服務的交互對數據的增刪改查

實現的效果:

首先需要一個本地服務器, 用於數據的增刪改查, 實現效果前需要在后台運行本地服務器

想要完整體驗案例的實現可以在(http://jason.3vzhuji.net/) 網站中下載本地服務器

運行本地服務器還需要 node.js (可以在官網中下載安裝: https://nodejs.org/zh-cn/)

在打開的本地服務器文件根目錄下打開 cmd 再輸入node app.js 回車即可打開服務器

服務器的接口說明在文件中可以查找:

用戶列表頁

這個頁面的主要的任務是來實現用戶數據的動態渲染

引入必要文件: 1. jQ文件: jquery.js   　　2. 模板引擎: template-web.js   　　3. 還有頁面自己的js文件 : index.js

1.找到接口  

2.根據靜態結構創建模板--使用簡潔語法

<!-- 添加列表結構的模板 -->
<script type='text/template' id='userlistTemp'>
    {{each data}}
      <tr>
        <td>{{$index + 1}}</td>
        <td>{{$value.name}}</td>
        <td>{{$value.gender}}</td>
        <!-- 圖片應該是從服務器端獲取的，所以在渲染圖片路徑的時候應該自己在名稱前面拼接服務器的基地址 -->
        <td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
        <td><a href="#">查看</a> <a href="javascript:;">修改</a>
          <a href="javascript:;">刪除</a></td>
    </tr>
    {{/each}}
</script>

 

3.ajax請求，獲取數據

4.進行數據的分析，分析獲取的數據是否能夠滿足渲染的要求

5.調用模板引擎，生成動態結構

6.填充到指定的位置

// 實現頁面的動態渲染
// 9：“英雄”案例獲取所有數據
// - 請求路徑：http://127.0.0.1:3002/getalldata
// - 請求方法：get
$.ajax({
    url: 'http://127.0.0.1:3002/getalldata',
    dataType: 'json',
    success: function (res) {
        console.log(res)
        $('tbody').html(template('userlistTemp', res))
    }
})

添加用戶頁面:

用戶新增

實現新增頁面的跳轉

<a class="btn btn-success pull-right" href="./add.html">添加英雄</a>

 

引入所需文件: 1.jQ: jquery.js　　2. 頁面自己的js文件: add.js

重點細節：后台接口所需要的數據有：

1.用戶名

2.姓名

3.用戶頭像的名稱，這個名稱是圖片存儲在服務器的名稱，意味着我們先實現文件的上傳，獲取到服務器返回的圖片名稱

實現圖片上傳

用戶一選擇文件就進行文件的上傳

一定要獲取到后台返回的圖片的名稱，以后做為參數傳遞

上傳文件主要的步驟有：

1.使用formdata收集文件數據

2.ajax請求，以formdata做為參數

3.注意要設置兩個屬性為false:processData contentType

4.分析返回數據，獲取圖片的名稱，實現預覽

 // 實現文件上傳，選擇好文件就會觸發change事件
$('#img').on('change', function () {
    // 1.使用formdata收集文件數據
    let myfile = $('#img')[0].files[0]
    // 我們現在只是實現文件的上傳，並不需要將表單的其它元素的數據也傳遞過去，所以不使用傳入整個表單的方式來收集數據
    let formdata = new FormData()
    // 將文件數據追加到formdata中
    formdata.append('img', myfile)

    // 2.ajax請求，以formdata做為參數
    // 8：圖片上傳(英雄案例中圖片上傳也是使用這個)
    // - 請求路徑：http://127.0.0.1:3002/uploadFile
    // - 請求方法：post

    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:3002/uploadFile',
        data: formdata,
        // 3.注意要設置兩個屬性為false:processData   contentType
        processData: false, // 不要讓ajax進行數據的處理
        contentType: false,// 不要讓ajax進行參數的編碼處理
        dataType: 'json',
        success: function (res) {
            console.log(res)
            if (res.code == 200) {
                // 實現預覽
                $('#photo').attr('src', 'http://127.0.0.1:3002/images/' + res.img)
            }
        }
    })
})

 

實現用戶新增

關鍵的操作就是：收集后台接口所需要的數據，從當前頁面來看，使用jq的serialize方法似乎最簡單

1.serialize()可以收集指定表單中擁有name屬性的表單元素的value值，所以默認情況下，img是無法成功的獲取

a.可以人為拼接，要求我們使用一個全局變量存儲res.img,但是不要這么做，因為需要多創建全局變量，同時不安全

b.推薦使用隱藏域，隱藏域就是一個input表單元素，但是在頁面中不會進行渲染（用戶看不到，但是我們可以獲取），前提是你得人為的為其賦值

• 在表單中添加一個隱藏域

• //在add.html文件中的表單域中修改
  <form id='myform'>
      <!-- 在表單的任意位置添加隱藏域，現在添加一個存儲圖片名稱的隱藏域 -->
      <input type="hidden" name="img" value="">

   

• 在圖片上傳成功之后為隱藏域賦值

• //在add.js文件中的$.ajax中修改
  success: function (res) {
      console.log(res)
      if (res.code == 200) {
          // 實現預覽
          $('#photo').attr('src', 'http://127.0.0.1:3002/images/' + res.img)
          // 將圖片的名稱存儲到隱藏域
          $('[name=img]').val(res.img)
      }
  }

   

• 直接通過serialize方法獲取用戶數據

• // let data = $('#myform').serialize()
  // console.log(data)

   

數據收集之后就實現ajax請求

 

實現新增操作

// 實現用戶數據的新增
// 10："英雄"案例實現新增用戶信息
// - 請求路徑：http://127.0.0.1:3002/add
// - 請求方法：post

$('#sub').on('click', function () {
    // let data = $('#myform').serialize()
    // console.log(data)
    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:3002/add',
        data: $('#myform').serialize(),
        dataType: 'json',
        success: function (res) {
            console.log(res)
            if (res.code == 200) {
                alert('新增成功')
                // 重新跳轉到列表頁
                location.href = './index.html'
            }
        }
    })
})

 

 

修改用戶頁面:

 

用戶編輯

頁面跳轉，傳入當前用戶的id

<!-- 添加列表結構的模板   第9行傳遞了參數 -->
  <script type='text/template' id='userlistTemp'>
    {{each data}}
      <tr>
        <td>{{$index + 1}}</td>
        <td>{{$value.name}}</td>
        <td>{{$value.gender}}</td>
        <td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
　　　　　　　//點擊修改跳轉到修改用戶頁面,獲取被點擊的用戶id並傳遞參數
        <td><a href="#">查看</a> <a href="./edit.html?id={{$value.id}}">修改</a>
          <a href="javascript:;">刪除</a></td>
      </tr>
    {{/each}}
  </script>

 

1.展示用戶默認數據

引入需要文件: a. jQ文件:  jquery.min.js 　　b. 模板引擎文件:  template-web.js 　　

　　　　　　　　c 轉譯參數文件,用於解析get的參數: common.js  實現代碼如下:　　d. 頁面自己的js文件:  edit.js  (文件的傳入順序不可變)

let itcast = {
    getParameter: function (str) { // ?id=7&name=jack
        // 刪除?
        str = str.replace('?', '')  // id=7&name=jack
        // 分割字符串
        var arr = str.split('&')  // ["id=7","name=jack"]
        // 循環遍歷再次分割
        var obj = {}
        for (var i = 0; i < arr.length; i++) { // 1.id=7
            var temp = arr[i].split('=') // ["id",7]
            // 將數據添加到對象
            obj[temp[0]] = temp[1] // {id:7}
        }
        return obj
    }
}

 

a.獲取參數id

// 1.獲取參數
// 下面這種方式權宜之計，它只適合只有一個參數的情況下，但是現實的開發場景中，多參數的情況比比皆是
// 通用的作法是將key=value&key=value這種格式的字符串轉換為對象
// let id = location.search.split('=')[1]
let id = itcast.getParameter(location.search).id
console.log(id)

 

b.根據id獲取用戶數據

注意:  需要獲取用戶數據的姓名, 性別, id, img名稱, 而表單中沒有 id參數和 img參數 這樣在新增頁面渲染不出來用戶信息 , 則需要在表單域中添加兩個隱藏域來儲存這兩個信息: 

注意: 編輯操作的時候，我們不能強迫用戶修改每一個值，意味着如果用戶沒有修改某個值，那么還應該保留原始的數據，如用戶圖片.

<input type="hidden" name="id" value='{{id}}'>
<input type="hidden" name="img" value='{{img}}'>

 

c.展示默認數據--模板/dom操作

 //創建模板結構 ,在
 1 <script type="text/template" id='usercontentTemp'>
    <tr>
           <td>姓名：</td>
           <td><input type="text" name="name" value='{{name}}'></td>
    </tr>
    <tr>
           <td>性別：</td>
        <td>
               <input id="nan" name="gender" value="男" type="radio" {{gender == '男'? 'checked' : ''}}><label                     for="nan">男</label>
               <input name="gender" value="女" type="radio" id="nv" {{gender == '女'? 'checked' : ''}}><label                     for="nv">女</label>
        </td>
    </tr>
    <tr>
        <td>頭像：</td>
        <td>
          <img src="http://127.0.0.1:3002/images/{{img}}" alt="" id="photo" width="100"
          style='border: 1px solid #ccc;margin-bottom: 5px;'>
          <input type="file" id="img">
        </td>
    </tr>
</script>

 

// 2.根據參數查詢用戶數據，進行默認數據的渲染 在編輯頁面中渲染
// 13："英雄"案例根據ID查詢單個英雄數據
// - 請求路徑：http://127.0.0.1:3002/getHeroById
// - 請求方法：get
$.ajax({
    url: 'http://127.0.0.1:3002/getHeroById',
    data: { id }, // ES6的新語法，如果對象的key和值同名，那么就只需要寫一個
    dataType: 'json',
    success: function (res) {
        console.log(res)
        if (res.code == 200) {
            $('.usercontent').html(template('usercontentTemp', res.data))
        }
    }
})

 

文件上傳

基本代碼和新增頁面中的文件上傳完全一樣

區別：編輯頁面中，我們使用了模板，所以img表單元素是一個動態元素，動態元素在綁定事件的時候應該使用事件委托 

注意:  對應的獲取元素要注意修改

代碼：

$('.usercontent').on('change', '#img', function (){})

 

2.實現用戶數據的編輯，類似新增 

a.分析接口，准備好接口所需要的數據

b.發起ajax請求

 1  1 // 實現用戶編輯
 2  2 // 11："英雄"案例實現用戶編輯提交
 3  3 // - 請求路徑：http://127.0.0.1:3002/edit
 4  4 // - 請求方法：post
 5  5 
 6  6 $('#sub').on('click', function () {
 7  7     console.log($('#myform').serialize()) 8 8 $.ajax({ 9 9 type: 'post', 10 10 url: 'http://127.0.0.1:3002/edit', 11 11 data: $('#myform').serialize(), 12 12 dataType: 'json', 13 13 success: function (res) { 14 14 if (res.code == 200) { 15 15 alert('編輯成功') 16 16 location.href = './index.html' 17 17 } 18 18 } 19 19 }) 20 20 })

 

用戶刪除

分析接口，發現刪除操作需要傳入用戶的id

我們要以異步的方式來刪除

通過事件委托的方式綁定刪除事件

1.獲取當前刪除按鈕所對應的id號

2.實現ajax請求

關於數據的獲取

1.自己沒有，要求傳遞

2.別人不傳遞，自己先存儲再獲取，一般選擇使用自定義屬性

a.定義自定義屬性

<a href="javascript:;" class='userdel' data-id='{{$value.id}}'>刪除</a>

b.獲取自定義屬性

// 實現用戶的刪除
// 12："英雄"案例實現刪除單個用戶
// - 請求路徑：http://127.0.0.1:3002/delete
// - 請求方法：get

$('tbody').on('click', '.userdel', function (e) {
    let data = $(this).data()
    if (confirm('是否真的需要刪除？')) {
        $.ajax({
            url: 'http://127.0.0.1:3002/delete',
            data: data,
            dataType: 'json',
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    alert('刪除成功')
                    // 刷新
                    init()
                }
            }
        })
    }
})