VUE3+TS+elementplus+Django+MySQL实现从数据库读取数据，显示在前端界面上

以下是一个简化的示例，展示了如何在Vue 3、TypeScript、Element Plus和Django中从MySQL数据库读取数据并显示在前端界面上。

Vue 3 + TypeScript 前端部分

1. 安装依赖：

npm install vue@next
npm install @vue/compiler-sfc
npm install element-plus --save
npm install axios

2. 创建一个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 后端部分

1. 安装Django REST framework：

pip install djangorestframework
pip install djangorestframework-simplejwt  # 如果需要认证
pip install pymysql  # 用于连接MySQL

2. 在settings.py中配置数据库和添加rest_framework到INSTALLED_APPS。
3. 创建一个序列化器：

from rest_framework import serializers
from .models import YourModel
 
class YourModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = YourModel
        fields = '__all__'  # 或者列出所有你想要序列化的字段

4. 创建一个视图：

from rest_framework import generics
from .models import YourModel
from .serializers import YourModelSerializer
 
class YourModelListView(generics.ListAPIView):
    queryset = YourModel.objects.all()
    serializer_class = YourModelSerializer

5. 配置URLs：

from django.urls import path
from .views import YourModelListView
 
urlpatterns = [
    path('api/data/', YourModelListView.as_view()),
]

确保你的MySQL数据库已经配置在Django的DATABASES设置