1.前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" @keyup.delete="shows" @keyup.enter="find">
<input type="button" value="查询天气" @click="find"><hr>
<span v-for="city in cityList">
<a href="#" @click.prevent="find1(city)">{
{city}}</a>
</span>
<hr>
<span v-show="isShow">{
{name}}今天的天气:{
{message}}</span>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>//引入本地axios
<script>
const app=new Vue({
el:"#app",
data:{
name:"",
cityList:["北京","上海","广州","深圳","成都"],
message:"",
wx:"sss",
isShow:false
},
methods:{
find(){
console.log(this.name);
let _this=this;
axios.get("http://localhost:8081/city/find?name="+this.name).then(function (response) {
console.log(response.data.message)
_this.message=response.data.message;
_this.isShow=true;
}).catch(function (err) {
console.log(err);
})
},
shows(){
this.isShow=false;
},
find1(name){
this.name=name;
this.find();
}
},
})
</script>
</body>
</html>
2.后端
package com.wenxin.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("city")
public class CityController {
@GetMapping("find")
@CrossOrigin//解决跨域问题
public Map<String,String> findweatherByCity(String name){
Map<String,String> map=new HashMap<>();
String weathers= getWeather(name);
map.put("message",weathers);
return map;
}
public String getWeather(String name){
Map<String,String> weathers =new HashMap<>();
weathers.put("北京","很好");
weathers.put("上海","很好");
weathers.put("广州","很好");
weathers.put("深圳","很好");
weathers.put("成都","很好");
weathers.put("新疆","蓝天白云");
return weathers.get(name);
}
}