如果不太熟悉,想要没有问题地将数据库中的数据递送到渲染层颇有挑战。用Php的fetch_all(1)方法实际上得到了一个关联数组的数组(此处1代表数组中的项是关联数组),利用json_encode()将关联数组转换为JSON字符串,得到了一个JSON字符串数组。
而前端的JavaScript的JSON.parse()方法支持将JSON字符串转为对象,也支持将JSON字符串数组转为对象数组,Vue就可以渲染了。
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-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');
});
}