weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

JavaWEB笔记17 Vue发送AJAX+生命周期函数+案例_javaweb可视化系统前端使用vue,在vue中有ajax

作者：weixin_40725706 | 2024-03-13 04:34:58

踩

javaweb可视化系统前端使用vue,在vue中有ajax

JavaWEB笔记17 Vue发送AJAX+生命周期函数+案例

文章目录

JavaWEB笔记17 Vue发送AJAX+生命周期函数+案例

一.Vue发送AJAX：

Vue中发送AJAX需要依托以下两种.js文件，分别是：axios.min.js（新版）以及vue-resource.min.js，这两个.js文件发送AJAX时有不同，以下将介绍：

1）引入库：vue-resource来发送AJAX请求
2）在Vue的methods中设计对应的请求方法：

this.$http.get('url').then(function(res){
	请求成功的函数
}),function(){
	请求失败的函数
}
1
2
3
4
5

注意：
get请求后面url不想在 ? 后拼参就使用params:{ 属性:值 }，url中的包含 ? 以及后面所有均删掉，格式如下：get('url',params:{ 属性:值 })
3）POST请求在上面get换成post，键值对前面的params不写，后面再加上{emulateJSON : true}返回JSON类型的数据，注意在AJAX请求中then中进行调用this，是Vue对象可以直接调用，可以在使用之前进行对应判断
4）Vue-resource库在2.0以上被废掉了，但是该库好处在于可以发送jsonp请求：

this.$http.jsonp(url,
	{params:{键:值},
	jsonp:'cb或callback'   //cb是默认百度的callback
	})
.then(res=>{ 成功请求 })
1
2
3
4
5

5）新版本库：Vue.anxios（不支持jsonp，只能用origin）发送AJAX：其中get方法：

axios.get('url',{
	params:{键:值}
	}).then(response=>{请求成功}).catch(){ 
	//请求失败的相关处理 
	}
1
2
3
4
5

注意此处this与上面的不同，此处this指向的对象并不是Vue对象

二.Vue生命周期函数：

首先引入几个概念：

生命周期： 一个事物从生到死所经历的不同阶段，在不同阶段可以做不同的事
Vue生命周期： Vue对象从创建到销毁的一个过程
Vue的生命周期也是Vue在不同阶段会调用不同的函数，我们就叫做Vue的生命周期函数

Vue生命周期函数的案例：

需求： 文本隔一秒闪一次
分析： 需求有两部分：
v-show以及定时器结合生命周期函数
mounted函数：模板挂载完毕，数据也准备完成之后的周期函数，与methods存在的位置并列
循环定时器：

mounted:function(){ 
	var tm = setInterval(()=>{
		this.flag=!this.flage
		}，1000)}
1
2
3
4

停止闪烁：

metods: { 
	stop(){ 
	this.$destroy(); 
	}} //销毁Vue对象实例
1
2
3
4

善后工作： 停止计时器的计时：

beforeDestroy:function(){ 
	clearInterval(tm); 
	} //关闭定时器
1
2
3

（注意：同样与上面的mounted位置相同，与methods位置并列）

最常用的两个函数就是mounted挂载完毕和beforeDestroy销毁前善后，el生命周期阶段较早，其他都不常用，关于生命周期函数的其他知识，详情见下图：
在这里插入图片描述

三.过滤器：

Vue中过滤器的作用是处理字符串并显示：

将一个字符串进行首字母大写且其余字符小写：

msg.substring(0,1).toUpperCase().concat(msg.substr(1).toLowerCase())
1

过滤器filters:{} 可以定义多个过滤器，与methods位置并列
比如说上面就可以直接定义为

changeText(value) //其中value需要传参
1

在上面的标签文本处进行调用时：{{msg|changText}}就可以将msg作为value传值了

过滤器的连续使用：

{{msg|changeText|change2|change3}} //是一种层层过滤的形式
1

过滤器中传参：传多个参数，被过滤主体对象放第一个形参，后面放新形参，调用有：{{msg|format(a)}}
ES6中在定义过滤器中可以直接给形参一个过滤器，即：

change(value,a='YYYY-DD-MM')
1

过滤器分为两种：局部过滤器和全局过滤器：
1）局部过滤器：只能当前这个Vue实例所控制的模板中使用
2）全局过滤器：在所有的Vue实例控制的区域中都生效，出现的地方在new之前，使用Vue.filter('过滤器名',function(){})直接进行定义

四.Vue中获取原生DOM对象：

Vue中基本上不常用，其效果同document.getElementById()，实例：更改标签对象中的内部文本：

1）对应button绑定事件show($event)：e.target.innerText=""
2）原生DOM进行操作
3）Vue中特有：ref="h" 在下面的函数中：this.$refs.h进行调用

五.案例一：Vue版天气预报：

需求：
给定一个CSS样式，完成使用Vue发送AJAX请求来查询中国城市的天气，并将其显示
代码：

