一.使用 jQuery 的 ajax 与后端交互
1.版本一 : 存在跨域问题
- 前端 HTML 代码
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="box">
<!--点击按钮出发事件,向后端发送数据,后端返回数据,渲染到页面-->
<button @click="handleClick">加载数据</button>
<hr>
后端传来的数据 : {{name}}
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
name:'shawn'
},
methods: {
handleClick() {
// 使用 jQuery 发送 ajax 请求
$.ajax({
// 发送请求的url,5000端口是flask的默认端口(我们后端使用flask)
url: 'http://127.0.0.1:5000/',
method: 'get',
success: (data) => {
this.name = data // 将后端传来的数据渲染
}
})
}
}
})
</script>
- 后端文件
# 先安装 flask : pip3 install flask
# 这里使用 flask 是因为 flask 轻量,两三行代码就能起一个项目,方便,使用Django在这就显得笨拙
from flask import Flask, make_response
app = Flask(__name__)
@app.route('/')
def index():
pritn('前端请求来了')
res = make_response('Hello work!')
return res
if __name__ == '__main__':
app.run()
- 展示 (无法得到后端传来的数据)
> 问题 : 数据没有渲染成功, 但前端请求已经达到了后端, 错误提示 header 中没有携带 Access-Control-Allow-Origin
>
> 原因 : 跨域问题, 浏览器检测到前端和后端来自不同的域, 所以认为这是不安全的, 于是就拦截了该次资源的传递
>
> 解决 : 实现跨域资源共享 CORS, 也就是按照提示, 在 header 中加上 Access-Control-Allow-Origin
2.版本二 : 解决跨域问题
- 后端文件
# 这里使用 flask 是因为 flask 轻量,两三行代码就能起一个项目,方便,使用Django在这就显得笨拙
from flask import Flask, make_response
app = Flask(__name__)
@app.route('/')
def index():
pritn('前端请求来了')
res = make_response('Hello work!')
# 在 header 中加入 ACRS = 所有 (跨域资源共享)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
- 展示
3.后端读取 json 格式文件传给前端
- user_info.json 文件
{
"name": "shawn",
"age": 99,
"sex": "male"
}
- 前端 HTML 文件
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="box">
<button @click="handleClick">加载用户数据</button>
<hr>
用户信息 : 姓名:{{userInfo.name}} 年龄:{{userInfo.age}} 性别:{{userInfo.sex}}
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
userInfo:''
},
methods: {
handleClick() {
$.ajax({
url: 'http://127.0.0.1:5000/',
method: 'get',
success: (data) => {
this.userInfo = data
}
})
}
}
})
</script>
- 后端文件
from flask import jsonify # 与Django类似,是flask的三件套之一,返回json格式的数据
import json
@app.route('/')
def index():
print('前端请求来了')
# 读取文件内容进行序列化
with open('user_info.json','r') as f:
dic_json = json.load(f)
res = jsonify(dic_json)
# 加上跨域资源共享
res.headers["Access-Control-Allow-Origin"] = '*'
return res
if __name__ == '__main__':
app.run()
- 展示
二.使用 fetch 与后端交互
1.fetch 实现数据请求
- fetch是w3c的一种请求标准，不是第三方库，与vue、jquery无关，且多数浏览器已内置(如:谷歌)
2.代码示例
- 本地准备 json 格式数据
{
"status": 200,
"name": "shawn",
"age": 99,
"sex": "male"
}
- 前端 HTML 文件
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="box">
<button @click="handleClick">加载用户数据</button>
<hr>
<!-- 后端传来的数据 : {{name}}-->
用户信息 : 姓名:{{userInfo.name}} 年龄:{{userInfo.age}} 性别:{{userInfo.sex}}
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
userInfo:''
},
methods: {
handleClick() {
fetch('http://127.0.0.1:5000/home')
.then(data => data.json())
.then(data => {
if (data.status == 200){
this.userInfo = data
}else{
alert('加载失败!!')
}
})
}
}
})
</script>
- 后端文件
from flask import jsonify # 与Django类似,是flask的三件套之一,返回json格式的数据
import json
@app.route('/home')
def index():
print('前端请求来了')
# 读取文件内容进行序列化
with open('user_info.json','r') as f:
dic_json = json.load(f)
res = jsonify(dic_json)
# 加上跨域资源共享
res.headers["Access-Control-Allow-Origin"] = '*'
return res
if __name__ == '__main__':
app.run()
- 展示
三.使用 axios 实现与后端交互
1.Axios 介绍
- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
- 使用文档 : https://www.kancloud.cn/yunye/axios/234845
2.为什么使用 Axios
- 因为 vue.js 默认没有提供ajax功能, 为了实现 ajax 功能, 得通过 axios 实现
- 所以使用 vue 的时候，一般都会使用 axios 的插件来实现 ajax 与后端服务器的数据交互
3.简单使用
- 先安装 axios, 或者直接使用 CDN
# 下载
npm install axios
# 引入 CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-
user_info.json 文件与 fetch 使用的一样
-
前端 HTML 页面
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="box">
<button @click="handleClick">Axios加载用户数据</button>
<hr>
用户信息 : 姓名:{{userInfo.name}} 年龄:{{userInfo.age}} 性别:{{userInfo.sex}}
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
userInfo: ''
},
methods: {
handleClick() {
axios.get('http://127.0.0.1:5000/home')
.then(data => {
// axios 会将数据再封装一层,需要从data中取出来
if (data.data.status == 200) {
this.userInfo = data.data
} else {
alert('加载错误!')
}
})
}
}
})
</script>
-
后端文件与 fetch 使用的一样
-
展示
