“Vue 网络应用 天知道 回车查询”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
第57行： 第57行：
  
 
                     <div class="info_temp">
 
                     <div class="info_temp">
−
                         <b>{{ item. low }}</b>
+
                         <b>{{ item.low }}</b>
 
                         ~
 
                         ~
 
                         <b>{{ item.high }}</b>
 
                         <b>{{ item.high }}</b>

2023年8月10日 (四) 06:03的最新版本

https://www.bilibili.com/video/BV12J411m7MG/?p=28

功能分析

  1. 按下回车（v-on .enter）
  2. 查询数据（axios 接口 v-model）
  3. 渲染数据（v-for 数组 that）

接口

请求地址：http://wthrcdn.etouch.cn/weather_mini

请求方法：get

请求参数：city（查询的城市名）

响应内容：天气信息

完整代码示例

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>天知道 回车查询</title>
    </head>

    <body>
        
        <div class="wrap" id="app">



            <div class="search_form">

                <div class="logo"><img src="img/logo.png" alt="logo"></div>

                <div class="form_group">
                    <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的城市">
                    <button class="input_sub">搜 索</button>
                </div>


                <div class="hotkey">
                    <a href="javascript:;">北京</a>
                    <a href="javascript:;">上海</a>
                    <a href="javascript:;">广州</a>
                    <a href="javascript:;">深圳</a>
                </div>

            </div>

        
            <ul class="weather_list">
                <li v-for="item in weatherList">
                    <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>

                    <div class="info_temp">
                        <b>{{ item.low }}</b>
                        ~
                        <b>{{ item.high }}</b>
                    </div>
                    <div class="info_date"><span>{{item.date}}</span></div>
                </li>
                
            </ul>
        </div>
        

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="vue.js"></script>
        <script src="axios.min.js"></script>
        
        <script>
            /*
              请求地址：http://wthrcdn.etouch.cn/weather_mini
              请求方法：get
              请求参数：city（城市名）
              响应内容：天气信息

              1.点击回车
              2.查询数据
              3.渲染数据
            */
            var app = new Vue({
                el:"#app",
                data:{
                    city:'',
                    weatherList:[
                        // {
                        //     type:"测试晴",
                        //     low:"28",
                        //     high:"30",
                        //     date:"天"
                        // },
                        // {
                        //     type:"测试晴",
                        //     low:"28",
                        //     high:"30",
                        //     date:"天"
                        // }
                    ]
                },
                methods:{
                    searchWeather: function(){
                        console.log("天气查询");
                        console.log(this.city);
                        // 调用接口
                        var that = this;

                        // axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(){
                        axios.get('https://mcs.zijieapi.com/list').then(function(response){

                            // console.log(response);
                            // console.log(response.data.data.forecast);
                            // debugger;
                            console.log(response);

                            // that.weatherList = response.data.data.forecast;
                            var testData = [
                                {
                                    type:"测试晴",
                                    low:"28",
                                    high:"30",
                                    date:"天"
                                },
                                {
                                    type:"测试晴",
                                    low:"28",
                                    high:"30",
                                    date:"天"
                                }
                            ];

                            that.weatherList = testData;

                        }).catch(function(err){

                        })
                    }//end 
                }//end method
            });
        </script>

    </body>
</html>

总结和注意

  • 应用的逻辑代码建议和页面 分离，使用 单独 的js文件编写
  • axios 回调函数中 this 指向改变了，需要额外的保存一份
  • 服务器返回的数据比较复杂时，获取的时候需要注意 层级 结构
取自“https://www.jihongchang.top/index.php?title=Vue_网络应用_天知道_回车查询&oldid=7116”