搭建全栈应用：Vue3+Django4项目开发详解

百变鹏仔 3周前 (09-25) #VUE

文章标签详解

一、引言
随着互联网的快速发展，全栈开发越来越受到重视。全栈开发者能够同时负责前端和后端的开发工作，从而提高开发效率和项目的整体质量。本文将详细介绍如何搭建一个全栈应用，并使用Vue3和Django4作为开发框架展开讲解。

二、技术概述
在搭建全栈应用之前，我们需要先了解一些关键的技术概念。Vue3是一种简单、灵活且高效的JavaScript框架，可以用来构建现代化的Web应用程序。Django4是一个强大且易于使用的Python Web框架，用于快速开发安全可靠的Web应用程序。

三、搭建前端

立即学习“前端免费学习笔记（深入）”；

环境准备
首先，需要安装Node.js和npm包管理器。在安装完成后，使用以下命令来检查版本：

node -vnpm -v

创建Vue项目
在命令行中输入以下指令创建一个新的Vue项目：

vue create my-vue-app

根据提示选择一些基本设置，比如项目名称、项目配置等。

安装Vue Router和Vuex
在Vue项目中使用以下命令安装Vue Router和Vuex：

cd my-vue-appnpm 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 -Vpip -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 JsonResponsedef hello_world(request):    return JsonResponse({"message": "Hello, World!"})

配置路由
在mydjangoapp文件夹下的urls.py文件中添加以下代码：

from django.urls import pathfrom myapp.views import hello_worldurlpatterns = [    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作为后端框架，并通过代码示例展示了前后端的联调过程。全栈开发对于提高开发效率和项目质量具有重要意义，希望本文对你有所帮助。祝你在全栈开发的道路上取得更大的成功！

文章推荐

搭建全栈应用：Vue3+Django4项目开发详解

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器