vue-resource+jsonplaceholder模拟请求后台获取用户数据

本文链接：https://blog.csdn.net/a497507718/article/details/82881539

最近在学习 vue，在用 vue-resource 插件的时候发现用来练习请求后台数据的站点 vue.studyit.io 好像挂了，后来通过文章 Vu文章resource三种请求格式和万能测试地址找到了另一个可用的，虽然这个站点好像没有提供添加和删除数据的接口，但起码稍微能用嘛。

地址：http://jsonplaceholder.typicode.com/users

效果图：

完整 HTML 代码：

<!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>