Vue.js 与 Flask/Django 后端配合开发实战

news/2024/12/22 20:18:41/

Vue.js 与 Flask/Django 后端配合开发实战

在现代的 Web 开发中,前后端分离已成为一种主流架构,其中前端使用 Vue.js 等流行的框架,后端采用 Flask 或 Django 提供 API 接口。在这种开发模式下,前端负责页面的交互和动态效果,后端负责处理数据、提供 API 接口、完成业务逻辑等。本文将详细介绍如何使用 Vue.js 与 Flask 或 Django 进行配合开发,并展示部分代码实现。
在这里插入图片描述

一、前后端分离架构的优势
  1. 开发效率提高:前端和后端可以分开开发,互不影响。前端开发人员可以专注于用户界面和交互逻辑,后端开发人员则专注于 API 的设计和数据处理。

  2. 技术栈自由选择:前后端分离允许我们根据项目需求选择最合适的技术栈。例如,前端可以使用 Vue.js 或 React,后端可以根据场景选择 Flask、Django、Node.js 等。

  3. 前后端解耦:通过 RESTful API 或 GraphQL 进行通信,前端只需要根据接口调用数据,而后端负责处理和返回数据,前后端之间完全解耦。
    在这里插入图片描述

二、Vue.js 与 Flask/Django 的基础工作流

在前后端分离的架构中,前端 Vue.js 主要通过发送 HTTP 请求来获取后端提供的数据,常见的方式是通过 AJAXFetch API,请求后端的 API,后端返回 JSON 格式的数据供前端使用。

工作流程概述:
  1. 前端:通过 Vue.js 创建动态页面,用户在页面上与应用进行交互。Vue.js 负责处理用户事件、获取输入、发送请求到后端。

  2. 后端:使用 Flask 或 Django 提供 RESTful API 接口,处理前端请求,查询数据库,并返回 JSON 数据。

  3. 数据交互:前端使用 axiosfetch 向后端发出请求,后端处理请求后返回 JSON 响应,前端根据响应更新页面内容。
    在这里插入图片描述

三、Flask 与 Vue.js 配合开发
1. Flask 后端配置

Flask 是一个轻量级的 Python Web 框架,支持快速构建 RESTful API。首先,我们需要安装 Flask 并创建基础的 Flask 应用。

安装 Flask

pip install Flask

创建 Flask 应用

# app.py
from flask import Flask, jsonify, requestapp = Flask(__name__)# 示例 API
@app.route('/api/data', methods=['GET'])
def get_data():sample_data = {'message': 'Hello, Vue.js!','status': 'success','data': [1, 2, 3, 4, 5]}return jsonify(sample_data)if __name__ == '__main__':app.run(debug=True)

在这个示例中,Flask 后端提供了一个简单的 API /api/data,返回一个 JSON 响应,其中包含一个消息和一组数据。

2. Vue.js 前端配置

在前端部分,我们使用 Vue.js 创建一个简单的应用来展示如何从 Flask 后端获取数据并在页面上显示。

安装 Vue CLI

npm install -g @vue/cli
vue create vue-flask-app

创建 Vue 组件

src/components/HelloFlask.vue 中创建一个组件,该组件通过 axios 向 Flask 后端发送请求。

<template><div><h1>{{ message }}</h1><p>Status: {{ status }}</p><ul><li v-for="item in data" :key="item">{{ item }}</li></ul></div>
</template><script>
import axios from 'axios'export default {data() {return {message: '',status: '',data: []}},mounted() {// 请求Flask后端的APIaxios.get('http://localhost:5000/api/data').then(response => {this.message = response.data.messagethis.status = response.data.statusthis.data = response.data.data}).catch(error => {console.log(error)})}
}
</script>

在这个 Vue.js 组件中,我们使用 axios 向 Flask 后端的 /api/data 发送 GET 请求,并将返回的数据展示在页面上。axios.get() 方法用于发起 HTTP 请求,当数据成功返回时,数据将被绑定到 Vue 组件的 data 对象中。

3. 前后端联调

确保 Flask 后端在运行:

python app.py

然后运行 Vue.js 项目:

npm run serve

访问 http://localhost:8080,你应该能够在页面上看到来自 Flask 后端的数据。
在这里插入图片描述

四、Django 与 Vue.js 配合开发

Django 是一个全功能的 Web 框架,适合构建大型 Web 应用。通过 Django Rest Framework(DRF),我们可以快速构建 RESTful API 接口,与 Vue.js 前端进行交互。

1. Django 后端配置

首先,安装 Django 和 Django Rest Framework:

pip install django djangorestframework

创建一个新的 Django 项目:

django-admin startproject django_vue_app
cd django_vue_app
python manage.py startapp api

配置 Django Rest Framework

settings.py 中添加 rest_framework 到已安装应用中:

INSTALLED_APPS = [...'rest_framework','api',
]

api/views.py 中创建一个简单的 API 视图:

# api/views.py
from rest_framework.response import Response
from rest_framework.decorators import api_view@api_view(['GET'])
def get_data(request):sample_data = {'message': 'Hello from Django!','status': 'success','data': [6, 7, 8, 9, 10]}return Response(sample_data)

api/urls.py 中定义路由:

# api/urls.py
from django.urls import path
from .views import get_dataurlpatterns = [path('data/', get_data),
]

配置项目的 urls.py 文件

# django_vue_app/urls.py
from django.contrib import admin
from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('api/', include('api.urls')),
]

