搭建全栈应用：Vue3+Django4项目开发详解
一、引言
随着互联网的快速发展，全栈开发越来越受到重视。全栈开发者能够同时负责前端和后端的开发工作，从而提高开发效率和项目的整体质量。本文将详细介绍如何搭建一个全栈应用，并使用Vue3和Django4作为开发框架展开讲解。
二、技术概述
在搭建全栈应用之前，我们需要先了解一些关键的技术概念。Vue3是一种简单、灵活且高效的JavaScript框架，可以用来构建现代化的Web应用程序。Django4是一个强大且易于使用的Python Web框架，用于快速开发安全可靠的Web应用程序。
三、搭建前端
立即学习“前端免费学习笔记（深入）”；
- 环境准备
首先，需要安装Node.js和npm包管理器。在安装完成后，使用以下命令来检查版本：
node -v npm -v
- 创建Vue项目
在命令行中输入以下指令创建一个新的Vue项目：
vue create my-vue-app
根据提示选择一些基本设置，比如项目名称、项目配置等。
既有较为详细的PHP与MySQL基础知识介绍，也有大量针对不同应用的技术说明，并伴随了大量小而精的示例来加深读者的理解，便于通过实验来掌握知识并学会应用。令书以PHP开发者为核心，从环境搭建到系统开发，从局部技术点到项目全程把握，立体式介绍了PHP5+MySQL的技术要点以及丰富的延伸知识，可以让读者享受到提升开发能力的极速体验。
- 安装Vue Router和Vuex
在Vue项目中使用以下命令安装Vue Router和Vuex：
cd my-vue-app npm install vue-router vuex
- 创建组件
在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>- 配置路由
在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;- 配置状态管理
在src文件夹下创建一个名为store的文件夹，然后在其中创建一个名为index.js的文件，并添加以下代码：
import { createStore } from "vuex";
export default createStore({
state() {
return {
count: 0
};
},
mutations: {
increment(state) {
state.count++;
}
}
});- 在主应用中引入组件、路由和状态管理
在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");四、搭建后端
- 环境准备
首先，需要安装Python和pip包管理器。在安装完成后，使用以下命令来检查版本：
python -V pip -V
- 创建Django项目
在命令行中输入以下指令创建一个新的Django项目：
django-admin startproject mydjangoapp
- 创建Django应用
在项目根目录下进入命令行，输入以下指令创建一个名为mydjangoapp的应用：
cd mydjangoapp ./manage.py startapp myapp
- 配置数据库
在settings.py文件中配置数据库连接参数：
DATABASES = {
"default": {
"ENGINE": "django.db.backends.sqlite3",
"NAME": BASE_DIR / "db.sqlite3",
}
}- 编写API视图
在myapp文件夹下的views.py文件中添加以下代码：
from django.http import JsonResponse
def hello_world(request):
return JsonResponse({"message": "Hello, World!"})- 配置路由
在mydjangoapp文件夹下的urls.py文件中添加以下代码：
from django.urls import path
from myapp.views import hello_world
urlpatterns = [
path("api/hello", hello_world),
]- 启动Django开发服务器
在项目根目录下运行以下命令，启动Django开发服务器：
./manage.py runserver
五、前后端联调
- 创建代理配置
在Vue项目的根目录下创建一个名为vue.config.js的文件，并添加以下代码：
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:8000",
ws: true,
changeOrigin: true
}
}
}
};- 调用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作为后端框架，并通过代码示例展示了前后端的联调过程。全栈开发对于提高开发效率和项目质量具有重要意义，希望本文对你有所帮助。祝你在全栈开发的道路上取得更大的成功！
