以下是使用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上。