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

展示和添加篮球队信息--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.kler.cn/a/414255.html

相关文章:

  • JVM(JAVA虚拟机)内存溢出导致内存不足,Java运行时环境无法继续
  • 【人工智能】从零构建一个文本分类器:用Python和TF-IDF实现
  • think php处理 异步 url 请求 记录
  • C语言——海龟作图(对之前所有内容复习)
  • 如何解决 java.rmi.NotBoundException: RMI 中没有绑定的对象问题?亲测有效的解决方法!
  • Ettercap工具使用说明
  • Flutter:GetBuilder页面模板,可复用,视图,控制器分离
  • IntelliJ IDEA安装内网穿透实现远程连接家里或公司的MySQL数据库助力开发
  • 【C语言】结构体、联合体、枚举类型的字节大小详解
  • 累积局部效应 (ALE) 图分析记录
  • Unity中Http框架
  • 微知-arp如何删除所有表项?(arp -d; ip neighbor delete 192.168.0.100)
  • 力扣—912. 排序数组
  • queue 和 Stack
  • Unity shaderlab 实现LineSDF
  • 根据中缀二叉树构建中缀表达式
  • 「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
  • Unity中的数学应用 之 插值函数处理角色朝向 (初中难度 +Matlab)
  • 【计算机网络】—— 物理层
  • IPguard与Ping32对比评测:数据安全保护谁更强?
  • 【热门主题】000067 React前端框架:探索高效Web开发之路
  • 在C#中使用OpenCV的.net包装器EmguCV
  • 11.25Scala
  • Maven 依赖项配置
  • 初级数据结构——二叉搜索树题库(c++)
  • RHCE——selinux和防火墙