Membina aplikasi tindanan penuh: Vue3+Django4 sarung praktikal

Membina aplikasi tindanan penuh: Kes praktikal Vue3+Django4

Pengenalan:
Dengan pembangunan Internet mudah alih, pembangunan tindanan penuh telah menarik lebih banyak perhatian. Jurutera pembangunan tindanan penuh boleh melengkapkan pembangunan bahagian hadapan dan belakang secara bebas untuk meningkatkan kecekapan pembangunan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue3 dan Django4 terkini untuk membina aplikasi tindanan penuh, dan menyediakan kes praktikal.

1. Pengenalan kepada Rangka Kerja Vue3
Vue3 ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Ia menggunakan gaya API baharu yang dipanggil "API gabungan" untuk menjadikan kod lebih mudah dibaca dan diselenggara. Vue3 juga memperkenalkan beberapa ciri baharu, seperti Teleport, Suspense, Fragment, dsb., menjadikan pengalaman pembangunan lebih kaya.

Sebelum menulis aplikasi Vue3, kami perlu memasang dan mengkonfigurasi persekitaran pembangunan Vue3 terlebih dahulu. Kita boleh menggunakan npm atau yarn untuk memasang Vue3:

$ npm install -g @vue/cli

2. Pengenalan kepada rangka kerja Django
Django ialah rangka kerja pembangunan web Python yang cekap, fleksibel dan selamat Ia menyediakan satu set lengkap proses untuk memproses permintaan web, mengakses pangkalan data, memproses borang , dsb. komponen. Membina aplikasi web yang kompleks adalah mudah dengan Django.

Untuk menggunakan Django4 terkini, kita perlu memasang Python dan Django terlebih dahulu. Kita boleh menggunakan arahan pip untuk memasang Django:

$ pip install Django

3. Bina aplikasi tindanan penuh
Kini, kami bersedia untuk membina aplikasi tindanan penuh. Kami akan menggunakan Vue3 sebagai rangka kerja bahagian hadapan dan Django sebagai rangka kerja bahagian belakang untuk membina aplikasi pengurusan tugasan yang mudah.

1. Buat Projek Django
   Pertama, kita perlu mencipta projek Django. Buka tetingkap baris arahan dan jalankan arahan berikut:

$ django-admin startproject task_manager

Arahan ini akan mencipta projek Django bernama task_manager dalam direktori semasa.

2. Buat Apl Django
   Seterusnya, kita perlu mencipta apl dalam projek Django. Jalankan arahan berikut dalam baris arahan:

$ cd task_manager
$ python manage.py startapp tasks

Perintah ini akan mencipta aplikasi bernama tugas dalam projek Django.

3. Tentukan model pangkalan data
   Dalam projek Django, kita perlu menentukan model pangkalan data untuk menyimpan data tugas. Buka fail tasks/models.py dan tambah kod berikut:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

Ini akan mentakrifkan model bernama Task, yang mengandungi tajuk, penerangan dan masa penciptaan tugasan.

4. Buat Paparan API
   Seterusnya, kita perlu mencipta fungsi paparan untuk mengendalikan permintaan API. Buka fail tasks/views.py dan tambah kod berikut:

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

from .models import Task
from .serializers import TaskSerializer

@api_view(['GET', 'POST'])
def task_list(request):
    if request.method == 'GET':
        tasks = Task.objects.all()
        serializer = TaskSerializer(tasks, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = TaskSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=201)
        return Response(serializer.errors, status=400)

Ini akan mentakrifkan fungsi paparan yang dipanggil task_list untuk mengendalikan permintaan GET dan POST. Permintaan GET mengembalikan senarai semua tugasan, manakala permintaan POST digunakan untuk membuat tugasan baharu.

5. Buat penyeri API
   Dalam projek Django, kita perlu mencipta penyeri untuk mensiri dan menyahsiri data. Penyeri bersiri bertanggungjawab untuk menukar model pangkalan data kepada data dalam format JSON dan menukar data JSON kepada model pangkalan data. Cipta fail bernama serializers.py dalam direktori tasks dan tambahkan kod berikut:

from rest_framework import serializers

from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'created_at']

