django和vue3前后端分离使用举例
一个使用Django和Vue 3实现前后端分离的示例项目是一个简单的博客系统,其中包含文章、分类和标签。以下是该示例项目的详细步骤:
- 在终端中安装Django并创建项目,并创建一个名为“blog”的应用程序
pip install django
django-admin startproject blog_project
cd blog_project
python manage.py startapp blog
- 在blog应用程序中定义模型(包括文章、分类和标签),并运行数据库迁移
python manage.py makemigrations blog
python manage.py migrate
- 创建REST API视图(基于Django REST Framework)来处理请求和响应,例如获取所有文章或根据ID获取单个文章等
from rest_framework.decorators import api_view
from rest_framework.response import Response
from .models import Article
@api_view(['GET'])
def get_articles(request):
queryset = Article.objects.all()
serializer = ArticleSerializer(queryset, many=True)
return Response(serializer.data)
@api_view(['GET'])
def get_article_by_id(request, id):
article = Article.objects.get(id=id)
serializer = ArticleSerializer(article)
return Response(serializer.data)
# 导入Article模型并使用ArticleSerializer对模型进行序列化
- 配置Django REST Framework并将API视图添加到URLconf中
# settings.py
INSTALLED_APPS = [
...,
'rest_framework',
'blog',
]
REST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.AllowAny',
]
}
# urls.py
from django.urls import path
from .views import get_articles, get_article_by_id
urlpatterns = [
path('api/articles/', get_articles, name='get_articles'),
path('api/articles/<int:id>/', get_article_by_id, name='get_article_by_id'),
]
- 创建基于Vue 3的前端应用程序,并在其中使用axios库来执行HTTP请求
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000/'
createApp(App).mount('#app')
- 在前端应用程序中创建视图组例如用于显示所有文章的组件和用于显示单个文章的组件
<template>
<h1>Articles</h1>
<ul>
<li>
<router-link :to="'/articles/' + article.id">{{ article.title }}</router-link>
</li>
</ul>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
articles: []
}
},
mounted() {
axios.get('api/articles/')
.then(response => {
this.articles = response.data
})
}
}
</script>
<template>
<div>
<h1>{{ article.title }}</h1>
<p>{{ article.body }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
article: {}
}
},
mounted() {
axios.get('api/articles/' + this.$route.params.id + '/')
.then(response => {
this.article = response.data
})
}
}
</script>
- 在前端应用程序中创建路由,以便在视图组件之间进行导航
import { createRouter, createWebHistory } from 'vue-router'
import ArticleList from './components/ArticleList.vue'
import ArticleDetail from './components/ArticleDetail.vue'
const routes = [
{ path: '/', redirect: '/articles' },
{ path: '/articles', component: ArticleList },
{ path: '/articles/:id', component: ArticleDetail }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
- 将前端Vue应用程序打包并将打包文件放置在Django项目的静态文件目录中
npm run build
mv dist/ blog_project/static/
- Django项目中配置CORS,以允许从前端应用程序访问API
# settings.py
INSTALLED_APPS = [
...,
'corsheaders',
'blog',
]
MIDDLEWARE = [
...,
'corsheaders.middleware.CorsMiddleware',
...,
]
CORS_ALLOW_ALL_ORIGINS = True
- 在Django项目的URLconf中创建一个视图函数,用于渲染模板
# views.py
from django.shortcuts import render
def index(request):
return render(request, 'index.html')
# urls.py
from django.urls import path
from .views import index
urlpatterns = [
path('', index),
]
- 创建基本的HTML模板,并使用Django模板语言(Django Template Language)在模板中显示前端Vue应用程序
<html>
<head>
<title>Blog</title>
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'js/app.js' %}"></script>
</body>
</html>
{% extends "base.html" %}
{% block content %}
<div id="app"></div>
{% endblock %}
- 运行Django服务器并在浏览器中打开URL以查看博客系统
python manage.py runserver
通过以上步骤,我们可以在本地搭建一个简单的Vue和Django结合的前后端分离的博客系统。
评论 0