<!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
}
</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">
<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>历史上的今天</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" v-model ='city' @keyup.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"
}
//历史上的今天模板
var login = {
template : "#login",
data(){
return{history:[],code:"",seen:false}
},
//created生命周期获取数据，获取前判断localStorage里是否存在，存在直接拿，不存在调API
//有一个问题是localStorage没有过期时间，需要功能增强TODO。
created:function(){
//本地localStorage
var storage=window.localStorage;
//获取localStorage是否有值
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
}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
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(){
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
console.info(JSON.stringify(response))
}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>