当前位置：首页 > 文章列表 > 文章 > 前端 > 深入学习：Vue3+Django4全栈开发实例

深入学习：Vue3+Django4全栈开发实例

2023-10-04 13:35:38 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

大家好，今天本人给大家带来文章《深入学习：Vue3+Django4全栈开发实例》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

概述：
随着Web应用程序的快速发展，全栈开发成为了一个热门话题。Vue和Django作为广受欢迎的前端和后端框架，被广泛应用于全栈开发中。本文将介绍如何使用最新版本的Vue3和Django4进行全栈开发，并通过一个实际示例来展示其强大的功能和灵活的扩展性。

环境搭建：
首先，我们需要确保已经正确安装了Python、Node.js和Vue CLI。可以使用以下命令进行安装：
Python安装：https://www.python.org/downloads/
Node.js安装：https://nodejs.org/
Vue CLI安装：npm install -g @vue/cli
创建Django项目：
首先，我们需要创建一个新的Django项目。打开命令行，并使用以下命令创建项目：
```
django-admin startproject myproject
```
创建Django应用程序：
接下来，我们需要创建一个Django应用程序。进入项目目录，并使用以下命令创建应用程序：
```
cd myproject
python manage.py startapp myapp
```
配置Django路由：
在myproject/myproject/urls.py文件中，配置Django的根路由和myapp的子路由：
```
from django.urls import path, include

urlpatterns = [
 path('api/', include('myapp.urls')),
]
```

创建Django视图：
在myapp/views.py文件中，创建Django的视图函数：

from django.shortcuts import render
from django.http import JsonResponse

def hello(request):
 return JsonResponse({'message': 'Hello, World!'})

配置Django路由：
在myapp/urls.py文件中，配置myapp的路由：

from django.urls import path

from . import views

urlpatterns = [
 path('hello/', views.hello),
]

启动Django服务器：
使用以下命令启动Django开发服务器：
```
python manage.py runserver
```
访问http://localhost:8000/api/hello/，应该可以看到返回的JSON数据。
创建Vue项目：
现在，我们需要创建一个新的Vue项目。打开命令行，并使用以下命令创建项目：
```
vue create myvueapp
```
注意：在创建项目时，选择默认的预设配置，或根据自己的需求进行配置。

配置Vue开发服务器代理：
在Vue项目的根目录中，找到vue.config.js文件（如果没有，请新建一个），并添加以下配置：

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

创建Vue组件：
在Vue项目的src目录中，找到App.vue文件，并替换其内容为以下代码：

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

<script>
export default {
  data() {
 return {
   message: ""
 };
  },
  mounted() {
 this.fetchData();
  },
  methods: {
 fetchData() {
   fetch("/api/hello/")
     .then(response => response.json())
     .then(data => {
       this.message = data.message;
     })
     .catch(err => {
       console.log(err);
     });
 }
  }
};
</script>