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

Jadual Kandungan

Rumah

hujung hadapan web

View.js

Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 08:52 AM

vue berlatih django

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 id="title">{{ 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!

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7490

Tutorial CakePHP

1377

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Cara merujuk fail js dengan vue.js Apr 07, 2025 pm 11:27 PM

Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.

Cara menambah fungsi ke butang untuk vue Apr 08, 2025 am 08:51 AM

Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Cara Menggunakan Watch di Vue Apr 07, 2025 pm 11:36 PM

Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.

Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Cara kembali ke halaman sebelumnya oleh Vue Apr 07, 2025 pm 11:30 PM

Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.

Vue menyedari kesan menatal marquee/teks Apr 07, 2025 pm 10:51 PM

Melaksanakan kesan menatal marquee/teks di VUE, menggunakan animasi CSS atau perpustakaan pihak ketiga. Artikel ini memperkenalkan cara menggunakan animasi CSS: Buat teks tatal dan bungkus teks dengan & lt; div & gt;. Tentukan animasi CSS dan tetapkan limpahan: tersembunyi, lebar, dan animasi. Tentukan frasa key, set Transform: TranslateX () pada permulaan dan akhir animasi. Laraskan sifat animasi seperti tempoh, kelajuan tatal, dan arah.

Cara Menanyakan Versi Vue Apr 07, 2025 pm 11:24 PM

Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.

Cara Menggunakan Vue Traversal Apr 07, 2025 pm 11:48 PM

Terdapat tiga kaedah umum untuk vue.js untuk melintasi tatasusunan dan objek: Arahan V-untuk digunakan untuk melintasi setiap elemen dan membuat templat; Arahan V-mengikat boleh digunakan dengan V-untuk menetapkan nilai atribut secara dinamik untuk setiap elemen; dan kaedah .map boleh menukar elemen array ke dalam tatasusunan baru.

See all articles