以下是一个简化的示例，展示了如何在Vue 3、TypeScript、Element Plus和Django中从MySQL数据库读取数据并显示在前端界面上。
Vue 3 + TypeScript 前端部分
- 安装依赖：
npm install vue@next
npm install @vue/compiler-sfc
npm install element-plus --save
npm install axios
- 创建一个Vue组件，例如
HomeView.vue：
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios';
export default defineComponent({
name: 'HomeView',
setup() {
const tableData = ref([]);
const fetchData = async () => {
try {
const response = await axios.get('/api/data/');
tableData.value = response.data;
} catch (error) {
console.error(error);
}
};
onMounted(fetchData);
return {
tableData,
};
},
});
</script>
Django 后端部分
- 安装Django REST framework：
pip install djangorestframework
pip install djangorestframework-simplejwt # 如果需要认证
pip install pymysql # 用于连接MySQL
- 在
settings.py中配置数据库和添加rest_framework到INSTALLED_APPS。 - 创建一个序列化器：
from rest_framework import serializers
from .models import YourModel
class YourModelSerializer(serializers.ModelSerializer):
class Meta:
model = YourModel
fields = '__all__' # 或者列出所有你想要序列化的字段
- 创建一个视图：
from rest_framework import generics
from .models import YourModel
from .serializers import YourModelSerializer
class YourModelListView(generics.ListAPIView):
queryset = YourModel.objects.all()
serializer_class = YourModelSerializer
- 配置URLs：
from django.urls import path
from .views import YourModelListView
urlpatterns = [
path('api/data/', YourModelListView.as_view()),
]
确保你的MySQL数据库已经配置在Django的DATABASES设置