专栏首页gojam技术备忘录Vue&Php获取数据库数据

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');
            });
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 8086汇编实现对数字的存储、输出

    gojam
  • 转载:POST请求的Content-Type

    https://imququ.com/post/four-ways-to-post-data-in-http.html

    gojam
  • setInterval的用法

    无论使用setInterval()还是setTimeout(),函数的执行环境会被设置成window,也就是说在函数内使用this其实是指window对象(或g...

    gojam
  • HTTPURLConnection 发送Post数据

    http://blog.csdn.net/chenlei1889/article/details/6363356

    2Simple
  • SUCTF-WriteUp(上)

    https://gist.github.com/ed22c1ad2dc22c56f266a92635a9591c#file-str_or_str-php

    ChaMd5安全团队
  • 首页SQLPHP向MySQL插入记录时乱码问题

    Navicat for MySql 新建数据库时编码格式设置成:utf8 -- UTF-8 Unicode 排序规则:utf8_general_ci。个人建议,...

    cherishspring
  • Go语言服务器开发之简易TCP客户端与服务端实现方法

    Go语言具备强大的服务器开发支持,这里示范了最基础的服务器开发:通过TCP协议实现客户端与服务器的通讯。 一 服务端,为每个客户端新开一个goroutine 代...

    李海彬
  • Java JDBC MySQL

    一、驱动 下载地址:https://dev.mysql.com/downloads/connector/j/ 二、数据库连接配置 jdbc:mysql://ad...

    用户1637609
  • python 发送和接收ActiveMQ

    ActiveMQ是java开发的消息中间件服务。可以支持多种协议(AMQP,MQTT,OpenWire,Stomp),默认的是OpenWire。而python与...

    py3study
  • Pymysql 连接池操作

    在用python写后端服务时候,需要与mysql数据库进行一些数据查询或者插入更新等操作。启动服务后接口运行一切正常, 隔了第二天去看服务日志就会报错,问题如下...

    用户3578099

扫码关注云+社区

领取腾讯云代金券