如何使用Vuejs和Axios获取MySQL表行数并按000.000.000格式显示

一、后端PHP代码修改 #

原有逻辑已实现总条数查询，只需优化返回结构、增加必要的响应头即可：

<?php
include "config.php";

// 增加响应头，避免跨域问题、指定返回格式为JSON
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

$data = json_decode(file_get_contents("php://input"));
$request = $data->request ?? 0;

// 获取所有记录
if($request == 1){
  // 给统计结果加别名，方便前端取值
  $userNumbers = mysqli_query($connect,"SELECT COUNT(*) as total FROM users");
  $row = mysqli_fetch_assoc($userNumbers);
  // 直接返回总条数，无需嵌套数组
  echo json_encode(['total' => $row['total']]);
  exit;
}

二、前端Vue代码修改 #

需要调整请求方式、参数传递逻辑，增加总条数格式化规则，绑定到页面展示：

<!-- 页面展示位置示例 -->
<div id="myapp">
  <!-- 格式化后的总条数渲染 -->
  <span class="count-display">{{ formatUserCount }}</span>
</div>

<script type = "text/javascript">
var app = new Vue({
  el: '#myapp',
  data: {
    // 存储原始总条数值
    userTotal: 0
  },
  computed: {
    // 格式化计算属性，自动适配格式要求
    formatUserCount() {
      // 数字转字符串后补前导0到9位，每3位插入一个点
      const totalStr = this.userTotal.toString().padStart(9, '0');
      return totalStr.match(/\d{3}/g).join('.');
    }
  },
  methods: {
    allUsersNumber(){
      // 改为POST请求匹配后端读取请求体的逻辑，参数按要求传递
      axios.post('api/app.php', {
        request: 1
      }).then(response => {
        // 把返回的总条数存入data
        this.userTotal = response.data.total;
      });
    }
  },
  created: function(){
    this.allUsersNumber();
  }
})
</script>

核心修改说明 #

• 前后端请求方式统一为POST，解决原有GET请求参数无法被后端读取的问题
• 格式化逻辑完全匹配需求：不足9位的数字自动补前导0，每3位用点分隔，959会自动转换为000.000.959格式
• 新增跨域响应头，避免本地开发时的跨域拦截问题

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