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。

相关推荐
weixin_贾7 分钟前
最新AI-Python机器学习与深度学习技术在植被参数反演中的核心技术应用
python·机器学习·植被参数·遥感反演
张槊哲16 分钟前
函数的定义与使用(python)
开发语言·python
船长@Quant21 分钟前
文档构建:Sphinx全面使用指南 — 实战篇
python·markdown·sphinx·文档构建
Senar21 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴39 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言43 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
偶尔微微一笑1 小时前
AI网络渗透kali应用(gptshell)
linux·人工智能·python·自然语言处理·编辑器
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket