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

news/2024/7/22 0:15:02/文章来源: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=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.luyixian.cn/news_show_1053183.aspx

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

相关文章

大数据开发面试题【Kafka篇】

83、介绍下Kafka&#xff0c;Kafka的作用?Kafka的组件?适用场景? kafka是一个高吞吐量、可扩展的分布式消息传递系统&#xff0c;在处理实时流式数据&#xff0c;并能够保证持久性和容错性 可用于数据管道、流分析和数据继承和关键任务应用&#xff08;发布/订阅模式&#…

【Python】 Django 框架如何支持百万级日访问量

基本原理 Django 是一个高级的 Python Web 框架&#xff0c;它鼓励快速开发和干净、实用的设计。Django 遵循 MVC&#xff08;模型-视图-控制器&#xff09;设计模式&#xff0c;允许开发者通过编写更少的代码来构建高质量的 Web 应用程序。Django 自带了许多内置功能&#xf…

学习笔记——STM32F103V3版本——HC-05模块控制数码管

一.硬件 1.HC-05模块 2.数码管 3.连接硬件 二.在keil5中的代码 main.c代码&#xff1a; #include "stm32f10x.h" #include "buletooth.h" #include "led.h" #include "sys.h" #include "usart.h" #include "delay.…

目标检测数据集 - 工地工人安全设备佩戴检测数据集下载「包含VOC、COCO、YOLO三种格式」

数据集介绍&#xff1a;工地工人安全设备佩戴检测数据集&#xff0c;真实场景数据生成增强后高质量图片数据&#xff0c;涉及场景丰富&#xff0c;比如楼宇建筑工地工人作业数据、道路建筑工地工人作业数据、室内工地工人作业数据、露天挖掘场景工人作业数据、工地工人自拍摆拍…

SpringBoot+layuimini实现角色权限菜单增删改查(layui扩展组件 dtree)

角色菜单 相关组件方法效果图MySQL代码实现资源菜单树组件实现权限树方法js这里我先主要实现权限树的整体实现方法&#xff0c;如果是直接查看使用的话可以只看这里&#xff01; 后端代码Controlle层代码Service代码及实现类代码Service代码ServiceImpl代码 resourceMapper 代码…

斯坦福大学ALOHA家务机器人团队发布了最新研究成果—YAY Robot语言交互式操作系统

ALOHA YAY 演示视频-智能佳 斯坦福的ALOHA家务机器人团队&#xff0c;发布了最新研究成果—Yell At Your Robot&#xff08;简称YAY&#xff09;&#xff0c;有了它&#xff0c;机器人的“翻车”动作&#xff0c;只要喊句话就能纠正了&#xff01; 标ALOHA2协作平台题 而且机器…

破解微信校验难题,Xinstall助你轻松实现Universal Link功能!

在移动互联网时代&#xff0c;App的推广和运营离不开各种技术手段的支持。其中&#xff0c;Universal Link作为连接App和网页的重要桥梁&#xff0c;被广大开发者所青睐。然而&#xff0c;很多开发者在使用Universal Link时遇到了微信校验不通过的问题&#xff0c;这不仅影响了…

数据库语法树优化

目录 一、σ、π、⋈ 1.选择σ 2.投影π 3.连接⋈ 二、 构建语法树 ① 解读sql语句 ② 写出关系代数表达式 ③ 画出语法树 三、优化语法树 四、练习 语法树优化方法 一、σ、π、⋈ 1.选择σ 选择就是在关系R中选择满足给定条件的诸元组。 通过条件SdeptIS选择出系别…

基于C#开发web网页管理系统模板流程-主界面管理员录入和编辑功能完善

前言 紧接上篇->基于C#开发web网页管理系统模板流程-登录界面和主界面_c#的网页编程-CSDN博客 已经完成了登录界面和主界面&#xff0c;本篇将完善主界面的管理员录入和编辑功能&#xff0c;事实上管理员录入和编辑的设计套路适用于所有静态表的录入和编辑 首先还是介绍一下…

