Vue.js与Flask/Django后端配合
Vue.js与Flask/Django后端配合
在现代Web开发领域,前后端分离已成为一种流行的架构模式。Vue.js作为一款轻量级、高性能的前端框架,与Flask或Django这样的后端框架相结合,可以构建出强大且可扩展的Web应用。本文将详细介绍如何将Vue.js与Flask或Django后端配合使用,实现前后端分离开发。
前后端分离概述
前后端分离的核心思想是将Web应用的前端界面与后端服务分离开发、部署和维护。在这种架构下,前端主要负责用户界面的渲染和交互逻辑,而后端则负责处理业务逻辑、数据库交互等。两者通过API(通常是RESTful API或GraphQL)进行数据通信。这种架构模式带来了许多优势,包括:
- 高效开发:前端和后端可以并行开发,互不依赖,加快开发速度。
- 可重用性强:API可以同时服务Web、移动端等多个客户端。
- 维护性好:前端与后端代码分离,代码更易于维护。
- 提高用户体验:前端可以专注于用户界面和交互体验,提高用户满意度。
技术栈
- 前端:Vue.js
- 后端:Flask 或 Django
- 数据通信:RESTful API(使用Axios进行请求)
项目结构
一个典型的前后端分离项目结构大致如下:
my_project/
├── backend/ # 后端代码目录(Flask 或 Django)
│ ├── app.py # Flask 应用入口
│ ├── views.py # Django API views
│ └── ...
├── frontend/ # 前端代码目录(Vue.js 项目)
│ ├── src/
│ ├── public/
│ └── ...
└── README.md # 项目说明
设置Vue.js前端
-
安装Vue CLI
首先,确保安装了Node.js和npm,然后安装Vue CLI:
npm install -g @vue/cli -
创建Vue项目
在项目根目录下创建一个新的Vue项目:
vue create frontend按照提示设置Vue项目。
-
安装Axios
在Vue项目中安装Axios,用于发起API请求:
cd frontend npm install axios -
创建Vue组件
在
frontend/src/components目录下创建Vue组件,例如ApiComponent.vue,用于展示从后端接口获取的数据。<template><div><h1>{{ message }}</h1><ul><li v-for="item in data" :key="item">{{ item }}</li></ul></div> </template><script> import axios from 'axios';export default {data() {return {message: '',data: []};},mounted() {axios.get('http://localhost:5000/api/data').then(response => {this.message = response.data.message;this.data = response.data.data;}).catch(error => {console.error('API Error:', error);});} } </script>
设置Flask后端
-
创建Flask项目
在
backend目录下,创建一个新的Flask项目。mkdir backend cd backend python -m venv venv source venv/bin/activate # Linux/Mac # venv\Scripts\activate # Windows pip install Flask -
编写Flask应用
在
backend目录下创建app.py,并编写一个简单的Flask API。from flask import Flask, jsonify from flask_cors import CORSapp = Flask(__name__) CORS(app)@app.route('/api/data', methods=['GET']) def get_data():return jsonify({'message': 'Hello from Flask!', 'data': [1, 2, 3, 4, 5]})if __name__ == '__main__':app.run(debug=True)这段代码创建了一个简单的Flask API,它返回一条消息和一组数据。
-
运行Flask服务器
在
backend目录下执行:python app.py
设置Django后端
-
创建Django项目
在
backend目录下,创建一个新的Django项目。mkdir backend cd backend python -m venv venv source venv/bin/activate # Linux/Mac # venv\Scripts\activate # Windows pip install django djangorestframework django-admin startproject myproject -
创建API应用
在项目内创建一个新的Django应用作为API。
python manage.py startapp api -
配置Django REST framework
在
myproject/settings.py中添加rest_framework到INSTALLED_APPS中。INSTALLED_APPS = [...'rest_framework','api', ]REST_FRAMEWORK = {'DEFAULT_PERMISSION_CLASSES': ['rest_framework.permissions.AllowAny',] } -
编写API视图
在
api/views.py中编写API视图。from rest_framework.views import APIView from rest_framework.response import Responseclass DataView(APIView):def get(self, request):return Response({'message': 'Hello from Django!', 'data': [1, 2, 3, 4, 5]}) -
配置路由
在
api/urls.py中设置路由,并在myproject/urls.py中包含它。# api/urls.py from django.urls import path from .views import DataViewurlpatterns = [path('data/', DataView.as_view()), ]# myproject/urls.py from django.contrib import admin from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('api/', include('api.urls')), ] -
安装CORS支持
安装
django-cors-headers并在settings.py中配置。pip install django-cors-headers在
settings.py中添加:INSTALLED_APPS = [...'corsheaders', ]MIDDLEWARE = [...'corsheaders.middleware.CorsMiddleware',... ]CORS_ALLOW_ALL_ORIGINS = True # 或者设置具体的白名单 -
运行Django服务器
在
myproject目录下执行:python manage.py runserver
整合前后端
在开发过程中,可以分别启动Flask或Django后端服务器和Vue.js前端服务器,并通过Axios在Vue.js中调用后端的API。确保前端和后端的API接口和数据格式一致,以便顺利通信。
生产环境配置
-
构建Vue应用
在Vue项目目录下执行:
npm run build这将在
frontend/dist目录下生成编译后的静态文件。 -
部署Vue应用
对于Flask,可以将
frontend/dist目录下的文件复制到Flask的static目录下,并修改Flask的路由以返回index.html。对于Django,将
frontend/dist目录下的文件(除了index.html)复制到Django的static目录下,并将index.html放置在Django的templates目录下,然后修改Django的视图以返回该模板。 -
配置反向代理
在生产环境中,通常使用Nginx或Apache作为反向代理服务器,以提供静态文件服务,并将请求转发到后端服务器。
结论
Vue.js与Flask或Django的结合可以形成一个强大的前后端分离架构,适用于构建现代Web应用。通过合理分工和技术选型,可以提高开发效率、增强应用的可维护性和可扩展性。前后端
相关文章:
Vue.js与Flask/Django后端配合
Vue.js与Flask/Django后端配合 在现代Web开发领域,前后端分离已成为一种流行的架构模式。Vue.js作为一款轻量级、高性能的前端框架,与Flask或Django这样的后端框架相结合,可以构建出强大且可扩展的Web应用。本文将详细介绍如何将Vue.js与Fla…...
ESP32 入门笔记02: ESP32-C3 系列( 芯片ESP32-C3FN4) (ESP-IDF + VSCode)
ESP32-C3 系列的 芯片 / 模组 / 开发板 ESP32-C3-DevKitM-1是乐鑫一款搭载 ESP32-C3-MINI-1 或 ESP32-C3-MINI-1U 模组的入门级开发板(内置 ESP32-C3FH4 或 ESP32-C3FN4 芯片)。 板上模组大部分管脚均已引出至两侧排针,可根据开发实际需求&a…...
Vue主题色实现
主题色实现 情境 配置平台支持多个主题色的选择,用户可通过在配置平台选择项目主题色。前端项目在骨架屏加载页面获取配置信息,设置项目主题色,实现同个项目不同主题色渲染的需求 实现 1.定义主题色变量 不同主题色根据不同js文件划分定…...
ChartLlama: A Multimodal LLM for Chart Understanding and Generation论文阅读
原文链接:https://arxiv.org/abs/2311.16483 代码与数据集:https://tingxueronghua.github.io/ChartLlama/ 本文启发:文章提出利用GPT-4合成大量图表数据,这些数据包含各种图表类型,包含丰富的instruction data。然后…...
ByteCinema(1):用户的登录注册
文章目录 主要功能生成图形验证码redis滑动窗口操作限流0.限流设计的必要性1.原理2.代码(邮箱发验证码为例)3. 问题与解决高并发环境下redis操作的原子性过时数据的积累 续约token实现长期登录0.设计的出发点1.前置知识:JWT什么是 JWT?JWT 的…...
电力电网电线变电站输电线绝缘子无人机类数据集/农业植物病虫害类数据集/光伏板/工程煤矿矿场类数据集/道路类数据集
电力电网电线变电站输电线红外缺陷类数据集 传送门链接: 1.电线覆盖物检测数据集 气球风筝鸟巢 1300张 voc yol-CSDN博客 2.变电站可见光缺陷数据集数据集包含8376张巡检图像,带xml标签,共包含17类巡检标签!具体缺陷分类见下图!…...
深度学习之表示学习 - 引言篇
序言 在数据爆炸的今天,如何从纷繁复杂的信息中抽取有价值的知识,成为了人工智能领域亟待解决的核心问题。深度学习,作为机器学习的一个重要分支,以其强大的特征表示能力和自动化学习特性,引领了这场数据革命的浪潮。…...
Linux驱动开发 ——架构体系
只读存储器(ROM) 1.作用 这是一种非易失性存储器,用于永久存储数据和程序。与随机存取存储器(RAM)不同,ROM中的数据在断电后不会丢失,通常用于存储固件和系统启动程序。它的内容在制造时或通过…...
Django一分钟:lookupAPI详解,使用django orm生成高效的WHERE子句
一、Lookup API概述 Lookup API是Django用于构建数据库查询WHERE子句的API。 Lookup API的核心包含两部分: RegisterLookupMixin:为子类提供注册lookup的方法Query Expression API:一个接口,规定了可以被注册为lookup的类需要实…...
信息安全工程师(8)网络新安全目标与功能
前言 网络新安全目标与功能在当前的互联网环境中显得尤为重要,它们不仅反映了网络安全领域的最新发展趋势,也体现了对网络信息系统保护的不断加强。 一、网络新安全目标 全面防护与动态应对: 目标:建立多层次、全方位的网络安全防…...
返利机器人在电商返利系统中的负载均衡实现
返利机器人在电商返利系统中的负载均衡实现 大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!今天我们来聊一聊如何在电商返利系统中实现返利机器人的负载均衡,尤其是在面对高并发和大量…...
MATLAB中typecast函数用法
目录 语法 说明 示例 将整数转换为相同存储大小的无符号整数 将 8 位整数转换为单精度 将 32 位整数转换为 8 位整数 将 8 位整数转换为 16 位整数 提示 typecast函数的功能是在不更改基础数据的情况下转换数据类型。 语法 Y typecast(X,type) 说明 Y typecast(X,…...
植物大战僵尸【源代码分享+核心思路讲解】
植物大战僵尸已经正式完结,今天和大家分享一下,话不多说,直接上链接!!!(如果大家在运行这个游戏遇到了问题或者bug,那么请私我谢谢) 大家写的时候可以参考一下我的代码思…...
变压器设备漏油数据集 voc txt
变压器设备漏油数据集 油浸式变压器通常采用油浸自冷式、油浸风冷式和强迫油循环三种冷却方式。该数据集采集于油浸式变压器的设备漏油情况,一般用于变电站的无人巡检,代替传统的人工巡检,与绝缘子的破损检测来源于同一课题。数据集一部分来自…...
算法练习题25——leetcode3279统计重新排列后包含另一个字符串的子字符串的数目(滑动窗口 双指针 哈希)
题目描述 解题思路 本题用到了滑动窗口 双指针 哈希 刚开始我是没读懂题的因为我笨 我想把我的思路说一下 左端不轻易缩小 只有找到跟word2匹配了 比如说abbcdd 遍历到c的时候才能匹配这个word2 对吧 那么之后加上以一个d或者俩d 都符合了 然后我们算完了 才能缩小左端 扩大…...
JavaEE: 深入探索TCP网络编程的奇妙世界(二)
文章目录 TCP核心机制TCP核心机制二: 超时重传为啥会丢包?TCP如何对抗丢包?超时重传的时间设定超时时间该如何确定? TCP核心机制 前一篇文章 JavaEE: 深入探索TCP网络编程的奇妙世界(一) 书接上文~ TCP核心机制二: 超时重传 在网络传输中,并不会一帆风顺,而是可能出现&qu…...
GPT1-GPT3论文理解
GPT1-GPT3论文理解 视频参考:https://www.bilibili.com/video/BV1AF411b7xQ/?spm_id_from333.788&vd_sourcecdb0bc0dda1dccea0b8dc91485ef3e74 1 历史 2017.6 Transformer 2018.6 GPT 2018.10 BERT 2019.2 GPT-2 2020…...
C/C++内存管理 ——
目录 五、C/C内存管理 1、C/C内存分布 2、C语言中动态内存管理方式:malloc/calloc/realloc/free 3、C内存管理方式 1.new/delete操作内置类型 2.new和delete操作自定义类型 4、operator new与operator delete函数 5、new和delete的实现原理 1.内置类…...
深度学习02-pytorch-04-张量的运算函数
在 PyTorch 中,张量(tensor)运算是核心操作之一,PyTorch 提供了丰富的函数来进行张量运算,包括数学运算、线性代数、索引操作等。以下是常见的张量运算函数及其用途: 1. 基本数学运算 加法运算:…...
OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【文件系统】上
往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ 子系统开发内核 轻量系统内核(LiteOS-M) 轻量系统内核&#…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
