深入學習：Vue3+Django4全端開發實例

深入學習：Vue3 Django4全端開發實例

#概述：
隨著Web應用程式的快速發展，全端開發成為了一個熱門話題。 Vue和Django作為廣受歡迎的前端和後端框架，被廣泛應用於全端開發。本文將介紹如何使用最新版本的Vue3和Django4進行全端開發，並透過一個實際範例來展示其強大的功能和靈活的擴展性。

1. 環境搭建：
   首先，我們需要確保已經正確安裝了Python、Node.js和Vue CLI。可以使用以下指令進行安裝：
2. Python安裝：https://www.python.org/downloads/
3. Node.js安裝：https://nodejs.org/
4. Vue CLI安裝：npm install -g @vue/cli

5. 建立Django專案：
   首先，我們需要建立一個新的Django專案。打開命令列，並使用以下命令建立專案：

   django-admin startproject myproject

6. 建立Django應用程式：
   接下來，我們需要建立一個Django應用程式。進入專案目錄，並使用下列指令建立應用程式：

   cd myproject
   python manage.py startapp myapp

7. 設定Django路由：
   在myproject/myproject/urls.py檔案中，設定Django的根路由和myapp的子路由：

   from django.urls import path, include
   
   urlpatterns = [
    path('api/', include('myapp.urls')),
   ]

8. 建立Django視圖：
   在myapp/views.py檔案中，建立Django的視圖函數：

   from django.shortcuts import render
   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

9. #設定Django路由：
   在myapp/urls.py檔案中，設定myapp的路由：

   from django.urls import path
   
   from . import views
   
   urlpatterns = [
    path('hello/', views.hello),
   ]

10. 啟動Django伺服器：
    使用下列指令啟動Django開發伺服器：

    python manage.py runserver

    訪問http://localhost:8000/api/hello/，應該可以看到回傳的JSON資料。

11. 建立Vue專案：
    現在，我們需要建立一個新的Vue專案。開啟命令列，並使用以下命令建立專案：

    vue create myvueapp

    注意：在建立專案時，選擇預設的預設配置，或根據自己的需求進行配置。

12. 設定Vue開發伺服器代理程式：
    在Vue專案的根目錄中，找到vue.config.js檔案（如果沒有，請新建一個），並新增下列設定：

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

13. 建立Vue元件：
    在Vue專案的src目錄中，找到App.vue文件，並替換其內容為以下程式碼：

    <template>
      <div>
     <h1 id="message">{{ message }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       message: ""
     };
      },
      mounted() {
     this.fetchData();
      },
      methods: {
     fetchData() {
       fetch("/api/hello/")
         .then(response => response.json())
         .then(data => {
           this.message = data.message;
         })
         .catch(err => {
           console.log(err);
         });
     }
      }
    };
    </script>

14. #啟動Vue開發伺服器：
    使用下列指令啟動Vue開發伺服器：

    cd myvueapp
    npm run serve

    造訪http://localhost:8080，應該可以看到從Django API取得的資料。

至此，我們成功完成了Vue3 Django4全端開發實例。透過這個實例，我們學習如何建立開發環境、建立Django專案和Vue項目，以及如何設定路由、建立視圖和元件，並透過AJAX從後端API取得資料。

總結：
透過本文的學習，我們深入了解了Vue3和Django4的全端開發，並實踐了一個實際案例。全端開發為我們提供了更大的靈活性和效率，使我們能夠同時處理前端和後端的需求。希望讀者能夠透過這個實例，對Vue3 Django4全端開發有更深入的理解，並且能夠在實際專案中應用這些知識和技術。

以上是深入學習：Vue3+Django4全端開發實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！