Vue.js与Flask/Django后端配合


💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。

  • 推荐:「stormsha的主页」👈,「stormsha的知识库」👈持续学习,不断总结,共同进步,为了踏实,做好当下事儿~

  • 专栏导航

    • Python系列: Python面试题合集,剑指大厂
    • Git系列: Git操作技巧
    • GO系列: 记录博主学习GO语言的笔记,该笔记专栏尽量写的试用所有入门GO语言的初学者
    • 数据库系列: 详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
    • 运维系列: 总结好用的命令,高效开发
    • 算法与数据结构系列: 总结数据结构和算法,不同类型针对性训练,提升编程思维

    非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

    |-----------------------------|
    | 💖The Start💖点点关注,收藏不迷路💖 |

    📒文章目录

        • [1. 项目结构](#1. 项目结构)
        • [2. 前端(Vue.js)](#2. 前端(Vue.js))
        • [3. 后端(Flask/Django)](#3. 后端(Flask/Django))
        • [4. 前后端通信](#4. 前后端通信)
        • [5. CORS 设置](#5. CORS 设置)
        • 总结

使用Vue.js作为前端框架与Flask或Django作为后端框架的搭配是一个非常流行的技术栈组合。这种组合能够充分利用前端的动态交互和后端的强大数据处理能力。下面是一些关于如何将Vue.js与Flask或Django后端配合的一些建议和步骤:

1. 项目结构

通常情况下,你会将前端和后端分成两个独立的项目文件夹:

  • frontend/:存放Vue.js项目代码
  • backend/:存放Flask或Django项目代码

2. 前端(Vue.js)

首先,你需要创建一个Vue.js项目。你可以使用Vue CLI来初始化一个新的Vue项目:

bash 复制代码
npm install -g @vue/cli
vue create frontend

3. 后端(Flask/Django)

接下来,你需要创建一个Flask或Django项目。

Flask:

bash 复制代码
mkdir backend
cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install flask

创建一个简单的Flask应用:

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

app = Flask(__name__)

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

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

Django:

bash 复制代码
pip install django
django-admin startproject backend
cd backend
python manage.py startapp api

配置Django项目,并创建一个简单的API视图:

python 复制代码
# backend/api/views.py
from django.http import JsonResponse

def get_data(request):
    return JsonResponse({'message': 'Hello from Django!'})

将视图添加到URLs配置中:

python 复制代码
# backend/backend/urls.py
from django.contrib import admin
from django.urls import path
from api.views import get_data

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/data/', get_data),
]

4. 前后端通信

你可以通过axios或fetch在Vue.js中进行HTTP请求,以与后端API进行通信。

安装axios:

bash 复制代码
npm install axios

在Vue组件中使用axios:

javascript 复制代码
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    axios.get('http://127.0.0.1:5000/api/data')  // 修改为你的Flask或Django API地址
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
};
</script>

5. CORS 设置

为了允许前端和后端在不同的域上运行,你需要配置CORS(跨域资源共享)。

Flask:

安装Flask-CORS:

bash 复制代码
pip install flask-cors

修改Flask应用以允许CORS:

python 复制代码
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

Django:

安装django-cors-headers:

bash 复制代码
pip install django-cors-headers

在Django设置中添加CORS配置:

python 复制代码
# backend/backend/settings.py
INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

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

CORS_ALLOW_ALL_ORIGINS = True  # 这是一个简单的配置,生产环境中需要进行更严格的控制

总结

通过以上步骤,你可以成功地将Vue.js前端与Flask或Django后端进行组合,实现一个全栈的Web应用。这样可以充分利用前后端各自的优势,构建高效、灵活的Web应用。


🔥🔥🔥道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙

|---------------------------|
| 💖The End💖点点关注,收藏不迷路💖 |

相关推荐
getaxiosluo5 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v8 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds2 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果2 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长2 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai3 小时前
uniapp
前端·javascript·vue.js·uni-app
王哲晓4 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v4 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试