Ini akan mentakrifkan serializer bernama TaskSerializer untuk mensiri dan menyahsiri model Task.

6. Konfigurasikan penghalaan URL
   Akhir sekali, kita perlu mengkonfigurasi penghalaan URL untuk memetakan paparan API ke URL tertentu. Buka fail task_manager/urls.py dan tambahkan kod berikut:

from django.urls import path

from tasks.views import task_list

urlpatterns = [
    path('api/tasks/', task_list, name='task-list'),
]

Ini akan mengkonfigurasi laluan URL yang dipanggil senarai tugas, yang memetakan fungsi paparan senarai_tugas ke laluan /api/tasks/.

4. Bina aplikasi Vue3
Sekarang kami telah menyelesaikan pembinaan bahagian belakang, kami akan menggunakan Vue3 untuk membina halaman bahagian hadapan.

1. Buat Projek Vue3
   Pertama, kita perlu mencipta projek Vue3. Jalankan arahan berikut dalam baris arahan:

$ vue create task-manager

Perintah ini akan mencipta projek Vue3 bernama task-manager.

2. Pasang modul bergantung
   Selepas mencipta projek, kami perlu memasang beberapa modul bergantung. Jalankan arahan berikut dalam baris arahan:

$ cd task-manager
$ npm install axios

axios ialah klien HTTP yang berkuasa untuk menghantar permintaan tak segerak. Kami akan menggunakan axios untuk berkomunikasi dengan bahagian belakang Django.

3. Menulis komponen Vue
   Kemudian, kita perlu menulis beberapa komponen Vue untuk memaparkan senarai tugas dan mencipta antara muka untuk tugasan baharu. Buka fail TaskList.vue dalam direktori src/components dan tambah kod berikut:

<template>
  <div>
    <h1>Task List</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      const response = await this.$http.get('/api/tasks/')
      this.tasks = response.data
    }
  }
}
</script>

Ini akan mentakrifkan komponen Vue bernama TaskList untuk memaparkan senarai tugas.

Kemudian, cipta fail bernama CreateTask.vue dan tambah kod berikut:

<template>
  <div>
    <h1>Create Task</h1>
    <input type="text" v-model="title" placeholder="Title">
    <input type="text" v-model="description" placeholder="Description">
    <button @click="createTask">Create</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    async createTask() {
      const data = {
        title: this.title,
        description: this.description
      }
      await this.$http.post('/api/tasks/', data)
      this.title = ''
      this.description = ''
      this.$emit('task-created')
    }
  }
}
</script>

Ini akan menentukan komponen Vue yang dipanggil CreateTask untuk mencipta tugasan baharu.

4. Ubah suai komponen Apl
   Akhir sekali, kita perlu mengubah suai komponen App.vue dan menambah komponen TaskList dan CreateTask pada halaman. Buka fail src/App.vue dan ubah suai kod berikut:

<template>
  <div>
    <task-list @task-created="fetchTasks" />
    <create-task @task-created="fetchTasks" />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'
import CreateTask from './components/CreateTask.vue'

export default {
  components: {
    TaskList,
    CreateTask
  },
  methods: {
    fetchTasks() {
      this.$refs.taskList.fetchTasks()
    }
  }
}
</script>

Ini akan menjadikan komponen TaskList dan CreateTask dipaparkan secara normal dalam halaman App, dan kaedah fetchTasks akan dicetuskan apabila tugasan dibuat.

5 Jalankan aplikasi
Kini, kami telah menyelesaikan kerja pembangunan bahagian hadapan dan belakang dan boleh menjalankan aplikasi untuk ujian.

1. 启动Django后端
   在命令行中运行以下命令，启动Django后端服务器：

$ cd task_manager
$ python manage.py runserver

2. 启动Vue3前端
   在一个新的命令行窗口中运行以下命令，启动Vue3前端服务器：

$ cd task-manager
$ npm run serve

3. 测试应用
   现在，打开浏览器，访问http://localhost:8080，就可以看到应用的界面了。在任务列表中，可以看到已经创建的任务，点击“Create Task”按钮，可以创建新的任务。

结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。

Atas ialah kandungan terperinci Membina aplikasi tindanan penuh: Vue3+Django4 sarung praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!