axiso基本使用及python接收处理

安装$ 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"})