Vue.js与Flask/Django后端配合

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,而 Flask/Django 是 Python 语言编写的轻量级 Web 开发框架。它们可以很好地配合使用,以实现前后端分离的开发模式。

以下是一个简单的示例,展示了如何使用 Vue.js 与 Flask/Django 后端进行交互:

1、首先,确保你已经安装了 Flask/Django 和 Vue.js。可以使用以下命令安装 Flask:

bash 复制代码
pip install flask

2、建一个 Flask 应用:

python 复制代码
# app.py
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {"message": "Hello from Flask!"}
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

3、建一个简单的 Vue.js 应用:

html 复制代码
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js with Flask</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    axios.get('/api/data')
                        .then(response => {
                            this.message = response.data.message;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

在这个示例中,我们创建了一个简单的 Flask 应用,其中有一个路由 /api/data,它返回一个 JSON 对象。然后,我们创建了一个 Vue.js 应用,它在页面加载时通过 Axios 发送一个 GET 请求到 Flask 应用的 /api/data 路由,并将返回的数据绑定到 Vue 实例的 message 属性上。

要运行这个示例,请确保 Flask 应用正在运行,然后在浏览器中打开 index.html 文件。你应该能看到从 Flask 应用返回的消息显示在页面上。

相关推荐
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
赵我说的做_life3 小时前
基于Docker的Flask项目部署完整指南
docker·容器·flask
乌夷4 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
__淡墨青衫__4 小时前
Django之旅:第七节--模版继承
数据库·django·sqlite
橘猫云计算机设计5 小时前
net+MySQL中小民营企业安全生产管理系统(源码+lw+部署文档+讲解),源码可白嫖!
数据库·后端·爬虫·python·mysql·django·毕业设计
苹果酱05676 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.6 小时前
react和vue的区别之一
javascript·vue.js·react.js
海绵波波1076 小时前
玉米产量遥感估产系统的开发实践(持续迭代与更新)
python·flask
zqlcoding6 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥6 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js