网站与系统对接图文方案,网站开发PHP留言本电子版实验作品,新增网站 备案,西安公司一、前言
前面通过VUE3和elementplus创建了一个table#xff0c;VUE3TSelementplus创建table#xff0c;纯前端的table#xff0c;以及使用VUE3TSelementplus创建一个增加按钮#xff0c;使用前端的静态数据#xff0c;显示在表格中。今天通过从后端获取数据来显示在表格…一、前言
前面通过VUE3和elementplus创建了一个tableVUE3TSelementplus创建table纯前端的table以及使用VUE3TSelementplus创建一个增加按钮使用前端的静态数据显示在表格中。今天通过从后端获取数据来显示在表格上后端数据通过Django创建models然后通过navigatecat在数据库表里手动添加一些数据然后通过前端接口来获取和显示。
二、程序展示
1、前端程序
templatediv div styletext-align: right;el-button typesuccess 增加/el-button/divel-table :dataengList :header-cell-style{background:#DBDBDB, fontSize:14px, text-align:center} highlight-current-rowtruebordertruestripe stylewidth: 100% el-table-column typeindex label序号 width60 aligncenter/el-table-columnel-table-column propcarmodel label车型 width120 aligncenter/el-table-columnel-table-column propcarengmodel label发动机型号 width160 aligncenter/el-table-columnel-table-column propcarengpn label发动机物料号 width160 aligncenter/el-table-columnel-table-column propcarengsn label发动机序号 width160 aligncenter/el-table-columnel-table-column propcareng_remark label备注 widthauto/el-table-columnel-table-column propcareng_creator label创建人 width100 aligncenter/el-table-columnel-table-column propcareng_creat_time label创建时间 width120 aligncenter/el-table-columnel-table-column propcareng_revision_by label修改人 width100 aligncenter/el-table-columnel-table-column propcareng_rev_time label修改时间 width120 aligncenter/el-table-column/el-table/div
/templatets代码部分
script setup lang tsimport {ElTable, ElTableColumn} from element-plusimport {onMounted, ref} from vueimport { getAllModels } from /api/apiinterface Type {id: string; // id号carmodel: string; // 型号carengmodel: string; // carengpn: string; // 发布时间carengsn: string;careng_remark: string;careng_creator: string;careng_creat_time: date;careng_revision_by: string;careng_rev_time: string;
}var engList refType[]([])// const engList [// {// carmodel: 熊猫,// carengmodel: WLZY01,// carengpn: GD15T,// carengsn: 20220511ASD,// careng_remark: 升级款,// careng_creator: 张三,// careng_creat_time: 2024-5-23,// careng_revision_by: ,// careng_rev_time: ,// }// ]onMounted(() {getAllModels(carmodel).then((res: any) {console.log(res);engList.value res.data.data;// console.log(engList);});});/script通过定义一个interface接口缓存用来存从后端数据库获取的数据。 通过onMounted将获取所有数据getAllModels(‘carmodel’)绑定在主界面。 getAllModels(‘carmodel’)为接口函数通过axios来实现。
2、axios接口
首先安装axios然后新建一个index.TS里面的程序为
import Vue from vue
import Axios from axiosconst axiosInstance Axios.create({withCredentials: true
})export default axiosInstance再新建一个api.ts的文件里面的程序为
import axiosInstance from ./indexconst axios axiosInstance
const localhost 127.0.0.1 export const getAllModels (address) {return axios.request({url: http://localhost:8000/engineering/ address /,method: get,})
}localhost ‘127.0.0.1’ 这个地址是后端Django服务器在本机的地址。
3、后端Django的程序
3.1、在settings里面配置数据库
# 按如下配置依次是数据库引擎名称用户名密码主机端口。在安装mysql时设置的账户密码等。
DATABASES {default: {ENGINE:django.db.backends.mysql,HOST: 127.0.0.1,PORT: 3306,NAME: ammsdb,USER: root,PASSWORD: 123}
}3.2、在models里创建数据库模型
# 汽车发动机型号的数据库
class CarEngines(models.Model):carmodel models.CharField(default, max_length100, verbose_name车型, help_text车型)carengmodel models.CharField(default, max_length100, verbose_name发动机型号, help_text发动机型号)carengpn models.CharField(default, max_length100, verbose_name发动机物料号, help_text发动机物料号)carengsn models.CharField(default, max_length100, verbose_name发动机序号, help_text发动机序号)careng_remark models.CharField(default, blankTrue, nullTrue, max_length200, verbose_name备注, help_text备注)eng_creator models.CharField(default, blankTrue, max_length30, verbose_name创建人, help_text创建人)careng_creator models.DateField(auto_now_addTrue, blankTrue, nullTrue, verbose_name添加日期, editableFalse )careng_creat_time models.TimeField(auto_now_addTrue, blankTrue, nullTrue, verbose_name创建日期, editableFalse )careng_revision_by models.CharField(blankTrue, default, max_length30, verbose_name修改人, help_text修改人)careng_rev_time models.DateField(auto_nowTrue, blankTrue, verbose_name修改日期)class Meta:db_table carenginesverbose_name 汽车发动机列表verbose_name_plural verbose_namedef __str__(self):return self.carmodelPython manage.py makemogrations、Python manage.py migrate一下打开navigatecat看一下数据库表已经创建成功。
在表里人工添加一些数据:
3.3、对models数据库进行序列化
#汽车发动机主数据库序列化
#********************************************
class carenginesModelSerializers(serializers.ModelSerializer):class Meta: #在serializers.ModelSerializer特有model models.CarEngines # 左为序列化地址 右为模型fields __all__ # __all__表示所有字段也可以在这之后放入列表来序列化特定的字段3.4、创建视图函数
class carmodelAPIView(APIView):def get(self, request):response_dic utils.MyResponse()type models.CarEngines.objects.all() # 获得全部type对象type_ser carenginesModelSerializers(instancetype, manyTrue) # 序列化多条数据需要加上many参数response_dic.data type_ser.dataprint(response_dic.dict)return Response(response_dic.dict)3.5、在urls里增加地址
urlpatterns [from django.urls import path,re_pathfrom . import viewsre_path(^carmodel, views.carmodelAPIView.as_view()),
]3.6 设置跨域
# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL True
CORS_ALLOW_CREDENTIALS True4、运行程序查看结果
点击pycharm运行后程序没有问题 前端cnpm run dev一下可以看到前端获取到了后端数据库的数据
