Permulaan Pantas: Panduan Bermula untuk Pembangunan Tindanan Penuh Vue3+Django4

Permulaan Pantas: Panduan Bermula untuk Pembangunan Tindanan Penuh Vue3+Django4

Dengan perkembangan pesat Internet, pembangunan tindanan penuh telah menjadi salah satu aliran teknologi yang paling hangat dalam beberapa tahun kebelakangan ini. Dalam pembangunan tindanan penuh, ini adalah cara biasa untuk membangunkan dengan menggabungkan rangka kerja bahagian hadapan dan bahagian belakang. Artikel ini akan membawa anda ke dunia pembangunan tindanan penuh Vue3+Django4 dan menyediakan panduan pengenalan untuk pemula.

Vue3 ialah versi rangka kerja Vue.js terbaharu Ia mempunyai prestasi yang lebih tinggi, pengalaman pembangunan yang lebih baik dan lebih banyak ciri baharu. Django ialah rangka kerja web Python lanjutan yang menyediakan kefungsian dan kebolehskalaan yang kaya. Menggabungkannya bersama-sama menghasilkan aplikasi web yang berkuasa dan moden.

Sebelum anda bermula, pastikan anda memasang Node.js, Vue CLI dan Python dengan betul. Setelah pemasangan selesai, kami boleh mula membuat projek kami. Mula-mula, cipta projek Vue3 menggunakan Vue CLI, buka terminal dan jalankan arahan berikut:

vue create myproject

Semasa proses penciptaan, anda boleh memilih pilihan Pratetap Gunakan Vue3, yang akan memberikan anda konfigurasi siap sedia termasuk Vue Penghala dan Vuex. Selepas penciptaan selesai, kami memasuki direktori projek dan memasang pakej kebergantungan Vue dan Django:

cd myproject
npm install vue@next
pip install Django

Seterusnya, kita perlu mencipta aplikasi Django dalam projek, yang dibuat dengan arahan berikut:

django-admin startproject backend
cd backend
python manage.py startapp api

Selepas penciptaan adalah selesai, kita boleh Mula menulis kod. Mula-mula, kita perlu menambah laluan fail statik Vue dalam fail settings.py Django, cari STATIC_URL dan tambah kod berikut di bawahnya:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist'),
]

Kemudian, kami mencipta fail urls.py baharu untuk pemprosesan dan permintaan bahagian hadapan Vue. Fail ini terletak dalam direktori api Tulis kod berikut:

from django.urls import path
from . import views

urlpatterns = [
    path('api/', views.api),
]

Seterusnya, kami menulis kod logik dalam fail views.py untuk mengendalikan permintaan daripada bahagian hadapan Vue. Tulis kod berikut:

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

def api(request):
    data = {
        'message': 'Hello from Django API!'
    }
    return JsonResponse(data)

Dalam contoh mudah ini, kami hanya mengembalikan respons JSON yang mengandungi mesej ringkas. Dalam aplikasi sebenar, anda boleh menulis logik yang lebih kompleks untuk mengendalikan permintaan yang berbeza.

Seterusnya, kita perlu menulis kod bahagian hadapan dengan Vue. Pergi ke direktori projek dan pasang Penghala Vue dan Axios:

cd frontend
npm install vue-router@next axios

Kemudian kami membuka fail src/router/index.js dan menambah kod berikut:

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/api',
    name: 'API',
    component: API
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Dalam contoh ini, kami menentukan dua laluan: '/' Laman Utama yang sepadan komponen, '/api' sepadan dengan komponen API. Kemudian, kami mencipta komponen Home.vue dan API.vue dalam direktori src/views Di sini kami hanya perlu memaparkan beberapa maklumat teks.

Kini kami boleh menghantar permintaan dalam komponen API.vue untuk mendapatkan data daripada API Django. Gunakan kod berikut untuk menggantikan kandungan asal:

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('/api/')
      .then(response => {
        this.message = response.data.message
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

Dalam contoh ini, kami menghantar permintaan GET dalam fungsi cangkuk yang dipasang komponen, memperoleh data yang dikembalikan oleh API Django dan memaparkan data pada halaman.

Kini kami telah menyelesaikan aplikasi asas timbunan penuh menggunakan Vue3 dan Django4. Anda boleh menjalankan arahan berikut untuk memulakan pelayan pembangunan:

cd ..
python manage.py runserver

Kemudian buka http://localhost:8000/ dalam penyemak imbas anda dan anda akan melihat halaman yang mengandungi data API Django.

Melalui panduan artikel ini, kami telah membawa anda melengkapkan panduan pengenalan kepada pembangunan tindanan penuh Vue3+Django4. Saya harap ia akan membantu pemula, dan saya juga berharap anda boleh mempelajari dan menerokai bidang pembangunan timbunan penuh. ayuh!

Atas ialah kandungan terperinci Permulaan Pantas: Panduan Bermula untuk Pembangunan Tindanan Penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!