cari

Rumah >hujung hadapan web >View.js >Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

WBOY
WBOYasal
2023-09-09 08:52:421037semak imbas

Tutorial praktikal: Vue3+Django4 amalan teknikal baharu

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:

  1. Pasang Vue CLI: 

    npm install -g @vue/cli

  2. Buat projek Vue: 

    vue create vue-django-project

    Ini akan mencipta projek Vue yang dipanggil vue-django-project.

  3. Pasang Django: 

    pip install Django

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

  1. Buat Projek Django: 

    django-admin startproject django_project

    Ini akan mencipta projek Django yang dipanggil django_project.

  2. Buat Apl Django: 

    cd django_project
python manage.py startapp vueapp

    Ini akan mencipta apl Django yang dipanggil vueapp.

  3. 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 :
    Dalam Dalam vueapp/views.py, tambahkan kod berikut: 
  1. DATABASES = {
    'default': {
        ...
        'CONN_MAX_AGE': 600,
    }
}

    Ini akan mencipta paparan bernama indeks.

    Buat laluan URL Django:
    2. Dalam direktori vueapp, buat fail urls.py dan tambah kod berikut: 
  2. 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 : 
    3. 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:
    Dalam direktori vue-django-project/src/components, buat komponen Vue bernama Example.vue, kodnya adalah seperti berikut: 
  1. from django.urls import include, path

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


    Kompilasi projek Vue:
    2. -django -project directory, laksanakan arahan berikut untuk menyusun projek Vue: 
  2. <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:
    3. Dalam direktori vueapp, buat templat Django bernama index.html, kodnya adalah seperti berikut: 
  3. npm run build


    Kemas kini paparan Django:
    4. Dalam paparan indeks/indeks aplikasi vue. ubah suai Parameter pertama kaedah render ialah vueapp/index.html: 
STATICFILES_DIRS = [
 os.path.join(BASE_DIR, 'vue-django-project/dist'),
]

STATIC_URL = '/static/'


5. Jalankan projek:
    Akhir sekali, kami akan memulakan pelayan pembangunan Django dan mengakses projek melalui URL.


  1. Mulakan pelayan pembangunan Django:
    2. Dalam direktori django_project, laksanakan arahan berikut untuk memulakan pelayan pembangunan Django: 
  2. {% 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