运行 Django 服务器:

python manage.py runserver
2. Vue.js 前端配置

在前端部分,我们可以直接复用之前的 Vue 组件,但需要将 API 请求的 URL 改为指向 Django 后端:

<script>
import axios from 'axios'export default {data() {return {message: '',status: '',data: []}},mounted() {// 请求Django后端的APIaxios.get('http://localhost:8000/api/data/').then(response => {this.message = response.data.messagethis.status = response.data.statusthis.data = response.data.data}).catch(error => {console.log(error)})}
}
</script>

确保 Django 服务器在端口 8000 运行,然后在 Vue.js 项目中发送请求,数据将会成功从 Django 后端加载并展示在页面上。
在这里插入图片描述

五、跨域问题处理

在前后端分离开发时,通常会遇到 跨域问题。浏览器出于安全考虑,禁止从不同的域名、端口或协议中请求资源,这就是所谓的 同源策略

我们可以通过后端设置 CORS(Cross-Origin Resource Sharing) 来解决跨域问题。

Flask 中配置 CORS

pip install flask-cors

在 Flask 项目中添加 CORS 支持:

from flask_cors import CORSapp = Flask(__name__)
CORS(app)

Django 中配置 CORS

pip install django-cors-headers

settings.py 中配置 CORS:

INSTALLED_APPS = [...'corsheaders',
]MIDDLEWARE = [...'corsheaders.middleware.CorsMiddleware',
]CORS_ALLOW_ALL_ORIGINS = True

在这里插入图片描述

六、总结

在前后端分离的架构下,Vue.js 作为前端框架与 Flask/Django 后端配合,可以充分发挥各自的优势。通过 RESTful API 接口,前端可以灵活地请求后端的数据并动态展示,后端则负责处理业务逻辑、数据库操作等。

通过本文的示例,我们学习了如何使用 Vue.js 和 Flask/Django 构建前后端分离的 Web 应用。无论是轻量级的 Flask 还是功能强大的 Django,它们都可以很好地与 Vue.js 前端框架协同工作,实现高效、灵活的 Web 开发。

这种前后端分离的架构在实际开发中非常常见,适用于大多数中大型项目。希望通过本文的学习,能帮助你在实际项目中更好地应用这一技术栈。
在这里插入图片描述


http://www.ppmy.cn/news/1533435.html

相关文章

基于微信小程序的宿舍报修系统的设计与实现(lw+演示+源码+运行)

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&am…

基于云开发进行快速搭建企业智能名片小程序

如何基于云开发进行快速搭建企业智能名片小程序&#xff1f; 首先&#xff0c;需要注册一个小程序账号&#xff0c;获取AppID。如果还不知道怎么注册的朋友&#xff0c;可以去看我前面写的那篇教程&#xff0c;有比较详细的注册步骤图文教程。 复制AppID&#xff0c;打开开发者…

计算机毕业设计 智能旅游推荐平台的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

以矩阵的视角解多元一次方程组——矩阵消元

x 2 y z 2 x 2yz2 x2yz2 3 x 8 y z 12 3x8yz12 3x8yz12 4 y z 2 4yz2 4yz2 上面这是一个三元一次方程组&#xff0c;相信大家都知道如何解&#xff0c;现在这里给出另外一种视角&#xff0c;即从矩阵的角度来解方程组&#xff0c;从而学习在后面的线性代数学习中会用…

Typora使用与Markdown语法详细教程

Typora 基本介绍 Typora 是一款由 Abner Lee 开发的轻量级 Markdown 编辑器。Markdown 是一种 轻量级标记语言&#xff0c;它允许人们使用易读易写的纯文本格式编写文档&#xff0c;然后转换成有效的 XHTML&#xff08;或者 HTML&#xff09;文档。 安装 下载地址&#xff…

B-树(不是B减树)原理剖析(1)

目录 B树的主要特性&#xff1a; B树的操作&#xff1a; B树的优点&#xff1a; 为什么要发明出B-树&#xff1f; B树的概念和原理剖析 原理图讲解(部分讲解在图中) 初始化结点&#xff1a; 处理数据数量计算(了解) 底层代码实现(加深理解) 前些日子我们学了AVl树&…

django drf 统一处理操作人和时间字段

场景 如果你的表结构有这些字段&#xff1a;创建人/创建时间/更新人/更新时间/删除人/删除时间&#xff0c;我们可以统一处理这些字段的更新和插入&#xff0c;而不需要额外显示操作。 代码 1.ActionViewSetMixin&#xff1a; import datetime from rest_framework import s…

Cell子刊被on hold,SCI 选刊投稿时该如何避开可能爆雷的期刊?

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 Cell Press旗下的Heliyon&#xff0c;前两天刚被WOS宣布on hold预警了。 这本创刊于2015年的综合性OA期刊&#xff0c;发文范围广泛&#xff0c;包括生物、化学、物理、工程等…