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。

相关推荐
Dontla2 分钟前
函数柯里化(Currying)介绍(一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术)
前端·javascript
xixixin_5 分钟前
为什么 js 对象中引用本地图片需要写 require 或 import
开发语言·前端·javascript
uhakadotcom7 分钟前
Zustand状态管理库:轻量级、高效的React解决方案
前端·javascript·面试
再学一点就睡25 分钟前
Cookie、LocalStorage 和 SessionStorage 的全面解析
前端
余人于RenYu35 分钟前
前端插件使用汇总
前端·javascript
2301_789169541 小时前
前端对接下载文件接口、对接dart app
前端
邴越1 小时前
OpenAI Function Calling 函数调用能力与外部交互
开发语言·前端·javascript
uhakadotcom1 小时前
React 和 Next.js 的基础知识对比
前端·面试·github
__lost1 小时前
Pysides6 Python3.10 Qt 画一个时钟
python·qt
Billy Qin1 小时前
Tree - Shaking
前端·javascript·vue.js