使用githubpagesmock資料

weixin_34185364發表於2017-09-19
GithubMock

前面說了ajax，請求需要發到一個介面，也就是一個伺服器上，如果伺服器不存在就報錯了，404或者503錯誤，後續渲染也執行不了了。現在就是讓介面運作起來，有資料返回。
正常情況下介面是後端開發的，前端跟後端掛鉤的就是向後端發請求和資訊，要後端的資料。

為什麼需要搭建個埠和模擬些資料

比如做了個天氣頁面，前端的部分基本寫好了，但是資料是哪裡的？城市的變化，資料變，日期變，資料變，都是向後端要的，一開始開發時，前端要先跟後端商量好，同步開發，但是後端的介面開發的晚，前端一開始就需要資料模擬，進行樣式功能的開發，不能耽誤的。所以，一開始，前端跟後端商量好，介面是什麼樣的，資料格式什麼樣的，什麼樣的資料，還有URL，開發好後到底什麼樣的，傳遞的引數是什麼，跟後端確認下能不能實現。定好之後，雖然埠沒做 出來，但是自己可以模擬資料了。這時候很簡單，搭個本地介面，或者線上介面，向這個介面發請求，按規定引數發請求，構造個假資料，這個假資料的格式欄位等跟約定好的是一樣的。這時候運作，就是我向假地址發請求，要了假資料，就可以用了，開發時用這些資料可以完善頁面的功能了，完善好了。後端開發好了，介面好了，把地址改成真的地址，這時候再進行測試。
所以，我們需要搭伺服器去模擬資料。

又比如做個網易雲音樂，一個頁面要展示當前音樂分類，點選進入下個頁面，音樂分類的頁面點選，進入下個頁面音樂列表，，再點選，進入播放頁面，再點選進入歌詞頁面。
需要資料音樂分類介面，列表介面，播放介面，歌詞介面。
前端自己可以做，用一些工具或者線上的mock工具，線上上後端寫檔案造好資料 ，再在JS裡發這個介面的請求。這個時候功能就跑起來了，只是資料是死的。這就是前端的工作範圍。
介面可以通過mock獲取。

伺服器

  • http-server
  • server-mock
  • 手寫一個
  • 線上的mock資料平臺
    做一些簡單的開發測試時，我們的介面可以直接做成在學ajax裡的那個hello.json檔案一樣，就是個檔案，向這個檔案發請求，要檔案的內容。我們把假資料直接放到這個檔案裡就行了，就可以模擬後端了。
    舉例網易雲音樂，獲取分類：
<script>
  var xhr = new XMLHttpRequest()
  xhr.open('GET','/catelog.json',true)                 //把catelog.json檔案放到跟html檔案同級目錄下
  xhr.send()
  xhr.onreadystatechange = function(){
    if(xhr.readyState ===4 && ((xhr.status>=200 && xhr.status<300)||xhr.status === 304)){
      console.log(catelog.jon.responseText)
    }else{
      xhr.onerror()
    }
  }
  xhr.onerror = function(){
    return '404'
  }
 </script>

用github平臺試試：
同級目錄下分別建html檔案和JSON檔案，寫好程式碼，注意生成的路徑，生成的網路路徑決定了發請求的路徑，除了域名不寫，其他的字尾都寫。
效果如圖


與在ajax中在JS.bin中做的效果一樣。
檔案地址是:https://liuwanyong2017.github.io/mocklianxi/mock.html。
html程式碼如下,cate.json就不寫了：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET','/mocklianxi/cate.json',true)     //這裡請求的地址不是'/cate.json'了，
//因為github對這個資料生成的URL是https://liuwanyong2017.github.io/mocklianxi/mock.html，
//cate.json檔案是同級檔案所以去掉域名"https://liuwanyong2017.github.io",
//把mocklianxi/mock.html中的mock.html換成cate.json就行了。
xhr.send()
xhr.onload = function(){
    console.log(JSON.parse(xhr.responseText))
}
</script>
</body>
</html>

這裡的意思就是，選好平臺或者伺服器，對應的路徑下建立檔案和對應的資料，就行了，就這麼簡單。

相關文章