'# VUE3+TS+elementplus+Django+MySQL实现从数据库读取数据，显示在前端界面上
一、背景与问题
在现代Web开发中，前后端分离架构已成为主流模式。本文探讨的VUE3+TS+ElementPlus+Django+MySQL技术栈，是典型的前后端分离方案。通过这种架构，前端应用（Vue3+TypeScript+ElementPlus）与后端服务（Django+MySQL）通过RESTful API进行通信。
核心问题在于：如何在保证数据安全性和性能的前提下，实现前端界面与数据库数据的实时同步？需要解决的关键点包括：
- 前端如何高效展示数据
- 后端如何安全地提供数据接口
- 数据库如何高效存储和查询
- 跨域问题的处理
- 安全防护机制
二、基本原理
1. 技术栈架构
+---------------------+
| 前端应用 |
| Vue3 + TypeScript |
| ElementPlus |
+----------+---------+
|
v
+---------------------+
| Django服务 |
| RESTful API |
+----------+---------+
|
v
+---------------------+
| MySQL数据库 |
| 数据存储 |
+---------------------+2. 数据流方向
- 前端发送HTTP请求（GET/POST）到Django后端
- Django接收请求后，通过ORM操作MySQL数据库
- 数据库返回查询结果
- Django将结果转换为JSON格式返回给前端
- 前端使用ElementPlus组件展示数据
3. 数据通信协议
使用HTTP/HTTPS协议，采用JSON格式数据交换。典型请求格式：
{
"method": "GET",
"url": "/api/users",
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer <token>"
}
}三、环境准备
1. 前端环境
# 安装Vue3项目
npm create vue@latest
# 安装TypeScript和ElementPlus
npm install -D typescript @types/node
npm install element-plus --save
npm install axios --save2. 后端环境
# 创建Django项目
django-admin startproject backend
# 创建应用
python manage.py startapp api
# 安装依赖
pip install django-cors-headers
pip install mysqlclient3. 数据库配置
# settings.py
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'mydatabase',
'USER': 'root',
'PASSWORD': 'password',
'HOST': '127.0.0.1',
'PORT': '3306',
}
}四、核心实现
1. 前端数据获取（TypeScript）
// src/api/user.ts
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://localhost:8000/api',
timeout: 5000,
});
export async function fetchUsers(): Promise<User[]> {
const response = await apiClient.get('/users');
return response.data;
}<!-- src/views/UserList.vue -->
<template>
<el-table :data="users" border style="width: 100%">
<el-table-column prop="id" label="ID" width="120" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="email" label="邮箱" />
</el-table>
</template>
<script setup>
import { ref } from 'vue';
import { fetchUsers } from '@/api/user';
const users = ref<User[]>([]);
async function loadData() {
try {
users.value = await fetchUsers();
} catch (error) {
console.error('加载数据失败:', error);
}
}
loadData();
</script>2. 后端接口实现（Django）
# api/models.py
from django.db import models
class User(models.Model):
name = models.CharField(max_length=100)
email = models.EmailField(unique=True)
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name# api/views.py
from rest_framework import viewsets, status
from rest_framework.response import Response
from .models import User
from .serializers import UserSerializer
class UserViewSet(viewsets.ModelViewSet):
queryset = User.objects.all()
serializer_class = UserSerializer
def get_queryset(self):
return User.objects.filter(is_deleted=False)
def destroy(self, request, *args, **kwargs):
instance = self.get_object()
instance.is_deleted = True
instance.save()
return Response({'status': 'success'}, status=status.HTTP_204_NO_CONTENT)3. 数据库查询优化
# 查询优化示例
from django.db import connection
with connection.cursor() as cursor:
cursor.execute("SELECT * FROM api_user WHERE created_at > %s", [timezone.now() - timedelta(days=7)])
rows = cursor.fetchall()
columns = [col[0] for col in cursor.description]
data = [dict(zip(columns, row)) for row in rows]五、完整案例
1. 用户管理案例
功能需求：展示用户列表，支持删除操作
前端代码：
<!-- src/views/UserList.vue -->
<template>
<div>
<el-button @click="refresh">刷新</el-button>
<el-table :data="users" border style="width: 100%">
<el-table-column prop="id" label="ID" width="120" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作">
<template #default="scope">
<el-button @click="deleteUser(scope.row.id)" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { fetchUsers, deleteUser } from '@/api/user';
const users = ref([]);
async function refresh() {
try {
users.value = await fetchUsers();
} catch (error) {
console.error('刷新数据失败:', error);
}
}
</script>后端代码：
# api/serializers.py
from rest_framework import serializers
from .models import User
class UserSerializer(serializers.ModelSerializer):
class Meta:
model = User
fields = ['id', 'name', 'email', 'created_at']数据库优化：
# 查询优化示例
from django.db import connection
from django.utils import timezone
def get_recent_users(days=7):
with connection.cursor() as cursor:
cursor.execute("""
SELECT id, name, email, created_at
FROM api_user
WHERE created_at > %s
""", [timezone.now() - timezone.timedelta(days=days)])
rows = cursor.fetchall()
columns = [col[0] for col in cursor.description]
return [dict(zip(columns, row)) for row in rows]六、源码解析
1. 前端核心流程
// fetchUsers函数解析
async function fetchUsers(): Promise<User[]> {
const response = await apiClient.get('/users');
return response.data;
}- 使用axios发送GET请求
- 接收JSON格式的响应数据
- 返回类型为User数组
- 自动处理HTTP错误（需补充错误处理逻辑）
2. 后端核心流程
# UserViewSet类解析
class UserViewSet(viewsets.ModelViewSet):
queryset = User.objects.all()
serializer_class = UserSerializer
def get_queryset(self):
return User.objects.filter(is_deleted=False)- 使用ModelViewSet实现CRUD功能
- 自定义get_queryset方法添加软删除过滤
- 自定义destroy方法实现软删除逻辑
七、进阶使用
1. 前端优化
<template>
<el-table :data="users" border style="width: 100%">
<el-table-column prop="id" label="ID" width="120" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="email" label="邮箱" />
<el-table-column label="操作">
<template #default="scope">
<el-button @click="deleteUser(scope.row.id)" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>- 使用Vue3响应式特性
- 使用ElementPlus的组件库
- 实现数据展示与操作
2. 后端优化
# 使用DRF的分页功能
from rest_framework.pagination import PageNumberPagination
class UserPagination(PageNumberPagination):
page_size = 20
page_size_query_param = 'page_size'
max_page_size = 100- 实现分页功能
- 支持客户端指定每页数量
- 避免一次性加载大量数据
八、性能与工程实践
1. 性能优化策略
| 优化策略 | 实现方法 | 效果 |
|---|---|---|
| 分页查询 | 使用DRF的分页功能 | 减少数据传输量 |
| 缓存机制 | 使用Redis缓存热点数据 | 提升响应速度 |
| 数据库索引 | 为常用查询字段添加索引 | 加速查询 |
| 压缩传输 | 使用Gzip压缩响应数据 | 减少网络传输量 |
2. 安全防护措施
# Django安全配置
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]- 启用CSRF保护
- 防止XSS攻击
- 使用HTTPS传输数据
- 对敏感操作进行验证
九、常见问题与踩坑
1. 常见错误示例
# 错误示例：未处理异常
def get_users():
return User.objects.all()问题分析：
- 未处理数据库连接异常
- 未处理ORM查询异常
- 未进行数据验证
改进方案：
# 正确示例
def get_users():
try:
return User.objects.all()
except Exception as e:
logger.error("数据库查询异常:", e)
return []2. 跨域问题解决方案
# Django配置
INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
CORS_ORIGIN_ALLOW_ALL = True注意事项：
- 开发环境可设置CORS_ORIGIN_ALLOW_ALL=True
- 生产环境需配置具体域名
- 可结合JWT进行身份验证
十、最佳实践
1. 推荐方案
- 使用DRF的ModelViewSet实现CRUD
- 使用ElementPlus的组件库实现界面
- 使用TypeScript进行类型校验
- 使用分页和缓存优化性能
- 使用CSRF保护和HTTPS保障安全
2. 不推荐方案
- 在前端直接操作数据库
- 不使用分页直接查询大量数据
- 不进行数据验证和过滤
- 不使用HTTPS传输敏感数据
- 不进行异常处理
十一、总结
本文深入探讨了VUE3+TS+ElementPlus+Django+MySQL技术栈实现前后端数据交互的完整方案。通过具体代码示例，分析了数据流、架构设计、性能优化和安全防护等关键点。在实际开发中，应根据项目需求选择合适的方案，平衡开发效率和系统性能。对于中等规模的Web应用，这种方案是成熟可靠的，但在处理高并发、复杂业务逻辑时，可能需要引入更高级的架构（如微服务、分布式系统）来支持。