一步一步：Vue3+Django4全端專案實作步驟

一步一步：Vue3 Django4全端專案實現步驟

#隨著Web開發的不斷發展，全端開發逐漸成為了趨勢。 Vue和Django作為前後端開發中最受歡迎的技術堆疊之一，他們的組合也是十分強大的。在本文中，我們將一步一步介紹如何使用Vue3和Django4實作一個全端專案。

1. 準備工作
   首先，我們需要在本地安裝Node.js和Python，以及對應的套件管理器npm和pip。同時，我們也需要一個整合開發環境(IDE)，例如VS Code。

2. 建立Django專案
   開啟終端，進入你希望建立專案的目錄，執行下列指令來建立Django專案：

   django-admin startproject myproject

3. 建立Django應用
   進入專案目錄，執行以下命令來建立一個Django應用程式：

   cd myproject
   python3 manage.py startapp myapp

4. #設定Django資料庫
   開啟settings.py文件，設定資料庫信息，例如使用SQLite：

   DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
   }

5. 建立資料庫模型
   在models.py檔案中定義你的資料庫模型。例如，我們建立一個User模型：

   from django.db import models
   
   class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)

6. 執行資料庫遷移
   執行下列指令來執行資料庫遷移：

   python3 manage.py makemigrations
   python3 manage.py migrate

7. 建立Django視圖
   在views.py檔中寫你的Django視圖函數。例如，我們建立一個取得所有使用者的視圖函數：

   from django.shortcuts import render
   from django.http import JsonResponse
   from .models import User
   
   def get_users(request):
    users = User.objects.all()
    data = [{'name': user.name, 'email': user.email} for user in users]
    return JsonResponse({'users': data})

8. 建立Vue專案
   在終端機中，進入你希望建立Vue專案的目錄，執行下列指令來建立Vue專案：

   vue create myproject

9. 設定Vue代理
   在myproject/vue.config.js檔案中設定Vue的代理，將請求代理到Django後端：

   module.exports = {
     devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
     }
   }

10. 建立Vue元件
    在src/views目錄下建立一個Users.vue元件，用於顯示使用者清單：

    <template>
      <div>
     <ul>
       <li v-for="user in users" :key="user.name">
         {{ user.name }} - {{ user.email }}
       </li>
     </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       users: []
     }
      },
      created() {
     this.getUsers()
      },
      methods: {
     getUsers() {
       axios.get('/api/users')
         .then(response => {
           this.users = response.data.users
         })
     }
      }
    }
    </script>

11. 設定Vue路由
    在src/router/index.js檔案中設定Vue的路由，將Users.vue元件當作一個路由：

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Users from '../views/Users.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
     path: '/',
     name: 'Users',
     component: Users
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

12. 執行專案
    分別在Django和Vue的根目錄下執行以下指令來執行專案：

    python3 manage.py runserver
    npm run serve

現在，你可以在瀏覽器中造訪http://localhost:8080來檢視你的全端專案了。 Users元件將從Django後端取得數據，並顯示在頁面上。

總結：
透過上述的步驟，我們成功地實作了一個使用Vue3和Django4的全端專案。透過將前端和後端的開發整合在一起，我們可以更有效率地開發出功能強大的Web應用程式。希望這篇文章對你有幫助，讓你更熟悉Vue和Django的全端開發流程。

以上是一步一步：Vue3+Django4全端專案實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！