15 axios跟后端交互
1 fetch和axios
axios与fetch实现数据请求
(1)fetch（不是所有浏览器都支持，谷歌浏览器支持）
XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。 兼容性不好
2 axios的引入
3 axios的简单使用
axios.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟后端交互title>
<script src="./js/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<button @click="handleClick">点我看美女button>
<br>
我的名字是：{{name}}
<br>
我的年龄是：{{age}}
div>
body>
<script>
let vm = new Vue({
el: '#box',
data: {
name:'',
age:0
},
methods:{
handleClick(){
// 会出跨域问题
axios.get('http://127.0.0.1:5000/').then(res=>{
console.log(res.data)
this.name=res.data.name
this.age=res.data.age
})
//
}
}
})
script>
html>
backend.py
# -*- coding: utf-8 -*-
# @Time : 2021/12/28 20:35
# @Author : dzg
from flask import Flask, jsonify, make_response
app = Flask(__name__)
@app.route('/')
def index():
obj = make_response(jsonify({"name": "dzg", "age": "18"}))
obj.headers['Access-Control-Allow-Origin'] = '*'
return obj
if __name__ == '__main__':
app.run()
4 axios发送get请求
axios.get(url, { params: param })
//成功返回
.then(response => {
console.log(response);
})
//失败返回
.catch(error => {
console.log(error);
})
5 axios发送post请求
5.1 'Content-Type': 'multipart/form-data'
axios.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟后端交互title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<button @click="handleClick">axios发送post请求button>
div>
body>
<script>
let vm = new Vue({
el: '#box',
data: {
name: '',
age: ''
},
methods: {
handleClick() {
let params = new FormData()
params.append('name', 'dzg')
params.append('age', '18')
axios.post('http://127.0.0.1:5000/', params, {"headers": {'Content-Type': 'multipart/form-data'}}).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error)
})
}
}
})
script>
html>
backend.py
# -*- coding: utf-8 -*-
# @Time : 2021/12/28 20:35
# @Author : dzg
from flask import Flask, jsonify, make_response, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, resource='/*')
@app.route('/', methods=['POST'])
def index():
print(request.form)
print(request.form.to_dict())
return 'ok'
if __name__ == '__main__':
app.run()
5.2 'Content-Type': 'application/json'
axios.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟后端交互title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<button @click="handleClick">axios发送post请求button>
div>
body>
<script>
let vm = new Vue({
el: '#box',
data: {
name: '',
age: ''
},
methods: {
handleClick() {
axios.post('http://127.0.0.1:5000/', {name:'dzg',age:18}).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error)
})
}
}
})
script>
html>
backend.py
# -*- coding: utf-8 -*-
# @Time : 2021/12/28 20:35
# @Author : dzg
from flask import Flask, jsonify, make_response, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, resource='/*')
@app.route('/', methods=['POST'])
def index():
print(request.data)
return 'ok'
if __name__ == '__main__':
app.run()
跟后端交互的三种方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div class="app">
<div v-for="data in data_list">
<h1>电影名为：{{data.name}}h1>
<h2>导演：{{data.director}}h2>
<img :src="data.poster" alt="">
div>
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
name: '',
age: '',
data_list:[]
},
// created() {
// // 发送ajax请求，正常来讲，需要使用js向后端发送请求
// // 原生js写的ajax，非常麻烦，还要处理浏览器兼容
// // 于是 jquery，封装了一个ajax函数，方便咱们使用
// //CORS:面试重点，跨域问题
// $.ajax({
// url: 'http://127.0.0.1:5000/',
// type: 'get',
// success: data=> {
// console.log(data)
// this.name=data.name
// this.age=data.age
// }
// })
// }
// created() {
// // fetch:新的ajax，原生js支持的
// fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res=>{
// // console.log(res)
// this.name=res.name
// this.age=res.age
// })
// }
created(){
// axios：第三方
axios.get('http://127.0.0.1:5000/').then(res=>{
console.log(res.data) //需要从res.data中取出后台给的数据
this.data_list=res.data.data.films
})
}
})
script>
html>
s1.py(flask写的，需要pip install flask)
from flask import Flask, jsonify import json app = Flask(__name__) @app.route('/') def home(): with open('data.json', 'r', encoding='utf-8') as f: data_res = json.load(f) res = jsonify(data_res) # 解决跨域 res.headers['Access-Control-Allow-Origin'] = '*' return res if __name__ == '__main__': app.run()