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。

相关推荐
mortimer1 小时前
Python 文件上传:一个简单却易犯的错误及解决方案
人工智能·python
IT_陈寒1 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
Juchecar1 小时前
NumPy编程:鼓励避免 for 循环
python
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js