用django和vue3前后端分离开发博客系统详细步骤

以下是使用Django和Vue 3实现前后端分离开发博客系统的大致步骤：

  1. 在终端中安装Django并创建项目，并创建一个名为“blog”的应用程序
pip install django
django-admin startproject blog_project
cd blog_project
python manage.py startapp blog
  1. 在blog应用程序中定义模型（包括文章、分类和标签），并运行数据库迁移
python manage.py makemigrations blog
python manage.py migrate
  1. 创建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对模型进行序列化
  1. 配置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('articles/', get_articles, name='get_articles'),
    path('articles/<int:id>/', get_article_by_id, name='get_article_by_id'),
]
  1. 创建基于Vue 3的前端应用程序，并在其中使用axios库来执行HTTP请求
import { createApp } from 'vue'
import App from './App.vue'

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8000/api/'

createApp(App).mount('#app')
  1. 在前端应用程序中创建视图组件，例如用于显示所有文章的组件和用于显示单个文章的组件
<template>
  <div>
    <h1>Articles</h1>
    <ul>
      <li>
        &lt;router-link :to="'/articles/' + article.id"&gt;{{ article.title }}&lt;/router-link&gt;
      </li>
    </ul>
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import axios from 'axios'

export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    axios.get('articles/')
      .then(response =&gt; {
        this.articles = response.data
      })
  }
}
&lt;/script&gt;
&lt;template&gt;
  &lt;div&gt;
    &lt;h1&gt;{{ article.title }}&lt;/h1&gt;
    &lt;p&gt;{{ article.body }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import axios from 'axios'

export default {
  data() {
    return {
      article: {}
    }
  },
  mounted() {
    axios.get('articles/' + this.$route.params.id)
      .then(response =&gt; {
        this.article = response.data
      })
  }
}
&lt;/script&gt;
  1. 在前端应用程序中创建路由，以便在视图组件之间进行导航
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
  1. 将前端Vue应用程序打包并将打包文件放置在Django项目的静态文件目录中
npm run build
mv dist/ blog_project/static/
  1. Django项目中配置CORS，以允许从前端应用程序访问API
# settings.py

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

MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
    ...,
]

CORS_ALLOW_ALL_ORIGINS = True
  1. 在Django项目中创建模板，并使用Django模板语言（Django Template Language）在模板中显示前端Vue应用程序
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Blog&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  {% block content %}
  {% endblock %}

  &lt;script src="{% static 'js/app.js' %}"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
{% extends "base.html" %}

{% block content %}
&lt;div id="app"&gt;&lt;/div&gt;
{% endblock %}
  1. 在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),
]
  1. 运行Django服务器并在浏览器中打开URL以查看博客系统
python manage.py runserver

以上是基本的步骤，当然还可以根据需求进行更深入的改进。
吴秀峰

评论 0