django中如何快速使用vue3实现前后端分离,详细步骤
以下是使用Django和Vue 3实现前后端分离的详细步骤:
- 创建Django项目
使用以下命令创建一个新的Django项目:
django-admin startproject myproject
- 安装Django REST framework
使用以下命令安装Django REST framework:
pip install djangorestframework
- 创建Django应用程序
使用以下命令创建一个新的Django应用程序:
python manage.py startapp myapp
- 配置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',
),
}
- 编写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!'})
- 配置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),
])),
]
- 创建Vue项目
使用以下命令创建一个新的Vue项目:
vue create myproject-ui
- 添加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端点获取数据。
- 添加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
- 集成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"))
]
- 运行项目
使用以下命令启动Django应用程序:
python manage.py runserver
然后在浏览器中打开http://localhost:8000/
,即可看到使用Vue 3实现的Django应用程序。
评论 0