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

一、前言

前面通过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=trueborder=truestripe 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" align="center"></el-table-column><el-table-column prop="carengsn" label="发动机序号" width="160" align="center"></el-table-column><el-table-column prop="careng_remark" label="备注" width="auto"></el-table-column><el-table-column prop="careng_creator" label="创建人" width="100" align="center"></el-table-column><el-table-column prop="careng_creat_time" label="创建时间" width="120" align="center"></el-table-column><el-table-column prop="careng_revision_by" label="修改人" width="100" align="center"></el-table-column><el-table-column prop="careng_rev_time" label="修改时间" width="120" align="center"></el-table-column></el-table></div>
</template>

ts代码部分:

<script setup lang = "ts">import {ElTable, ElTableColumn} from 'element-plus'import {onMounted, ref} from 'vue'import { getAllModels } from '@/api/api'interface 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 = ref<Type[]>([])// 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 'axios'const axiosInstance = Axios.create({withCredentials: true
})export default axiosInstance

再新建一个api.ts的文件,里面的程序为:

import axiosInstance from './index'const 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_length=100, verbose_name="车型", help_text="车型")carengmodel =models.CharField(default="", max_length=100, verbose_name="发动机型号", help_text="发动机型号")carengpn = models.CharField(default="", max_length=100, verbose_name="发动机物料号", help_text="发动机物料号")carengsn = models.CharField(default="", max_length=100, verbose_name="发动机序号", help_text="发动机序号")careng_remark = models.CharField(default="", blank=True, null=True, max_length=200, verbose_name="备注", help_text="备注")eng_creator = models.CharField(default="", blank=True, max_length=30, verbose_name="创建人", help_text="创建人")careng_creator = models.DateField(auto_now_add=True, blank=True, null=True, verbose_name="添加日期", editable=False )careng_creat_time = models.TimeField(auto_now_add=True, blank=True, null=True, verbose_name="创建日期", editable=False )careng_revision_by = models.CharField(blank=True, default="",   max_length=30, verbose_name="修改人", help_text="修改人")careng_rev_time = models.DateField(auto_now=True, blank=True, verbose_name="修改日期")class Meta:db_table = 'carengines'verbose_name = "汽车发动机列表"verbose_name_plural = verbose_namedef __str__(self):return self.carmodel

Python 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(instance=type, many=True)  # 序列化多条数据需要加上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 = True

4、运行程序,查看结果

点击pycharm运行后,程序没有问题:
Python运行
前端cnpm run dev一下,可以看到前端获取到了后端数据库的数据:
后端到前端

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/843083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习信号和槽(1)

信号和槽函数 一、了解信号和槽的概念二、信号和槽的使用2.1、第一种方法2.2、第二种方法2.3、第三种方法2.4、第四种方法2.5、第五种方法 一、了解信号和槽的概念 信号&#xff08;Signal&#xff09;&#xff1a;就是在特定条件下被发射的事件&#xff0c;比如QPushButton 最…

美国西储大学(CRWU)轴承故障诊断——连续小波(CWT)变换

1.数据集介绍 2.代码 import random import matplotlib matplotlib.use(Agg) from scipy.io import loadmat import numpy as npdef split(DATA):step = 400;size = 1024;data = []for i in range(1, len(DATA) - size, step):data1 = DATA[i:i + size]data.append(data1)rand…

内网穿透初步探索实践

内网穿透初步 正常来说两台Linux设备只有在同一局域网下才可以进行互相的ssh远程登录 那么如果不在一个网段下&#xff0c;比方说一台在家里连着家里的WIFI&#xff0c;一台在学校连着实验室的WIFI&#xff0c;这种情况要想实现ssh远程登录则需要用到内网穿透 这就需要用到一…

什么是期权内在价值?怎么计算?

今天期权懂带你了解什么是期权内在价值&#xff1f;怎么计算&#xff1f;内在价值&#xff0c;也称为内涵价值、内在价格&#xff0c;指的是若期权合约到期&#xff0c;权利方能够赚到的市场价与行权价之间的差价收益。 什么是期权内在价值&#xff1f; 期权的内在价值是指期权…

java项目——图书管理系统

文章目录 前言图书管理系统整体框架&#xff1a;book包user包Main包&#xff1a;iooperation包总结&#xff1a; 前言 针对这些天所学的javaSE的知识&#xff0c;用一个小项目来实践一下。 图书管理系统 整体框架&#xff1a; 采取面向对象的思想实现此项目&#xff0c;首先…

从华为云OBS到AWS云上S3:迁移及相关事项

随着云计算的快速发展&#xff0c;企业越来越倾向于将数据存储和管理移到云端。华为云的对象存储服务&#xff08;OBS&#xff09;和亚马逊云服务&#xff08;AWS&#xff09;上的简单存储服务&#xff08;S3&#xff09;是两个备受欢迎的选择。对于那些考虑从华为云OBS迁移到A…

安全攻防三

一、IDS: 当黑客绕过了防火墙&#xff0c;你该如何发现&#xff1f; IDS &#xff08;Intrusion Detection System&#xff0c;入侵检测系统&#xff09; NIDS 内网中检测网络流量攻击 黑客如果已经进去内网&#xff0c;防火墙就没办法保护了 NIDS部署在交换机和路由器这些路…

