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

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

        之前使用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…...

写一份客服网络安全意识培训PPT

一、为什么要对客服人员定期进行网络安全培训呢&#xff1f; 人员组成复杂&#xff1a;企业既有自由人员又有采购的外包公司客服&#xff0c;为了节约成本可能外包占大多数&#xff0c;这必然加强了人群的流动性所以往往得不到系统的培训。人员素质参差不齐&#xff1a;因为工…...

具体的技术和工具在县级融媒体建设3.0中有哪些应用?

以下是结合数据来看县级融媒体建设3.0的一些情况&#xff1a; 技术应用方面 大数据&#xff1a;人民网舆情数据中心执行主任董盟君提到&#xff0c;通过大数据分析可让融媒体单位快速关注聚焦点&#xff0c;实现智能策划、智能推送、智能传播&#xff0c;推动媒体传播影响力提…...

【uniapp】轮播图

前言 Uniapp的swiper组件是一个滑块视图容器组件&#xff0c;可以在其中放置多个轮播图或滑动卡片。它是基于微信小程序的swiper组件进行封装&#xff0c;可以在不同的平台上使用&#xff0c;如微信小程序、H5、App等。 效果图 前端代码 swiper组件 <template><vi…...

Rust编程语言代码详细运行、编译方法

以下是针对不同类型的 Rust 代码&#xff08;以常见的命令行程序为例&#xff09;详细的运行方法&#xff1a; 前提条件 在运行 Rust 代码之前&#xff0c;确保你已经在系统上安装了 Rust 编程语言环境。如果尚未安装&#xff0c;可以通过以下步骤进行安装&#xff1a; 访问…...

node.js基础学习-http模块-JSONP跨域传值(四)

前言 JSONP&#xff08;JSON with Padding&#xff09;是一种用于跨域数据传输的技术。在浏览器的同源策略限制下&#xff0c;一般情况下&#xff0c;JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用 <script> 标签的跨域特性来绕过这个限制。 它本质上是一…...

Unity高效编程经验50条分享

1.避免频繁创建临时对象 错误写法&#xff1a;obj.transform.position pos;这种写法会在Lua中频繁返回transform对象导致gc正确写法&#xff1a;创建一个静态方法来设置位置&#xff0c;例如 class LuaUtil { static void SetPos(GameObject obj, float x, float y, float z)…...

TypeScript 泛型

在 TypeScript 中&#xff0c;泛型是一种强大的工具&#xff0c;它允许你在定义函数、类、接口或类型别名时不指定具体的类型。这意味着你可以为这些实体创建可重用的组件&#xff0c;这些组件可以在不同的类型上以一致的方式工作。今天&#xff0c;我们将深入探讨 TypeScript …...

【Java从入门到放弃 之 条件判断与循环】

条件判断与循环 条件判断if 语句if-else 语句if-else 嵌套语句switch 语句 循环for 循环while 循环do-while 循环break 和 continuebreak 关键字continue 关键字总结 条件判断 条件判断用于根据不同的条件执行不同的代码块。Java 中常用的条件判断语句有 if、if-else 和 switc…...

Ubuntu20.04安装kalibr

文章目录 环境配置安装wxPython下载编译测试报错1问题描述问题分析问题解决 参考 环境配置 Ubuntu20.04&#xff0c;python3.8.10&#xff0c;boost自带的1.71 sudo apt update sudo apt-get install python3-setuptools python3-rosinstall ipython3 libeigen3-dev libboost…...

Flink 任务启动脚本-V2(包括ck启动)

#!/bin/bash#crontab时设置&#xff0c;如果依赖其他环境变量配置&#xff0c;可以在脚本执行一下环境变量脚本 source /etc/profile# 进入脚本目录 curdirdirname "$0" curdircd "$curdir"; pwd echo "进入启动脚本目录 $curdir"# 定义应用程序…...

扫雷-完整源码(C语言实现)

云边有个稻草人-CSDN博客 在学完C语言函数之后&#xff0c;我们就有能力去实现简易版扫雷游戏了&#xff08;成就感满满&#xff09;&#xff0c;下面是扫雷游戏的源码&#xff0c;快试一试效果如何吧&#xff01; 在test.c里面进行扫雷游戏的测试&#xff0c;game.h和game.c…...

python -从文件夹批量提取pdf文章的第n页,并存储起来

python -从文件夹批量提取pdf文章的第n页&#xff0c;并存储起来 废话不多说&#xff0c;看下面代码 讲解一下下面代码 reader PyPDF2.PdfReader (file) 将文件转化为PdfReader 对象&#xff0c;方便使用内置方法。 first_page reader.pages[0] 提取第一页 writer PyPDF…...

R Excel 文件操作指南

R Excel 文件操作指南 概述 R 语言是一种强大的统计分析工具&#xff0c;广泛用于数据分析和可视化。在实际应用中&#xff0c;经常需要将 R 语言与 Excel 文件结合使用&#xff0c;以便处理和分析数据。本指南将介绍如何在 R 中读取、写入和操作 Excel 文件。 准备工作 在…...

RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange

前言&#xff1a; RabbitMQ 延迟队列插件&#xff08;rabbitmq_delayed_message_exchange&#xff09;是一个社区开发的插件&#xff0c;它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件&#xff0c;用户可以创建一种特殊的交换机类型 x-delayed-message&#xff0c;该…...

fatal error in include chain (rtthread.h):rtconfig.h file not found

项目搜索这个文件 rtconfig 找到后将其复制粘贴到 你的目录\Keil\ARM\ARMCC\include 应该还有cJSON&#xff0c;rtthread.h和 等也复制粘贴下...

Java 反射(Reflection)

