如何使用Axios、Vue.js调用PHP接口获取指定数值并在h1标签展示

1. （可选优化）PHP接口调整 #

给统计结果加别名，后续前端取值更方便，修改后代码如下：

<?php
include "config.php";

$data = json_decode(file_get_contents("php://input"));

$request = $data->request;

// 获取记录总数
if($request == 1){
  // 给COUNT(*)结果加别名total
  $userNumbers = mysqli_query($connect,"SELECT COUNT(*) as total FROM users");
  $row = mysqli_fetch_assoc($userNumbers);
  $response = $row;
  echo json_encode($response);
  exit;
}

如果不调整PHP代码也可以，后续前端直接取COUNT(*)字段即可。

2. Vue代码修改 #

修改请求逻辑，将接口返回的数值赋值给data中的变量，调整后代码如下：

<script type = "text/javascript">
var app = new Vue({
  el: '#myapp',
  data: {
    userCount: '' // 语义化变量名，沿用原来的users字段也可
  },
  methods: {
    async allUsersNumber(){
      try {
        const response = await axios.post('api/app.php', {
          request: 1
        })
        // 如果调整了PHP加了别名，用这行赋值
        this.userCount = response.data.total
        // 如果没改PHP，用下面这行替换上面的赋值语句
        // this.userCount = response.data['COUNT(*)']
      } catch (error) {
        console.log("Erreur: " + error);
      }
    }
  },
  created: function(){
    this.allUsersNumber();
  }
})
</script> 

3. 页面渲染 #

在Vue挂载的#myapp节点内加入h1标签，用插值语法渲染数值即可：

<div id="myapp">
  <h1>{{ userCount }}</h1>
  <!-- 如果没改data里的变量名，就写{{ users }} -->
</div>

内容的提问来源于stack exchange，提问作者YelloBox1