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 的病毒防护即可，步骤如下。 点屏幕右下角通知栏，进入“病毒和威胁防护”： 打开： 关闭实时保护（…...
“证死你，证伟我”——波普尔“证伪主义”是逻辑诈骗，1+1=2才是真正的科学
“证死你，证伟我”——波普尔“证伪主义”是逻辑诈骗，112才是真正的科学摘要本文作者以技术专家立场，将波普尔证伪主义定性为“逻辑原罪”与“学术诈骗”。核心指控为六个字：“证死你”——用“不可证伪”剥夺完美理论（…...
Emgu CV轮廓检测避坑指南：RetrType模式选择与效果对比
Emgu CV轮廓检测避坑指南：RetrType模式选择与效果对比 在计算机视觉项目中，轮廓检测往往是物体识别、形状分析的关键第一步。作为OpenCV的.NET封装，Emgu CV提供了强大的轮廓检测功能，但许多开发者在使用FindContours函数时&#x…...
高效构建个性化Obsidian知识管理系统：从模板到实践的全面指南
高效构建个性化Obsidian知识管理系统：从模板到实践的全面指南 【免费下载链接】kepano-obsidian My personal Obsidian vault template. A bottom-up approach to note-taking and organizing things I am interested in. 项目地址: https://gitcode.com/gh_mirro…...
一文学习 工作流开发 BPMN、 Flowable
一、简化查询 1. 先看一下查询的例子 /// /// 账户获取服务 /// /// /// public class AccountGetService(AccountTable table, IShadowBuilder builder) {private readonly SqlSource _source new(builder.DataSource);private readonly IParamQuery _accountQuery build…...
我用 QClaw 打造了一只“养生龙虾“——打工人保命健康守护助手
从一个简单的健康需求，到完整的健康提醒系统，我用 QClaw 这个智能助手完成了从"想法"到"落地"的全过程。缘起：打工人的健康焦虑 作为一个长期久坐、对着电脑敲代码的打工人，我越来越意识到健康的重要性。心血…...
多 Agent 协作架构：Agent 之间如何通信、协调和分工
多 Agent 协作架构：Agent 之间如何通信、协调和分工 我在字节跳动 OpenViking 分析之后，有一件事一直在脑子里转：多 Agent 的协作到底难在哪里？不是难在"写代码"，而是难在把一堆各自为政的 Agent 变成一个真…...
多模态实践：OpenClaw+千问3.5-27B分析截图中的图表数据
多模态实践：OpenClaw千问3.5-27B分析截图中的图表数据 1. 为什么需要自动化图表分析 作为一名数据分析师，我每天需要处理大量来自股票、销售报表的截图。传统做法是手动录入数据到Excel，既耗时又容易出错。直到我发现OpenClaw与千问3.5-27B…...
Win11Debloat完整指南：如何一键清理Windows系统，提升51%性能的免费神器
Win11Debloat完整指南：如何一键清理Windows系统，提升51%性能的免费神器 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other …...
工业现场直通车：用C#和雷赛DMC3000库，从零搭建一个真实的运动控制上位机
工业现场直通车：用C#和雷赛DMC3000库构建高可靠运动控制上位机 在工业自动化领域，运动控制系统的稳定性和实时性直接决定了生产效率和产品质量。许多开发者从教学Demo过渡到实际工业应用时，常常面临理论与实践的断层——教材中的理想化代码无…...
Windows Cleaner终极指南：5分钟彻底解决C盘爆红和系统卡顿问题
Windows Cleaner终极指南：5分钟彻底解决C盘爆红和系统卡顿问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服！ 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统…...