建置全端應用：Vue3+Django4專案開發詳解

建置全端應用程式：Vue3 Django4專案開發詳解

一、引言
隨著網路的快速發展，全端開發越來越受到重視。全端開發者能夠同時負責前端和後端的開發工作，從而提高開發效率和專案的整體品質。本文將詳細介紹如何建構一個全端應用，並使用Vue3和Django4作為開發框架展開解說。

二、技術概述
在建立全端應用之前，我們需要先了解一些關鍵的技術概念。 Vue3是一種簡單、靈活且高效的JavaScript框架，可以用來建立現代化的Web應用程式。 Django4是一個強大且易於使用的Python Web框架，用於快速開發安全可靠的Web應用程式。

三、建立前端

1. 環境準備
   首先，需要安裝Node.js和npm套件管理器。安裝完成後，使用下列指令檢查版本：

node -v
npm -v

2. 建立Vue專案
   在命令列中輸入下列指令建立新的Vue專案：

vue create my-vue-app

根據提示選擇一些基本設置，例如專案名稱、專案配置等。

3. 安裝Vue Router和Vuex
   在Vue專案中使用下列指令安裝Vue Router和Vuex：

cd my-vue-app
npm install vue-router vuex

4. 建立元件
   在src資料夾下建立一個名為components的資料夾，然後在其中建立一個名為HelloWorld.vue的文件，並新增以下程式碼：

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, World!"
    };
  }
};
</script>

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

5. 設定路由
   在src資料夾下建立一個名為router的資料夾，然後在其中建立一個名為index.js的文件，並新增以下程式碼：

import { createRouter, createWebHistory } from "vue-router";

import HelloWorld from "../components/HelloWorld.vue";

const routes = [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

6. 設定狀態管理
   在src資料夾下建立一個名為store的資料夾，然後在其中建立一個名為index.js的文件，並加入以下程式碼：

import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

7. 在主應用程式中引入元件、路由與狀態管理
   在src資料夾下的main.js檔案中加入以下程式碼：

#

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App)
  .use(router)
  .use(store)
  .mount("#app");

四、建置後端

1. 環境準備
   首先，需要安裝Python和pip套件管理器。安裝完成後，使用以下命令來檢查版本：

python -V
pip -V

2. 建立Django專案
   在命令列中輸入以下指令建立新的Django專案：

django-admin startproject mydjangoapp

3. 建立Django應用程式
   在專案根目錄下進入命令列，輸入下列指令建立一個名為mydjangoapp的應用程式：

cd mydjangoapp
./manage.py startapp myapp

4. 設定資料庫
   在settings.py檔案中設定資料庫連線參數：

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

5. 編寫API檢視
   在myapp資料夾下的views.py檔案中加入以下程式碼：

from django.http import JsonResponse

def hello_world(request):
    return JsonResponse({"message": "Hello, World!"})

6. 設定路由
   在mydjangoapp資料夾下的urls.py檔案中加入以下程式碼：

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path("api/hello", hello_world),
]

7. 啟動Django開發伺服器
   在專案根目錄下執行以下指令，啟動Django開發伺服器：

./manage.py runserver

五、前後端聯調

1. 建立代理程式設定
   在Vue專案的根目錄下建立一個名為vue.config.js的文件，並加入以下程式碼：

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

2. 呼叫API
   在HelloWorld.vue元件中新增以下程式碼：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      count: 0
    };
  },
  created() {
    fetch("/api/hello")
      .then(response => response.json())
      .then(data => {
        this.msg = data.message;
      });
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  },
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

六、執行專案
在命令列中進入Vue專案根目錄，執行下列指令啟動前端開發伺服器：

npm run serve

在另一個命令列視窗中進入Django專案的根目錄，執行以下指令啟動後端開發伺服器：

./manage.py runserver

現在，開啟瀏覽器並造訪http://localhost:8080，你將看到一個含有"Hello, World!"和"Count: 0"的頁面。點擊"Increment"按鈕，"Count"將自動加1。

七、總結
透過本文的詳細介紹，我們學習如何建立全端應用，使用Vue3作為前端框架，Django4作為後端框架，並透過程式碼範例展示了前後端的聯調過程。全端開發對於提高開發效率和專案品質具有重要意義，希望本文對你有所幫助。祝你在全端開發的道路上取得更大的成功！

以上是建置全端應用：Vue3+Django4專案開發詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！