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

来自姬鸿昌的知识库
跳到导航 跳到搜索
（建立内容为“https://www.bilibili.com/video/BV12J411m7MG/?p=28”的新页面）
 
 
（未显示同一用户的5个中间版本）
第1行： 第1行：
 
https://www.bilibili.com/video/BV12J411m7MG/?p=28
 
https://www.bilibili.com/video/BV12J411m7MG/?p=28
 +
 +
=== 功能分析 ===
 +
 +
# 按下回车（<u>v-on</u> <u>.enter</u>）
 +
# 查询数据（<u>axios</u> <u>接口</u> <u>v-model</u>）
 +
# 渲染数据（<u>v-for</u> <u>数组</u> <u>that</u>）
 +
 +
=== 接口 ===
 +
请求地址：http://wthrcdn.etouch.cn/weather_mini
 +
 +
请求方法：get
 +
 +
请求参数：city（查询的城市名）
 +
 +
响应内容：天气信息
 +
 +
=== 完整代码示例 ===
 +
<syntaxhighlight lang="html">
 +
<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>
 +
</syntaxhighlight>
 +
 +
=== 总结和注意 ===
 +
 +
* 应用的逻辑代码建议和页面 <u>分离</u>，使用 <u>单独</u> 的js文件编写
 +
* <u>axios</u> 回调函数中 <u>this</u> 指向改变了，需要额外的保存一份
 +
* 服务器返回的数据比较复杂时，获取的时候需要注意 <u>层级</u> 结构

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”