2023基础到实战：Vue3+Django4全栈开发入门篇

基础到实战：Vue3+Django4全栈开发入门篇

概述：
全栈开发是指一个开发者可以同时处理前端和后端的工作，这在现代的Web开发中变得越来越重要。本文将介绍如何使用Vue3和Django4进行全栈开发，并提供一些代码示例来帮助读者入门。

1. 安装和配置Vue3
   首先，我们需要安装Vue CLI来创建和管理我们的Vue项目。在命令行中运行以下命令来安装Vue CLI:

   npm install -g @vue/cli

   安装完成后，使用以下命令创建新的Vue项目:

   vue create my-project

   根据提示进行选择，选择默认选项即可。

2. 创建Vue组件
   在Vue项目中，我们可以使用组件来构建用户界面。在Vue项目的src目录中，创建一个名为"components"的文件夹，并在其中创建一个名为"HelloWorld.vue"的文件。在该文件中，我们可以编写我们的组件代码，例如:

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      message: 'Hello World!'
    }
     },
     methods: {
    changeMessage() {
      this.message = 'New Message!'
    }
     }
   }
   </script>

   这是一个简单的组件，包含一个标题和一个按钮，可以在点击按钮时改变标题的内容。

3. 配置Django4
   接下来，我们需要安装Django并创建一个新的Django项目。在命令行中运行以下命令来安装Django:

   pip install django==4.0.0

   安装完成后，使用以下命令创建新的Django项目:

   django-admin startproject myproject

   这将在当前目录下创建一个名为"myproject"的新Django项目。

4. 创建Django视图和URL
   在Django项目的根目录下，打开settings.py文件，并将以下内容添加到INSTALLED_APPS设置中:

   INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',  // myapp是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   然后，在settings.py文件的最后添加以下内容:

   REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
   }

   这将配置Django使用REST框架来创建API。

接下来，在Django项目的根目录下创建一个名为"myapp"的应用:

python manage.py startapp myapp

在myapp目录下，打开views.py文件，并添加以下内容:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello World!'})

这是一个简单的视图函数，当我们访问该URL时，将返回一个包含"Hello World!"的JSON响应。

接下来，在myproject目录下，打开urls.py文件，并添加以下内容:

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world),
]

这将将我们的视图函数与URL路径'/api/hello/'进行关联。

5. 运行项目
   现在，我们已经完成了Vue和Django的基本配置。接下来我们需要将Vue应用和Django项目连接起来。

在Vue项目的根目录下，打开"main.js"文件，并添加以下内容:

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

这将全局配置Vue应用使用axios作为HTTP客户端。

在Vue项目的根目录下，打开"App.vue"文件，并添加以下内容:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

这将在点击按钮时向Django的视图发送请求，并将返回的消息显示在页面上。

现在，我们已经完成了所有配置。在Vue项目的根目录下，运行以下命令来启动Vue开发服务器:

npm run serve

在Django项目的根目录下，运行以下命令来启动Django开发服务器:

python manage.py runserver

现在，在浏览器中访问"http://localhost:8080"，你将看到一个包含"Hello World!"按钮的页面。当你点击按钮时，页面将显示"Hello World!"。

这就是用Vue3和Django4进行全栈开发的入门指南。通过这篇文章中的示例代码，你可以学习如何搭建一个基本的Vue和Django应用，并将它们连接在一起。希望这对你的全栈开发之旅有所帮助！