[toc]
Vue+axios（功能强大的网络请求库） 天气预报项目
官网：https://github.com/axios/axios
使用axios首先得导包（与vue的导入不分先后）
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 导包axios -->
<script src="../axios/axios.js"></script>
<script>js代码</script>
</body>
请求方法：
get请求
1、axios.get(地址).then(function(response){},function(err){}) 第一个回调函数请求成功的时候触发，第二个回调函数请求失败的时候触发（形参用来传递信息，一个是服务器的内容，一个是错误的信息）
2、如果需要传递参数，在地址的后面加上问号和查询字符串（key是文档提供的，value是要传递的数据）：axios.get(地址？key=value&key2=value2).then(function(response){},function(err){})
post请求
1、axios.post(地址).then(function(response){},function(err){})
2、写法与get大体一致，不同之处在于数据是以对象的形式。在地址后面加上逗号和参数对象axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
需要接口
- 接口一：==随机笑话==
- 请求地址：https://autumnfish.cn/api/joke/list
- 请求方法：get
- 请求参数：num（笑话条数，数字）
- 响应内容：随机笑话
- 接口一补充：==随机笑话==
- 请求地址：https://autumnfish.cn/api/joke
- 请求方法：get
- 请求参数：无
- 响应内容：随机生成一条笑话
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 导包axios -->
<script src="../axios/axios.js"></script>
<script>
document.querySelector(".get").onclick = function() {
//访问笑话接口的链接，一次访问三个笑话
axios.get("https://autumnfish.cn/api/joke/list?num=6")
.then(function(response) {
console.log(response)
}, function(err) {
//错误时，只需要把地址的路径改为错误的，比如和随便在路径上加一个46511
console.log(err)
})
}
</script>
结果为：{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
data返回的为一个对象
- 接口二：==用户注册==
- 请求地址：https://autumnfish.cn/api/user/reg
- 请求方法：post
- 请求参数：username（用户名，字符串）
- 响应内容：注册成功或失败
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 导包axios -->
<script src="../axios/axios.js"></script>
<script>
document.querySelector(".post").onclick = function() {
axios.post("https://autumnfish.cn/api/user/reg", {
//post的请求为一个对象
username: "jack"
})
.then(function(response) {
console.log(response)
}, function(err) {
console.log(err);
})
}
结果为：{data: "已被注册，请检查", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
//如果祥让结果不被注册，可以更改username：“”的值，比如改为迪迦奥特曼等等。
结果为：{data: "注册成功", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
//当再次点击注册时，还会显示已被注册，请检查
data返回的为一个字符串
</script>
- 接口三：==天气预报==
- 请求地址：https://wthrcdn.etouch.cn/weather_mini
- 请求方法：get
- 请求参数：city（城市名）
- 响应内容：天气信息
var vm = new Vue({
el: "#app",
data: {
message: '北京'
},
methods: {
getMessage: function() {
console.log(this.message)
// var that = this;
axios.get('https://wthrcdn.etouch.cn/weather_mini?city=' + this.message)
.then(function(response) {
console.log(response);
})
.catch(function(err) {
})
}
}
})
axios如何结合vue开发网络应用
注意：
1、axios回调函数中的this已经改变，无法访问到data中的数据
2、把this保存起来（生成一个变量），回调函数中直接使用保存的this即可
3、和本地应用的最大区别就是改变了数据来源
<div id="app">
<input type="button" value="获取笑话" @click="getJoke"> {{joke}}
</div>
<script src="../axios/axios.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
joke: "很好笑的笑话"
},
methods: {
getJoke: function() {
/*此时输出的时很好笑的笑话*/
console.log(this.joke)
/*可以将此处的this赋予一个变量，然后传入到回调函数中*/
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function(response) {
/*此时this输出的时undefined*/
console.log(this.joke)
/*this输出的是一个window对象*/
console.log(this)
// 笑话在data里面，所以可以直接调用response.data来获取笑话
console.log(response.data)
//在此处输出的值为很好笑的笑话，然后就可以让文本的值随着笑话的改变而改变
that.joke = response.data
console.log(that.joke);
}, function(err) {
console.log(err)
})
}
}
})
</script>
更多项目的视频链接
https://www.bilibili.com/video/av76249419?from=search&seid=2919137368581693198
post请求在脚手架中的的实际运用
post请求
export default {
name:'add-blog',
data () {
return {
blog:{
title:"",
content:"",
//类别 假如添加的博客是多个类型的 将这些类型的博客按照数组形式进行添加 最后传出去
categories:[],
//定义一个author属性
author:"",
},
authors:["Tom","Eve","Lulu"],
//用于表单的显示
show:true,
}
},
methods:{
// 使用http的post
post:function(){
this.$http.post("http://jsonplaceholder.typicode.com/posts",{
//post的为连接中存储的对象类型
title:this.blog.title,
body:this.blog.content,
userId:1
//有条件的时候，我们就可以将自己的数据传递到自己的数据库中 只需要把post的数据更改为自己数据库的链接就可以了
//
//post成功之后
}).then(function(data){
//输出成功 说明已经将数据传递到了jsonplaceholder中
console.log(data)
})
//进入jsonplaceholder的网站http://jsonplaceholder.typicode.com/
//post的地址http://jsonplaceholder.typicode.com/posts
},
}
}
get请求
created(){
//get（）与post（）里面的内容一样
this.$http.get('../../static/posts.json')
.then(function(data){
// console.log(data)
//返回十条数据 于数组中
// data.body.slice(0,10)
this.blogs=data.body.slice(0,10)
console.log(this.blogs)
})
},
获取指定的内容
created(){
console.log(this.add)
//获取当前的博客的id
this.$http.get('http://jsonplaceholder.typicode.com/posts/'+this.id)
//假如this id的值为5 则获取的为请求的对象中id值为5的那个对象
.then(function(data){
//此时获取的为指定id的服务器内容
console.log(data);
console.log(this.id)
this.blog = data.body
})
}
}
获取本地的数据库中的数据
在脚手架中：
实现本地存储:
将post文件以json形式存储到项目的static文件夹里面
（存储到其他的文件夹无效），然后再获取get('../../static/posts.json')
用firebase创建:
链接不进去官网地址
https://firebase.google.cn/
