Teknologi teras induk: pembangunan tindanan penuh Vue3+Django4

Menguasai teknologi teras: Pembangunan tindanan penuh Vue3+Django4

Dalam pembangunan perisian moden, pembangunan tindanan penuh semakin menarik perhatian. Jurutera pembangunan tindanan penuh boleh mengendalikan tugas seperti pembangunan bahagian hadapan dan belakang, serta operasi pangkalan data secara serentak. Dalam artikel ini, kami akan meneroka cara menggunakan Vue3 dan Django4, dua rangka kerja pembangunan popular, untuk pembangunan tindanan penuh dan menyediakan beberapa contoh kod.

1. Kata Pengantar

Vue3 ialah versi Vue.js terbaharu, yang menyediakan pembangun dengan prestasi dan kebolehselenggaraan yang lebih baik. Django4 ialah rangka kerja belakang yang popular dalam bahasa Python, yang menyediakan operasi pangkalan data yang berkuasa dan fungsi pembangunan web. Dengan menggabungkan Vue3 dan Django4, kami boleh melaksanakan aplikasi tindanan penuh yang cekap, fleksibel dan berskala.

2. Pembangunan bahagian hadapan: Vue3

Pertama, kita perlu menyediakan projek Vue3. Cipta projek Vue3 baharu menggunakan arahan berikut:

vue create vue3-django4-full-stack

Seterusnya, kita boleh mencipta komponen Vue dan memulakan pembangunan bahagian hadapan. Dalam Vue3, cara komponen ditulis telah berubah sedikit. Berikut ialah contoh mudah:

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  }
}
</script>

Dalam contoh ini, kami mentakrifkan komponen Vue dan menggunakan pilihan data untuk mentakrifkan pembolehubah mesej. Kemudian, rujuk pembolehubah ini dalam templat untuk memaparkan mesej. data选项来定义一个message变量。然后，在模板中引用这个变量来展示一条消息。

3. 后端开发：Django4

现在，我们需要设置一个Django4的项目。使用以下命令创建一个新的Django4项目：

django-admin startproject django4_full_stack

然后，我们需要创建一个Django应用程序并开始后端开发。使用以下命令创建一个新的Django应用程序：

cd django4_full_stack
python manage.py startapp backend

接下来，在backend目录下创建一个views.py文件，并添加以下代码示例：

from django.http import JsonResponse

def hello_vue(request):
    message = "Hello, Django4!"
    return JsonResponse({'message': message})

在这个示例中，我们定义了一个处理API请求的视图函数hello_vue，它返回一个包含一条消息的JSON响应。

4. 前后端交互：API调用

现在，我们需要在前端组件中调用后端的API。在Vue3中，我们可以使用axios库来发送HTTP请求。在Vue组件中，我们可以使用以下代码来调用后端API：

import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('http://localhost:8000/api/hello_vue')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

在这个示例中，我们使用axios.get方法发送一个GET请求到http://localhost:8000/api/hello_vue地址，并在成功响应时将返回的消息赋值给message变量。

5. 启动应用程序

现在，我们已经完成了前端和后端的开发，并且在前后端之间建立了一个简单的API交互。接下来，我们需要启动前端和后端的开发服务器。在一个终端窗口中，使用以下命令运行Vue3开发服务器：

cd vue3-django4-full-stack
npm run serve

在另一个终端窗口中，使用以下命令运行Django4开发服务器：

cd django4_full_stack
python manage.py runserver

现在，我们可以在浏览器中访问http://localhost:8080

Pembangunan belakang: Django4

Kini, kita perlu menyediakan projek Django4. Cipta projek Django4 baharu menggunakan arahan berikut:

rrreee🎜 Kemudian, kita perlu mencipta aplikasi Django dan memulakan pembangunan bahagian belakang. Cipta aplikasi Django baharu menggunakan arahan berikut: 🎜rrreee🎜Seterusnya, buat fail views.py di bawah direktori backend dan tambah contoh kod berikut: 🎜rrreee 🎜In contoh ini, kami mentakrifkan fungsi paparan hello_vue yang mengendalikan permintaan API dan mengembalikan respons JSON yang mengandungi mesej. 🎜
🎜Interaksi belakang: Panggilan API🎜🎜🎜Kini, kita perlu memanggil API bahagian belakang dalam komponen bahagian hadapan. Dalam Vue3, kami boleh menggunakan pustaka axios untuk menghantar permintaan HTTP. Dalam komponen Vue, kami boleh menggunakan kod berikut untuk memanggil API bahagian belakang: 🎜rrreee🎜 Dalam contoh ini, kami menggunakan kaedah axios.get untuk menghantar permintaan GET ke http:/ /localhost :8000/api/hello_vue alamat, dan tetapkan mesej yang dikembalikan kepada pembolehubah mesej apabila membalas dengan jayanya. 🎜
🎜Mulakan aplikasi🎜🎜🎜Kini, kami telah menyelesaikan pembangunan bahagian hadapan dan bahagian belakang, dan mewujudkan interaksi API mudah antara bahagian hadapan dan bahagian belakang. Seterusnya, kita perlu memulakan pelayan pembangunan bahagian hadapan dan belakang. Dalam satu tetingkap terminal, jalankan pelayan pembangunan Vue3 dengan arahan berikut: 🎜rrreee🎜 Dalam tetingkap terminal lain, jalankan pelayan pembangunan Django4 dengan arahan berikut: 🎜rrreee🎜 Kini kita boleh mengakses http:// dalam penyemak imbas /localhost:8080 dan lihat mesej yang dipaparkan dalam komponen bahagian hadapan. 🎜🎜Ringkasan🎜🎜Artikel ini memperkenalkan cara menggunakan Vue3 dan Django4 untuk pembangunan tindanan penuh dan menyediakan beberapa contoh kod. Dengan mempelajari Vue3 dan Django4, dua rangka kerja pembangunan yang popular, kami boleh membina aplikasi tindanan penuh yang cekap, fleksibel dan berskala. Saya harap artikel ini dapat membantu anda menguasai kedua-dua teknologi utama ini dan memainkan peranan dalam pembangunan timbunan penuh. 🎜

Atas ialah kandungan terperinci Teknologi teras induk: pembangunan tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!