Tutorial praktikal: Vue3+Django4 amalan teknikal baharu-View.js-php.cn

Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

WBOY

Lepaskan： 2023-09-09 08:52:42

asal

1020 orang telah melayarinya

Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

Pengenalan:
Dengan pembangunan berterusan teknologi bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja bahagian hadapan yang paling popular. Sebagai rangka kerja web Python yang berkuasa dan fleksibel, Django juga digemari oleh pembangun. Artikel ini akan membawa anda meneroka cara menggabungkan Vue3 dan Django4 untuk mencapai amalan teknikal baharu.

1. Persediaan persekitaran:
Pertama, kita perlu menyediakan persekitaran pembangunan. Pastikan komputer anda mempunyai versi terkini Node.js dan Python yang dipasang. Kemudian pasang Vue CLI dan Django melalui arahan berikut:

Pasang Vue CLI:
```
npm install -g @vue/cli
```
Salin selepas log masuk
Buat projek Vue:
```
vue create vue-django-project
```
Salin selepas log masuk
Ini akan mencipta projek Vue yang dipanggil vue-django-project.
Pasang Django:
```
pip install Django
```
Salin selepas log masuk

2. Buat projek Django:
Seterusnya, kami akan mencipta projek Django dan menyepadukan projek Vue ke dalamnya.

Buat Projek Django:
```
django-admin startproject django_project
```
Salin selepas log masuk
Ini akan mencipta projek Django yang dipanggil django_project.
Buat Apl Django:
```
cd django_project
python manage.py startapp vueapp
```
Salin selepas log masuk
Ini akan mencipta apl Django yang dipanggil vueapp.
Sediakan projek Django:
Buka fail django_project/settings.py dan tambahkan vueapp ke INSTALLED_APPS:
```
INSTALLED_APPS = [
 ...
 'vueapp',
]
```
Salin selepas log masuk

Kemudian, tambahkan pernyataan berikut dalam tetapan pangkalan data:

ate Djangreee🜎Creee :

```
DATABASES = {
    'default': {
        ...
        'CONN_MAX_AGE': 600,
    }
}
```
Salin selepas log masuk
Ini akan mencipta paparan bernama indeks.
Buat laluan URL Django:
```
from django.shortcuts import render

def index(request):
 return render(request, 'vueapp/index.html')
```
Salin selepas log masuk
Kemudian, dalam django_project/urls.py, import vueapp.patternurls dan tambahkan vueapp.paturls :

from django.urls import path
from . import views

urlpatterns = [
 path('', views.index, name='index'),
]

Salin selepas log masuk

3. Cipta komponen Vue:

Sekarang, kami akan mencipta komponen Vue dan menyepadukannya ke dalam paparan Django.

Buat komponen Vue:

from django.urls import include, path

urlpatterns = [
    ...
    path('', include('vueapp.urls')),
]

Salin selepas log masuk

Kompilasi projek Vue:

<template>
  <div>
 <h1>{{ title }}</h1>
 <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
 return {
   title: 'Vue3+Django4全新技术实践',
   content: '这是一个示例文本。',
 };
  },
};
</script>

Salin selepas log masuk

Ini akan menjana direktori dist yang mengandungi kod Vue yang disusun. . Paparan Django, dan diakses melalui URL.

Buat templat Django:

```
npm run build
```
Salin selepas log masuk
Kemas kini paparan Django:

STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'vue-django-project/dist'),
]

STATIC_URL = '/static/'

Salin selepas log masuk

5. Jalankan projek:

Mulakan pelayan pembangunan Django:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3+Django4全新技术实践</title>
  <link href="{% static 'css/app.css' %}" rel="stylesheet">
</head>
<body>
  <div id="app">
 <example></example>
  </div>
  <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

Salin selepas log masuk

Akses projek:

Masukkan http://localhost:8000/dalam pelayar untuk mengakses projek itu.

Kesimpulan:
Melalui amalan artikel ini, kami berjaya menggabungkan Vue3 dan Django4 dan melaksanakan amalan teknikal baharu. Melalui kuasa Vue3 dan fleksibiliti Django4, kami boleh membangunkan aplikasi web yang lebih cekap dan elegan. Saya harap artikel ini akan membantu semua orang dan membantu anda terus meneroka dan berinovasi dalam bidang Vue dan Django!

Atas ialah kandungan terperinci Tutorial praktikal: Vue3+Django4 amalan teknikal baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!