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

   Salin selepas log masuk

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

   vue create my-project

   Salin selepas log masuk

   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>

   Salin selepas log masuk

   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

   Salin selepas log masuk

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

   django-admin startproject myproject

   Salin selepas log masuk

   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是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   Salin selepas log masuk
   Kemudian, tambah kandungan berikut pada penghujung fail settings.py:

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

   Salin selepas log masuk
   Ini akan mengkonfigurasi Django untuk menggunakan rangka kerja REST untuk mencipta API.

python manage.py startapp myapp

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

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

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

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

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

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

npm run serve

python manage.py runserver

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!