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。

相关推荐
ohMyGod_1237 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜059 分钟前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界9 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
胖达不服输10 分钟前
「日拱一码」020 机器学习——数据处理
人工智能·python·机器学习·数据处理
Hilaku12 分钟前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员16 分钟前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句17 分钟前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
吴佳浩17 分钟前
Python入门指南-番外-LLM-Fingerprint(大语言模型指纹):从技术视角看AI开源生态的边界与挑战
python·llm·mcp
爱泡脚的鸡腿19 分钟前
Web第二次笔记
前端·javascript
良辰未晚19 分钟前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas