zoukankan      html  css  js  c++  java
  • vue05-REST 请求

    异步REST

    /*
    * @Author: caijw
    * @Date:   2018-02-23 14:07:30
    * @Last Modified by:   caijw
    * @Last Modified time: 2018-02-23 15:04:40
    */
    const app = new Vue({
    	el : '#app',
    	data : {
    		editFriend : null,
    		friends: [],
    		newFriend : ''
    	},
    	methods: {
    		addFriend(item){
    			var obj = {
    				firstname : item,
    				lastname : 'cc',
    				age : 29
    			}
    			fetch("http://localhost:3000/users/",{
    				body: JSON.stringify(obj),
    				method : 'POST',
    				headers: {
    					'Content-Type' : 'application/json'
    				}
    			})
    			.then(()=>{
    				this.fetchFriend();
    			})
    		},
    		deleteFriend(id, i){
    			fetch("http://localhost:3000/users/"+id,{
    				method : 'DELETE'
    			})
    			.then(()=>{
    				this.friends.splice(i, 1);
    			})
    		},
    		updateFriend(friend){
    			fetch("http://localhost:3000/users/" + friend.id,{
    				body: JSON.stringify(friend),
    				method : 'PUT',
    				headers: {
    					'Content-Type' : 'application/json'
    				}
    			})
    			.then(()=>{
    				this.editFriend = null;
    			})
    		},
    		fetchFriend(){
    			fetch('http://localhost:3000/users')
    			.then(response => response.json())
    			.then((data)=>{
    				this.friends = data;
    			})
    		}
    	},
    	mounted(){
    		this.fetchFriend();
    	},
    	template : `
    		<div>
    			add: <input v-on:keyup.13="addFriend(newFriend)" v-model="newFriend"/>
    			<li v-for="friend, i in friends">
    				<div v-if="editFriend === friend.id">
    					<input v-on:keyup.13="updateFriend(friend)" v-model="friend.firstname" />
    					<button v-on:click="updateFriend(friend)">save</button>
    				</div>
    				<div v-else>
    					<button v-on:click="editFriend=friend.id">edit</button>
    					<button v-on:click="deleteFriend(friend.id, i)">x</button>
    					{{friend.firstname}}
    				</div>
    			</li>
    		</div>
    	`
    })
    
  • 相关阅读:
    C++右值引用的参考
    U3D 文档 GPU INSTANCING
    UNITY statistic中的 SetPass和Batches
    时间复杂度
    转,数组遍历的三种方式
    bug纪录:PhotonServer-14052: 17:14:09.033
    关于.net standard 与 .net core, net framework
    【转】未能加载文件或程序集或它的某一个依赖项,系统找不到指定的文件
    C# 计时函数精度测试
    一张图看懂dex
  • 原文地址:https://www.cnblogs.com/caijw/p/8468666.html
Copyright © 2011-2022 走看看