vue-resource+jsonplaceholder模擬請求後臺資料
阿新 • • 發佈：2018-12-12
最近在學習 vue，在用 vue-resource 外掛的時候發現用來練習請求後臺資料的站點 vue.studyit.io 好像掛了，後來通過文章 Vu文章resource三種請求格式和萬能測試地址 找到了另一個可用的，雖然這個站點好像沒有提供新增和刪除資料的介面，但起碼稍微能用嘛。
完整 HTML 程式碼：
<script src="/js/SyntaxHighlighter/jquery.highlighter.js?v=20091222" type="text/javascript"></script> <script src="/js/SyntaxHighlighter/highlighter.js?v=20091222" type="text/javascript"></script> <p><textarea cols="50" rows="15" name="code" class="classname"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>$__404 is here__$</title> <script src="lib/vue.js"></script> <script src="lib/vue-resource.js"></script> <link rel="stylesheet" type="text/css" href="lib/bootstrap.css" /> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">新增使用者</h3> </div> <div class="panel-body form-inline"> <label> Name: <input type="text" class="form-control" v-model="name" /> </label> <button class="btn btn-primary" @click="add">新增</button> <!--<label> 請輸入搜尋關鍵字: <input type="text" class="form-control" v-model="keywords" /> </label>--> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Username</th> <th>Email</th> <th>Phone</th> <th>Operation</th> </tr> </thead> <tbody> <tr v-for="item in list" :key='item.id'> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.username }}</td> <td>{{ item.email }}</td> <td>{{ item.phone }}</td> <td> <a href="javascript:;" @click="del(item.id)">刪除</a> <!--傳遞item.id值--> </td> </tr> </tbody> </table> </div> <script type="text/javascript"> // 如果我們通過全域性配置了，請求的資料介面 根域名，則 ，在每次單獨發起 http 請求的時候，請求的 url 路徑，應該以相對路徑開頭，前面不能帶 / ，否則 不會啟用根路徑做拼接； Vue.http.options.root = 'http://jsonplaceholder.typicode.com/'; // 全域性啟用 emulateJSON 選項 Vue.http.options.emulateJSON = true; new Vue({ el: '#app', data: { name: '', list: [ /* 留空 */ ] }, created(){ //生命週期函式，data和methods都已初始化好 this.getAllList(); }, methods: { getAllList() { //獲取所有的使用者列表 // 通過vue-resource發起請求 this.$http.get('users').then(result => { //console.log(result); if(result.status === 200) { //根據返回的狀態碼判定是否獲取資料成功（200成功，其他值失敗） this.list = result.body; } else { alert('獲取資料失敗!') } }) }, add() { this.$http.post('users', {name:this.name}, {}).then(result => { console.log(result); if (result.status === 201) { //（201成功，其他值失敗） //成功就新增到列表（這個網站貌似沒有新增資料的介面，只好本地新增來麻木自己） this.list.push(result.body); }else{ alert('新增失敗！') } }) }, del(id){ //也沒有刪除資料介面,GG } } }) </script> </body> </html> </textarea> </p>