从零开始实现自己的串口调试助手(1) - ui界面搭建

UI 界面搭建 ui界面整体演示 ui对象拆分 更多的细节就不方便展开了&#xff0c;下面有提示完成ui设计的提示 在创建工程前 记得把编码改为utf-8 ui设计技巧: ctrl 鼠标左键实现拖动实现复制粘贴 groupBox &#xff1a; 带标题的文本框 栅格布局 -- 只有一个控件的时候会铺满…

vue系列之 插槽(Slot) 详解

插槽在vue中是一种很常见的写法&#xff0c;让父组件可以向子组件指定位置插入html结构&#xff0c;也是一种组件间通信的方式。一共有三种分类&#xff1a;默认插槽、具名插槽、作用域插槽&#xff0c;下面一一结合案例详细说明。原创不易&#xff0c;需要的小伙伴 收藏关注 哦…

基于Vue的自定义服务说明弹窗组件的设计与实现

基于Vue的自定义服务说明弹窗组件的设计与实现 摘要 随着技术的不断发展&#xff0c;前端开发面临着越来越高的复杂性和不断变化的需求。传统开发方式往往将整个系统构建为整块应用&#xff0c;这导致对系统的任何微小改动都可能触发整体的逻辑变更&#xff0c;从而增加了开发…

B站pink老师HTML5基础(一)

文章目录 一、网页1.什么是网页2.什么是HTML二、常用浏览器 三、Web标准四、HTML标签1.HTML基本结构标签 五、快捷键六、常用标签1.标题标签2.段落和换行标签3.文本格式化标签4.div标签和span标签5.图像标签6.图像路径7.超链接标签8.特殊字符 一、网页 1.什么是网页 2.什么是H…

什么是领导力?如何提高领导能力?

什么是领导能力&#xff1f; 简单来说&#xff0c;领导力就是通过自身的影响力&#xff0c;让他人服从自己的想法行动&#xff0c;在一个组织和集体中&#xff0c;领导力的作用十分重要。对于一个公司的管理层来说&#xff0c;领导能力是不可或缺的一部分&#xff0c;公司存在…

黑马python-面向对象程序设计

1.定义类 class 类名&#xff1a; 代码 ….. 注意&#xff1a;类名要满足标识符命名规则&#xff0c;同时遵循大驼峰命名习惯 2.self&#xff1a; self指调用该函数的对象 3.创建对象 对象名类&#xff08;&#xff09; 4.添加获取对象属性 对象名.属性名值 5._init_()方法&…

Hadoop+Spark大数据技术 实验8 Spark SQL结构化

9.2 创建DataFrame对象的方式 val dfUsers spark.read.load("/usr/local/spark/examples/src/main/resources/users.parquet") dfUsers: org.apache.spark.sql.DataFrame [name: string, favorite_color: string ... 1 more field] dfUsers.show() -----------…

李飞飞亲自撰文:大模型不存在主观感觉能力,多少亿参数都不行

近日&#xff0c;李飞飞连同斯坦福大学以人为本人工智能研究所 HAI 联合主任 John Etchemendy 教授联合撰写了一篇文章&#xff0c;文章对 AI 到底有没有感觉能力&#xff08;sentient&#xff09;进行了深入探讨。 「空间智能是人工智能拼图中的关键一环。」知名「AI 教母」李…

【数据结构】P1 数据结构是什么、算法怎样度量

1.1 基本概念与术语 数据&#xff1a; 数据是信息的载体&#xff0c;是所有能被计算机识别以及处理的符号。数据元素&#xff1a; 数据元素是数据基本单位&#xff0c;由若干 数据项 组成&#xff0c;数据项是构成数据元素最小的单位。 e . g . e.g. e.g. 数据元素如一条学生记…

Leetcode 2028

思路&#xff1a;1-6之间的的n个数组合起来要变成sum_t mean*(rolls.size()n) - sum(rolls) ; 那么可以先假设每个数都是sum_t / n 其中这个数必须要在1 - 6 之间否者无法分配。 然后可以得出n * (sum_t / n ) < sum ; 需要对余数mod进行调整&#xff0c;为了减少调整的次…

接口测试及接口测试常用的工具详解

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息…

深入了解 CSS 预处理器 Sass

今天我们来深入探讨一下 CSS 预处理器 Sass。我们将学习什么是 Sass,如何使用它,以及它是如何工作的。 什么是 Sass? Sass 是 syntactically awesome style sheets 的缩写,是一种 CSS 预处理器。它是 CSS 的扩展,为基础 CSS 增加了更多的功能和优雅。普通的 CSS 代码很容…

sklearn监督学习--k近邻算法

sklearn监督学习 一、分类与回归二、泛化、过拟合与欠拟合三、k近邻算法四、分析KNeighborsClassifier五、k近邻算法用于回归优点、缺点和参数 一、分类与回归 监督学习是最常用也是最成功的机器学习类型之一。监督机器学习问题主要有两种&#xff0c;分别叫做分类与回归。分类…