Vue—Vue结合axios异步请求综合案例

最新推荐文章于 2022-11-14 18:40:44 发布

文文鑫

最新推荐文章于 2022-11-14 18:40:44 发布

阅读量231

点赞数

分类专栏： vue-前后端分离文章标签： vue

本文链接：https://blog.csdn.net/dgssd/article/details/111150556

版权

vue-前后端分离专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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> &nbsp;
    </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);

    }

}