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 的病毒防护即可，步骤如下。 点屏幕右下角通知栏，进入“病毒和威胁防护”： 打开： 关闭实时保护（…...
KubeSphere 容器平台高可用：环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
Bean 作用域有哪些？如何答出技术深度？
导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答，…...
客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场，但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大，传统架构已较难满足当前企业发展的需求，企业面临着三重挑战： ① 业务：国内用户访问海外服…...