Java 反射&#xff08;Reflection&#xff09; Java 反射&#xff08;Reflection&#xff09;是一个强大的特性&#xff0c;它允许程序在运行时查询、访问和修改类、接口、字段和方法的信息。反射提供了一种动态地操作类的能力&#xff0c;这在很多框架和库中被广泛使用&#…...

Python爬取机车网车型数据并存入Mysql数据库

结果展示&#xff08;文末附完整代码&#xff09;&#xff1a; 一、引言 在当今数字化时代&#xff0c;数据对于各个领域的重要性不言而喻。对于机车行业而言&#xff0c;获取丰富的机车品牌、车型及详细信息数据&#xff0c;能够为市场分析、消费者研究等提供有力支持。本文将…...

fpga 时序分析基础

目录 触发器的动态参数 同步时序电路分析 1. 时钟脉冲的特性 2. 同步时序电路分析 Timing Analyzer的应用 异步时序与亚稳态问题 时序分析就是对时序电路进行时序检查&#xff0c;通过分析电路中所有寄存器之间的路径延迟以检查电路的传输延迟是否会导致触发器的建立时间…...

python学习——二维列表的列表生成式

二维列表的列表生成式允许你生成一个列表&#xff0c;其中每个元素本身也是一个列表。这在处理矩阵或表格数据时非常有用。 以下是如何使用列表生成式来创建二维列表的示例&#xff1a; 文章目录 基本语法示例1. 创建一个 3x3 的单位矩阵2. 创建一个 4x4 的乘法表3. 创建一个 …...

IPFS去中心化存储实战指南:黑马程序员音乐播放器项目开发完整教程

IPFS去中心化存储实战指南&#xff1a;黑马程序员音乐播放器项目开发完整教程 【免费下载链接】BlockChain 黑马程序员 120天全栈区块链开发 开源教程 项目地址: https://gitcode.com/gh_mirrors/blockchain95/BlockChain 你是否想过如何构建一个真正去中心化的音乐播放…...

浏览器 Profile 环境排查:Cookie、LocalStorage、网络出口与自动化任务配置清单

一、为什么浏览器环境经常“今天能用&#xff0c;明天失效”很多团队遇到登录状态丢失、页面配置异常、自动化任务失败时&#xff0c;会先怀疑网络、脚本或系统本身。但在实际项目里&#xff0c;问题经常不是单点故障&#xff0c;而是浏览器环境缺少稳定管理&#xff1a;对象常…...

三十岁想从零转行现实吗?带你分辨真正有前景的好工作

![](https://img-blog.csdnimg.cn/direct/b0bfa28b59f9478dae4e6feee6659cce.png)我是29岁那年&#xff0c;完成从转行裸辞副业的职业转型。 如果你把职业生涯看成是从现在开始30岁&#xff0c;到你退休那年&#xff0c;中间这么漫长的30年&#xff0c;那么30岁转行完全来得及…...

3步解锁专业级MMD创作:Blender插件如何重塑二次元动画工作流

3步解锁专业级MMD创作&#xff1a;Blender插件如何重塑二次元动画工作流 【免费下载链接】blender_mmd_tools MMD Tools is a blender addon for importing/exporting Models and Motions of MikuMikuDance. 项目地址: https://gitcode.com/gh_mirrors/bl/blender_mmd_tools …...

长期使用Taotoken聚合服务对项目月度账单的可预测性提升

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 长期使用Taotoken聚合服务对项目月度账单的可预测性提升 在AI驱动的项目开发与运营中&#xff0c;成本控制与预算规划是团队管理者…...

腾讯 Marvis 初级使用教程——从安装到上手

腾讯最新系统级AI助手Marvis&#xff08;2026年5月20日发布&#xff09;&#xff0c;官网 https://marvis.qq.com&#xff0c;主打“一句话操作电脑”、跨端协同、GUI Agent执行。虽然是个【小龙虾】&#xff0c;但上手其实不难。这篇就简单写写 Marvis 的安装和基础使用&#…...

2026年一键生成论文工具对比实测:5款神器从选题到格式全流程护航

写论文的焦虑&#xff0c;是每个科研人和学生都心照不宣的“隐形压力”。选题无从下手&#xff0c;文献检索耗时费力&#xff0c;逻辑框架反复推翻&#xff0c;格式排版让人抓狂&#xff0c;查重降重更是像在和系统玩“猫鼠游戏”。2026年的AI工具早已不是过去那种“打字机”&a…...

神经网络与深度学习 第3周课程总结

深度学习视觉应用课程总结 一、常用计算机视觉数据集数据集名称发布方/年份规模图像规格类别数主要用途核心特点MNIST美国国家标准与技术研究院60k训练10k测试2828灰度图10类(0-9手写数字)入门级图像分类最经典的手写数字识别基准数据集Fashion-MNISTZalando(2017)60k训练10k测…...

CANoe诊断测试没CDD文件怎么办?手把手教你用Fault Memory窗口和CAPL脚本读取解析DTC故障码

CANoe诊断测试无CDD文件的实战解决方案&#xff1a;从Fault Memory到CAPL脚本全解析当CDD文件缺失或定义不清晰时&#xff0c;诊断测试工程师常常陷入困境。本文将深入探讨如何利用Fault Memory窗口的基础功能&#xff0c;并通过CAPL脚本实现更灵活、更强大的故障码读取与解析方…...

sngan_projection论文解读:ICLR2018两大GAN技术的完美结合

sngan_projection论文解读&#xff1a;ICLR2018两大GAN技术的完美结合 【免费下载链接】sngan_projection GANs with spectral normalization and projection discriminator 项目地址: https://gitcode.com/gh_mirrors/sn/sngan_projection sngan_projection是一个实现了…...