Springboot项目下面使用Vue3 + ElementPlus搭建侧边栏首页

news2025/3/13 16:21:28

Springboot项目下面、在html 页面 Vue3 + ElementPlus 搭建侧边栏首页

1、效果图

image-20241227164910444

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-menu
                        default-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 } = Vue

    const 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2267242.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++11】可变参数模版

【C++11】可变参数模版

目录 一、可变参数模版 1.1 基本语法及原理 1.2 包拓展 1.3 empalce系列接口 一、可变参数模版 之前我们在C语言中就学过可变参数&#xff0c;但是模版类型是固定的&#xff0c;怎么变呢&#xff1f;这里c11就给出了可变参数模版 1.1 基本语法及原理 C11支持可变参数模…
阅读更多...
FFmpeg在python里推流被处理过的视频流

FFmpeg在python里推流被处理过的视频流

链式算法处理视频流 视频源是本地摄像头 # codinggbk # 本地摄像头直接推流到 RTMP 服务器 import cv2 import mediapipe as mp import subprocess as sp# 初始化 Mediapipe mp_drawing mp.solutions.drawing_utils mp_drawing_styles mp.solutions.drawing_styles mp_holis…
阅读更多...
我的秋招总结

我的秋招总结

我的秋招总结 个人背景 双非本&#xff0c;985硕&#xff0c;科班 准备情况 以求职为目的学习Java的时间大概一年。 八股&#xff0c;一开始主要是看B站黑马的八股文课程&#xff0c;背JavaGuide和小林coding还有面试鸭。 算法&#xff0c;250&#xff0c;刷了3遍左右 项目&…
阅读更多...
C++：单例模式

C++：单例模式

创建自己的对象&#xff0c;同时确保对象的唯一性。 单例类只能有一个实例☞静态成员static☞静态成员 必须类外初始化 单例类必须自己创建自己的唯一实例 单例类必须给所有其他对象提供这一实例 静态成员类内部可以访问 构造函数私有化☞构造函数私有外部不能创建&#x…
阅读更多...
RBTree(红黑树)

RBTree(红黑树)

目录 红黑树的概念 红黑树的性质 红黑树节点的定义 红黑树的插入 1. 按照二叉搜索的树规则插入新节点 2. 检测新节点插入后&#xff0c;红黑树的性质是否造到破坏 红黑树的检测 红黑树的删除 红黑树和AVL树的比较 红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&…
阅读更多...
linux自动化一键批量检查主机端口

linux自动化一键批量检查主机端口

1、准备 我们可以使用下面命令关闭一个端口 sudo iptables -A INPUT -p tcp --dport 端口号 -j DROP我关闭的是22端口&#xff0c;各位可以关其它的或者打开其它端口测试&#xff0c;谨慎关闭22端口&#xff01;不然就会像我下面一样握手超时&#x1f62d;&#x1f62d;&…
阅读更多...
Python大数据可视化：基于python大数据的电脑硬件推荐系统_flask+Hadoop+spider

Python大数据可视化：基于python大数据的电脑硬件推荐系统_flask+Hadoop+spider

开发语言&#xff1a;Python框架&#xff1a;flaskPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 价格区间界面 用户信息界面 品牌管理 笔记本管理 电脑主机…
阅读更多...
AEO海关认证的注意事项

AEO海关认证的注意事项

AEO海关认证的注意事项繁多且至关重要&#xff0c;企业需细致准备&#xff0c;确保万无一失。 首先&#xff0c;企业需深入研读相关政策文件&#xff0c;如《中华人民共和国海关注册登记和备案企业信用管理办法》及《海关高级认证企业标准》&#xff0c;以政策为指引&#xff0…
阅读更多...
MySQL如何只取根据某列连续重复行的第一条记录

MySQL如何只取根据某列连续重复行的第一条记录

前言 MySQL如何只取根据某列连续重复行的第一条记录&#xff0c;条件&#xff1a;某列、连续、验重 建表准备 DROP TABLE IF EXISTS test; CREATE TABLE test (id bigint NOT NULL,time datetime NULL DEFAULT NULL,price int NULL DEFAULT NULL,PRIMARY KEY (id) USING BT…
阅读更多...
c++编译过程初识

c++编译过程初识

编译过程 预处理&#xff1a;主要是执行一些预处理指令&#xff0c;主要是#开头的代码&#xff0c;如#include 的头文件、#define 定义的宏常量、#ifdef #ifndef #endif等条件编译的代码&#xff0c;具体包括查找头文件、进行宏替换、根据条件编译等操作。 g -E example.cpp -…
阅读更多...
JS中的闭包和上下文

JS中的闭包和上下文

