Cara Prototaip Aplikasi Web dengan Django dan Vue.js

Artikel ini menunjukkan bagaimana dengan cepat prototaip aplikasi web yang responsif, reaktif menggunakan django dan vue.js, lengkap dengan antara muka admin yang lengkap. Kami akan meliputi menubuhkan projek, mengintegrasikan pangkalan data, melaksanakan komponen VUE.JS, menguruskan keadaan aplikasi dengan VUEX, dan menggunakan VUE ROUTER untuk navigasi lancar.

Ciri -ciri Utama:

prototaip cepat aplikasi web responsif dan reaktif.

• pembangunan stack penuh lancar dengan django dan vue.js.
• Antara muka pengguna yang dinamik menggunakan komponen Vue.js dalam templat Django.
• Pengurusan negeri yang cekap menggunakan VUEX.
• peralihan halaman lancar dengan penghala Vue dan pengirim URL Django.
• ujian menyeluruh untuk interaksi komponen harmoni.

1. Persediaan Projek:

Bahagian ini mengandaikan anda telah dipasang Python. Untuk arahan terperinci, rujuk dokumentasi Django rasmi mengenai pemasangan.

Buat persekitaran maya:

Gunakan
• (atau untuk python 3.3). Aktifkannya menggunakan arahan yang sesuai untuk sistem operasi anda (lihat artikel untuk butiran). virtualenv myenvironment python3 -m venv myenvironment Pasang Django:
Run
• dalam persekitaran yang diaktifkan. pip install django Buat projek Django:
Gunakan
• . django-admin startproject myproject Buat aplikasi Django:
Gunakan
• . Ingatlah untuk menambah ke dalam django-admin startapp myapp. myapp.apps.MyappConfig INSTALLED_APPS myproject/settings.py
2. Persediaan Pangkalan Data dengan Django:

Kami akan menentukan pangkalan data backend menggunakan model Django, yang kemudiannya akan diintegrasikan dengan VUEX untuk Pengurusan Negeri Frontend.

Tentukan model (myApp/model.py):

create
• dan model dengan medan yang sesuai (lihat artikel untuk kod). Article Author Model mendaftar dalam admin (myApp/admin.py):
Model
• dan (lihat artikel untuk kod). Article Author
3. Antara muka asas dengan komponen VUE:
• Bahagian ini memperincikan integrasi komponen Vue.js dalam templat Django. python manage.py makemigrations
  • Django View (myApp/views.py): Buat pandangan yang mengambil artikel dan penulis dari pangkalan data dan menjadikan template (lihat artikel untuk kod).
  • template django (myApp/templates/myApp/template.html): Buat templat asas menggunakan bootstrap (lihat artikel untuk kod). Templat ini akan merangkumi aplikasi Vue.js.
  • vue.js komponen: Buat komponen Vue untuk senarai artikel dan pengarang dan item individu (lihat artikel untuk kod). Perhatikan penggunaan pembatas [[ dan ]] untuk mengelakkan konflik dengan bahasa templat Django.

  4. Menyambungkan Kedai Vuex ke pangkalan data Django:

  Vuex akan menguruskan keadaan aplikasi, menyambungkan frontend ke data backend Django.

  • VUEX Store: Buat kedai VUEX dalam templat Django, memadamkannya dengan data yang diambil dari pandangan Django menggunakan bahasa templat Django (lihat artikel untuk kod). Ini termasuk getters untuk mendapatkan data dengan slug.

  5. Routing dengan Django dan Vue Router:

  kami akan menggunakan pengirim URL Django dan penghala Vue untuk navigasi sisi klien yang lancar.

  • Django URL (myProject/urls.py): Konfigurasi URL untuk mengendalikan laluan yang berbeza (lihat artikel untuk kod).
  • Vue Router: Tentukan laluan menggunakan mod sejarah HTML5 Vue Router untuk membolehkan peralihan yang lancar tanpa reload halaman (lihat artikel untuk kod).

  6. Ujian:

  • Buat Superuser Django: Run python manage.py createsuperuser.
  • Jalankan pelayan tempatan: Run python manage.py runserver.
  • Mengisi pangkalan data: mengakses antara muka admin ( https://www.php.cn/link/E86C39706A2A5033ED14F935353F015E
  menguji aplikasi:
  • Semak imbas tapak untuk mengesahkan fungsi.
  kod spa penuh dan perkembangan selanjutnya:

  Kod lengkap untuk aplikasi satu halaman boleh didapati di GitHub (pautan yang disediakan dalam artikel asal). Artikel ini juga membincangkan memperluaskan aplikasi dengan menambahkan API REST menggunakan rangka kerja Django REST dan memakannya dengan axios dalam vue.js untuk fungsi CRUD penuh. Ini akan membolehkan membuat, mengemas kini, dan memadam penyertaan terus dari frontend.

  FAQs:

  Artikel ini disimpulkan dengan seksyen FAQ yang komprehensif yang menangani pelbagai aspek mengintegrasikan django dan vue.js, termasuk penempatan, ujian, pengendalian ralat, dan titik integrasi khusus antara ciri -ciri Django (Borang, Orm) dan Vue.js.

Atas ialah kandungan terperinci Cara Prototaip Aplikasi Web dengan Django dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!