当前位置: 首页 > 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. 创建一个 …...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...