Vue通过API获取MySQL列总和后无法正常渲染如何解决

后端API问题及修正 #

存在问题 #

• PDO预处理语句创建后未执行execute()方法，SQL查询未实际运行，无法获取求和结果
• 未指定JSON类型的响应头，部分场景下前端会将返回内容识别为普通文本，导致axios解析异常

修正后代码 #

// 设置响应头，指定返回JSON格式
header('Content-Type: application/json; charset=utf-8');
// 可选：如果存在跨域问题，新增下面这行跨域头配置
// header('Access-Control-Allow-Origin: *');
$stmt = $db->prepare("SELECT ROUND(SUM(total_amount), 2) as TotalAmount FROM orders");
// 补充执行预处理语句
$stmt->execute();
$result = $stmt->fetch(PDO::FETCH_ASSOC);
echo json_encode($result);

前端Vue代码问题及修正 #

存在问题 #

• axios返回的response是完整的响应对象，接口返回的业务数据存储在response.data属性中，直接将整个response赋值给info无法拿到目标数值
• 模板中绑定的TotalAmount变量未在data中声明，请求结果存储在info变量中，变量对应关系错误
• 缺少错误捕获逻辑，无法排查跨域、请求超时等接口异常

修正后代码 #

<div id="app" class="peer">
      <!-- 绑定info下的TotalAmount属性，增加空值兜底展示 -->
      <span>{{ info ? info.TotalAmount : '加载中' }}</span>
</div>

<script>
  new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api_url.php')
      .then(response => {
          // 取响应体内的业务数据赋值
          this.info = response.data
          // 可在浏览器控制台查看返回结果，无需Vue开发者工具即可验证
          console.log('接口返回数据：', response.data)
      })
      .catch(error => {
          // 打印请求异常信息，方便排查
          console.log('请求出错：', error)
      })
  }
})
</script>

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