django中如何快速使用vue3实现前后端分离,详细步骤

以下是使用Django和Vue 3实现前后端分离的详细步骤:

  1. 创建Django项目

使用以下命令创建一个新的Django项目:

django-admin startproject myproject
  1. 安装Django REST framework

使用以下命令安装Django REST framework:

pip install djangorestframework
  1. 创建Django应用程序

使用以下命令创建一个新的Django应用程序:

python manage.py startapp myapp
  1. 配置Django REST框架

编辑myproject/settings.py文件并添加以下行:

INSTALLED_APPS = [
    ...
    'rest_framework',
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.SessionAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    ),
}
  1. 编写API视图

myapp/views.py文件中编写API视图。例如:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello world!'})
  1. 配置URL路由

编辑myproject/urls.py文件并添加以下行:

from django.urls import path, include
from myapp.views import hello_world

urlpatterns = [
    path('api/', include([
        path('hello-world/', hello_world),
    ])),
]
  1. 创建Vue项目

使用以下命令创建一个新的Vue项目:

vue create myproject-ui
  1. 添加Vue组件

在Vue项目中创建一个组件,例如:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    fetch('/api/hello-world/')
      .then(response => response.json())
      .then(data => this.message = data.message)
  }
}
</script>

在这个例子中,我们创建了一个名为HelloWorld的Vue组件,并在组件加载后使用Fetch API从API端点获取数据。

  1. 添加Vue Router

使用以下命令安装Vue Router:

npm install vue-router

在Vue项目中添加路由,并将HelloWorld组件映射到路由:

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
  1. 集成Django和Vue

编辑myproject/settings.py文件并添加以下行:

TEMPLATES = [
    {
        ...
        'APP_DIRS': True,
        'DIRS': ['../myproject-ui/public']
    },
]

STATICFILES_DIRS = [
    BASE_DIR / "myproject-ui" / "dist" / "static",
]

在Vue项目中运行以下命令编译项目:

npm run build

在Django项目中编辑myproject/urls.py文件并添加以下行:

from django.views.generic import TemplateView

urlpatterns += [
    path('', TemplateView.as_view(template_name="index.html"))
]
  1. 运行项目

使用以下命令启动Django应用程序:

python manage.py runserver

然后在浏览器中打开http://localhost:8000/,即可看到使用Vue 3实现的Django应用程序。

评论 0