深入學習：Vue3+Django4全端開發實例-Vue.js-PHP中文網

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

WBOY

發布： 2023-09-09 19:13:41

原創

1404 人瀏覽過

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

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

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

環境搭建：
首先，我們需要確保已經正確安裝了Python、Node.js和Vue CLI。可以使用以下指令進行安裝：
Python安裝：https://www.python.org/downloads/
Node.js安裝：https://nodejs.org/
Vue CLI安裝：npm install -g @vue/cli
建立Django專案：
首先，我們需要建立一個新的Django專案。打開命令列，並使用以下命令建立專案：
```
django-admin startproject myproject
```
登入後複製
建立Django應用程式：
接下來，我們需要建立一個Django應用程式。進入專案目錄，並使用下列指令建立應用程式：
```
cd myproject
python manage.py startapp myapp
```
登入後複製
設定Django路由：
在myproject/myproject/urls.py檔案中，設定Django的根路由和myapp的子路由：
```
from django.urls import path, include

urlpatterns = [
 path('api/', include('myapp.urls')),
]
```
登入後複製

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

from django.shortcuts import render
from django.http import JsonResponse

def hello(request):
 return JsonResponse({'message': 'Hello, World!'})

登入後複製

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

from django.urls import path

from . import views

urlpatterns = [
 path('hello/', views.hello),
]

登入後複製

啟動Django伺服器：
使用下列指令啟動Django開發伺服器：
```
python manage.py runserver
```
登入後複製
訪問http://localhost:8000/api/hello/，應該可以看到回傳的JSON資料。
建立Vue專案：
現在，我們需要建立一個新的Vue專案。開啟命令列，並使用以下命令建立專案：
```
vue create myvueapp
```
登入後複製
注意：在建立專案時，選擇預設的預設配置，或根據自己的需求進行配置。

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

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

登入後複製

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

<template>
  <div>
 <h1>{{ 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>

登入後複製