Vue 3前端与Python（Django）后端接口简单示例

后端（Django）

1. 创建Django项目和应用：
   • 确保你已经安装了Django。如果没有安装，可以使用以下命令安装：

   pip install django
   

   • 创建一个新的Django项目：

   django-admin startproject myproject
   

   • 进入项目目录并创建一个新的应用程序：

   cd myproject
   python manage.py startapp myapp
   

2. 配置项目：
   • 在 myproject/settings.py 文件中，将 myapp 添加到 INSTALLED_APPS 列表中，并配置允许跨域访问（因为Vue和Django可能运行在不同端口）。安装 corsheaders 库：

   pip install django-cors-headers
   

   • 在 INSTALLED_APPS 中添加 corsheaders：

   INSTALLED_APPS = [
     ...
       'corsheaders',
      'myapp',
   ]
   

   • 在 MIDDLEWARE 中添加 corsheaders 中间件：

   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
     ...
   ]
   

   • 配置允许所有来源访问（在生产环境中请替换为实际的前端域名）：

   CORS_ALLOW_ALL_ORIGINS = True
   

3. 编写视图和API：
   • 在 myapp/views.py 中编写一个简单的视图函数：

   from django.http import JsonResponse
   
   def get_data(request):
       data = {'message': '这是来自Django后端的数据'}
       return JsonResponse(data)
   

   • 在 myapp/urls.py 中配置URL：

   from django.urls import path
   from. import views
   
   urlpatterns = [
       path('api/data/', views.get_data, name='get_data'),
   ]
   

   • 在 myproject/urls.py 中包含 myapp 的URL配置：

   from django.contrib import admin
   from django.urls import path, include
   
   urlpatterns = [
       path('admin/', admin.site.urls),
       path('', include('myapp.urls')),
   ]
   

4. 运行后端：

   python manage.py runserver
   

前端（Vue 3）

1. 创建Vue 3项目：
   • 确保你已经安装了 vue@latest。如果没有安装，可以使用以下命令安装：

   npm create vue@latest
   

   • 选择默认配置或根据提示进行自定义配置。
2. 编写Vue组件：
   • 在 src/views/Home.vue 中修改代码以调用后端API：

   <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开发服务器：

   npm run dev
   

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

原文地址：https://blog.csdn.net/m0_67444449/article/details/145035331

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！