当前位置: 首页 > 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"
http://www.lryc.cn/news/493169.html

相关文章:

  • 写一份客服网络安全意识培训PPT
  • 具体的技术和工具在县级融媒体建设3.0中有哪些应用?
  • 【uniapp】轮播图
  • Rust编程语言代码详细运行、编译方法
  • node.js基础学习-http模块-JSONP跨域传值(四)
  • Unity高效编程经验50条分享
  • TypeScript 泛型
  • 【Java从入门到放弃 之 条件判断与循环】
  • Ubuntu20.04安装kalibr
  • Flink 任务启动脚本-V2(包括ck启动)
  • 扫雷-完整源码(C语言实现)
  • python -从文件夹批量提取pdf文章的第n页,并存储起来
  • R Excel 文件操作指南
  • RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange
  • fatal error in include chain (rtthread.h):rtconfig.h file not found
  • Java 反射(Reflection)
  • Python爬取机车网车型数据并存入Mysql数据库
  • fpga 时序分析基础
  • python学习——二维列表的列表生成式
  • 【错误❌】——槽函数定义好但未初始化
  • OpenCV相机标定与3D重建(6)将3D物体点投影到2D图像平面上函数projectPoints()的使用
  • 【Linux】剧幕中的灵魂更迭:探索Shell下的程序替换
  • 38 基于单片机的宠物喂食(ESP8266、红外、电机)
  • Unity中的数学应用 之 角色移动中单位化向量的妙用 (小学难度)
  • 设置ip和代理DNS的WindowsBat脚本怎么写?
  • 字符串分割转换(Java Python JS C++ C )
  • 【Maven】项目创建
  • number的++和--运算 C#
  • 浅谈网络 | 应用层之HTTPS协议
  • 2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素