Kajian mendalam: teknologi teras pembangunan tindanan penuh Vue3+Django4

Kajian mendalam: Teknologi teras pembangunan tindanan penuh Vue3+Django4

1 Pengenalan
Dalam era Internet hari ini, pembangunan tindanan penuh telah menjadi trend. Vue3 ialah rangka kerja bahagian hadapan, manakala Django4 ialah rangka kerja bahagian belakang Python yang popular. Dengan menggabungkan Vue3 dan Django4, kami boleh mencapai pembangunan tindanan penuh dan membina aplikasi web yang berkuasa. Artikel ini akan menyelidiki teknologi teras Vue3 dan Django4 untuk membantu pembaca lebih memahami penggunaan kedua-dua rangka kerja ini.

2 Pengenalan kepada Vue3
Vue3 ialah rangka kerja JavaScript ringan yang menyediakan cara yang mudah dan fleksibel untuk membina antara muka web. Vue3 mengguna pakai sistem responsif baharu, yang membolehkan perubahan data disegerakkan secara automatik ke antara muka, meningkatkan kecekapan pembangunan. Pada masa yang sama, Vue3 turut memperkenalkan beberapa ciri baharu, seperti API Komposisi dan Teleport, menjadikan organisasi kod dan pengoptimuman prestasi lebih mudah.

3 Pengenalan kepada Django4
Django4 ialah rangka kerja hujung belakang Python yang menyediakan cara yang cekap untuk membina aplikasi web. Django4 adalah berdasarkan corak seni bina MVC (Model-View-Controller) dan membahagikan aplikasi kepada tiga lapisan: paparan, model dan pengawal, menjadikan kod lebih boleh diselenggara dan boleh digunakan semula. Pada masa yang sama, Django4 juga menyediakan beberapa fungsi yang mudah, seperti menjana bahagian belakang Admin secara automatik, ORM (Pemetaan Perhubungan Objek) dan pengesahan borang.

4. Penggunaan gabungan Vue3 dan Django4
Dalam pembangunan tindanan penuh, cara yang paling biasa ialah menggunakan Vue3 untuk pembangunan bahagian hadapan dan Django4 untuk pembangunan bahagian belakang. Di bawah, kami akan memperkenalkan cara menggunakan Vue3 dan Django4 bersama-sama melalui contoh mudah.

1. Pembangunan bahagian hadapan (Vue3)
   Pertama, kita perlu mencipta projek Vue3. Menggunakan alat baris arahan, jalankan arahan berikut dalam direktori yang ditentukan untuk mencipta projek Vue3 baharu:

   vue create myproject

Seterusnya, kita boleh memasuki direktori projek dan memulakan pelayan pembangunan:

cd myproject
npm run serve

Dalam Vue3, kita boleh menggunakan komponen untuk Membina halaman kami. Berikut ialah kod sampel komponen mudah untuk memaparkan teks Hello World:

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

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

<style scoped>
h1 {
    color: red;
}
</style>

2. Pembangunan bahagian belakang (Django4)
   Dalam pembangunan bahagian belakang, kita perlu memasang persekitaran pembangunan Django4 terlebih dahulu. Gunakan arahan berikut untuk memasang Django4:

   pip install django

Kemudian, kita boleh menggunakan arahan berikut untuk mencipta projek Django4 baharu:

django-admin startproject myproject

Seterusnya, kita boleh masuk ke direktori projek dan mulakan pelayan pembangunan:

cd myproject
python manage.py runserver

Dalam Django4, Kami boleh mentakrifkan model untuk menerangkan struktur data kami. Berikut ialah kod contoh model mudah yang digunakan untuk mewakili pengguna (Pengguna):

from django.db import models

class User(models.Model):
    name = models.CharField(max_length=50)
    email = models.EmailField(max_length=254)

3. Interaksi hadapan dan belakang
   Dalam penggunaan gabungan Vue3 dan Django4, interaksi antara bahagian hadapan dan belakang adalah sangat penting. Di bahagian hadapan (Vue3), kita boleh menggunakan perpustakaan rangkaian seperti Axios untuk menghantar permintaan HTTP untuk berinteraksi dengan bahagian belakang (Django4). Berikut ialah contoh kod mudah untuk mendapatkan data senarai pengguna dari bahagian belakang dan memaparkannya pada halaman hujung hadapan:

   <template>
     <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
    data() {
        return {
            users: []
        }
    },
    mounted() {
        this.fetchUsers();
    },
    methods: {
        fetchUsers() {
            axios.get('/api/users')
                .then(response => {
                    this.users = response.data;
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
   }
   </script>

Di bahagian belakang (Django4), kami boleh mentakrifkan paparan API untuk mengendalikan permintaan yang dihantar oleh bahagian hadapan, dan Kembalikan data yang sepadan. Berikut ialah contoh kod mudah untuk mengembalikan data senarai pengguna ke bahagian hadapan:

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

def user_list(request):
    users = User.objects.all()
    data = [{'id': user.id, 'name': user.name} for user in users]
    return JsonResponse(data, safe=False)

5. Ringkasan
Dengan mengkaji secara mendalam teknologi teras Vue3 dan Django4, kita boleh menggunakannya bersama-sama untuk mencapai pembangunan tindanan penuh. Di bahagian hadapan (Vue3), kita boleh menggunakan komponen untuk membina halaman dan berinteraksi dengan data bahagian belakang melalui perpustakaan rangkaian seperti Axios. Dalam bahagian belakang (Django4), kita boleh mentakrifkan model untuk menerangkan struktur data dan mengendalikan permintaan yang dihantar oleh bahagian hadapan melalui paparan API. Dengan mempelajari dan menggunakan teknologi teras Vue3 dan Django4, kami boleh membina aplikasi web yang berkuasa dan berprestasi tinggi. Saya berharap pembaca berjaya dalam perjalanan mereka ke pembangunan timbunan penuh!

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