Membina aplikasi timbunan penuh: Penjelasan terperinci tentang pembangunan projek Vue3+Django4

Membina aplikasi tindanan penuh: Penjelasan terperinci tentang pembangunan projek Vue3+Django4

1 Pengenalan
Dengan perkembangan pesat Internet, pembangunan tindanan penuh telah mendapat lebih banyak perhatian. Pembangun tindanan penuh boleh bertanggungjawab untuk kedua-dua kerja pembangunan bahagian hadapan dan belakang, dengan itu meningkatkan kecekapan pembangunan dan kualiti keseluruhan projek. Artikel ini akan memperkenalkan secara terperinci cara membina aplikasi tindanan penuh, dan menggunakan Vue3 dan Django4 sebagai rangka kerja pembangunan untuk menerangkan.

2. Gambaran Keseluruhan Teknikal
Sebelum membina aplikasi tindanan penuh, kita perlu memahami beberapa konsep teknikal utama. Vue3 ialah rangka kerja JavaScript yang mudah, fleksibel dan cekap yang boleh digunakan untuk membina aplikasi web moden. Django4 ialah rangka kerja web Python yang berkuasa dan mudah digunakan untuk membangunkan aplikasi web yang selamat dan boleh dipercayai dengan cepat.

3. Bina bahagian hadapan

1. Persediaan alam sekitar
   Pertama, anda perlu memasang pengurus pakej Node.js dan npm. Selepas pemasangan selesai, gunakan arahan berikut untuk menyemak versi:

node -v
npm -v

2. Buat projek Vue
   Masukkan arahan berikut dalam baris arahan untuk mencipta projek Vue baharu:

vue create my-vue-app

Pilih beberapa tetapan asas mengikut gesaan, seperti nama projek, konfigurasi Projek, dsb.

3. Pasang Vue Router dan Vuex
   Pasang Vue Router dan Vuex dalam projek Vue anda menggunakan arahan berikut:

cd my-vue-app
npm install vue-router vuex

4. Buat komponen
   Buat folder yang dipanggil komponen di bawah folder src dan buat fail untuk folder bernama komponen di dalamnya HelloWorld.vue dan tambahkan kod berikut:

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, World!"
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

5. Konfigurasi penghalaan
   Buat folder bernama penghala di bawah folder src, kemudian buat fail bernama index.js di dalamnya dan tambah Kod berikut:

import { createRouter, createWebHistory } from "vue-router";

import HelloWorld from "../components/HelloWorld.vue";

const routes = [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Konfigurasi
6. management
   Buat folder bernama store di bawah folder src, kemudian buat fail bernama index.js di dalamnya dan tambah kod berikut:

import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

7. Di bahagian utama Perkenalkan komponen, penghalaan dan pengurusan nyatakan ke dalam aplikasi
   Tambah yang berikut kod ke fail utama.js di bawah folder src:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App)
  .use(router)
  .use(store)
  .mount("#app");

Empat Bina bahagian belakang

1. Persediaan persekitaran
   Pertama, anda perlu memasang Python dan pengurus pakej pip. Selepas pemasangan selesai, gunakan arahan berikut untuk menyemak versi:

python -V
pip -V

2. Buat projek Django
   Masukkan arahan berikut dalam baris arahan untuk mencipta projek Django baharu:

django-admin startproject mydjangoapp

3. Buat aplikasi Django dalam
   Enter direktori akar projek Pada baris arahan, masukkan arahan berikut untuk mencipta aplikasi bernama mydjangoapp:

cd mydjangoapp
./manage.py startapp myapp

4. Konfigurasi pangkalan data
   Konfigurasikan parameter sambungan pangkalan data dalam fail settings.py:

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}

5. Tulis paparan API
   Paparan di bawah folder myapp. py fail:

from django.http import JsonResponse

def hello_world(request):
    return JsonResponse({"message": "Hello, World!"})

6. Konfigurasikan penghalaan
   Tambah kod berikut dalam fail urls.py di bawah folder mydjangoapp:

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path("api/hello", hello_world),
]

7. Mulakan pelayan pembangunan Django arahan berikut
   Run direktori akar untuk memulakan pelayan pembangunan Django:

./manage.py runserver

5. Penyahpepijatan bersama bahagian hadapan dan belakang

1. Buat konfigurasi proksi
   Buat fail bernama vue.config.js dalam direktori akar projek Vue dan tambah kod berikut:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        ws: true,
        changeOrigin: true
      }
    }
  }
};

2. Panggil API
   Tambah kod berikut dalam komponen HelloWorld.vue:

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      count: 0
    };
  },
  created() {
    fetch("/api/hello")
      .then(response => response.json())
      .then(data => {
        this.msg = data.message;
      });
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  },
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

6. Jalankan projek
Masukkan direktori akar projek Vue pada baris arahan dan jalankan arahan berikut untuk memulakan pelayan pembangunan bahagian hadapan:

npm run serve

Dalam tetingkap baris arahan lain Masukkan direktori akar projek Django dan jalankan arahan berikut untuk memulakan pelayan pembangunan bahagian belakang:

./manage.py runserver

Sekarang, buka penyemak imbas dan lawati http:/ /localhost:8080, anda akan melihat mesej yang mengandungi halaman "Hello, World!" Klik butang "Kenaikan" dan "Kira" akan meningkat secara automatik sebanyak 1.

7. Ringkasan
Melalui pengenalan terperinci artikel ini, kami telah mempelajari cara membina aplikasi tindanan penuh, menggunakan Vue3 sebagai rangka kerja bahagian hadapan dan Django4 sebagai rangka kerja bahagian belakang, dan menunjukkan proses penyahpepijatan bersama bahagian depan dan belakang berakhir melalui contoh kod. Pembangunan tindanan penuh sangat penting untuk meningkatkan kecekapan pembangunan dan kualiti projek. Saya harap artikel ini akan membantu anda. Saya mendoakan anda kejayaan yang lebih besar di jalan menuju pembangunan timbunan penuh!

Atas ialah kandungan terperinci Membina aplikasi timbunan penuh: Penjelasan terperinci tentang pembangunan projek Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!