以JSON形式實現前端互動2（BOSS直聘動態）
阿新 • • 發佈：2020-09-11
先用vue重構頁面
先看index.html完整程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" type="text/css" href="main.css"/> </head> <body> <div class="container" id='app'> <div class="home-header"> <img src="img/home-search-text.png" > <form action="" method=""> <input type="" name="" id="" value="" /> <button type="button">搜尋</button> </form> </div> <div class="categories"> <div v-for="item in categories" :key='item.index'> <div class="cate-one"> {{item.name}} <img :src="item.icon"> </div> <div> <ul> <li v-for="tags in item.tags"><a href="">{{tags}}</a></li> </ul> </div> </div> </div> <div class="footer"> <p>違法和不良資訊舉報郵箱：[email protected]</p> <p>違法和不良資訊舉報郵箱：[email protected]</p> </div> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.4.1/fetch.min.js"></script> --> <script src="axios.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> const vm = new Vue({ el: '#app', data: { categories: [] }, created: function() { // fetch第一步用得到Promise，用.josn()返回josn資料後再來一個then才能得到資料 // fetch("http://127.0.0.1:8848/BOSS/api/index.json") // .then(res => res.json()) // .then(data => this.categories = data) // 好像fetch預設是get方法吧，下面換成post是失效的。 // fetch("http://127.0.0.1:8848/BOSS/api/index.json", { // method: 'get' // }).then(res => res.json()) // .then(data => this.categories = data) // 如果用axios就更簡單了 axios.get("http://127.0.0.1:8848/BOSS/api/index.json") .then(res => this.categories = res.data ) } }) </script> </body> </html>
在靜態頁面建好以後就可以新建.json檔案了。
josn檔案和資料格式有一定要求，按照下面寫：
[
{
"icon": "img/technology.png",
"name": "技術",
"tags": ["Java", "PHP", "NodeJs"]
}, {
"icon": "img/technology.png",
"name": "技術2",
"tags": ["Java2", "PHP2", "NodeJs2"]
}
]
怎麼呼叫呢？
1 首先看路徑，在瀏覽器中開啟index.html，網址為：http://127.0.0.1:8848/BOSS/index.html，把後面的index.html刪除，寫上.json檔案的路徑如下：
路徑為：http://127.0.0.1:8848/BOSS/api/index.json
2 呼叫.json檔案可以直接用promise,或者fethch，或者axios。
先用fetch呼叫看看：
控制檯可以看到輸出了陣列
再試試按照完整寫法去寫fetch:(這說明fetch預設應該是get方法)
控制檯可以看到輸出了陣列
再試試用axios的方式呼叫.json（axios.js要去百度下載）
上面三種方法都是可以得到.json檔案中的資料的。