Vue&Php获取数据库数据

数据形式

如果不太熟悉，想要没有问题地将数据库中的数据递送到渲染层颇有挑战。用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');
            });
        }