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

程序员文章站 2022-03-05 09:27:59

...

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);

    }

}

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

vue 使用 async 和 await 实现异步 axios 同步化（实战案例：数据异步校验通过后，再执行保存）

vue 中使用 async/await 将 axios 异步请求同步化处理

vue axios 异步改同步请求(获得数据后再执行下面的代码)

Vue解决axios接口异步请求数据不同步返回的问题-async/await

Vue综合案例：自定义指令，生命周期，v-resource请求

vue使用axios实现异步请求

0.7、VUE-VUE 结合 axios 发起网络请求

Vue系列-axios请求与拦截综合应用

Springboot项目,Vue结合axios实现异步请求，并将数据显示页面

Vue Axios异步请求