首页  >  文章  >  web前端  >  基础到实战:Vue3+Django4全栈开发入门篇

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

WBOY
WBOY原创
2023-09-08 18:16:411832浏览

基础到实战: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/'进行关联。

  1. 运行项目
    现在,我们已经完成了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应用,并将它们连接在一起。希望这对你的全栈开发之旅有所帮助!

以上是基础到实战:Vue3+Django4全栈开发入门篇的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn