15 axios跟后端交互
1 fetch和axios
axios与fetch实现数据请求
(1)fetch（不是所有浏览器都支持，谷歌浏览器支持）
XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。 兼容性不好
2 axios的引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>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>Title</title> <script src="./js/vue.js"></script> <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>--> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div class="app"> <!-- <h1>我的名字是：{{name}}</h1>--> <!-- <h1>我的年龄是：{{age}}</h1>--> <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()
