当前位置：首页 > news >正文

展示和添加篮球队信息--laravel与elementplus

news 来源：原创 2025/5/12 19:05:51

之前使用laravel与inertia来做过一样的功能，感觉不满意，因此再结合elementplus重做一遍，先展示下重做后的效果。重写后的代码相比之下比较优雅。

球队首页

球队添加页

球员首页

很明显的改变，我新增了侧栏菜单来控制局部模块（这里是指NBABasketball模块）。按钮则换了一遍，不再使用<Link>。跳转重新渲染整个页面是令人难受的，因此相比MPA模式，SPA模式更受欢迎，这里的思路是采用SPAs模式。意思就是在系统中模块尽可能用SPA模式解决，只有模块入口是用后端渲染的方式。

看上图结构，最下面那个Index.vue相当于是NBABasketball模块的入口。这个入口是通过后端渲染出来，如下图

那剩下的NBABasketball模块的页面呢？这个则是通过前端路由来管理，如下图

然后侧栏菜单负责引用路由，以下是NBABasketball模块的Index.vue入口文件代码

<script lang="ts" setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { useMenuStore } from '@/stores/menuStore';
import {Location,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {console.log(key, keyPath)
}const menuStore = useMenuStore();
</script><template><AuthenticatedLayout><el-row class="tac"

展示和添加篮球队信息--laravel与elementplus

之前使用laravel与inertia来做过一样的功能，感觉不满意，因此再结合elementplus重做一遍，先展示下重做后的效果。重写后的代码相比之下比较优雅。球队首页球队添加页球员首页很明显的改变，我新增了侧栏菜单来控制局部模块（这里是指NBABasketba…...

编程日记 2025/5/12 19:05:51

K8S疑难概念理解——Pod,应该以哪种Kind来部署应用，为什么不直接Pod这种kind?

文章目录一、Pod概念深度理解，为什么一般不直接以kindPod资源类型来部署应用?二、究竟应该以哪种资源类型来部署应用一、Pod概念深度理解，为什么一般不直接以kindPod资源类型来部署应用? Pod是Kubernetes中的最小部署单元，可以包含一个或…...

编程日记 2025/5/6 10:01:14

centos7怎么安装keepalive+nginx

在CentOS 7上安装Keepalived和Nginx，可以按照以下步骤进行： 安装Nginx 添加Nginx到Yum源： rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm安装Nginx： yum install -y ng…...

编程日记 2025/5/12 19:04:39

DevOps工程技术价值流：Jenkins驱动的持续集成与交付实践

一、Jenkins系统概述 Jenkins：开源CI/CD引擎的佼佼者 Jenkins，作为一款基于Java的开源持续集成（CI）与持续交付（CD）系统，凭借其强大的插件生态系统，成为DevOps实践中不可或缺的核心…...

编程日记 2025/5/12 3:51:16

el-select 修改样式

这样漂亮的页面，搭配的却是一个白色风格的下拉框 ，这也过于刺眼。。。调整后样式为： 灯红酒绿总有人看着眼杂，但将风格统一终究是上上选择。下面来处理这个问题。分为两部分。第一部分：是修改触发框的样式第二部…...

编程日记 2025/5/12 17:53:25

文本内容处理命令和正则表达式

文本内容处理命令 grep 用来过滤文本内容，以匹配要查询的结果。 -m 数字匹配几次后停止： grep -m 1 /root/etc/passwd #查找包含root的行 -v 取反 -i 忽略字符的大小写，默认的，可以不加 -n 显示匹配的行号 -c 统计匹配的…...

编程日记 2025/5/12 18:31:36

【PlantUML系列】类图（一）

目录一、类二、接口三、抽象类四、泛型类五、类之间的关系六、添加注释七、包图八、皮肤参数一、类使用class关键字定义类，类名后跟大括号，声明类的属性和方法。属性：格式为{visibility} attributeName : AttributeType…...

编程日记 2025/5/12 17:55:50

【Leetcode Top 100】21. 合并两个有序链表

问题背景将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。数据约束两个链表的节点数目范围是 [ 0 , 50 ] [0, 50] [0,50] − 100 ≤ N o d e . v a l ≤ 100 -100 \le Node.val \le 100 −100≤Node.val≤100 l 1 l_1 …...

编程日记 2025/5/12 17:37:15

【真正离线安装】Adobe Flash Player 32.0.0.156 插件离线安装包下载（无需联网安装）

网上很多人声称并提供的flash离线安装包是需要联网才能安装成功的，其实就是在线安装包，而这里提供的是真正的离线安装包，无需联网即可安装成功。点击下面地址下载离线安装包： Adobe Flash Player 32.0.0.156 for IE Adobe Fla…...

编程日记 2025/5/7 15:08:30

UG NX二次开发(C#)-如何进行NX多版本的编译

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 1、前言2、以删除对象为例3、解决方案1、前言由于UG NX的版本不同，新版本与旧版本开发过程中，如果是在一个工程中，其会出现低版本不能编译高版本NX的问题，这是因为高版本会引入新的函数，或者…...

编程日记 2025/5/12 18:37:36

Spark优化--开发调优、资源调优、数据倾斜调优和shuffle调优等

针对Spark优化，我们可以从多个角度进行，包括开发调优、资源调优、数据倾斜调优和shuffle调优等。以下是一些具体的优化方法： 1. 开发调优避免创建重复的RDD：对于同一份数据，只应该创建一个RDD，避免创建多…...

编程日记 2025/4/29 14:46:45

911事件反思：灾难通信和ddos之间的取舍

流量分析与监控建立基线流量模型：在正常情况下监控和记录网络流量，建立正常流量的基线。这样，当突发请求发生时，可以更容易地识别出流量的异常变化。实时流量监控：使用流量分析工具实时监控网络流量，快速…...

编程日记 2025/5/12 18:42:57

网络安全之IP伪造

眼下非常多站点的涉及存在一些安全漏洞，黑客easy使用ip伪造、session劫持、xss攻击、session注入等手段危害站点安全。在纪录片《互联网之子》（建议搞IT的都要看下）中。亚伦斯沃茨（真实人物，神一般的存在）涉…...

编程日记 2025/5/12 17:47:21

思路： 本题最简单的就是通过递归的形式去实现 class Solution {public ListNode swapPairs(ListNode head) {if(head null || head.next null){return head;}ListNode next head.next;head.next swapPairs(next.next);next.next head;return next;} } 对于链…...

编程日记 2025/5/11 3:02:29

Shell脚本小练习

学习了这么长时间Shell脚本，总得来一次小小的练习吧，那么请看下文！ 1.用Shell写一个小计算器。通过read命令获取用户输入的表达式，表达式的格式设定为操作数1 运算符操作数2，例如53，然后利用设计的脚本…...

编程日记 2025/5/12 10:20:14

Fastify装饰器：增强你的路由处理功能加入日志

Fastify以其出色的性能和扩展性脱颖而出。装饰器是Fastify提供的一个强大功能，它允许开发者在不修改核心代码的情况下，向请求（Request）和响应（Response）对象添加自定义属性和方法。本文将通过一个简单的示例…...

编程日记 2025/5/12 18:29:10

node.js基础学习-url模块-url地址处理（二）

前言前面我们创建了一个HTTP服务器，如果只是简单的http://localhost:3000/about这种链接我们是可以处理的，但是实际运用中一般链接都会带参数，这样的话如果我们只是简单的判断链接来分配数据，就会报404找不到链接。为了解决这个问…...

编程日记 2025/5/12 18:02:53

Vue如何加载十万条数据

加载十万条数据到 Vue 应用中是一个相对复杂的问题，主要因为渲染大量数据可能会导致性能瓶颈，尤其是在前端性能较低的设备上。为了确保加载大量数据时，页面不会卡顿或崩溃，我们通常采取一些优化手段，以下是几种常用的方…...

编程日记 2025/5/12 12:53:37

重生之我在异世界学编程之C语言：二维数组篇

大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！ 本文目录引言正文一二维数组的创建1. 二维数组的…...

编程日记 2025/5/11 22:35:21

linux——进程间通信及管道的应用场景

linux进程的控制-CSDN博客 liunx——进程间通信（管道通信）-CSDN博客文章目录文章目录前言二、管道的应用 1.创建子进程 1、描述： 2.创建进程及管理 3、子进程接受任务 4、控制子进程总结前言上篇博客我们学习了进程间通信&…...

编程日记 2025/5/10 13:01:08

深度学习基础3

目录 1.过拟合与欠拟合 1.1 过拟合 1.2 欠拟合 1.2 解决欠拟合 1.2.1 L2正则化 1.2.2 L1正则化 1.2.3 Dropout 1.2.4 简化模型 1.2.5 数据增强 1.2.6 早停 1.2.7 模型集成 1.2.8 交叉验证 2.批量标准化 2.1 实现过程 2.1.1 计算均值和方差 2.1.2 标准化 2.1.3…...

编程日记 2025/5/11 4:06:00

靶机dpwwn-01

靶机下载地址：https://download.vulnhub.com/dpwwn/dpwwn-01.zip 信息收集扫描靶机的IP地址 arp-scan -l 获得靶机的IP地址：192.168.200.130 查看靶机的服务类型，端口信息 nmap -sS -sV -T4 -A -p- 192.168.200.130 开启了22&#xf…...

编程日记 2025/5/12 18:27:58

Python毕业设计选题：基于django+vue的智慧社区可视化平台的设计与实现+spider

开发语言：Python框架：djangoPython版本：python3.7.7数据库：mysql 5.7数据库工具：Navicat11开发软件：PyCharm 系统展示管理员登录管理员功能界面养老机构管理业主管理社区安防管理社区设施管理车位…...

编程日记 2025/5/12 18:00:31

大语言模型微调与 XTuner 微调实战

1 大语言模型微调 1.1 什么是微调大语言模型微调（Fine-tuning of Large Language Models）是指在预训练的大型语言模型基础上，使用特定任务的数据进一步训练模型，以使其更好地适应和执行特定任务的过程，用于使LLM&am…...

编程日记 2025/5/3 14:02:39

数据结构-查找（四）总结与对比

查找算法总结文章目录查找算法总结一、查找的基本概念二、顺序查找法适用场景三、分块查找法适用场景四、折半查找法（Binary Search）适用场景五、树型查找1. 二叉搜索树（BST）2. 平衡二叉树（AVL）3. 红黑…...

编程日记 2025/5/12 17:49:54

c++总复习

一、什么是 C 中的函数对象？它有什么特点？ 在 C 中，函数对象（Function Object）也称为仿函数（Functor），它是一个类的实例，该类重载了函数调用运算符()，使得这个…...

编程日记 2025/5/7 10:32:47

AJAX一、axios使用，url组成（协议，域名，资源路径）查询参数和化简，错误处理，请求/响应报文，状态码，接口文档，

一、AJAX是什么概念 ： AJAX是一种与服务器（后端）通信的技术二、请求库axios的基本用法 1导包 2使用 // 1. 发请求 axios({ url: 请求地址 }).then(res > { // 2.接收并使用数据 }) <body><p class"province"…...

编程日记 2025/5/12 18:18:57

Python学习笔记

MJ大神的Python课，课堂笔记 int 和float运算结果是 float除法（/）的结果是float整除（//），向下取整(floor)int 和 int 进行整除（//）,得到的结果是int 绘制一个填充色边框色 import …...

编程日记 2025/5/12 18:22:49

开源 - Ideal库 - Excel帮助类，TableHelper实现（三）

书接上回，我们今天继续讲解实现对象集合与DataTable的相互转换。 01、把表格转换为对象集合该方法是将表格的列名称作为类的属性名，将表格的行数据转为类的对象。从而实现表格转换为对象集合。同时我们约定如果类的属性设置了DescriptionAttribute特性…...

编程日记 2025/5/7 7:00:11

ceph手动部署

ceph手动部署一、节点规划主机名IP地址角色ceph01.example.com172.18.0.10/24mon、mgr、osd、mds、rgwceph02.example.com172.18.0.20/24mon、mgr、osd、mds、rgwceph03.example.com172.18.0.30/24mon、mgr、osd、mds、rgw 操作系统版本： Rocky Linux release …...

编程日记 2025/5/9 17:55:01

macOS 开发环境配置与应用开发指南

macOS 开发环境配置与应用开发指南 macOS作为苹果公司推出的操作系统，因其稳定性、优雅的用户界面和强大的开发支持，已成为开发者和创意专业人士的首选平台之一。无论是开发iOS、macOS桌面应用，还是Web应用、跨平台程序，macOS都提…...

编程日记 2025/5/8 2:56:37

自动化是语法，智能化是语义与语用

自动化与智能化可以从语言学的角度来进行类比和探讨。 1. 自动化是语法自动化可以类比为“语法”的部分，因为它关注的是操作过程的规则、结构和执行方式。语法是语言中关于词汇、句子结构和规则的系统，它提供了语言运作的框架和规范。类似地&#xff0c…...

编程日记 2025/5/8 3:44:07

基于DHCP，ACL的通信

该问题为华为的学习资料 1.首先把所有的PC机全部设置为DHCP 2.配置地址 3.ospf 4.dhcp 5.acl AR1 dhcp en interface GigabitEthernet0/0/0ip address 192.168.1.254 255.255.255.0 dhcp select global interface GigabitEthernet0/0/1ip address 10.1.12.1 255.255.255.…...

编程日记 2025/5/4 5:55:41

Unity跨平台基本原理

Unity跨平台基本原理 Unity跨平台基本原理微软的.Net是什么微软做 .Net平台的目的如何实现的.Net跨语言？总结 .Net Framework.Net Framework的体系结构CLR总结如何实现的跨平台？.Net Core.Net FrameWork 到 .Net CoreMonoMono如何实现跨平台总结如何实现…...

编程日记 2025/5/12 16:00:37

基于 Python、OpenCV 和 PyQt5 的人脸识别上课打卡系统

大家好，我是Java徐师兄，今天为大家带来的是基于 Python、OpenCV 和 PyQt5 的人脸识别上课签到系统。该系统采用 Python 语言开发，开发过程中采用了OpenCV框架，Sqlite db 作为数据库，系统功能完善 ，实用性强…...

编程日记 2025/5/12 1:59:14

IDEA的简易安装思路

IDEA(本身就是Java开发的)：是目前为止开发Java效率最高的工具，但正版收费……（eclipse的话不好说，反正还是随主流吧） 使用IDEA的前提：必须先安装JDK【否则直接使用IDEA工具来运行程序是无效的，它…...

编程日记 2025/5/6 21:26:16

【实战】在Koa.js中实现文件上传的接口（本地存储）

目录环境准备使用 koa-body 中间件获取上传的文件使用 Postman 测试使用 koa-static 中间件生成图片链接编写前端页面上传文件文件上传是一个基本的功能，每个系统几乎都会有，比如上传图片、上传Excel等。那么在Node Koa应用中如何实现一个支持…...

编程日记 2025/5/7 2:51:23

flink学习（10）——allowedLateness/测道输出

allowedLateness(lateness: Time) 水印：短期延迟，达到条件后触发计算并且关闭窗口（触发关闭同时进行） 水印allowedLateness : 短期延迟等待长期延迟效果 1、达到水印条件后，会触发窗口计算，但是不关闭窗口…...

编程日记 2025/5/7 15:40:33

微信小程序按字母顺序渲染城市功能实现详细讲解

在微信小程序功能搭建中，按字母渲染城市会用到多个ES6的方法，如reduce，map，Object.entries()，Object.keys() ，需要组合熟练掌握，才能优雅的处理数据完成渲染。目录一、数据分析二、数据处理 …...

编程日记 2025/5/11 22:06:00

openjdk17 jvm 对象内存溢出在C++源码体现

##java大对象类 public class MiBigObject {private String f1;private String f2;private String f3;private String f4;private String f5;private String f6;private String f7;private String f8;private String f9;private String f10;private String f11;private String…...

编程日记 2025/4/29 22:00:08

相关文章：