TP5后端,VUE前端请求聚合数据星座查询接口

问题描述：
如标题

问题解决：

直接上代码了：
VUE ：

<template>
    <div class="api_interface content-box content-right">
        <!--
            0: arctext.js 的使用 vue-arctxt.js
            1： vue 旋转动画；
            2： 动态绑定 class + 固定 class
            3： 动态绑定 背景图片
            4： 动态绑定点击事件
            5： axios 请求 json 数据
            6： 假设指针为 12 点钟方向，旋转的 0 - 30 度是最后一个星座(摩羯)，所以把旋转角度 % 360 , 再看还有多少度，30 度为 1 份， 向下取整数，所以 0-30度 为 0 ，即是摩羯座，如果 - 12，再取正，即为 12，即为第12 个星座
            7: 大转盘转动的时候，不想让中间的小元素旋转，但是写了很久，都没有完成

            8: TP5 里面 把 curl 封装好，并调用， 在控制器里面 use app\index\controller\HttpRequest; 并用 new 调用，  -> 方法名(参数... ...)
            9： 调用其它文件的常数： 根目录文件里 common.php 定义 define('nameLetter', 'value')， 在控制器里面调用：  $myData = nameLetter 即可

            接口参数说明：
                name	string	星座名称
                range	string	星座公历日期范围
                zxtd	string	特点
                sssx	string	属性
                zggw	string	掌管宫位
                yysx	string	阴阳性
                zdtz	string	最大特征
                zgxx	string	主管星
                xyys	string	颜色
                jssw	string	珠宝
                xyhm	string	幸运号码
                kyjs	string	金属
                bx	    string	基本表现
                yd	    string	优点
                qd	    string	缺点
                jbtz	string	基本特质
                jttz	string	具体特质
                xsfg	string	行事风格
                gxmd	string	个性缺点
                zj	    string	总体评价
            10: elementui table 没有纵向布局，所以自己写个列表
         -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>星座运势 Constellation</span>
                <el-button type="text" @click="refresh">刷新</el-button>
            </div>

            <div class="constellation">
                <div v-for="part in constellationIterData" :key="part.key" class="constellation-part" :class="`part-${part.key}`" :style="{ backgroundImage: 'url(' + part.bgImg + ')' }" @click="choosePart(part.key)">
                    <div class="text">
                        <p class="belong">{
  { part.belong }}</p>
                        <p class="smallText">{
  { part.date }}</p>
                    </div>
                </div>
                <div class="randLook" @click="randLook">{
  { randText }}</div>
            </div>

            <el-card class="box-card query-result" v-show="showRes">
                <div slot="header" class="clearfix">
                    <span>结果如下</span>
                </div>
                <div class="resTab">

                    <table class="resTab">
                        <tr><td>星座名称name</td><td>{
  { tableData.name }}</td></tr>
                        <tr><td>星座公历日期范围range</td><td>{
  { tableData.range }}</td></tr>
                        <tr><td>特点zxtd</td><td>{
  { tableData.zxtd }}</td></tr>
                        <tr><td>属性sssx</td><td>{
  { tableData.sssx }}</td></tr>
                        <tr><td>掌管宫位zggw</td><td>{
  { tableData.zggw }}</td></tr>
                        <tr><td>阴阳性yysx</td><td>{
  { tableData.yysx }}</td></tr>
                        <tr><td>最大特征zdtd</td><td>{
  { tableData.zdtz }}</td></tr>
                        <tr><td>主管星zgxx</td><td>{
  { tableData.zgxx }}</td></tr>
                        <tr><td>颜色xyys</td><td>{
  { tableData.xyys }}</td></tr>
                        <tr><td