Contoh SPA dibina dengan Django dan Vue.js

Dalam beberapa tahun kebelakangan ini, SPA (Aplikasi Halaman Tunggal) telah menjadi model pembangunan web yang popular. Berbanding dengan aplikasi berbilang halaman tradisional, SPA lebih pantas dan lancar, dan ia juga lebih mesra dan mudah untuk pembangun. Artikel ini akan berkongsi contoh SPA yang dibina berdasarkan Django dan Vue.js, dengan harapan dapat memberi anda sedikit rujukan dan inspirasi.

Django ialah rangka kerja Web Python yang terkenal dengan keupayaan pembangunan bahagian belakang yang berkuasa. Vue.js ialah rangka kerja bahagian hadapan JavaScript ringan yang boleh membantu pembangun membina interaksi UI dengan cepat sambil mengelakkan masalah prestasi yang disebabkan oleh operasi DOM. Menggabungkan kedua-dua rangka kerja ini, kami boleh membina aplikasi SPA yang berkuasa dan mesra pengguna.

Mari kita lihat proses pelaksanaan khusus.

Langkah 1: Bina bahagian belakang Django

Pertama, kita perlu mencipta projek bahagian belakang menggunakan Django. Anda boleh menggunakan alat baris arahan Django sendiri untuk mencipta projek baharu, seperti:

$ django-admin startproject myproject

Kemudian, kita boleh menggunakan fungsi definisi model Django untuk mentakrifkan struktur data yang kita perlukan. Sebagai contoh, jika kita ingin membangunkan aplikasi blog, kita boleh membuat aplikasi bernama "Blog" dan menentukan model bernama "Post":

# blog/models.py
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()
    pub_date = models.DateTimeField(auto_now_add=True)

Model ini mewakili catatan blog, termasuk tajuk , kandungan dan tarikh keluaran tiga medan.

Kami juga perlu mencipta antara muka API RESTful untuk model ini bagi memudahkan panggilan hadapan. Anda boleh menggunakan pemalam DRF (Django Rest Framework) Django untuk mencipta paparan RESTful standard:

# blog/views.py
from rest_framework import generics
from .models import Post
from .serializers import PostSerializer

class PostList(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

class PostDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

Di sini kami telah mencipta dua paparan, satu ialah paparan PostList untuk memaparkan senarai semua artikel dan satu lagi adalah untuk memaparkan paparan PostDetail bagi butiran artikel tunggal. Ambil perhatian bahawa di sini kami telah memperkenalkan fail bernama "serializers.py", yang mengandungi serializer model Post yang kami takrifkan, yang digunakan untuk menukar contoh model kepada format JSON.

Langkah 2: Bina bahagian hadapan Vue.js

Dengan bahagian belakang dipasang, kita boleh mula membina bahagian hadapan. Kami mencipta projek Vue.js baharu dan menambah beberapa kebergantungan yang diperlukan:

$ vue init webpack myapp
$ cd myapp
$ npm install --save axios vue-router vuex

Di sini kami menggunakan Vue Router dan Vuex, Vue Router digunakan untuk pengurusan penghalaan dan Vuex digunakan untuk pengurusan negeri.

Seterusnya, kami mencipta komponen "Siaran" baharu untuk memaparkan senarai artikel. Anda boleh mencipta fail bernama "PostList.vue" dalam direktori "komponen":

<!-- PostList.vue -->
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h3 id="post-title">{{ post.title }}</h3>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
    };
  },
  created() {
    axios
      .get('/api/posts/')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};
</script>

Kod ini mewakili paparan senarai artikel dan mendapatkan data daripada API bahagian belakang melalui Axios.

Seterusnya, kita perlu menetapkan peraturan penghalaan supaya pengguna boleh mengakses komponen tersebut. Peraturan penghalaan boleh ditambah dalam fail "index.js" di bawah direktori "router":

import Vue from 'vue';
import Router from 'vue-router';
import PostList from '@/components/PostList';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'PostList',
      component: PostList,
    },
  ],
});

Di sini kami memetakan laluan "/" ke komponen "PostList" kami.

Langkah 3: Gunakan Vuex untuk pengurusan negeri

Fungsi terakhir yang perlu dilaksanakan ialah pengurusan negeri. Kami perlu menyimpan data yang diperoleh daripada API bahagian belakang ke dalam Vuex dan memaparkannya apabila diperlukan. Untuk melakukan ini, kita perlu membuat kedai Vuex terlebih dahulu:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: [],
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts;
    },
  },
  actions: {
    fetchPosts({ commit }) {
      return axios.get('/api/posts/').then(({ data }) => {
        commit('SET_POSTS', data);
      });
    },
  },
});

Di sini kita mencipta sifat negeri yang dipanggil "siaran" dan mentakrifkan operasi "SET_POSTS" untuk mengemas kini harta tersebut.

Seterusnya, kami perlu menyambungkan komponen PostList ke gedung Vuex untuk pemerolehan data dan kemas kini status:

<!-- PostList.vue -->
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h3 id="post-title">{{ post.title }}</h3>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: mapState(['posts']),
  created() {
    this.fetchPosts();
  },
  methods: mapActions(['fetchPosts']),
};
</script>

Di sini kami menggunakan fungsi tambahan "mapState" dan "mapActions" yang disediakan oleh Vuex untuk Petakan keadaan dan tindakan Vuex ke dalam komponen. Apabila komponen dibuat, kami mendapat data daripada API dan mengemas kini keadaan melalui kaedah "fetchPosts".

Pada ketika ini, kami telah menyelesaikan penyepaduan Django dan Vue.js dan membina aplikasi SPA yang lengkap. Jalankan aplikasi dan akses laluan "/" untuk melihat kesan paparan senarai artikel.

Ringkasan

Artikel ini memperkenalkan proses cara menggunakan Django dan Vue.js untuk membina aplikasi SPA. Berbanding dengan aplikasi berbilang halaman tradisional, SPA boleh memberikan pengalaman pengguna yang lebih baik dan lebih mudah untuk diselenggara dan dibangunkan. Saya harap contoh ini dapat memberi anda sedikit rujukan dan inspirasi, dan saya berharap anda pergi lebih jauh dalam pembangunan web!

Atas ialah kandungan terperinci Contoh SPA dibina dengan Django dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!