Vue 3前端与Python(Django)后端接口简单示例

项目

后端(Django)

  1. 创建Django项目和应用

    • 确保你已经安装了Django。如果没有安装,可以使用以下命令安装:
    bash 复制代码
    pip install django
    • 创建一个新的Django项目:
    bash 复制代码
    django-admin startproject myproject
    • 进入项目目录并创建一个新的应用程序:
    bash 复制代码
    cd myproject
    python manage.py startapp myapp
  2. 配置项目

    • myproject/settings.py 文件中,将 myapp 添加到 INSTALLED_APPS 列表中,并配置允许跨域访问(因为Vue和Django可能运行在不同端口)。安装 corsheaders 库:
    bash 复制代码
    pip install django-cors-headers
    • INSTALLED_APPS 中添加 corsheaders
    python 复制代码
    INSTALLED_APPS = [
      ...
        'corsheaders',
       'myapp',
    ]
    • MIDDLEWARE 中添加 corsheaders 中间件:
    python 复制代码
    MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware',
        'django.middleware.common.CommonMiddleware',
      ...
    ]
    • 配置允许所有来源访问(在生产环境中请替换为实际的前端域名):
    python 复制代码
    CORS_ALLOW_ALL_ORIGINS = True
  3. 编写视图和API

    • myapp/views.py 中编写一个简单的视图函数:
    python 复制代码
    from django.http import JsonResponse
    
    def get_data(request):
        data = {'message': '这是来自Django后端的数据'}
        return JsonResponse(data)
    • myapp/urls.py 中配置URL:
    python 复制代码
    from django.urls import path
    from. import views
    
    urlpatterns = [
        path('api/data/', views.get_data, name='get_data'),
    ]
    • myproject/urls.py 中包含 myapp 的URL配置:
    python 复制代码
    from django.contrib import admin
    from django.urls import path, include
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('', include('myapp.urls')),
    ]
  4. 运行后端

    bash 复制代码
    python manage.py runserver

前端(Vue 3)

  1. 创建Vue 3项目

    • 确保你已经安装了 vue@latest。如果没有安装,可以使用以下命令安装:
    bash 复制代码
    npm create vue@latest
    • 选择默认配置或根据提示进行自定义配置。
  2. 编写Vue组件

    • src/views/Home.vue 中修改代码以调用后端API:
    html 复制代码
    <template>
        <div>
            <h1>Vue 3与Django集成示例</h1>
            <p>{{ responseData.message }}</p>
        </div>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    import axios from 'axios';
    
    const responseData = ref({});
    
    const fetchData = async () => {
        try {
            const response = await axios.get('http://127.0.0.1:8000/api/data/');
            responseData.value = response.data;
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };
    
    fetchData();
    </script>
    
    <style scoped>
    /* 样式 */
    </style>
  3. 运行前端

    • 在项目目录中运行以下命令启动Vue开发服务器:
    bash 复制代码
    npm run dev

现在,Vue 3前端应用可以成功调用Django后端提供的API,并展示返回的数据。请确保后端和前端服务器都在运行,并且根据实际情况调整API的URL。

相关推荐
Mintopia1 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia4 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn19 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero22 分钟前
基于vue3完成领域模型架构建设
前端
香蕉可乐荷包蛋22 分钟前
Python学习之路(十三)-常用函数的使用,及优化
开发语言·python·学习
PanZonghui25 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴29 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
惜.己30 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
sunbyte32 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常33 分钟前
网页视频录制新技巧,代码实现超简单!
前端