- 一个前后端分离的demo
- 前端使用Vue框架
- 后端使用Python的Flask
- Vue通过使用axios获取到后端数据
- *Flask使用CORS实现跨域
完整代码
Vue代码
方法一
- index.vue
<template>
<el-form>
<el-form-item>
<el-button @click="test()">登录el-button>
<div>信息：{{ demo.msg }}div>
<div>状态码：{{ demo.status }}div>
el-form-item>
el-form>
template>
<script>
import axios from 'axios'
export default {
name: 'Index.vue',
data(){
return{
demo: ''
}
},
methods: {
test(){
axios.post('http://127.0.0.1:5000/index')
.then(res=>{
this.demo = res.data;
console.log(res.data);
})
},
}
}
script>
<style scoped>style>
方法二
- index.vue
<template>
<el-form>
<el-form-item>
<el-button @click="test()">点击el-button>
<div>信息：{{ demo.msg }}div>
<div>状态码：{{ demo.status }}div>
el-form-item>
el-form>
template>
<script>
export default {
name: 'Index.vue',
data(){
return{
demo: ''
}
},
methods: {
test(){
this.$http.post('http://127.0.0.1:5000/index')
.then(res=>{
this.demo = res.data;
console.log(res.data);
})
},
}
}
script>
<style scoped>style>
- main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
//导入字体图标
import './assets/font/iconfont.css'
// 组织显示生产模式的消息
Vue.config.productionTip = false
//==主要是这里==
import axios from 'axios'
// 挂载到vue的原型对象中
Vue.prototype.$http = axios
// 创建实例
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Flask代码
from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route('/index', methods=['GET', 'POST'])
def index():
success = {
"status": 200,
"msg": "连接成功！"
}
return success
if __name__ == '__main__':
print(app.url_map)
app.run(debug=True)
讲解
前端Vue代码
通过点击按钮运行 test() 方法，将后端返回的数据显示到demo中
<template>
<el-form>
<el-form-item>
<el-button @click="test()">点击el-button>
<div>信息：{{ demo.msg }}div>
<div>状态码：{{ demo.status }}div>
el-form-item>
el-form>
template>
使用axios方法获取后端返回数据
- 返回数据为res.data
- 后端端口为：http://127.0.0.1:5000/index
test(){
this.$http.post('http://127.0.0.1:5000/index')
.then(res=>{
// 将返回的数据显示到demo中
this.demo = res.data;
// 向控制台打印获取到的数据
console.log(res.data);
})
},
特别说明
- 在上述的
test()方法中，由于已经提前在main.js中导入了axios和将axios挂载到vue的原型对象中，才能使用this.$http来发送请求（本次示例使用的发送请求方式）。如下(main.js)：
...
import axios from 'axios'
// 挂载到vue的原型对象中
Vue.prototype.$http = axios
...
- 如果没有在
main.js中导入axios，则可以直接在.vue文件中的<script></script>标签中导入，以下为直接在文件中导入axios并发送请求
<script>
import axios from 'axios'
...
test(){
axios.post('http://127.0.0.1:5000/index')
.then(res=>{
this.demo = res.data;
console.log(res.data);
})
},
script>
后端Flask代码
- 创建好一个flask项目
- 在
app.py中，先导入跨域用的CORS库
from flask_cors import CORS
- 配置跨域
CORS(app, supports_credentials=True)
- 编写路由视图
@app.route('/index', methods=['GET', 'POST'])
def index():
success = {
"status": 200,
"msg": "连接成功！"
}
return success
扩展
关于CORS跨域，有两种方式：全局跨域、指定跨域接口
（1）全局跨域
- 即上述中使用到的跨域方式
from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
supports_credentials是一个布尔值类型，作用：是否允许请求发送cookie，false是不允许
（2）指定跨域接口
- 在需要进行跨域的路由视图中添加
@cross_origin装饰器
from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)
@app.route('/index', methods=['GET', 'POST'])
def index():
success = {
"status": 200,
"msg": "连接成功！"
}
return success
- 参考：http://t.csdn.cn/vgl7w
Original: https://blog.csdn.net/weixin_45681435/article/details/126779840
Author: FREE_QIU
Title: Vue+Flask实现前后端分离并交互
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/747712/
转载文章受原作者版权保护。转载请注明原作者出处！