Asas untuk berlatih: Bermula dengan pembangunan tindanan penuh Vue3+Django4

Asas untuk diamalkan: Bermula dengan pembangunan tindanan penuh Vue3+Django4

Tinjauan:
Rujukan penuh untuk tindanan pembangun Keupayaan untuk mengendalikan kedua-dua kerja bahagian hadapan dan bahagian belakang secara serentak menjadi semakin penting dalam pembangunan web moden. Artikel ini akan memperkenalkan cara menggunakan Vue3 dan Django4 untuk pembangunan tindanan penuh, dan menyediakan beberapa contoh kod untuk membantu pembaca bermula.

1. Memasang dan Mengkonfigurasi Vue3
   Pertama, kami perlu memasang Vue CLI untuk mencipta dan mengurus projek Vue kami. Jalankan arahan berikut dalam baris arahan untuk memasang Vue CLI:

   npm install -g @vue/cli

   Selepas pemasangan selesai, gunakan arahan berikut untuk mencipta projek Vue baharu:

   vue create my-project

   Buat pilihan mengikut gesaan dan pilih pilihan lalai.

2. Mencipta komponen Vue
   Dalam projek Vue, kami boleh menggunakan komponen untuk membina antara muka pengguna. Dalam direktori src projek Vue, cipta folder bernama "komponen" dan fail bernama "HelloWorld.vue" di dalamnya. Dalam fail ini, kita boleh menulis kod komponen kita, contohnya:

   <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>

   Ini adalah komponen mudah yang mengandungi tajuk dan butang yang mengubah kandungan tajuk apabila butang diklik.

3. Mengkonfigurasi Django4
   Seterusnya, kita perlu memasang Django dan mencipta projek Django baharu. Jalankan arahan berikut dalam baris arahan untuk memasang Django:

   pip install django==4.0.0

   Setelah pemasangan selesai, gunakan arahan berikut untuk mencipta projek Django baharu:

   django-admin startproject myproject

   Ini akan mencipta projek Django baharu dalam direktori semasa Projek Django baharu bernama "myproject".

4. Buat pandangan dan URL Django
   Dalam direktori akar projek Django anda, buka fail settings.py dan tambahkan yang berikut pada tetapan INSTALLED_APPS:# 🎜🎜#

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

   Kemudian, tambah kandungan berikut pada penghujung fail settings.py:

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

   Ini akan mengkonfigurasi Django untuk menggunakan rangka kerja REST untuk mencipta API.

Seterusnya, buat aplikasi bernama "myapp" dalam direktori akar projek Django:

python manage.py startapp myapp

Dalam direktori myapp, Buka views.py dan tambahkan kandungan berikut:

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!'})

Ini ialah fungsi paparan mudah yang akan mengembalikan respons JSON yang mengandungi "Hello World!"

Seterusnya, dalam direktori myproject, buka fail urls.py dan tambah kandungan berikut:

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

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

Ini akan menyambungkan fungsi paparan kami dengan laluan URL '/api/ hello/' untuk bergaul.

Run Project
5. Kini, kami telah melengkapkan konfigurasi asas Vue dan Django. Seterusnya kita perlu menyambungkan aplikasi Vue dan projek Django.
   

Dalam direktori akar projek Vue, buka fail "main.js" dan tambah kandungan berikut:

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')

Ini akan mengkonfigurasi Vue secara global aplikasi untuk menggunakan axios sebagai klien HTTP.

Dalam direktori akar projek Vue, buka fail "App.vue" dan tambah kandungan berikut:

<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>

Ini akan menghantar permintaan ke paparan Django apabila butang diklik , dan paparkan mesej yang dikembalikan pada halaman.

Kini, kami telah menyelesaikan semua konfigurasi. Dalam direktori akar projek Vue, jalankan arahan berikut untuk memulakan pelayan pembangunan Vue:

npm run serve

Dalam direktori akar projek Django, jalankan arahan berikut untuk memulakan pelayan pembangunan Django: # 🎜🎜#

python manage.py runserver

#🎜 🎜#Sekarang, lawati "http://localhost:8080" dalam penyemak imbas anda, anda akan melihat halaman yang mengandungi butang "Hello World!" Apabila anda mengklik butang, halaman akan memaparkan "Hello World!".

Ini ialah panduan pengenalan kepada pembangunan tindanan penuh dengan Vue3 dan Django4. Dengan kod sampel dalam artikel ini, anda boleh belajar cara membina aplikasi Vue dan Django asas dan menyambungkannya bersama-sama. Harap ini membantu anda dalam perjalanan pembangunan timbunan penuh anda!

Atas ialah kandungan terperinci Asas untuk berlatih: Bermula dengan pembangunan tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!