Perkongsian pengalaman praktikal: Panduan pembangunan projek tindanan penuh Vue3+Django4

Perkongsian pengalaman praktikal: Panduan pembangunan projek tindanan penuh Vue3+Django4

Pengenalan:
Dalam era Internet yang sangat maju hari ini, pembangunan tindanan penuh telah menjadi satu hala tuju yang semakin ramai pembangun memberi perhatian dan pembelajaran daripada . Rangka kerja Vue pada masa ini merupakan salah satu rangka kerja bahagian hadapan yang paling popular, dan Django ialah rangka kerja bahagian belakang Python yang berkuasa Gabungan mereka boleh memberikan kami pengalaman pembangunan timbunan penuh yang komprehensif. Artikel ini akan memperkenalkan cara menggunakan Vue3 dan Django4 untuk membina projek tindanan penuh yang lengkap, dan berkongsi beberapa pengalaman pembangunan dan contoh kod.

1. Persediaan persekitaran
Sebelum memulakan projek, anda perlu membuat persediaan alam sekitar. Pastikan anda memasang perisian berikut:

1. Node.js dan npm: digunakan untuk memasang dan mengurus kebergantungan bahagian hadapan.
2. Python dan pip: digunakan untuk memasang dan mengurus kebergantungan bahagian belakang.
3. Vue CLI: Alat baris arahan untuk mencipta projek Vue.
4. Django: untuk mencipta dan mengurus projek bahagian belakang.

2 Cipta projek Vue3
Pertama, kami menggunakan Vue CLI untuk mencipta projek Vue3. Buka antara muka baris arahan dan laksanakan arahan berikut:

$ vue create vue_project

Ikut gesaan baris arahan, pilih konfigurasi yang anda perlukan dan tunggu projek dibuat.

3 Buat projek Django
Seterusnya, kami menggunakan Django untuk mencipta projek belakang. Jalankan arahan berikut dalam antara muka baris arahan:

$ django-admin startproject django_project

Ini akan mencipta folder bernama django_project dalam direktori semasa dan menjana rangka projek.

4. Konfigurasikan sambungan hujung hadapan dan belakang
Dalam langkah ini, kita perlu mengkonfigurasi sambungan hujung hadapan dan belakang supaya hujung hadapan dan belakang boleh berkomunikasi antara satu sama lain. Mula-mula, cipta fail .env.development dalam direktori vue_project/src dan tambah kandungan berikut: .env.development，并添加以下内容：

VUE_APP_BACKEND_URL=http://localhost:8000

这里的http://localhost:8000是Django后端运行的地址。

接下来，打开vue_project/src/main.js文件，添加以下代码到createApp之前：

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

这个代码段设置了axios的默认基础URL为我们刚才配置的后端地址。

五、开发前端页面
现在，我们可以开始开发前端页面了。Vue3的语法与Vue2略有不同，但大体上相似。Vue3提供了更加强大的组合式API，可以更好地管理代码逻辑。下面是一个简单的例子。

首先，在vue_project/src/components目录下创建一个名为HelloWorld.vue的组件文件，并添加以下内容：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    return {
      message
    }
  }
}
</script>

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

这个组件显示了一个红色的标题，标题内容通过ref定义的响应式变量设置。

为了在页面中使用这个组件，我们需要在vue_project/src/App.vue中引入它。首先，删除原有的内容，然后添加以下代码：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
}
</style>

这里我们导入了刚才创建的HelloWorld.vue组件，并在页面中引用它。

六、开发后端API
在Django项目中，我们需要创建API来提供后端服务。以创建一个简单的用户API为例。

首先，在django_project目录下执行以下命令，创建一个名为users的应用：

$ python manage.py startapp users

在users目录下创建一个名为views.py的文件，并添加以下代码：

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

这个简单的视图函数返回一个带有用户信息的JSON响应。

接下来，打开django_project/django_project/urls.py文件，并添加以下代码：

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

这个代码段将get_users视图函数映射到路径/api/users上。

七、前后端通信
为了让前端可以访问后端API，我们需要使用axios发送HTTP请求。回到vue_project/src/components/HelloWorld.vue文件，在setup函数中添加以下代码：

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

这个代码段使用axios发送一个GET请求到/api/users，并打印返回的数据。

八、运行项目
最后，我们只需要将前后端项目分别运行起来就可以了。

在vue_project目录下执行以下命令：

$ npm install
$ npm run serve

在django_project目录下执行以下命令：

$ python manage.py runserver

现在，打开浏览器并访问http://localhost:8080rrreee

http://localhost:8000 di sini ialah Django The alamat tempat terminal sedang berjalan.

Seterusnya, buka fail vue_project/src/main.js dan tambah kod berikut sebelum createApp:

rrreee🎜Coretan kod ini menetapkan URL asas lalai axios ke alamat hujung belakang yang baru kami konfigurasikan . 🎜🎜5. Bangunkan halaman hadapan🎜Kini, kita boleh mula membangunkan halaman hadapan. Sintaks Vue3 berbeza sedikit daripada Vue2, tetapi secara amnya serupa. Vue3 menyediakan API gabungan yang lebih berkuasa untuk mengurus logik kod dengan lebih baik. Di bawah adalah contoh mudah. 🎜🎜Mula-mula, buat fail komponen bernama HelloWorld.vue dalam direktori vue_project/src/components, dan tambah kandungan berikut: 🎜rrreee🎜Komponen ini memaparkan tajuk merah dan kandungan tajuk melepasi Responsif tetapan pembolehubah yang ditakrifkan oleh ref. 🎜🎜Untuk menggunakan komponen ini dalam halaman, kami perlu memperkenalkannya dalam vue_project/src/App.vue. Mula-mula, padamkan kandungan asal, dan kemudian tambahkan kod berikut: 🎜rrreee🎜Di sini kami mengimport komponen HelloWorld.vue yang baru kami buat dan merujuknya dalam halaman. 🎜🎜6. Bangunkan API bahagian belakang🎜Dalam projek Django, kami perlu mencipta API untuk menyediakan perkhidmatan bahagian belakang. Ambil contoh membuat API pengguna mudah. 🎜🎜Mula-mula, laksanakan arahan berikut dalam direktori django_project untuk mencipta aplikasi bernama users: 🎜rrreee🎜Buat fail bernama views.py dalam direktori pengguna , dan tambah kod berikut: 🎜rrreee🎜 Fungsi paparan ringkas ini mengembalikan respons JSON dengan maklumat pengguna. 🎜🎜Seterusnya, buka fail django_project/django_project/urls.py dan tambah kod berikut: 🎜rrreee🎜 Coretan kod ini memetakan fungsi paparan get_users ke laluan /api/users kod > Atas. 🎜🎜7. Komunikasi bahagian hadapan dan bahagian belakang🎜Untuk membolehkan bahagian hadapan mengakses API bahagian belakang, kami perlu menggunakan axios untuk menghantar permintaan HTTP. Kembali ke fail vue_project/src/components/HelloWorld.vue dan tambah kod berikut dalam fungsi <code>setup: 🎜rrreee🎜 Coretan kod ini menggunakan axios untuk menghantar permintaan GET ke /api /users code> dan cetak data yang dikembalikan. 🎜🎜8 Jalankan projek🎜Akhir sekali, kami hanya perlu menjalankan projek bahagian hadapan dan bahagian belakang secara berasingan. 🎜🎜Laksanakan arahan berikut dalam direktori vue_project: 🎜rrreee🎜Laksanakan arahan berikut dalam direktori django_project: 🎜rrreee🎜Sekarang, buka penyemak imbas dan lawati <code>http://localhost:8080, jika semuanya berjalan lancar, Anda sepatutnya dapat melihat data yang dikembalikan oleh API bahagian belakang dalam konsol. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara menggunakan Vue3 dan Django4 untuk membina projek tindanan penuh yang lengkap, dan berkongsi beberapa pengalaman praktikal dan contoh kod. Melalui pendekatan pembangunan timbunan penuh ini, kami boleh membina aplikasi web dengan pemisahan bahagian hadapan dan belakang dengan lebih cekap. Saya harap artikel ini dapat membantu pembangun yang sedang mempelajari pembangunan timbunan penuh. 🎜

Atas ialah kandungan terperinci Perkongsian pengalaman praktikal: Panduan pembangunan projek tindanan penuh Vue3+Django4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!