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 的病毒防护即可，步骤如下。 点屏幕右下角通知栏，进入“病毒和威胁防护”： 打开： 关闭实时保护（…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项： 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库： npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
数据结构：泰勒展开式：霍纳法则（Horner‘s Rule）
目录 🔍 若用递归计算每一项，会发生什么？ Horners Rule（霍纳法则） 第一步：我们从最原始的泰勒公式出发 第二步：从形式上重新观察展开式 🌟 第三步：引出霍纳法则&…...
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...