需求

我们之前不是已经做好了登录注册的功能吗？

甲方在使用了一段时间后又发现了一些问题，就是注册的用户太多了，他现在想管理用户，包括查看所有的用户，并且能够对一些违规用户进行删除操作。

后端文档

后端程序员已经写好代码了，但是前端还没做好，整个公司只有你会写前端，如果再写不好违约的话，公司将面临破产。

请求地址	请求方式
http://10.163.72.39:5555/user_get.php	get

返回参数	字段
msg	错误提示信息
error	错误状态标志，1为错误，0为无误
data	用户列表信息

1、发送请求

我们先去给后端服务器发送请求吧，告诉他我们想要所有用户的信息。

<template>
	<view>
		<button @click="get_user_data()">获取所有用户的信息</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_list:[]
			}
		},
		methods: {
			// 获取用户的信息
			get_user_data(){
				uni.request({
					url:"http://10.163.72.39:5555/user_get.php",
					method:"GET",
					success: (res) => {
						this.user_list = res.data.data
						console.log(this.user_list);
					}
				})
			}
		}
	}
</script>

<style>

</style>

上面这段代码，我们还是使用了老方法，先写了一个按钮，叫做获取所有用户的信息，然后给这个按钮添加了一个点击事件叫做get_user_data()，这个get_user_data()方法的具体内容我们写在methods里，一旦点击按钮就会执行get_user_data()方法向服务器发送一个请求获得数据。

但是这样肯定是不符合我们目前的需求，我们现在的需求是一旦打开页面，就自动获取数据，而不是要点击按钮再获取数据。

2、生命周期函数onLoad（）

网页中有很多生命周期函数，十分复杂，但是我们的需求其实很简单，只是需要在网页打开时自动帮我们执行一个方法就可以了，那么我们其实只需要知道onLoad()函数是干嘛的就行。先看看下面这段代码吧。

<template>
	<view>
		<button @click="get_user_data()">获取所有用户的信息</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_list:[]
			}
		},
		methods: {
			// 获取用户的信息
			get_user_data(){
				uni.request({
					url:"http://10.163.72.39:5555/user_get.php",
					method:"GET",
					success: (res) => {
						this.user_list = res.data.data
						console.log(this.user_list);
					}
				})
			}
		},
		onLoad() {
			this.get_user_data()
		}
	}
</script>

<style>

</style>

发现这段代码多了什么吗？

onLoad()函数的意思就是在网页挂载的时候需要执行哪些代码，我们希望它能够执行get_user_data()方法，因为我们希望用户一打开网页就能够自动获取到数据，但是这个这里要注意是this.get_user_data()，为什么前面要加上this，这个问题比较复杂，我在之前也没有给大家解释，现在简单多说一点吧，就好比吃饭()是一个方法，这个方法是必须需要一个人去做的，比如说小蔡.吃饭(),但是为什么还有一个括号呢？

因为很多方法都是需要携带参数的，就比如刚才举的例子，吃饭这个方法涉及到吃什么的问题，是吃包子呢还是吃馒头呢？我们总得告诉它吧,所以吃饭这个方法是需要传递参数的，小蔡.吃饭('包子')，也有一些方法是不需要传递参数的，就比如我们上面的this.get_user_data(),只要调用这个方法，就可以返还给我们用户的数据。

三、数据绑定

现在我们已经获取到用户的数据了，但是要怎么样才能将这些数据显示到页面上呢，这就要用到数据绑定的知识了。

<template>
	<body>
		
	</body>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

首先，这是项目一个标准的基础结构。

<template>
	<body>
		{{username}}
	</body>
</template>

<script>
	export default {
		data() {
			return {
				username:'张三'
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

我们做一点小小的改动，我在data里定义了一个变量username，这个变量的值是'张三'。

但是怎么将username这个变量显示到页面上呢？

只需要用{{username}}就可以了，为什么要用两个花括号呢？这就是别人设定的语法，用就行了。

4、v-for循环

我们之前学过数据绑定，我们现在已经将请求来的数据放在了定义的变量user_list里，如果直接通过数据绑定的语法在页面展示user_list的值，看看会发生什么？

<template>
	<view>
		<button @click="get_user_data()">获取所有用户的信息</button>
		<div>{{user_list}}</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_list:[]
			}
		},
		methods: {
			// 获取用户的信息
			get_user_data(){
				uni.request({
					url:"http://10.163.72.39:5555/user_get.php",
					method:"GET",
					success: (res) => {
						this.user_list = res.data.data
						console.log(this.user_list);
					}
				})
			}
		},
		mounted() {
			this.get_user_data()
		}
	}
</script>

<style>

</style>

看到效果了吗？

是不是请求到的数据一股脑的全部堆满了整个屏幕。

这样的做法显然是不合适的，我们其实希望数据能够一条一条的显示。

就好比我们班的同学去体检，我们希望排着队一个一个的进去，而不是一股脑的全部进去，这样就会显得非常的混乱。

那么怎么样才能让数据排队呢？

我们先看一下代码再解释吧。

<template>
	<view>
		<button @click="get_user_data()">获取所有用户的信息</button>
		<div v-for="user in user_list">
			<div>{{user}}</div>
		</div>
	</view>
</template>

看到了吗？现在的数据有什么区别，是不是数据一条一条的排队显示，但是显示的样子还是不太好看，我们好需要做亿些美化。

<template>
	<body>
		<button @click="get_data()" type="default">获取用户数据</button>
		<div v-for="(user,index) in user_list">
			<div class="user_box">
				<div>用户id:{{user.id}}</div>
				<div>用户名:{{user.username}}</div>
				<div>创建时间:{{user.createtime}}</div>
			</div>
		</div>
	</body>
</template>

<script>
	export default {
		data() {
			return {
				title: "Hello",
				user_list:[]
			}
		},
		// 当页面加载的时候会执行的代码
		onLoad() {
			console.log("你好");
			this.get_data()
		},
		methods: {
			// 获取用户的数据
			get_data(){
				uni.request({
					url:"http://10.163.72.39:5555/user_get.php",
					method:"GET",
					success: (res) => {
						this.user_list = res.data.data
						console.log(this.user_list);
					}
				})
			}
		}
	}
</script>

<style>
.user_box{
	margin: 10px;
	padding: 10px;
	background-color: #cccccc;
}
</style>

以上这些代码除了做了一点美化排版，我还看到了user.username，这是什么意思呢？我们之前通过v-for循环，让user_list中的每一个user排队单独显示，每一个user都是一个对象，对象身上都是有各种属性的，就比如你的身高是多少，你的体重是多少，体重身高这些都是我们做为对象的属性，你玩的网络游戏中，你也会关心你培养的角色攻击力是多少，防御力是多少，这些统统都称为对象的属性。

user这个对象中也有很多属性，在我们这个案例中，user有三个属性，分别是id,username,createtime,这些在请求回来的数据中都可以看到，我们这段代码就是分别显示用户的id、用户名、以及创建时间。