vue学习
2020-07-21 本文已影响0人
小丹子1o1
3.网络应用介绍
网络应用-介绍
3.1 axios的使用
axios使用
axios.get请求，请求参数跟在地址?后面
axios.get请求
axios.get请求结果
axios.post请求，请求参数用一个对象装起来
axios.post请求
axios.post请求结果
axios使用的代码
<!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>01_axios基本使用</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!--官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num（笑话条数，数字）
响应内容：随机笑话
*/
document.querySelector(".get").onclick = function() {
axios.get("https://autumnfish.cn/api/joke/list?num=3")
// axios.get("https://autumnfish.cn/api/joke/list1234?num=3")
.then(function(response) {
console.log(response);
}, function(err) {
console.log(err);
})
}
/*
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username（用户名，字符串）
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function() {
axios.post("https://autumnfish.cn/api/user/reg", {username: "张三"})
.then(function(response) {
console.log(response);
}, function(err) {
console.log(err);
})
}
</script>
</body>
</html>
3.2 axios+vue
axios+vue
axios+vue使用效果
axios+vue的使用，this的指向改变了，所以先用一个变量把this存起来，后面用
<!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>02_axios+vue</title>
</head>
<body>
<div id="app">
<input type="button" value="get请求" @click="getJoke">
<p>{{ joke }}</p>
</div>
<!--官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口1：随机获取一条笑话
请求地址：https://autumnfish.cn/api/joke
请求方法：get
请求参数：无
响应内容：随机笑话
*/
var app = new Vue({
el: '#app',
data: {
joke: "很好笑的笑话"
},
methods: {
getJoke: function() {
console.log(this.joke);
var that = this;
axios.get("https://autumnfish.cn/api/joke").then
(function(response) {
console.log(response.data);
// console.log(this.joke); //this改变了
that.joke = response.data;
}, function(err) {
})
}
}
})
</script>
</body>
</html>
