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

本文链接：https://blog.csdn.net/xll_007/article/details/139270282

一、前言

前面通过VUE3和elementplus创建了一个table，VUE3+TS+elementplus创建table，纯前端的table，以及使用VUE3+TS+elementplus创建一个增加按钮，使用前端的静态数据，显示在表格中。今天通过从后端获取数据来显示在表格上，后端数据通过Django创建models，然后通过navigatecat在数据库表里手动添加一些数据，然后通过前端接口来获取和显示。

二、程序展示

1、前端程序

<template>
	<div >
		<div style="text-align: right;">
			<el-button type="success" >增加</el-button>
		</div>
		
		<el-table		
		:data="engList" 
		:header-cell-style="{background:'#DBDBDB', fontSize:'14px', 'text-align':'center'}" 
		highlight-current-row=true
		border=true
		stripe 
		style="width: 100%" 
		
		>
		
			<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
			<el-table-column prop="carmodel" label="车型" width="120" align="center"></el-table-column>
			<el-table-column prop="carengmodel" label="发动机型号" width="160" align="center"></el-table-column>
			<el-table-column prop="carengpn" label="发动机物料号" width="160"<