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) 轻量系统内核&#…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
