安装$ npm install axios
1.发送get请求：
axios.get("/api/v1.0/cars?id=132").then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});
2.发送post请求：
let params = {
id:4, ctime:'2019-03-1',name:"奔驰4"
}
//'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
axios.post('/api/v1.0/cars',params,{
headers: {
'Content-Type':'application/json'
}
}).then(res=>{
console.log(res.data)
},err =>{
console.log(err)
})
},
使用flask模拟后台提供接口，只需要修改config/index.js 下的配置项
proxyTable: {
'/api':'http://localhost:5000/',
},
flask 服务器端接口定义：
@app.route('/api/v1.0/cars', methods=['GET','POST'])
def get_cars():
if request.method == 'POST':
car = request.get_json() #接受post提交的参数
cars.append(car)
print(car)
return jsonify({'ok':'ok'})
else:
id = request.args.get("id") #接受get请求的参数
if id:
print("id:", id)
for item in cars:
if id == item.get("id"):
return jsonify({'cars': item})
return jsonify({'cars': "id 为" + id + "的车不存在！"})
else:
return jsonify({'cars': cars})
3.put 请求
axios.put("/api/v1.0/cars?id=1&name=宝马x").then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});
flask 服务器端接受put请求处理：
@app.route('/api/v1.0/cars', methods=['PUT'])
def put_cars():
"""更新指定id的car的name信息"""
id = request.args.get("id")
name = request.args.get("name")
print(request.args)
for item in cars:
if int(id) == item.get("id"):
item['name'] = name
return jsonify({'cars': item})
return jsonify({'cars': "id 为" + id + "的车不存在！"})
4.delete请求
axios.delete("/api/v1.0/cars?id=2").then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});
flask 服务器端接受delete请求处理
@app.route('/api/v1.0/cars', methods=['DELETE'])
def delete_cars():
"""删除指定id的car信息"""
id = request.args.get("id")
print(request.args)
for item in cars:
if int(id) == item.get("id"):
cars.remove(item)
return jsonify({'errno': 0, 'errmsg': "delete ok"})
return jsonify({'cars': "id 为" + id + "的车不存在！"})
5.get请求路径作为参数时
axios.get("/api/v1.0/cars/3").then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});
flask处理
@app.route('/api/v1.0/cars/<int:id>', methods=['GET'])
def get_cars_by_id(id):
for item in cars:
if int(id) == item.get("id"):
return jsonify({'cars': item})
return jsonify({'cars': "id 为" + id + "的车不存在！"})
6.axios文件上传：
<form>
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" @change="getFile($event)">
<button @click="submitForm($event)">提交</button>
</form>
data:function(){
return{
name:'',
age:'',
file:''
}
},
getFile(event) {
this.file = event.target.files[0];
console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData();
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('file', this.file);
console.log(formData)
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post('/api/v1.0/upload', formData, config).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err)
})
},
flask服务器端接受
@app.route('/api/v1.0/upload', methods=['GET', 'POST'])
def upload_file():
upload_time = time.strftime("%Y%m%d%H%M%S", time.localtime())
name = request.form.get("name")
age = request.form.get("age")
print("name:" + name + ",age:" + age)
f = request.files['file']
f.save("upload/" + upload_time + f.filename)
return jsonify({'msg': "ok"})