数据形式
如果不太熟悉，想要没有问题地将数据库中的数据递送到渲染层颇有挑战。用Php的fetch_all(1)方法实际上得到了一个关联数组的数组（此处1代表数组中的项是关联数组），利用json_encode()将关联数组转换为JSON字符串，得到了一个JSON字符串数组。
而前端的JavaScript的JSON.parse()方法支持将JSON字符串转为对象，也支持将JSON字符串数组转为对象数组，Vue就可以渲染了。
Php
Php从数据库获取数据并以json形式响应请求，我这里接受了proc参数用来判断获取哪一种数据。
<?php
//获取api信息
$proc =$_POST['proc'];
//连接数据库
$servername = "127.0.0.1";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
mysqli_select_db($conn, 'group' );
//具体API
if($proc=='getGroups'){
$sql="select group_id,name,chair_id from groups;";
$result=$conn->query($sql);
if (mysqli_num_rows($result) > 0) {
echo json_encode($result->fetch_all(1));
} else {
echo "a";
}
}
//关闭连接
mysqli_close($conn);
?>
Vue.JS
Vue-resource支持发起http请求（就是AJAX），满足了我们的需求。{ emulateJSON: true }参数使服务器有能力接收POST请求附带的参数（将request body以application/x-www-form-urlencoded content type发送）。
getdata: function() {
this.$http.post('./api.php', { proc: 'getGroups' },{ emulateJSON: true }).then((response) => {
this.table_data = JSON.parse(response.bodyText);
}, (response) => {
console.log('error');
});
}