基礎到實戰：Vue3+Django4全棧開發入門篇-魔扣目錄

基礎到實戰：Vue3+Django4全棧開發入門篇

概述：
全棧開發是指一個開發者可以同時處理前端和后端的工作，這在現代的Web開發中變得越來越重要。本文將介紹如何使用Vue3和Django4進行全棧開發，并提供一些代碼示例來幫助讀者入門。

安裝和配置Vue3
首先，我們需要安裝Vue CLI來創建和管理我們的Vue項目。在命令行中運行以下命令來安裝Vue CLI:

npm install -g @vue/cli

登錄后復制

安裝完成后，使用以下命令創建新的Vue項目:

vue create my-project

登錄后復制

根據提示進行選擇，選擇默認選項即可。

創建Vue組件
在Vue項目中，我們可以使用組件來構建用戶界面。在Vue項目的src目錄中，創建一個名為”components”的文件夾，并在其中創建一個名為”HelloWorld.vue”的文件。在該文件中，我們可以編寫我們的組件代碼，例如:

<template>
  <div>
 <h1>{{ message }}</h1>
 <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
 return {
   message: 'Hello World!'
 }
  },
  methods: {
 changeMessage() {
   this.message = 'New Message!'
 }
  }
}
</script>

登錄后復制

這是一個簡單的組件，包含一個標題和一個按鈕，可以在點擊按鈕時改變標題的內容。

配置Django4
接下來，我們需要安裝Django并創建一個新的Django項目。在命令行中運行以下命令來安裝Django:

pip install django==4.0.0

登錄后復制

安裝完成后，使用以下命令創建新的Django項目:

django-admin startproject myproject

登錄后復制

這將在當前目錄下創建一個名為”myproject”的新Django項目。

創建Django視圖和URL
在Django項目的根目錄下，打開settings.py文件，并將以下內容添加到INSTALLED_APPS設置中:

INSTALLED_APPS = [
 ...
 'rest_framework',
 'myapp',  // myapp是我們將要創建的應用的名稱，根據需要修改
 ...
]

登錄后復制

然后，在settings.py文件的最后添加以下內容:

REST_FRAMEWORK = {
 'DEFAULT_PERMISSION_CLASSES': [
     'rest_framework.permissions.AllowAny',
 ]
}

登錄后復制

這將配置Django使用REST框架來創建API。

接下來，在Django項目的根目錄下創建一個名為”myapp”的應用:

python manage.py startapp myapp

登錄后復制

在myapp目錄下，打開views.py文件，并添加以下內容:

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時，將返回一個包含”Hello World!”的JSON響應。

接下來，在myproject目錄下，打開urls.py文件，并添加以下內容:

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world),
]

登錄后復制

這將將我們的視圖函數與URL路徑’/api/hello/’進行關聯。

在Vue項目的根目錄下，打開”main.js”文件，并添加以下內容:

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

登錄后復制

這將全局配置Vue應用使用axios作為HTTP客戶端。

在Vue項目的根目錄下，打開”App.vue”文件，并添加以下內容:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

登錄后復制

這將在點擊按鈕時向Django的視圖發送請求，并將返回的消息顯示在頁面上。

現在，我們已經完成了所有配置。在Vue項目的根目錄下，運行以下命令來啟動Vue開發服務器: