Django、vue3、bootstrap，怎么实现前后端分离

以下是使用Django作为后端、Vue 3和Bootstrap作为前端的详细案例。

1. 搭建Django后端

步骤1: 创建Django项目和应用

确保你已经安装了Django。如果没有，通过pip安装：

pip install django

创建Django项目和应用：

django-admin startproject myproject
cd myproject
python manage.py startapp myapp

步骤2: 定义模型

在myapp/models.py中定义用户模型：

from django.db import models

class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField(unique=True)

    def __str__(self):
        return self.name

步骤3: 配置数据库和迁移

在myproject/settings.py中，确保数据库配置正确（Django默认使用SQLite）。

运行迁移来创建数据库表：

python manage.py makemigrations
python manage.py migrate

步骤4: 安装Django REST framework并创建序列化器

安装DRF：

pip install djangorestframework

在myproject/settings.py的INSTALLED_APPS中添加rest_framework。

在myapp目录下创建一个名为serializers.py的文件，并添加序列化器：

from rest_framework import serializers
from .models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'name', 'email']

步骤5: 创建视图和路由

在myapp/views.py中创建视图集：

from rest_framework import viewsets
from .models import User
from .serializers import UserSerializer

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer

在myapp目录下创建urls.py（如果尚未存在），并配置URLs：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import UserViewSet

router = DefaultRouter()
router.register(r'users', UserViewSet)

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

在myproject/urls.py中包含myapp的urls：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myapp.urls')),
]

步骤6: 运行Django服务器

python manage.py runserver

2. 搭建Vue 3前端

步骤1: 安装Vue CLI并创建项目

确保安装了Node.js和npm。然后安装Vue CLI：

npm install -g @vue/cli

创建Vue项目：

vue create myfrontend
cd myfrontend

选择Vue 3预设或创建后手动升级。

步骤2: 安装Bootstrap和Axios

npm install bootstrap
npm install axios

在main.js或main.ts中引入Bootstrap CSS：

import 'bootstrap/dist/css/bootstrap.min.css';

步骤3: Vue 3 组件

完整的 UserList.vue 组件

<template>
  <div class="container mt-5">
    <h1>用户列表</h1>
    <ul class="list-group">
      <li class="list-group-item" v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('http://localhost:8000/api/users/');
        this.users = response.data;
      } catch (error) {
        console.error('There was an error fetching the users:', error);
      }
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加一些样式，如果需要的话 */
</style>

Vue 3 路由配置

如果你打算在Vue应用中有多个页面或视图，你可能需要设置Vue Router。

安装 Vue Router

npm install vue-router@4

创建路由配置

在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件：

import { createRouter, createWebHistory } from 'vue-router';
import UserList from '../components/UserList.vue';

const routes = [
  {
    path: '/',
    name: 'UserList',
    component: UserList
  }
  // 你可以在这里添加更多的路由
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

在 main.js 或 main.ts 中使用路由

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

确保跨域请求被允许

由于Django默认不允许跨域请求，你可能需要安装并配置Django CORS headers来允许来自你的Vue开发服务器的请求。

安装 Django CORS Headers

pip install django-cors-headers

在 myproject/settings.py 中配置

# 在顶部添加
from corsheaders.defaults import default_headers

# 在MIDDLEWARE部分添加
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

# 允许所有源进行CORS请求
CORS_ALLOW_ALL_ORIGINS = True
# 或者，你可以更具体地设置允许的源
# CORS_ALLOWED_ORIGINS = [
#    "http://localhost:8080",
#    "http://127.0.0.1:8080",
#    "http://example.com",
# ]

# 设置允许的HTTP方法
CORS_ALLOW_METHODS = [
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
]

# 设置允许的HTTP头
CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',
]

# 允许携带凭证
CORS_ALLOW_CREDENTIALS = True

现在，当你运行Vue开发服务器（通常是通过 npm run serve）和Django开发服务器时，你的Vue应用应该能够从Django后端获取用户数据，并显示在页面上。确保Vue开发服务器运行在默认的 http://localhost:8080 或你在Django CORS设置中允许的任何其他URL上。