建置全端應用程式：Vue3 Django4專案開發詳解
一、引言
隨著網路的快速發展，全端開發越來越受到重視。全端開發者能夠同時負責前端和後端的開發工作，從而提高開發效率和專案的整體品質。本文將詳細介紹如何建構一個全端應用，並使用Vue3和Django4作為開發框架展開解說。
二、技術概述
在建立全端應用之前，我們需要先了解一些關鍵的技術概念。 Vue3是一種簡單、靈活且高效的JavaScript框架，可以用來建立現代化的Web應用程式。 Django4是一個強大且易於使用的Python Web框架，用於快速開發安全可靠的Web應用程式。
三、建立前端
node -v npm -v
vue create my-vue-app
根據提示選擇一些基本設置，例如專案名稱、專案配置等。
cd my-vue-app npm install vue-router vuex
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg: "Hello, World!"
};
}
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>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;import { createStore } from "vuex";
export default createStore({
state() {
return {
count: 0
};
},
mutations: {
increment(state) {
state.count++;
}
}
});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");四、建置後端
python -V pip -V
django-admin startproject mydjangoapp
cd mydjangoapp ./manage.py startapp myapp
DATABASES = {
"default": {
"ENGINE": "django.db.backends.sqlite3",
"NAME": BASE_DIR / "db.sqlite3",
}
}from django.http import JsonResponse
def hello_world(request):
return JsonResponse({"message": "Hello, World!"})from django.urls import path
from myapp.views import hello_world
urlpatterns = [
path("api/hello", hello_world),
]./manage.py runserver
五、前後端聯調
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:8000",
ws: true,
changeOrigin: true
}
}
}
};<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中文網其他相關文章！
