npm install axios -S // -S 生产环境也可以
// 导入
import Axios from 'axios';
// 注册原型,将所有vue的实例,组件,都能拥有axios方法
Vue.prototype.$Axios = Axios;
// $Axios 是自定义的axios方法名字
this.注册原型方法的名字.get("需要访问的数据地址",{params : {key1 : val1,key2 : val2,....}}).then( res => {成功的回调}).catch( err => {失败的回调})
// get方法使用
export default {
created() {
// 在创建之后,执行这个方法
this.getJoker()
},
methods : {
getJoker() {
// 这里的?page=1参数可以使用{params : {page : 1}}来表示
this.$Axios.get("http://www.520mg.com/mi/list.php?page=1")
// 获取数据成功的回调函数
.then( res => {
console.log(res);
})
// 获取数据失败的回调函数
.catch( err => {
console.log("获取数据失败");
})
}
}
}
this.注册原型方法的名字.post("需要访问的数据地址","参数字符串",{headers : {请求头信息}}).then( res => {成功的回调}).catch( err => {失败的回调})
// post方法使用
export default {
created() {
// 在创建之后,执行这个方法
this.getMovies()
},
methods : {
getJoker() {
this.$Axios.post(
"http://www.endata.com.cn/API/GetData.ashx",
"areaId=50&typeId=0&year=0&initial=&pageIndex=1&pageSize=10&MethodName=BoxOffice_GetMovieData_List",
{
headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"}
}
)
// 获取数据成功的回调函数
.then( res => {
console.log(res);
})
// 获取数据失败的回调函数
.catch( err => {
console.log("获取数据失败");
})
}
}
}
this.注册原型方法的名字.post("需要访问的数据地址",{key1 : val1,key2 : val2,....}).then( res => {成功的回调}).catch( err => {失败的回调})
// post方法使用
export default {
created() {
// 在创建之后,执行这个方法
this.getMovies()
},
methods : {
getJoker() {
this.$Axios.post(
"http://www.endata.com.cn/API/GetData.ashx",
{
areaId : 50,
typeId : 0,
initial : '',
pageIndex : 1,
pageSize : 10,
MethodName : "BoxOffice_GetMovieData_List"
}
)
// 获取数据成功的回调函数
.then( res => {
console.log(res);
})
// 获取数据失败的回调函数
.catch( err => {
console.log("获取数据失败");
})
}
}
}
安装 qs
npm install qs
导入 qs
import Qs from 'qs'
// post方法使用
export default {
created() {
// 在创建之后,执行这个方法
this.getMovies()
},
methods : {
getJoker() {
//
var data = {
areaId : 50,
typeId : 0,
initial : '',
pageIndex : 1,
pageSize : 10,
MethodName : "BoxOffice_GetMovieData_List"
};
this.$Axios.post(
"http://www.endata.com.cn/API/GetData.ashx",
qs.stringify(data); // 这里是将声明的数据使用qs方法进行序列化,跟json数据类型的post方法基本一样
)
// 获取数据成功的回调函数
.then( res => {
console.log(res);
})
// 获取数据失败的回调函数
.catch( err => {
console.log("获取数据失败");
})
}
}
}
// 创建一个表单拿数据
var data = new FormData();
// 上传到服务器,
this.$Axios.post("https://www.520mg.com/ajax/file.php",data)
.then( res => {
console.log(res);
})
<template>
<div>
<h1>首页h1>
<div v-if="pics.length">
<img :src="'http://www.520mg.com'+item" v-for="item in pics" width="100" alt="">
div>
<div>
<label class="label"><input type="file" ref="file" @change="up()"> + <span class="before" :style="{width:pre+'%'}">span>label>
div>
div>
template>
<style>
body{padding: 50px;}
.label{
height: 100px;
width: 100px;
display: inline-block;
background-color: #CCCCCC;
overflow: hidden;
color:#fff;
line-height: 100px;
text-align: center;
cursor: pointer;
font-size: 48px;
position: relative
}
/* 设置宽高,颜色 文字内容信息 相对定位 */
.label .before{
position: absolute;
left:0;
bottom:0;
content: "";
display: inline-block;
height: 2px;
width: 0%;
background-color: orange;
}
/* 绝对定定位 宽度默认0% 底部橙色的进度条*/
.label input{ display: none;}
/* 被lable包裹的input 单击input 和单击 label效果一致 ,把input隐藏 */
style>
<script>
import qs from 'qs';
export default{
data(){
return {pics:[],pre:0}
},
created(){
this.getJoks();
// 获取笑话信息
this.getMovies();
// 通过post 获取电影信息
},
methods:{
// 文件、图片上传
up(){
var that = this;
// 获取到this 赋值给that
var file = this.$refs.file.files[0];
// 拿到上传的文件
if(!file){return}
// 如果没有文件就返回
var data = new FormData();
// 创建一个表单数据
data.append("file",file);
// 把图片或文件添加到data
this.$http.post(
"https://www.520mg.com/ajax/file.php",
data,
// 第1个参数 url 第二参数 data数据,第三个是配置渲染,
// onUploadProgress 当上传进度时
{onUploadProgress:e=>{
that.pre =Math.floor(e.loaded/e.total*100);
// e.loaded 已经上传的字节数据,e.total 字节数据 转换为1-100的比例值 赋值个pre
}}
)
.then(res=>{
console.log(res);
if(res.data.error==0){
// 如果错误为0
this.pics.push(res.data.pic);
// 把图片加入到图片pics数组
}
this.$refs.file.value="";
// 清空表单数据
this.pre = 0;
// 清空上传进度数据
})
},
}
}
script>
import axios form 'axios'
注册原型的方法名字({url: '地址',data : '参数字符串',method : "POST",headers : {请求头信息}}).then( res => {}).catch( err => {})
axios({
url : "http://www.endata.com.cn/API/GetData.ashx",
data : "areaId=50&typeId=0&year=0&initial=&pageIndex=1&pageSize=10&MethodName=BoxOffice_GetMovieData_List",
method : "POST",
headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"}
}).then( res => {
console.log("成功的回调");
}).catch( err => {
console.log("失败的回调");
})
import axios form 'axios'
注册原型的方法名字({url: '地址',params : {key1 : val1,key2 : val2,...},method : "GET").then( res => {}).catch( err => {})
axios({
url : "http://www.endata.com.cn/API/GetData.ashx",
params : {
areaId : 50,
typeId : 0,
initial : '',
pageIndex : 1,
pageSize : 10,
MethodName : "BoxOffice_GetMovieData_List"
},
method : "GET",
}).then( res => {
console.log("成功的回调");
}).catch( err => {
console.log("失败的回调");
})
// 导入axios
import Axios from 'axios';
// 配置默认的请求数据地址
Axios.default.baseURL = "https://www.520mg.com";
// 配置请求头的默认信息
Axios.default.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
// 注册原型
Vue.prototype.$Axios = Axios;