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

   Salin selepas log masuk

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

   cd myproject
   python3 manage.py startapp myapp

   Salin selepas log masuk

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',
    }
   }

   Salin selepas log masuk

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)

   Salin selepas log masuk

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

   python3 manage.py makemigrations
   python3 manage.py migrate

   Salin selepas log masuk

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

   Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

12. 
    Jalankan projek

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

python3 manage.py runserver
npm run serve

Salin selepas log masuk

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!