Django與Vue的完美結合

一、Django Vue index參數

在使用Django與Vue結合的時候，需要特別關注的是index參數。由於Vue是前端框架，因此我們需要在Django中指定我們要使用哪個index.html頁面。這個可以通過在settings.py文件中進行如下設置：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'libraries':{
                'staticfiles': 'django.templatetags.static',
            },
            'builtins':[
                'django.contrib.staticfiles.templatetags.staticfiles',
            ],
            'string_if_invalid': 'Undefined',
            'debug': True,
            'loaders': [
                ('django.template.loaders.cached.Loader', [
                    'django.template.loaders.filesystem.Loader',
                    'django.template.loaders.app_directories.Loader',
                ]),
            ],
            'context_processors': [
                'django.template.context_processors.request',
            ],
            'OPTIONS': {
                'context_processors': [
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.template.context_processors.media',
                    'django.template.context_processors.csrf',
                    'django.template.context_processors.static',
                    'django.template.context_processors.tz',
                    'django.template.context_processors.i18n',
                ],
                'debug': settings.DEBUG,
                'loaders': [
                    ('django.template.loaders.cached.Loader', [
                        'django.template.loaders.filesystem.Loader',
                        'django.template.loaders.app_directories.Loader',
                    ]),
                ],
            },
        },
    },
]

其中的DIRS參數需要設置為Vue項目打包後的dist文件夾，可以使用os.path.join()函數獲取。具體的代碼如下：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'path/to/dist')
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

二、Django Vue多頁面

如果需要使用Vue進行多頁面開發，需要在Django中進行多個路由設置。這可以通過修改url.py文件實現：

urlpatterns = patterns('',
    url(r'^$', views.home_page, name="home"),
    url(r'^about/$', views.about_page, name="about"),
    url(r'^contact/$', views.contact_page, name="contact"),
)

其中的views是Django中的視圖函數。如下所示：

def home_page(request):
    return render(request, 'home.html', context={})

def about_page(request):
    return render(request, 'about.html', context={})

def contact_page(request):
    return render(request, 'contact.html', context={})

而對應的Vue頁面則可以放在dist文件夾下的相應位置。

三、Django Vue教程

如果要學習Django和Vue的使用，推薦參考以下教程：

官方文檔：https://docs.djangoproject.com/en/3.2/

Vue.js教程：https://cn.vuejs.org/v2/guide/

這兩份教程可以講解Django和Vue的使用方法，建議您一邊學習一邊進行實踐。

四、Django Vue獲取前端屬性

獲取前端屬性可以在Vue的methods中進行定義，同時需要使用Axios庫和Django的request庫進行交互。具體代碼如下：

// 前端Vue代碼
import axios from 'axios';

export default {
  name: 'test',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    submitMessage () {
      var self = this;
      axios.post('/api/submit-message', {
        message: self.message
      }).then(function (response) {
        self.$emit('update');
      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}

# 後台Django代碼
from django.views import View
from django.http import JsonResponse

class SubmitMessageView(View):

    def post(self, request):
        message = request.POST.get('message')
        # do something with the message
        return JsonResponse({'status': 'success'})

這樣前端就可以通過submitMessage()方法把message數據傳送給後台，並進行修改操作。

五、Django Vue前後端分離

前後端分離可以使用Django Rest Framework和Vue-Axios進行實現。具體代碼如下：

# 後端Django代碼
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import authentication, permissions

class TestApi(APIView):
    permission_classes = [permissions.IsAuthenticated]

    def get(self, request, format=None):
        content = {
            'status': 'success',
            'data': ['hello', 'world']
        }
        return Response(content)

# 前台Vue代碼
import axios from 'axios';

export default {
    name: 'test',
    data () {
        return {
            messages: []
        }
    },
    created () {
        var self = this;
        axios.get('/api/test').then(function (response) {
            self.messages = response.data['data'];
        }).catch(function (error) {
            console.log(error);
        });
    }
}

這樣前台就能夠通過axios獲取後台的數據，並進行展示。

六、Django Vue項目

要使用Django和Vue進行項目開發，可以參考以下步驟：

第一步：創建Django項目

$ django-admin.py startproject myproject

第二步：創建Vue項目

$ vue init webpack myproject-web
$ cd myproject-web
$ npm install axios

第三步：在Vue項目的src目錄中創建一個新的main.js文件，用於啟動Vue

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import Axios from 'axios'

Vue.config.productionTip = false

Axios.defaults.baseURL = `http://localhost:8000/`

Vue.prototype.$http = Axios

new Vue({
  render: h => h(App),
}).$mount('#app')

第四步：設置Django的STATICFILES_DIRS選項，指向Vue項目的dist目錄

# myproject/settings.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "myproject-web/dist")
]

第五步：創建Django的RESTful API

# myproject/views.py

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

@api_view(['GET'])
def example_view(request):
    return Response({'foo': 'bar'})

第六步：讓Django返回Vue的index.html文件

# myproject/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

這樣就能夠完成一個簡單的Django+Vue項目的開發。

七、Django Vue3模板

Django Vue3模板可以直接使用Django Vue官方提供的vue-cli-plugin-django命令行進行創建。具體命令如下：

$ vue create --default myapp
$ cd myapp
$ vue add django

這個過程會提示你設置Django項目的名稱和埠號，完成後就能夠開始開發Django Vue項目了。

八、Django Vue運維

對於Django Vue的運維，主要是需要注意以下幾個方面：

升級Django和Vue版本時需要注意兼容性
對於靜態資源的處理需要特別注意，可以使用CDN進行加速
需要遵守Vue和Django的開發規範，保證代碼可讀可維護
在部署時需要考慮伺服器的配置和環境問題

以上就是Django與Vue的完美結合的介紹，希望能夠對您的Django Vue項目開發有所幫助。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/285017.html