上原亚衣在线视频,麻豆久久一区二区三密桃,61无码在线观看

實踐經驗分享：Vue3+Django4全棧項目開發指南

引言：
在當今互聯網高度發達的時代，全棧開發已成為越來越多開發者關注和學習的方向。Vue框架作為目前最流行的前端框架之一，而Django作為強大的Python后端框架，它們的結合可以為我們提供一種全面的全棧開發體驗。本文將介紹如何使用Vue3和Django4搭建一個完整的全棧項目，并分享一些開發經驗和代碼示例。

一、環境準備
在開始項目之前，需要做好環境準備工作。確保你已經安裝了以下軟件：

Node.js和npm：用于安裝和管理前端依賴。Python和pip：用于安裝和管理后端依賴。Vue CLI：用于創建Vue項目的命令行工具。Django：用于創建和管理后端項目。

二、創建Vue3項目
首先，我們使用Vue CLI創建一個Vue3項目。打開命令行界面，執行以下命令：

$ vue create vue_project

登錄后復制

按照命令行提示，選擇自己需要的配置，等待項目創建完成。

三、創建Django項目
接下來，我們使用Django創建后端項目。在命令行界面執行以下命令：

$ django-admin startproject django_project

登錄后復制

這將在當前目錄下創建一個名為django_project的文件夾，并生成一個項目的骨架。

四、配置前后端連接
在這一步，我們需要配置前后端連接，以使得前后端可以相互通信。首先，在vue_project/src目錄下創建一個文件.env.development，并添加以下內容：

VUE_APP_BACKEND_URL=http://localhost:8000

登錄后復制

這里的http://localhost:8000是Django后端運行的地址。

接下來，打開vue_project/src/main.js文件，添加以下代碼到createApp之前：

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

登錄后復制

這個代碼段設置了axios的默認基礎URL為我們剛才配置的后端地址。

五、開發前端頁面
現在，我們可以開始開發前端頁面了。Vue3的語法與Vue2略有不同，但大體上相似。Vue3提供了更加強大的組合式API，可以更好地管理代碼邏輯。下面是一個簡單的例子。

首先，在vue_project/src/components目錄下創建一個名為HelloWorld.vue的組件文件，并添加以下內容：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    return {
      message
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

登錄后復制

這個組件顯示了一個紅色的標題，標題內容通過ref定義的響應式變量設置。

為了在頁面中使用這個組件，我們需要在vue_project/src/App.vue中引入它。首先，刪除原有的內容，然后添加以下代碼：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
}
</style>

登錄后復制

這里我們導入了剛才創建的HelloWorld.vue組件，并在頁面中引用它。

六、開發后端API
在Django項目中，我們需要創建API來提供后端服務。以創建一個簡單的用戶API為例。

首先，在django_project目錄下執行以下命令，創建一個名為users的應用：

$ python manage.py startapp users

登錄后復制

在users目錄下創建一個名為views.py的文件，并添加以下代碼：

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

登錄后復制

這個簡單的視圖函數返回一個帶有用戶信息的JSON響應。

接下來，打開django_project/django_project/urls.py文件，并添加以下代碼：

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

登錄后復制

這個代碼段將get_users視圖函數映射到路徑/api/users上。

七、前后端通信
為了讓前端可以訪問后端API，我們需要使用axios發送HTTP請求。回到vue_project/src/components/HelloWorld.vue文件，在setup函數中添加以下代碼：

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

登錄后復制

這個代碼段使用axios發送一個GET請求到/api/users，并打印返回的數據。

八、運行項目
最后，我們只需要將前后端項目分別運行起來就可以了。

在vue_project目錄下執行以下命令：