首頁 >web前端 >Vue.js >深入學習：Vue3+Django4全端開發實例

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

WBOY原創: 2023-09-09 19:13:411430瀏覽

深入學習：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>

#啟動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中文網其他相關文章！

Python django node.js json ajax npm 栈 JS http https

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：學習Vue 3中的虛擬列表技術，優化大數據量的渲染效率下一篇：學習Vue 3中的虛擬列表技術，優化大數據量的渲染效率

看更多