vue使用vue-router以及vue-resource查询天气以及历史上的今天

最新推荐文章于 2024-09-04 21:23:16 发布
ws346348183
最新推荐文章于 2024-09-04 21:23:16 发布
阅读量489
点赞数
分类专栏： vue
本文链接：https://blog.csdn.net/ws346348183/article/details/89211656
版权
vue 专栏收录该内容
5 篇文章 1 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://lib.baomitu.com/vue-router/3.0.3/vue-router.min.js"></script>
    <script src="https://lib.baomitu.com/vue-resource/1.5.1/vue-resource.min.js"></script>
    <link href="https://lib.baomitu.com/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .router-link-active {
            font-style: italic
        }
        .mian{
            text-align:center
        }
        
        .v-enter, .v-leave-to {
          opacity: 0; 
        }
        /* 当被transition包裹的元素在显示的过程中，enter-active是一直存在。而当被包裹元素消失的过程中，leave-active是一直存在的*/
      .v-enter-active, .v-leave-active {
            transition: opacity .5s;
      }

    </style>
</head>
<body>
    <div id="app">
        <!--挂载account模板-->
        <router-view></router-view>
    </div>

    <template id="account">
        
        <div class="row">
            <ul class="breadcrumb">
                    <!--两个router-link跳转，tag为li,跳转路径是根路径account-->
                    
                    <router-link to="/" tag="li" class="active">HOME</router-link>
                    <router-link to="/" tag="li" class="active">2019</router-link>
            </ul>
       
            <div class="table-responsive" style="margin-left:18px;">
                <div class="mian" >
                      <!--两个router-link跳转,切换模板页面-->
                    <h1><small>wellcome</small></h1>
                    <router-link to="/login" tag = "button" class="btn btn-primary">历史上的今天</router-link>
                    <router-link to="/register" tag = "button"  class="btn btn-primary">天气查询</router-link>
            
                </div>
                  <!--account模板里挂载两个子模板-->
                <router-view></router-view>
            </div>
        </div>
    </template>

    <template id="login">
        <!--默认隐藏v-if-->
        <div v-if = 'seen'>
            <p>历史上的今天 ：{{new Date() | formatDate }}</p>
                <table  class="table table-condensed">
                        <thead>
                            <tr>
                                <td>年份</td>
                                <td>TITLE</td>
                            </tr>     
                        </thead>
                        <tbody class="t-body">
                            <tr v-for ="(p,index) in history" key = "{{p.id}}" >
                                <td>公元 {{p.year}} 年</td>
                                <td>{{p.title}}</td>  
                            </tr> 
                        </tbody>
                    </table>
        </div>
    </template>

    <template id="register">
      
        <div>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">城市</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="city" autocomplete="off" v-model ='city' @keyup.prevent.enter = 'reg' placeholder="请输入城市">
                    </div>
                </div>
            </form>

            <div v-if= "seen">
                <p>城市：{{city}}</p>
                <table  class="table table-condensed">
                    <thead>
                        <tr>
                            <td>日期</td>
                            <td>天气</td>
                            <td>风力</td>
                            <td>温度</td>
                        </tr>     
                    </thead>
                    <tbody class="t-body">
                        <tr v-for ="(p,index) in weathers" key = "{{p.id}}" >
                            <td>{{p.date}}</td>
                            <td>{{p.weather}}</td>
                            <td>{{p.wind }}</td>
                            <td>{{p.temp }}</td>
                            
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
  
    </template>
</body>
<script>
    //总的模板，下面两个模板是它的子模板
    var account= {
        template: "#account",
        data(){
            return{show: true}
        },
        methods:{

        },
    }

    //历史上的今天模板
    var login = {
        template : "#login",
        data(){
            return{history:[],code:"",seen:false}
        },
        filters:{
            formatDate:function(time){
                var day = time.getDate().toString().padStart(2,"0");
                var month = (time.getMonth()+1).toString().padStart(2,"0");
                return month + " 月 " + day + " 日"
            }
        },
        methods:{
        },
        //created生命周期获取数据，获取前判断sessionStorage里是否存在，存在直接拿，不存在调API
        created:function(){
            //sessionStorage
            var storage=window.sessionStorage;
            //获取sessionStorage是否有值
            var sto=storage.getItem("storageData");
            if(sto != "" && sto!= null){
                var stos=JSON.parse(sto);
                this.seen = true
                this.code=stos.code
                this.history =stos.data 
                console.info("localStorage history")
               
            }else{
                this.$http.jsonp("https://api.asilu.com/today/").then(function(res){
                if(res.body.code === 200){
                    this.seen = true
                    this.code=res.body.code
                    this.history =res.body.data 
                    console.info("查询history API")
                    try{
                        storage.setItem("storageData",JSON.stringify(res.body))
                    }catch(e){
                        localStorage.clear();
                        console.log("Error: 保存到本地存储失败")
                    }
                }
                   
                })
            } 
        }
    }
    //天气模板
    var register = {
        template : "#register",
        data(){
           return{city:"",weathers:[],seen:false} 
        },
        methods:{
            //input 回车调用方法获取天气
            reg:function(){
                console.info("weather start")
                var city = this.city
               
                this.$http.jsonp("http://api.asilu.com/weather/?city="+city).then(function(response){
                    if(response.status === 200){
                        this.weathers = response.body.weather
                        this.seen = true
                        this.city=response.body.city
                    }else{
                        alert("查询失败")
                    }
                   
                })
               
            }
        }
    }
    //实例化vueRouter
    var vueRouter = new VueRouter({
        routes:[
        {
            path:"/",
            component:account,
            children:[
                {path:"login",component:login},
                {path:"register",component:register}
            ]
        }
        ]
    })


    
    //实例化Vue
    var vm = new Vue({
        el : "#app",
        data:{
           
        },
        router:vueRouter,
        methods:{
           
        }

    })
</script>
</html>