Vue.js与Flask/Django后端配合

server/2024/9/22 14:24:25/

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,而 Flask 和 Django 是两个流行的 Python Web 框架,分别用于构建轻量级和全功能的 Web 应用程序。将 Vue.js 与 Flask 或 Django 后端配合使用,可以创建一个现代化的、前后端分离的 Web 应用程序。

Vue.js 与 Flask 配合

1. 项目结构
  • 前端:Vue.js 项目
  • 后端:Flask 项目
2. 通信方式
  • API 接口:Vue.js 通过 HTTP 请求与 Flask 后端进行通信,通常使用 RESTful API。
  • 跨域问题:如果前后端运行在不同的域名或端口上,需要处理跨域问题。Flask 可以使用 flask-cors 扩展来解决跨域问题。
3. 示例代码
  • Flask 后端

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

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

Vue.js 前端

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    fetch('http://localhost:5/api/data')
      .then(response => response.json())
      .then(data => {
        this.message = data.message;
      });
  }
};
</script>

Vue.js 与 Django 配合

1. 项目结构
  • 前端:Vue.js 项目
  • 后端:Django 项目
2. 通信方式
  • API 接口:Vue.js 通过 HTTP 请求与 Django 后端进行通信,通常使用 RESTful API。
  • 跨域问题:Django 可以使用 django-cors-headers 包来解决跨域问题。
3. 示例代码
  • Django 后端

    1. 安装 django-cors-headers:pip install django-cors-headers

                   2. 配置 settings.py

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # 允许所有域名
3. 创建 API 视图:

from django.http import JsonResponse

def get_data(request):
    data = {'message': 'Hello from Django!'}
    return JsonResponse(data)
配置 URL:

from django.urls import path
from .views import get_data

urlpatterns = [
    path('api/data/', get_data, name='get_data'),
]

  • Vue.js 前端: 与 Flask 示例中的 Vue.js 代码相同,只需将请求的 URL 改为 Django 后端的 URL。

总结

  • Vue.js 负责前端的用户界面和交互逻辑。
  • Flask/Django 负责后端的数据处理和业务逻辑。
  • 通过 RESTful API 进行前后端通信,实现数据的双向传递。

这种架构模式使得前后端可以独立开发、测试和部署,提高了开发效率和系统的可维护性。


http://www.ppmy.cn/server/120310.html

相关文章

2024华为杯E题成品文章已出!

E题高速公路应急车道紧急启用模型 点击链接加入群聊【2024华为杯数学建模助攻资料】&#xff1a;http://qm.qq.com/cgi-bin/qm/qr?_wv1027&kxtS4vwn3gcv8oCYYyrqd0BvFc7tNfhV7&authKeyedQFZne%2BzvEfLEVg2v8FOm%2BWNg1V%2Fiv3H4tcE6X%2FW6lCmkhaSaZV4PwQ%2FOVPDtF%2B&…

缓存预热方案详解

在高性能Web应用中&#xff0c;缓存技术是提升系统响应速度的关键手段之一。然而&#xff0c;在系统启动或重启后&#xff0c;缓存往往是空的&#xff0c;此时来自用户的请求将直接打到数据库上&#xff0c;导致响应时间增加。为了避免这种情况&#xff0c;缓存预热就显得尤为重…

如何安装和注册 GitLab Runner

如何安装和注册 GitLab Runner GitLab Runner 是一个用于运行 GitLab CI/CD (Continuous Integration/Continuous Deployment) 作业。它是一个与 GitLab 配合使用的应用程序&#xff0c;可以在本地或云中运行。Runner 可以执行不同类型的作业&#xff0c;例如编译代码、运行测…

【Docker】安装全流程与配置完整镜像源(可安装 nginx)

目录 一、卸载历史版本&#xff08;选&#xff09;二、配置 yum 源三、安装 docker四、配置 docker 镜像源加速&#xff08;选、强烈建议&#xff09;4.1 配置阿里镜像加速4.2 配置其他镜像源 五、启动 docker参考文章与视频 本文基于 Linux - CentOS 7 操作系统。 一、卸载历史…

系统架构设计师 大数据架构篇二

大数据架构 &#x1f310; 大数据处理系统分析 &#x1f50d; 大数据处理系统三大挑战 &#x1f680; 非结构化数据处理&#xff1a;如何处理非结构化和半结构化数据。复杂性与不确定性&#xff1a;大数据复杂性、不确定性特征描述的刻画方法和大数据的系统建模。异构性影响…

机械设备产品资料方案介绍小程序系统开发制作

设备产品资料介绍小程序系统&#xff0c;是一家工业机械设备生产厂家为了更好的服务客户而定制开发的一套小程序系统&#xff0c;让用户通过小程序就可以了解公司产品介绍的详细参数、售后服务和产品操作手持等。 该小程序系统里面主要开发的功能模块有&#xff1a; 1、产品目…

【百日算法计划】:每日一题,见证成长(020)

题目 删除字符串中的所有相邻重复项 给出由小写字母组成的字符串 S&#xff0c;重复项删除操作会选择两个相邻且相同的字母&#xff0c;并删除它们。 在 S 上反复执行重复项删除操作&#xff0c;直到无法继续删除。 在完成所有重复项删除操作后返回最终的字符串。答案保证唯一…

Java流程控制语句——跳转语句详解:break 与 continue 有什么区别?

&#x1f310;在Java编程中&#xff0c;break和continue是两个重要的控制流语句&#xff0c;它们允许开发者根据特定条件改变程序的执行流程。虽然两者都用于中断当前的行为&#xff0c;但它们的作用方式不同。本文将通过生动的例子来详细解释这两个语句&#xff0c;并使用流程…