TP5后端,VUE前端请求聚合数据天气接口

最新推荐文章于 2023-08-07 23:19:01 发布

叫我福建

最新推荐文章于 2023-08-07 23:19:01 发布

阅读量1.3k

点赞数 1

分类专栏： thinkphp5 PHP vue技术总结文章标签： TP5 前端后端

本文链接：https://blog.csdn.net/qq_38192709/article/details/121428554

版权

本文介绍了如何使用Vue前端与TP5后端结合，请求聚合数据的天气接口。通过示例代码展示前端Vue的请求和后端TP5处理请求以及封装HTTP请求的方法，同时提及了路由配置的设置。

摘要由CSDN通过智能技术生成

问题描述：
TP5 当后端
VUE 当前端
请求聚合数据天气接口

问题解决：
演示效果
TP5后端,VUE前端请求聚合数据天气接口

前端 VUE 代码：

<template>
    <div class="whether-tank">
        <!--
            根据城市查询生活指数 http://apis.juhe.cn/simpleWeather/life GET
            参数名	  类型	是否必填	说明
            city	string	是	    要查询的城市名称/id，城市名称如：温州、上海、北京，需要utf8 urlencode

            根据城市查询天气 http://apis.juhe.cn/simpleWeather/query    GET
            参数形式如上

            天气各类查询表
            http://apis.juhe.cn/simpleWeather/wids  GET      无需额外参数

            支持城市列表
            http://apis.juhe.cn/simpleWeather/cityList  GET  无需额外参数

            1： el-table 里面图片的遍历 (template 用法)
            2： v-for 双重循环
            3： 遍历 json 对象 [ 里面有数组，有对象 ]
         -->
        <el-card class="box-card">
            <div class="header">
                <el-row>
                    <el-button type="primary" round @click="showPanel(1)">查询天气</el-button>
                    <el-button type="success" round @click="showPanel(2)">天气类型</el-button>
                    <el-button type="warning" round @click="showPanel(3)">支持城市查看</el-button>
                </el-row>
                <div>
                    <hr class="hr" />
                </div>
            </div>

            <div class="bottom1" v-show="bottom1">

                <div class="cityShow" v-show="cityShow">
                    <el-select v-model="cityInitials" placeholder="城市首字母" @change="letterChange(cityInitials)">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>

                    <br /> <br />
                    <h3>请选择城市</h3>
                    <br /><br />
                    <p>
                        <span v-for="(c, index) in choosingCity" :key="index">
                            <span @click="potinCity(c)" class="cityNameChoose">{
  {c}}</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </span>
                    </p>
                </div>

                <div class="weatherShow" v-show="weatherShow">
                    <p>
                        <span class="info info1">{
  { currentQueryCity }} </span>
                        <span class="info info2">{
  { realtimeWeather.temperature }}℃</span>
                        <span class="info info3">{
  { realtimeWeather.info }}</span>
                        <span class="info info4">{
  { realtimeWeather.direct }}</span>
                        <span class="info info5">湿度: {
  { realtimeWeather.humidity }}%</span>
                        <span class="info info6">空气质量: {
  { realtimeWeather.aqi }}</span>
                    </p>

                    <br /><br />

                    <h2>未来 5天天气</h2><br /><hr />

                    <div class="future5">
                        <div v-for="(fu, index) in futureWeather" :key="index">
                            <p>{
  { fu.date }}</p>
                            <p>{
  { fu.temperature }}</p>
                            <p>{
  { fu.weather }}</p>
                            <p>{
  { fu.direct }}</p>
                        </div>
                    </div>

                </div>
            </div>

            <div class="weatherType" v-show="bottom2">
                <el-table :data="tableData" class="elTable">
                    <el-table-column prop="wid" label="序号" width="" align="center"></el-table-column>
                    <el-table-column prop="weather" label="天气类型" width="" align="center"></el-table-column>
                    <el-table-column label="图标" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.bgImg" width="60" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="cities" v-show="bottom3">
                <div v-for="(item, index) in cityArr" :key="index" :class="'city' + { index }">
                    <h3>{
  { item.title }}</h3>
                    <br />
                    <p >
                        <span v-for="(city, index) in item.lists" :key="index">{
  { city }} &nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </p>
                    <br /><hr /><br />
                </div>
            </div>

            <div class="errEle" v-show="errBtm">
                <h3>Sorry， 请求有问题</h3>
            </div>

        </el-card>

    </div>
</template>

<script>

export default {
     
    name: 'weather',
    mounted: function () {
     
        this.getWeatherType()
    }</