Android环境下Mesa初始化流程重学习之eglInitialize

Mesa初始化流程重学习之eglInitialize 引言 说来也惭愧&#xff0c;Mesa搞了这么久了&#xff0c;每次都想深入下&#xff0c;可是每次都是浅尝辄止了。这次趁着有了一定的闲暇时间并且有了调试景嘉微显卡的机会&#xff0c;还是想重新学习下&#xff0c;深入研究下&#xff0…

【软件设计师】——5.数据库系统

目录 5.1 基本概念 5.2 三级模式两级映射 5.3 设计过程和数据模型 5.4 关系代数 5.5 完整性约束 5.6 规范化和反规范化 5.7 控制功能 5.8 SQL语言 5.9 数据库安全 5.10 数据备份 5.11 数据库故障与恢复 5.12 数据仓库、数据挖掘和大数据 5.1 基本概念 相关术语 候选…

12.可视化实现

时间过的很快,不知不觉已到第十二章。经过前面教程的讲解和实践,数据接入服务的功能已初步完成。 此章节将通过可视化的实现,对设备接入进行监控,实时监听设备的接入情况及设备的在线时长。 并且可以通过订阅按钮、取消订阅按钮、查看数据按钮,对上报数据进行实时的跟踪…

AWS容器之Amazon ECS

Amazon Elastic Container Service&#xff08;Amazon ECS&#xff09;是亚马逊提供的一种完全托管的容器编排服务&#xff0c;用于在云中运行、扩展和管理Docker容器化的应用程序。可以理解为Docker在云中对应的服务就是ECS。

OC IOS 文件解压缩预览

热很。。热很。。。。夏天的城市只有热浪没有情怀。。。 来吧&#xff0c;come on。。。 引用第三方库&#xff1a; pod SSZipArchive 开发实现&#xff1a; 一、控制器实现 头文件控制器定义&#xff1a; // // ZipRarViewController.h // // Created by carbonzhao on 2…

手搓顺序表(C语言)

目录 SeqList.h SeqList.c 头插尾插复用任意位置插入 头删尾删复用任意位置删除 SLtest.c 测试示例 顺序表优劣分析 SeqList.h //SeqList.h#pragma once#include <stdio.h> #include <assert.h> #include <stdlib.h> #define IN_CY 3typedef int S…

系统管理、磁盘分区

系统管理 业务层面&#xff1a;为了满足一定的需求所做的特定操作。 硬盘是什么&#xff0c;硬盘的作用&#xff1a; **硬盘&#xff1a;**计算机的存储设备&#xff0c;机械硬盘是由一个或者多个磁性的盘组成&#xff0c;可以在盘片上进行数据的读写。 连接方式&#xff1a…

开源VS闭源:谁将引领AI大模型的新时代?

一、引言 随着人工智能技术的飞速发展&#xff0c;AI大模型已成为推动这一浪潮的核心动力。在AI大模型的发展过程中&#xff0c;开源与闭源两种不同的发展路径一直备受关注。本文将深入探讨这两种路径的优劣势&#xff0c;分析它们对AI大模型发展的影响&#xff0c;并预测谁将…

深入了解 CSS 预处理器 Sass

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

从git上拉取项目进行操作

1.Git的概念 Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速的处理从很小到非常大的项目版本管理。它实现多人协作的机制是利用clone命令将项目从远程库拉取到本地库&#xff0c;做完相应的操作后再利用push命令从本地库将项目提交至远程库。 2.Git的工作流程…

惯性测量单元M-G370系列广泛用于工业系统各个领域

爱普生现已推出型号为M-G370系列的高稳定性、高精度及极小尺寸封装的惯性测量单元(IMU)&#xff0c;可广泛应用于工业系统的各个领域。 为了节省PCB的面积和产品空间&#xff0c;M-G370系列性测量单元设计精巧&#xff0c;且具有6个自由度:三轴角速率和三轴线性加速度&…