当前位置：首页 > 文章列表 > 文章 > 前端 > 搭建全栈应用：Vue3+Django4项目开发详解

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

2023-10-14 07:56:19 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《搭建全栈应用：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

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

安装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项目根目录，运行以下指令启动前端开发服务器：