Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4

Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4

Dengan pembangunan berterusan pembangunan web, pembangunan tindanan penuh secara beransur-ansur menjadi trend. Vue dan Django ialah salah satu susunan teknologi paling popular dalam pembangunan bahagian hadapan dan belakang, dan gabungan mereka juga sangat berkuasa. Dalam artikel ini, kami akan memperkenalkan langkah demi langkah bagaimana untuk melaksanakan projek tindanan penuh menggunakan Vue3 dan Django4.

1. Persediaan
   Pertama, kita perlu memasang Node.js dan Python secara setempat, serta pengurus pakej yang sepadan npm dan pip. Pada masa yang sama, kami juga memerlukan persekitaran pembangunan bersepadu (IDE), seperti Kod VS.

2. Buat projek Django
   Buka terminal, masukkan direktori tempat anda ingin mencipta projek, laksanakan arahan berikut untuk mencipta projek Django:

   django-admin startproject myproject

3. Buat aplikasi Django
   Masukkan direktori projek, laksanakan arahan berikut untuk mencipta aplikasi Django:

   cd myproject
   python3 manage.py startapp myapp

4. Konfigurasi pangkalan data Django
   Buka fail settings.py dan konfigurasikan maklumat pangkalan data, seperti menggunakan SQLite:

   DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
   }

5. Buat model pangkalan data
   Tentukan model pangkalan data anda dalam fail models.py. Sebagai contoh, kami mencipta model Pengguna:

   from django.db import models
   
   class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)

6. Lakukan pemindahan pangkalan data
   Jalankan arahan berikut untuk melaksanakan pemindahan pangkalan data:

   python3 manage.py makemigrations
   python3 manage.py migrate

7. Buat paparan Django
   Tulis fungsi paparan Django anda dalam fail views.py. Sebagai contoh, kami mencipta fungsi pandangan untuk mendapatkan semua pengguna:

   from django.shortcuts import render
   from django.http import JsonResponse
   from .models import User
   
   def get_users(request):
    users = User.objects.all()
    data = [{'name': user.name, 'email': user.email} for user in users]
    return JsonResponse({'users': data})

8. 
   Buat projek Vue

   Dalam terminal, masukkan direktori tempat anda ingin mencipta projek Vue dan laksanakan arahan berikut untuk mencipta projek Vue:

vue create myproject

9. 
   Konfigurasi proksi Vue

   Konfigurasi proksi Vue dalam fail myproject/vue.config.js untuk proksi permintaan ke bahagian belakang Django:

module.exports = {
  devServer: {
 proxy: {
   '^/api': {
     target: 'http://localhost:8000',
     changeOrigin: true
   }
 }
  }
}

10. 
    Buat komponen Vue

    Buat komponen Users.svurce direktori untuk memaparkan senarai pengguna:

<template>
  <div>
 <ul>
   <li v-for="user in users" :key="user.name">
     {{ user.name }} - {{ user.email }}
   </li>
 </ul>
  </div>
</template>

<script>
export default {
  data() {
 return {
   users: []
 }
  },
  created() {
 this.getUsers()
  },
  methods: {
 getUsers() {
   axios.get('/api/users')
     .then(response => {
       this.users = response.data.users
     })
 }
  }
}
</script>

11. 
    Konfigurasi penghalaan Vue

    Konfigurasi penghalaan Vue dalam fail src/router/index.js dan gunakan komponen Users.vue sebagai laluan:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Users from '../views/Users.vue'

Vue.use(VueRouter)

const routes = [
  {
 path: '/',
 name: 'Users',
 component: Users
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

12. 
    Jalankan projek

    root Django dan Vue masing-masing Jalankan arahan berikut dalam direktori untuk menjalankan projek:

python3 manage.py runserver
npm run serve

Sekarang, anda boleh melawati http://localhost:8080 dalam penyemak imbas untuk melihat projek tindanan penuh anda. Komponen Pengguna akan mendapatkan data daripada bahagian belakang Django dan memaparkannya pada halaman.

Ringkasan:

Melalui langkah di atas, kami berjaya melaksanakan projek tindanan penuh menggunakan Vue3 dan Django4. Dengan menyepadukan pembangunan bahagian hadapan dan bahagian belakang, kami boleh membangunkan aplikasi web yang berkuasa dengan lebih cekap. Saya harap artikel ini akan membantu anda dan menjadikan anda lebih biasa dengan proses pembangunan tindanan penuh Vue dan Django. 🎜

Atas ialah kandungan terperinci Langkah demi langkah: Langkah pelaksanaan projek tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!