Springboot项目下面使用Vue3 + ElementPlus搭建侧边栏首页
Springboot项目下面、在html 页面 Vue3 + ElementPlus 搭建侧边栏首页
1、效果图
2、static 文件下面的项目结构
3、代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!-- Import style --><link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /><!-- Import Vue 3 --><script src="//unpkg.com/vue@3"></script><!-- Import component library --><script src="//unpkg.com/element-plus"></script><!-- 图标 --><script src="//unpkg.com/@element-plus/icons-vue"></script><style>* {margin: 0;padding: 0;box-sizing: border-box; /* 增加 box-sizing 来避免 padding 和 border 影响宽高 */}.el-header {background-color: rgb(204, 212, 255);display: flex;justify-content: space-between; /* 内容分布到两侧 */align-items: center; /* 垂直居中 */padding: 10px 20px;}.el-aside {background-color: rgb(217, 236, 255);height: 90vh;}.el-main {background-color: rgb(236, 245, 255);}.header-content {display: flex;align-items: center;}.header-content span {font-size: 16px; /* 增大欢迎文字的字体 */margin-right: 20px; /* 欢迎文字和登出链接之间的间距 */}.header-content el-link {font-size: 16px; /* 增大登出链接的字体 */}</style>
</head>
<body>
<div id="app" class="common-layout"><el-container><el-header><h2 style="text-align: center">未来智慧社区管理系统</h2><div class="header-content"><span>欢迎您，admin </span></div></el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"><el-sub-menu index="1"><template #title><el-icon><location/></el-icon><span>物业系统</span></template><el-menu-item><el-link index="1-1" href="/pages/house.html" target="mainFrame">房屋管理</el-link></el-menu-item><el-menu-item><el-link href="/pages/owner.html" target="mainFrame">业主管理</el-link></el-menu-item><el-menu-item><el-link index="1-2" href="/pages/building.html" target="mainFrame">楼栋管理</el-link></el-menu-item><el-menu-item><el-link index="1-3" href="/pages/parking.html" target="mainFrame">车位管理</el-link></el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><Setting /></el-icon><span>系统管理</span></template><el-menu-item><el-link index="2-1" href="/pages/xxx.html" target="mainFrame">用户管理</el-link></el-menu-item><el-menu-item><el-link index="2-2" href="/pages/xxx.html" target="mainFrame">业主管理</el-link></el-menu-item><el-menu-item><el-link index="2-3" href="/pages/xxx.html" target="mainFrame">用户中心</el-link></el-menu-item></el-sub-menu></el-menu></el-aside><el-main><!-- 默认显示 owner --><iframe id="mainFrame" name="mainFrame" src="/pages/owner.html"style="width:100%; height:100%; border:none"></iframe></el-main></el-container></el-container>
</div>
<script>const { createApp } = Vueconst app = createApp({setup(){return {}}});app.use(ElementPlus)//添加图标for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}app.mount('#app')</script></body>
</html>
相关文章：
Springboot项目下面使用Vue3 + ElementPlus搭建侧边栏首页
Springboot项目下面、在html 页面 Vue3 ElementPlus 搭建侧边栏首页 1、效果图 2、static 文件下面的项目结构 3、代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>首页</title><…...
华为 IPD，究竟有什么特点？（二）
关注作者 （四）华为版 IPD 特点四：一定要把差异化竞争力持 续建立在平台上 平台不仅带来研发效率的提升，更重要的是，它是技术竞争力的载体，是研发质 量的重要保证。 1）为什么很多企业摆脱不了同…...
【Laravel】接口的访问频率限制器
Laravel 接口的访问频率，你可以在 Laravel 中使用速率限制器（Rate Limiter）。以下是一个详细的步骤，展示如何为这个特定的 API 路由设置速率限制： 1. 配置 RouteServiceProvider 首先，确保在 App\Provide…...
【WRF模拟】如何得到更佳的WRF模拟效果？
【WRF模拟】如何得到更佳的WRF模拟效果？ 模型配置（The Model Configuration）1.1 模拟区域domain设置1.2 分辨率Resolution (horizontal and vertical)案例：The Derecho of 29-30 June 2012 1.3 初始化和spin-up预热过程案例1-有无…...
机械臂的各种标定
文章目录 1. 工具坐标系标定2. 工具手标定3. 手眼标定联系 在工程中，同时使用工具坐标系标定、工具手标定和手眼标定的概念、目的和作用如下： 1. 工具坐标系标定 概念： 工具坐标系标定是指确定工具相对于机器人坐标系的位置和姿态关系的过程…...
Android监听拨打电话
第一步获取权限 Manifest.permission.READ_PHONE_STATEManifest.permission.ANSWER_PHONE_CALLSManifest.permission.READ_CALL_LOG Manifest.permission.READ_CONTACTS第二步 注册监听 private var telephonyManager: TelephonyManager? nullprivate var mPhoneStateList…...
Framework开发入门（一）之源码下载
一、使用Linux操作系统的小伙伴可以跳转到官网链接按提示操作 官网源码地址：下载源代码 | Android Open Source Project 1.创建一个空目录来存放您的工作文件。为其指定一个您喜欢的任意名称： mkdir WORKING_DIRECTORYcdWORKING_DIRECTORY …...
TCP off-path exploits(又一个弄巧成拙的例子)
承接前面几篇文章的观点，本文用一个安全攻击的例子说明为了解决一个伤害很低的低概率问题，会引入多么大的麻烦，这次是可怕的被攻击 (⊙o⊙)。 TCP 端口号只有 16bit，序列号只有 32bit，这意味着在强大攻击算力面前&…...
Ajax总结
引言 这是属于前端的部分了，先是学习了三件套（HTML,JS,CSS没怎么学，但是大概能理解）之后就开始学习这个了，学习之前应该要知道她是做什么的，但是我没有做这一步，之后会先了解为什么要学习这门技…...
修改网络ip地址方法有哪些？常用的有这四种
在数字时代，IP地址作为网络设备的唯一标识，对于网络连接和通信至关重要。然而，有时候我们可能需要修改设备的IP地址，以满足特定的网络需求或解决网络问题。本文将为您详细介绍几种修改网络IP地址的常用方法，无论是对于…...
SpringBoot获取bean的几种方式
目录 一、BeanFactory与ApplicationContext的区别 二、通过BeanFactory获取 三、通过BeanFactoryAware获取 四、启动获取ApplicationContext 五、通过继承ApplicationObjectSupport 六、通过继承WebApplicationObjectSupport 七、通过WebApplicationContextUtils 八、通…...
Debian12 安装配置 ODBC for GaussDB
第一步 apt install -y unixodbc 第二步下载 dws_8.2.x_odbc_driver_for_x86_redhat.zip 到 /tmp，之后 cd /tmp unzip dws_8.2.x_odbc_driver_for_x86_redhat.zip cp lib/* /usr/local/lib cp odbc/lib/* /usr/local/lib echo /usr/local/lib >> /etc/ld…...
空中绘图板：用 Mediapipe 和 OpenCV 实现的创新手势识别应用
在这个数字化飞速发展的时代，手势识别技术正逐渐走入我们的日常生活，从智能家居到增强现实，无处不在。而今天，我将与大家分享一个充满创意和趣味的项目——空中绘图板。这个项目利用了强大的 Mediapipe 库和 OpenCV，实…...
讲一个自己写的 excel 转 html 的 java 工具
由来 这是一个从开发需求中诞生的工具，在工作中因为有一个 excel 转 html 的任务，又没找到一个专门做这方面的工具（其他工具几乎都是简单的转换，无法还原 excel 样式，而且转换的宽高有点儿差距）࿰…...
前端往后端传递参数的方式有哪些？
文章目录 1. URL 参数1.1. 查询参数（Query Parameters)1.2. 路径参数（Path Parameters） 2. 请求体（Request Body）2.1. JSON 数据2.2. 表单数据2.3. 文件上传 3. 请求头（Headers）3.1. 自定义请求…...
Vue axios 异步请求，请求响应拦截器
在 Vue.js 中使用 axios 进行网络请求是非常常见的做法，因为它提供了比原生的 Fetch API 更丰富的功能，并且更易于处理错误和配置。结合 Axios 的拦截器功能，你可以对所有的请求或响应进行预处理，比如添加认证头信息、统一处理错误…...
yarn install 安装报错：Workspaces can only be enabled in private projects.
在本地运行项目的时候，使用yarn install 安装模块依赖的时候，遇到报错：Workspaces can only be enabled in private projects. 一、原因分析 报这个错误是因为你使用了yarn的workspace，但并未将工程标记为private。 二、解决办法 …...
http 请求总结get
关于get请求传递body的问题 错误代码 有400 , 415 等情况 <!doctype html><html lang"zh"><head><title>HTTP Status 400 – 错误的请求</title><style type"text/css">body {font-family:Tahoma,Arial,sans-seri…...
TCP 和 UDP 的区别：解析网络传输协议
引言 在计算机网络的世界中，TCP（Transmission Control Protocol，传输控制协议）和 UDP（User Datagram Protocol，用户数据报协议）是两种极为重要且应用广泛的传输层协议。它们在功能、特性以及适…...
【已解决】pyinstaller打包ico图片报错：OSError: [WinError 225] 无法成功完成操作，因为文件包含病毒或潜在的垃圾软件。
起因： pyinstaller加上 --icon 参数打包时报错。 命令如下： 解决： 关闭 Windows 的病毒防护即可，步骤如下。 点屏幕右下角通知栏，进入“病毒和威胁防护”： 打开： 关闭实时保护（…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
MySQL账号权限管理指南：安全创建账户与精细授权技巧
在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号？ 最小权限原则…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...