Rumah > Artikel > hujung hadapan web > Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

WBOYasal: 2023-09-09 08:52:42892semak imbas

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
```
Buat projek Vue:
```
vue create vue-django-project
```
Ini akan mencipta projek Vue yang dipanggil vue-django-project.
Pasang Django:
```
pip install Django
```

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

Buat Projek Django:
```
django-admin startproject django_project
```
Ini akan mencipta projek Django yang dipanggil django_project.
Buat Apl Django:
```
cd django_project
python manage.py startapp vueapp
```
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',
]
```

Kemudian, tambahkan pernyataan berikut dalam tetapan pangkalan data:

ate Djangreee🜎Creee :

DATABASES = {
    'default': {
        ...
        'CONN_MAX_AGE': 600,
    }
}

Ini akan mencipta paparan bernama indeks.

Buat laluan URL Django:

from django.shortcuts import render

def index(request):
 return render(request, 'vueapp/index.html')

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

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

Kompilasi projek Vue:

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

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

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

Buat templat Django:

```
npm run build
```
Kemas kini paparan Django:

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

STATIC_URL = '/static/'

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>

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!

Python django node.js vue.js html 前端框架 JS 数据库 http

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ketahui gabungan API dalam Vue 3 untuk mengatur dan mengurus kod komponen dengan lebih baikArtikel seterusnya：Ketahui gabungan API dalam Vue 3 untuk mengatur dan mengurus kod komponen dengan lebih baik

Artikel berkaitan

Lihat lagi