Vue.js学习(五):vue+axios+php+mysql 实现前端界面数据动态更新

网上参考了很多例子,都没有关于vue+php实现前后端的例子,后来自己总结了一个,希望大家批评指正。

vue实现动态数据的方式主要有vue-resource和axios,但是从Vue2.0开始,已经不对vue-resource进行更新,因此,本文主要利用axios进行操作。

1、安装axios

npm install axios --save


2、在Vue-cli的components中编写组件






3、数据库的创建

本文创建的数据表信息主要由id、user、name、intro几个

可以根据自己的需求,自己创建。具体的创建方式,网上很多,此处不再详细描述。创建的数据如下:

Vue.js学习(五):vue+axios+php+mysql 实现前端界面数据动态更新_第1张图片

4、需要请求的php

query($sql);

	$arr=array();
	while ($row=$res->fetch_assoc()) {
		$arr[]=$row;
	}
	$res->free();
	//关闭连接
	$mysqli->close();
	
	echo(json_encode($arr));//这里用echo而不是return

?>
则最终在液面上输出的结果也为上面数据表那张图所示。


你可能感兴趣的:(Vue)