变量提升 和 函数提升 这里要提到一个提升的概念&#xff0c;即在JS中&#xff0c;在解析代码之前还有一个预处理的过程&#xff0c;这个过程中会把部分变量和函数声明提前到代码的最顶部&#xff0c; 会在其他所有代码之前执行。虽然当我们按照规范&#xff08;严格模式或者T…
阅读更多...
GitLab 将停止为中国区用户提供服务，60天迁移期如何应对？ | LeetTalk Daily

GitLab 将停止为中国区用户提供服务，60天迁移期如何应对？ | LeetTalk Daily

“LeetTalk Daily”&#xff0c;每日科技前沿&#xff0c;由LeetTools AI精心筛选&#xff0c;为您带来最新鲜、最具洞察力的科技新闻。 GitLab作为一个广受欢迎的开源代码托管平台&#xff0c;近期宣布将停止服务中国大陆、澳门和香港地区的用户提供服务。根据官方通知&#x…
阅读更多...
【2024年最新】BilibiliB站视频动态评论爬虫

【2024年最新】BilibiliB站视频动态评论爬虫

废话不多说&#xff0c;直接先放git仓库&#xff1a;GitHub - linyuye/Bilibili_crawler: bilibili爬虫&#xff0c;基于selenium获取oid与cookie&#xff0c;request获取api内容 〇&#xff1a;概念简述 oid&#xff1a;视频/动态的uuid&#xff0c;b站对于发布内容的通用唯…
阅读更多...
汽车IVI中控开发入门及进阶（46）：FFmpeg

汽车IVI中控开发入门及进阶（46）：FFmpeg

概述： FFmpeg 是领先的多媒体框架，能够解码、编码、 转码、复用、解复用、流、过滤和播放 几乎所有人类和机器创建的东西。它支持最模糊的古老格式，直到最前沿。无论它们是由某个标准委员会、社区还是公司设计的。它还具有高度的可移植性：FFmpeg 在各种构建环境、机器架构…
阅读更多...
计算属性 简写和 完整写法

计算属性 简写和 完整写法

计算属性渲染不加上括号 methods方法和computed属性区别&#xff1a; computed只计算一次&#xff0c;然后缓存&#xff0c;后续直接拿出来使用&#xff0c;而methods每次使用每次计算&#xff0c;不会缓存 计算属性完整写法&#xff1a; 既获取又设置 slice 截取 成绩案例 …
阅读更多...
WebRTC Simulcast 大小流介绍与优化实践

WebRTC Simulcast 大小流介绍与优化实践

Simulcast 是 WebRTC 中的一种标准化技术 &#xff0c;简称大小流。通过 Simulcast&#xff0c;客户端可以同时发送同一视频的多个版本。每个版本都以不同的分辨率和帧率独立编码&#xff0c;带宽较多的拉流端可以接收较高质量的视频流&#xff0c;带宽有限的拉流端则可以接收较…
阅读更多...
kong网关使用pre-function插件，改写接口的返回数据

kong网关使用pre-function插件，改写接口的返回数据

一、背景 kong作为api网关&#xff0c;除了反向代理后端服务外&#xff0c;还可对接口进行预处理。 比如本文提及的一个小功能&#xff0c;根据http header某个字段的值&#xff0c;等于多少的时候&#xff0c;返回一个固定的报文。 使用到的kong插件是pre-function。 除了上…
阅读更多...
轮播图带详情插件、uniApp插件

轮播图带详情插件、uniApp插件

超级好用的轮播图 介绍访问地址参数介绍使用方法&#xff08;简单使用&#xff0c;参数结构点击链接查看详情&#xff09;图片展示 介绍 带有底部物品介绍以及价格的轮播图组件&#xff0c;持续维护&#xff0c;uniApp插件&#xff0c;直接下载填充数据就可以在项目里面使用 …
阅读更多...
Vite内网ip访问，两种配置方式和修改端口号教程

Vite内网ip访问，两种配置方式和修改端口号教程

目录 问题 两种解决方式 结果 总结 preview.host preview.port 问题 使用vite运行项目的时候&#xff0c;控制台会只出现127.0.0.1&#xff08;localhost&#xff09;本地地址访问项目。不可以通过公司内网ip访问&#xff0c;其他团队成员无法访问&#xff0c;这是因为没…
阅读更多...
老旧小区用电安全保护装置#限流式防火保护器参数介绍#

老旧小区用电安全保护装置#限流式防火保护器参数介绍#

摘要 随着居民住宅区用电负荷的增加&#xff0c;用电安全问题日益突出&#xff0c;火灾隐患频繁发生。防火限流式保护器作为一种新型电气安全设备&#xff0c;能够有效预防因电气故障引发的火灾事故。本文介绍了防火限流式保护器的工作原理、技术特点及其在居民住宅区用电系统…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023