<!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>天知道</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="axios.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div class="wrap" id="app">
    <div class="search_form">
        <div class="logo"><img src="img/logo.png" alt="logo" /></div>
        <div class="form_group">
            <input type="text"  id="cityName" class="input_txt" placeholder="请输入查询的天气" v-model="cityName"  @keyup.enter="sendJSONP(cityName)"/>
            <button class="input_sub" @click="sendJSONP(cityName)">
                搜 索
            </button>
        </div>
        <div class="hotkey">
            <a href="javascript:;" @click="sendJSONP('北京')">北京</a>
            <a href="javascript:;" @click="sendJSONP('上海')">上海</a>
            <a href="javascript:;" @click="sendJSONP('广州')">广州</a>
            <a href="javascript:;" @click="sendJSONP('深圳')">深圳</a>
        </div>
    </div>
    <ul class="weather_list" v-show="flag">
        <li v-for="(item,index) in weatherList" :key="index">
           <div class="info_type"><span class="iconfont">{{item.weather}}</span></div>
           <div class="info_temp">
               <b>{{item.lowtemp}}</b>
                 ~
               <b>{{item.hightemp}}</b>
            </div>
            <div class="info_date"><span>日期: {{item.date}}</span></div>
         </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            weatherList: [
                {weather: '', date: '', lowtemp: '', hightemp: ''},
                {weather: '', date: '', lowtemp: '', hightemp: ''},
                {weather: '', date: '', lowtemp: '', hightemp: ''},
                {weather: '', date: '', lowtemp: '', hightemp: ''},
                {weather: '', date: '', lowtemp: '', hightemp: ''}
            ],
            cityName: '',
            flag: false
        },
        methods:{
            sendJSONP(cityname){
                axios.get('http://wthrcdn.etouch.cn/weather_mini', {
                        params: { city : cityname }
                    }).then(res=>{
                        if(res.data.desc==="invilad-citykey"){
                            alert("请输入正确的城市！");
                            this.cityName = '';
                            this.flag = false;
                        }
                        else {
                            this.flag = true;
                            console.log(res);
                            var obj = res.data;
                            //将得到的数据放入weatherList
                            for (var i = 0; i < 5; i++) {
                                this.weatherList[i].weather = obj.data.forecast[i].type;
                                this.weatherList[i].date = obj.data.forecast[i].date;
                                this.weatherList[i].lowtemp = obj.data.forecast[i].low;
                                this.weatherList[i].hightemp = obj.data.forecast[i].high;
                            }
                        }
                })
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

其中使用到的给定CSS：

//index.CSS如下：
body{
    font-family:'Microsoft YaHei';   
}
.wrap{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* background:#8fd5f4; */
    /* background: linear-gradient(#6bc6ee, #fff); */
    background:#fff;

}
.search_form{
    width:640px;
    margin:100px auto 0;
}
.logo img{
    display:block;
    margin:0 auto;
}
.form_group{
    width:640px;
    height:40px;
    margin-top:45px;
}
.input_txt{
   width:538px;
   height:38px;
   padding:0px;
   float:left;
   border:1px solid #41a1cb;
   outline:none;
   text-indent:10px;
}

.input_sub{
    width:100px;
    height:40px;
    border:0px;
    float: left;
    background-color: #41a1cb;
    color:#fff;
    font-size:16px;
    outline:none;
    cursor: pointer;
    position: relative;
}
.input_sub.loading::before{
    content:'';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/loading.gif');
}

.hotkey{
    margin:3px 0 0 2px;
}

.hotkey a{
    font-size:14px;
    color:#666;
    padding-right:15px;
}
.weather_list{
    height:200px;
    text-align:center;
    margin-top:50px;
    font-size:0px;
}
.weather_list li{
    display:inline-block;
    width:140px;
    height:200px;
    padding:0 10px;
    overflow: hidden;
    position: relative;
    background:url('../img/line.png') right center no-repeat;
    background-size: 1px 130px;
}

.weather_list li:last-child{
    background:none;
}

/* .weather_list .col02{
    background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
    background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
    background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
    background-color: rgba(118, 113, 223, 0.8);
} */


.info_date{
    width:100%;
    height:40px;
    line-height:40px;
    color:#999;
    font-size:14px;
    left:0px;    
    bottom:0px;    
    margin-top: 15px;
}
.info_date b{
    float: left;
    margin-left:15px;
}

.info_type span{
    color:#fda252;
    font-size:30px;
    line-height:80px;
}
.info_temp{
    font-size:14px;  
    color:#fda252;
}
.info_temp b{
    font-size:13px;
}
.tem .iconfont {
    font-size: 50px;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

效果：
初始界面：
在这里插入图片描述
点击界面上给定城市（北上广深）的效果：

搜索国内城市进行查询的效果：

所搜索的城市找不到或搜索不合法时的弹窗效果：

六.案例二：Vue版手机归属地查询：

需求：
使用CSS并结合Vue中发送AJAX完成设计一个手机归属地查询的网页
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue版手机归属地查询</title>
    <script type="text/javascript" src="vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="vue-resource.min.js"></script>
    <style type="text/css">
        *{
            list-style: none;
        }
        #topElem{
            margin-top: 20px;
            width: 60%;
            margin-left: 20%;
        }
        #top{
            font-size: 40px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-left: -30px;
        }
        #haomaduan{
            font-size: 20px;
            margin-top: 25px;
            margin-left: 10px;
        }
        #srch{
            border: gray solid 1px;
            width: 75%;
            height: 36px;
            margin-top: 20px;
        }
        .btn{
            width: 100px;
            height: 41px;
            border: none;
            background-color: #3fac24;
            color: white;
            font-size: 20px;
            position: absolute;
            left: 65%;
            top: 141px;
        }
        .btn:hover{
            cursor: pointer;
        }
        #bodypart{
            position: relative;
            width: 66%;
            margin-left: 17%;
            margin-top: 30px;
        }
        #chaxjg{
            position: absolute;
            width: 92%;
            height: 45px;
            background-color: rgba(154, 150, 143, 0.56);
            border: gray solid 1px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
        }
        #number{
            position: absolute;
            top: 47px;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #number_json{
            position: absolute;
            top: 47px;
            left: 46%;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #cityinfo{
            position: absolute;
            top: 91px;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #cityinfo_json{
            position: absolute;
            top: 91px;
            left: 46%;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #companyinfo{
            position: absolute;
            top: 135px;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #companyinfo_json{
            position: absolute;
            top: 135px;
            left: 46%;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #cityblock{
            position: absolute;
            top: 179px;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #cityblock_json{
            position: absolute;
            top: 179px;
            left: 46%;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #postcode{
            position: absolute;
            top: 223px;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #postcode_json{
            position: absolute;
            top: 223px;
            left: 46%;
            border: lightgray solid 1px;
            width: 46%;
            height: 42px;
            text-align: center;
            line-height: 45px;
            font-size: 18px;
        }
        #moreinfo{
            position: absolute;
            top: 267px;
            border: lightgray solid 1px;
            width: 92%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            color: #3fac24;
            text-decoration: none;
        }
        #moreinfo:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="topElem">
        <div id="top">手机号码归属地专业查询</div>
        <div id="haomaduan">手机号码(段):</div>
        <input value="" id="srch" type="text" placeholder="请输入需要查询的手机号码" v-model="mobile"  @keyup.enter="sendGETJSONP()"/>
        <button type="button" class="btn" @click="sendGETJSONP()">查询</button>
    </div>
    <div id="bodypart" v-if="flag">
        <div id="chaxjg">查询结果</div>
        <div id="number">您查询的手机号码段</div>
        <div id="number_json">{{mobilex}}</div>
        <div id="cityinfo">卡号归属地</div>
        <div id="cityinfo_json">{{cityinfo}}</div>
        <div id="companyinfo">隶属通讯公司</div>
        <div id="companyinfo_json">{{company}}</div>
        <div id="cityblock">区号</div>
        <div id="cityblock_json">{{cityblock}}</div>
        <div id="postcode">邮编</div>
        <div id="postcode_json">{{postcode}}</div>
        <a id="moreinfo" href="https://cn.bing.com/search?q=%E4%B8%AD%E5%9B%BD%E5%90%84%E5%9C%B0%E9%82%AE%E7%BC%96%E5%8C%BA%E5%8F%B7&cvid=a2ac39fe100d44c09adb0281ce434de5&aqs=edge..69i57j0.9831j0j1&pglt=41&FORM=ANNTA1&PC=DCTS">更多详情邮编区号</a>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            flag : false,
            mobile: '',
            cityinfo: '',
            company : '',
            cityblock: '',
            postcode: '',
            mobilex:''
        },
        methods:{
            sendGETJSONP(){
                this.flag = true;
                this.$http.jsonp('https://tool.bitefu.net/shouji/',{
                    params: { mobile : this.mobile },
                    emulateJSON : true,
                    jsonp: "callback"
            }).then(resdata=>{
                console.log(resdata);
                if(resdata.body.info){
                    alert(resdata.body.info);
                    this.mobilex = '';
                }
                else {
                    this.mobilex = resdata.body.mobile;
                    this.cityinfo = resdata.body.province + ' ' + resdata.body.city;
                    this.company = resdata.body.isp;
                    this.cityblock = resdata.body.areacode;
                    this.postcode = resdata.body.postcode;
                }
                    }
                )
            }
        }
    }
    )
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251

效果：
同JavaWEB笔记14 jQuery发送AJAX和JAVA后台JSON数据中案例的效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/227801