Django+Vue構建前後端分離開發模式

海上华帆發表於2024-05-25
DjangoVue後端模式

將Django作為後端，Vue作為前端進行前後端分離開發是一個常見的模式。
下面是一個完整的步驟，以構建一個Django和Vue整合的專案。

1. 準備Django後端

安裝必要的庫

確保你已經安裝了Django和Django REST framework：

pip install django djangorestframework

配置Django專案

在 myproject/settings.py 中，新增 rest_framework 到 INSTALLED_APPS：

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

建立一個API端點

在 blog 應用中建立一個API端點。首先，在 blog 應用目錄下建立一個 serializers.py 檔案，並定義序列化器：

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = ['id', 'title', 'content', 'created_at']

然後，在 views.py 中建立一個檢視來處理API請求：

from rest_framework import generics
from .models import Post
from .serializers import PostSerializer

class PostListCreate(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

接下來，在 urls.py 中定義API的路由：

from django.urls import path
from .views import PostListCreate

urlpatterns = [
    path('api/posts/', PostListCreate.as_view(), name='post-list-create'),
]

在主專案的 urls.py 檔案中包含 blog 應用的URL：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
]

2. 準備Vue前端

安裝Vue CLI

首先，安裝Vue CLI（如果尚未安裝）：

npm install -g @vue/cli

建立Vue專案

使用Vue CLI建立一個新的Vue專案：

vue create frontend
cd frontend

安裝Axios

在Vue專案中安裝Axios，用於與後端API通訊：

npm install axios

配置Axios

在 src 目錄下建立一個 api 目錄，並在其中建立一個 index.js 檔案來配置Axios：

// src/api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://127.0.0.1:8000/blog/api',
  withCredentials: false,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

export default {
  getPosts() {
    return apiClient.get('/posts/');
  }
}

建立Vue元件

在 src 目錄下建立一個 components 目錄，並在其中建立一個 PostList.vue 檔案：

<template>
  <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }} - {{ post.created_at }}
      </li>
    </ul>
  </div>
</template>

<script>
import api from '../api'

export default {
  data() {
    return {
      posts: []
    }
  },
  created() {
    api.getPosts().then(response => {
      this.posts = response.data;
    });
  }
}
</script>

<style>
/* Add some basic styling */
</style>

配置路由

在 src/router/index.js 中新增路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import PostList from '@/components/PostList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'PostList',
      component: PostList
    }
  ]
})

3. 啟動專案

啟動Django後端

確保你的Django開發伺服器在執行：

python manage.py runserver

啟動Vue前端

在 frontend 目錄下啟動Vue開發伺服器：

npm run serve

4. 訪問專案

開啟瀏覽器，訪問 http://localhost:8080，你應該會看到從Django後端API獲取並顯示的部落格文章列表。

重點和難點

  1. CORS問題：前後端分離的專案中，通常會遇到跨域資源共享(CORS)問題。你需要在Django專案中配置CORS，安裝 django-cors-headers 並進行配置。

    pip install django-cors-headers

    在 settings.py 中新增：

    INSTALLED_APPS = [
    ...
    'corsheaders',
]

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

CORS_ORIGIN_ALLOW_ALL = True  # 或者配置具體允許的域名

  2. API端點和前端介面的設計：確保API設計合理，前端介面簡單易用。序列化器和檢視的設計需要考慮前端需求。

  3. 環境配置：在開發和生產環境中，可能需要不同的配置。例如，前端在生產環境中通常會構建為靜態檔案，放置在Django的靜態檔案目錄中。

透過以上步驟，你可以成功構建一個前後端分離的Django和Vue專案，前端透過API與後端通訊，實現完整的功能。

相關文章