网站首页菜单两种布局vue+elementui顶部和左侧栏导航
- 顶部菜单实现
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js + Element UI 路由导航</title><!-- 引入Element UI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;background-color: white;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);overflow: hidden;}header {background: linear-gradient(90deg, #1e5799 0%, #207cca 51%, #2989d8 100%);color: white;padding: 20px;text-align: center;}header h1 {font-size: 2.2rem;margin-bottom: 10px;}header p {font-size: 1.1rem;opacity: 0.9;}.content {padding: 30px;}.dashboard {display: grid;grid-template-columns: 1fr 3fr;gap: 30px;margin-top: 20px;}.card {background: white;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);padding: 25px;margin-bottom: 25px;}.card h2 {color: #2c3e50;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #eee;}.features {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 20px;}.feature-card {background: #f8f9fa;border-radius: 8px;padding: 20px;transition: all 0.3s ease;border-left: 4px solid #409EFF;}.feature-card:hover {transform: translateY(-5px);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);}.feature-card h3 {color: #1e5799;margin-bottom: 10px;}.page-content {min-height: 400px;display: flex;flex-direction: column;justify-content: center;align-items: center;background: #f8fafc;border-radius: 8px;padding: 40px;text-align: center;}.page-content h2 {font-size: 2.5rem;color: #2c3e50;margin-bottom: 20px;}.page-content p {font-size: 1.2rem;color: #5a6a7f;max-width: 700px;line-height: 1.8;}.el-menu-demo {box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);}footer {text-align: center;padding: 25px;color: #7f8c8d;border-top: 1px solid #eee;margin-top: 30px;}.router-link-active {text-decoration: none;}a {text-decoration: none;color: inherit;}.el-menu-item [class^=el-icon-] {vertical-align: middle;margin-right: 5px;width: 24px;text-align: center;font-size: 18px;}.el-submenu [class^=el-icon-] {vertical-align: middle;margin-right: 5px;width: 24px;text-align: center;font-size: 18px;}.el-menu-item.is-active {background-color: #1e5799 !important;}</style>
</head>
<body><div id="app"><div class="container"><div class="content"><!-- 导航菜单 --><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/dashboard"><i class="el-icon-s-home"></i><span>控制面板</span></el-menu-item><el-submenu index="workspace"><template slot="title"><i class="el-icon-s-platform"></i><span>工作空间</span></template><el-menu-item index="/projects">项目管理</el-menu-item><el-menu-item index="/tasks">任务管理</el-menu-item><el-menu-item index="/calendar">日历视图</el-menu-item><el-submenu index="reports"><template slot="title">报表统计</template><el-menu-item index="/reports/weekly">周报</el-menu-item><el-menu-item index="/reports/monthly">月报</el-menu-item><el-menu-item index="/reports/custom">自定义报表</el-menu-item></el-submenu></el-submenu><el-menu-item index="/messages"><i class="el-icon-message"></i><span>消息中心</span></el-menu-item><el-menu-item index="/settings"><i class="el-icon-setting"></i><span>系统设置</span></el-menu-item><el-menu-item index="https://element.eleme.io" target="_blank"><i class="el-icon-link"></i><span>Element UI 文档</span></el-menu-item></el-menu><!-- 路由出口 --><router-view></router-view></div><footer><p>© 2023 Vue.js + Element UI 导航系统 | 修复路由配置示例</p></footer></div></div><!-- 引入Vue.js --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入Vue Router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><!-- 引入Element UI --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>// 定义路由组件const Dashboard = { template: `<div class="page-content"><h2>控制面板</h2><p>欢迎使用系统控制面板。在这里您可以查看系统概览、管理项目、跟踪任务和访问各种工具。</p><p>使用左侧菜单导航到不同功能模块，或使用顶部菜单访问主要功能区域。</p><el-button type="primary" size="medium" style="margin-top: 20px;">开始使用</el-button></div>`};const Projects = { template: `<div class="page-content"><h2>项目管理</h2><p>在这里您可以创建新项目、管理现有项目、分配任务给团队成员并跟踪项目进度。</p><p>使用卡片视图、列表视图或甘特图查看项目状态。</p></div>`};const Tasks = { template: `<div class="page-content"><h2>任务管理</h2><p>查看和分配任务，设置优先级和截止日期，跟踪任务完成情况。</p><p>使用看板视图直观地管理任务状态：待处理、进行中、已完成。</p></div>`};const Calendar = { template: `<div class="page-content"><h2>日历管理</h2><p>查看日历，设置优先级和截止日期。</p></div>`};const Messages = { template: `<div class="page-content"><h2>消息中心</h2><p>查看系统通知、团队消息和项目更新。与团队成员保持沟通。</p><p>您可以在这里发送和接收消息，设置消息提醒和通知偏好。</p></div>`};const Settings = { template: `<div class="page-content"><h2>系统设置</h2><p>配置系统参数、用户权限、界面主题和其他个性化选项。</p><p>管理团队成员、设置角色权限和配置系统集成。</p></div>`};const Reports = { template: `<div class="page-content"><h2>报表统计</h2><p>生成和查看各种报表，包括项目进度、团队绩效和资源使用情况。</p><p>自定义报表模板，设置自动生成和发送报表的时间表。</p></div>`};// 定义路由const routes = [{ path: '/', redirect: '/dashboard' },{ path: '/dashboard', component: Dashboard },{ path: '/projects', component: Projects },{ path: '/calendar', component: Calendar },{ path: '/tasks', component: Tasks },{ path: '/messages', component: Messages },{ path: '/settings', component: Settings },{ path: '/reports', component: Reports },{ path: '/reports/weekly', component: Reports },{ path: '/reports/monthly', component: Reports },{ path: '/reports/custom', component: Reports }];// 创建路由实例const router = new VueRouter({routes});// 创建Vue实例new Vue({el: '#app',router,data() {return {activeIndex: '/dashboard'}},mounted() {// 设置当前激活菜单项this.activeIndex = this.$route.path;},watch: {// 当路由变化时更新激活菜单项'$route'(to) {this.activeIndex = to.path;}},methods: {handleSelect(key) {// 处理菜单选择if (key.startsWith('http')) {// 外部链接，在新标签页打开window.open(key, '_blank');} else {// 内部路由导航this.$router.push(key);}}}});</script>
</body>
</html>2 左侧边栏菜单布局
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js + Element UI 侧边栏导航</title><!-- 引入Element UI样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1400px;margin: 0 auto;background-color: white;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);overflow: hidden;display: flex;flex-direction: column;min-height: 90vh;}header {background: linear-gradient(90deg, #1e5799 0%, #207cca 51%, #2989d8 100%);color: white;padding: 20px;text-align: center;}header h1 {font-size: 2.2rem;margin-bottom: 10px;}header p {font-size: 1.1rem;opacity: 0.9;}.main-content {display: flex;flex: 1;}/* 侧边栏样式 */.sidebar {width: 250px;background: #fff;border-right: 1px solid #e6e6e6;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);transition: all 0.3s ease;overflow: hidden;}.sidebar .el-menu {border-right: none;height: 100%;}.sidebar .el-submenu .el-menu-item {min-width: auto;padding-left: 50px !important;}.sidebar .el-menu-item,.sidebar .el-submenu__title {height: 50px;line-height: 50px;}.sidebar .el-menu-item [class^=el-icon-] {margin-right: 10px;font-size: 18px;}.sidebar .el-submenu [class^=el-icon-] {margin-right: 10px;font-size: 18px;}.sidebar .el-menu-item.is-active {background-color: #ecf5ff !important;color: #1e5799 !important;font-weight: bold;border-left: 4px solid #1e5799;}.sidebar .el-menu-item:hover,.sidebar .el-submenu__title:hover {background-color: #f5f7fa !important;}.sidebar .el-submenu__title i {color: #1e5799;}/* 内容区域样式 */.content {flex: 1;padding: 30px;background: #f8fafc;overflow-y: auto;}.dashboard {display: grid;grid-template-columns: 1fr 3fr;gap: 30px;margin-top: 20px;}.card {background: white;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);padding: 25px;margin-bottom: 25px;}.card h2 {color: #2c3e50;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #eee;}.features {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 20px;}.feature-card {background: #f8f9fa;border-radius: 8px;padding: 20px;transition: all 0.3s ease;border-left: 4px solid #409EFF;}.feature-card:hover {transform: translateY(-5px);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);}.feature-card h3 {color: #1e5799;margin-bottom: 10px;}.page-content {min-height: 400px;display: flex;flex-direction: column;justify-content: center;align-items: center;background: white;border-radius: 8px;padding: 40px;text-align: center;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}.page-content h2 {font-size: 2.5rem;color: #2c3e50;margin-bottom: 20px;}.page-content p {font-size: 1.2rem;color: #5a6a7f;max-width: 700px;line-height: 1.8;}footer {text-align: center;padding: 25px;color: #7f8c8d;border-top: 1px solid #eee;margin-top: auto;}.router-link-active {text-decoration: none;}a {text-decoration: none;color: inherit;}.logo {padding: 20px;text-align: center;border-bottom: 1px solid #eee;}.logo h2 {color: #1e5799;font-size: 1.5rem;}.logo p {color: #7f8c8d;font-size: 0.9rem;}.user-info {padding: 20px;display: flex;align-items: center;border-bottom: 1px solid #eee;}.user-info .avatar {width: 50px;height: 50px;border-radius: 50%;background: #1e5799;color: white;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;margin-right: 15px;}.user-info .details {flex: 1;}.user-info .name {font-weight: bold;color: #2c3e50;}.user-info .role {color: #7f8c8d;font-size: 0.9rem;}.mobile-toggle {display: none;position: absolute;top: 20px;left: 20px;z-index: 1000;background: #1e5799;color: white;border: none;border-radius: 4px;padding: 8px 12px;cursor: pointer;}@media (max-width: 992px) {.sidebar {position: fixed;left: -250px;top: 0;bottom: 0;z-index: 100;transition: all 0.3s ease;}.sidebar.active {left: 0;box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);}.mobile-toggle {display: block;}.content {padding: 20px;}.page-content {padding: 20px;}.page-content h2 {font-size: 1.8rem;}}.stat-cards {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;margin-bottom: 30px;}.stat-card {background: white;border-radius: 8px;padding: 20px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);text-align: center;border-top: 4px solid #1e5799;}.stat-card .value {font-size: 2rem;font-weight: bold;color: #1e5799;margin: 10px 0;}.stat-card .label {color: #7f8c8d;font-size: 0.9rem;}</style>
</head>
<body><div id="app"><div class="container"><header><h1>Vue.js + Element UI 导航系统</h1><p>侧边栏导航布局 - 专业管理系统</p></header><button class="mobile-toggle" @click="toggleSidebar"><i class="el-icon-menu"></i></button><div class="main-content"><!-- 侧边栏导航 --><div class="sidebar" :class="{ active: sidebarActive }"><div class="logo"><h2>管理系统</h2><p>Vue.js + Element UI</p></div><div class="user-info"><div class="avatar"><i class="el-icon-user"></i></div><div class="details"><div class="name">管理员</div><div class="role">系统管理员</div></div></div><el-menu:default-active="activeIndex"class="el-menu-vertical-demo"@select="handleSelect"background-color="#fff"text-color="#2c3e50"active-text-color="#1e5799"><el-menu-item index="/dashboard"><i class="el-icon-s-home"></i><span>控制面板</span></el-menu-item><el-submenu index="workspace"><template slot="title"><i class="el-icon-s-platform"></i><span>工作空间</span></template><el-menu-item index="/projects">项目管理</el-menu-item><el-menu-item index="/tasks">任务管理</el-menu-item><el-menu-item index="/calendar">日历视图</el-menu-item><el-submenu index="reports"><template slot="title">报表统计</template><el-menu-item index="/reports/weekly">周报</el-menu-item><el-menu-item index="/reports/monthly">月报</el-menu-item><el-menu-item index="/reports/custom">自定义报表</el-menu-item></el-submenu></el-submenu><el-menu-item index="/messages"><i class="el-icon-message"></i><span>消息中心</span></el-menu-item><el-menu-item index="/settings"><i class="el-icon-setting"></i><span>系统设置</span></el-menu-item><el-menu-item index="https://element.eleme.io" target="_blank"><i class="el-icon-link"></i><span>Element UI 文档</span></el-menu-item></el-menu></div><!-- 内容区域 --><div class="content"><!-- 路由出口 --><router-view></router-view></div></div><footer><p>© 2023 Vue.js + Element UI 导航系统 | 侧边栏布局示例</p></footer></div></div><!-- 引入Vue.js --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- 引入Vue Router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><!-- 引入Element UI --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>// 定义路由组件const Dashboard = { template: `<div><div class="stat-cards"><div class="stat-card"><i class="el-icon-s-order" style="font-size: 2rem; color: #1e5799;"></i><div class="value">24</div><div class="label">进行中的项目</div></div><div class="stat-card"><i class="el-icon-s-claim" style="font-size: 2rem; color: #1e5799;"></i><div class="value">128</div><div class="label">待处理任务</div></div><div class="stat-card"><i class="el-icon-s-comment" style="font-size: 2rem; color: #1e5799;"></i><div class="value">12</div><div class="label">未读消息</div></div><div class="stat-card"><i class="el-icon-user-solid" style="font-size: 2rem; color: #1e5799;"></i><div class="value">8</div><div class="label">在线成员</div></div></div><div class="page-content"><h2>控制面板</h2><p>欢迎使用系统控制面板。在这里您可以查看系统概览、管理项目、跟踪任务和访问各种工具。</p><p>使用左侧菜单导航到不同功能模块，或使用顶部菜单访问主要功能区域。</p><el-button type="primary" size="medium" style="margin-top: 20px;">开始使用</el-button></div></div>`};const Projects = { template: `<div class="page-content"><h2>项目管理</h2><p>在这里您可以创建新项目、管理现有项目、分配任务给团队成员并跟踪项目进度。</p><p>使用卡片视图、列表视图或甘特图查看项目状态。</p><el-button type="primary" style="margin-top: 20px;">创建新项目</el-button></div>`};const Tasks = { template: `<div class="page-content"><h2>任务管理</h2><p>查看和分配任务，设置优先级和截止日期，跟踪任务完成情况。</p><p>使用看板视图直观地管理任务状态：待处理、进行中、已完成。</p><el-button type="primary" style="margin-top: 20px;">创建新任务</el-button></div>`};const Calendar = { template: `<div class="page-content"><h2>日历管理</h2><p>查看日历，设置优先级和截止日期。</p><el-calendar style="margin-top: 20px; width: 100%;"><templateslot="dateCell"slot-scope="{date, data}"><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(2).join('-') }}</p></template></el-calendar></div>`};const Messages = { template: `<div class="page-content"><h2>消息中心</h2><p>查看系统通知、团队消息和项目更新。与团队成员保持沟通。</p><p>您可以在这里发送和接收消息，设置消息提醒和通知偏好。</p><el-button type="primary" style="margin-top: 20px;">查看消息</el-button></div>`};const Settings = { template: `<div class="page-content"><h2>系统设置</h2><p>配置系统参数、用户权限、界面主题和其他个性化选项。</p><p>管理团队成员、设置角色权限和配置系统集成。</p><el-button type="primary" style="margin-top: 20px;">系统配置</el-button></div>`};const Reports = { template: `<div class="page-content"><h2>报表统计</h2><p>生成和查看各种报表，包括项目进度、团队绩效和资源使用情况。</p><p>自定义报表模板，设置自动生成和发送报表的时间表。</p><el-button type="primary" style="margin-top: 20px;">生成报表</el-button></div>`};// 定义路由const routes = [{ path: '/', redirect: '/dashboard' },{ path: '/dashboard', component: Dashboard },{ path: '/projects', component: Projects },{ path: '/calendar', component: Calendar },{ path: '/tasks', component: Tasks },{ path: '/messages', component: Messages },{ path: '/settings', component: Settings },{ path: '/reports', component: Reports },{ path: '/reports/weekly', component: Reports },{ path: '/reports/monthly', component: Reports },{ path: '/reports/custom', component: Reports }];// 创建路由实例const router = new VueRouter({routes});// 创建Vue实例new Vue({el: '#app',router,data() {return {activeIndex: '/dashboard',sidebarActive: false}},mounted() {// 设置当前激活菜单项this.activeIndex = this.$route.path;// 监听窗口大小变化window.addEventListener('resize', this.handleResize);this.handleResize();},beforeDestroy() {window.removeEventListener('resize', this.handleResize);},watch: {// 当路由变化时更新激活菜单项'$route'(to) {this.activeIndex = to.path;// 在移动设备上导航时关闭侧边栏if (window.innerWidth < 992) {this.sidebarActive = false;}}},methods: {handleSelect(key) {// 处理菜单选择if (key.startsWith('http')) {// 外部链接，在新标签页打开window.open(key, '_blank');} else {// 内部路由导航this.$router.push(key);}},toggleSidebar() {this.sidebarActive = !this.sidebarActive;},handleResize() {// 在大屏幕上自动显示侧边栏if (window.innerWidth >= 992) {this.sidebarActive = true;} else {this.sidebarActive = false;}}}});</script>
</body>
</html>相关文章：
网站首页菜单两种布局vue+elementui顶部和左侧栏导航
顶部菜单实现 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Vue.js Element UI 路由导航</…...
AWS之迁移与传输服务
目录 一、迁移管理与规划类 二、应用程序迁移类 1. MGN的迁移范围（能替代的场景） ✅ 自动包含以下数据： 🔹 适用场景举例： 2. 仍需DMS或DataSync的场景（不可替代） ❌ DMS仍必要的情况： ❌ DataSync仍必要的情况： 3. 技术原理对比 MGN的数据迁移机制： DMS…...
@Builder的用法
Builder 是 Lombok 提供的一个注解，用于简化 Java 中构建对象的方式（Builder 模式）。它可以让你以更加简洁、链式的方式来创建对象，尤其适用于构造参数较多或部分可选的类。...
Unity3D 逻辑代码性能优化策略
前言 在Unity3D中优化逻辑代码性能是提升游戏流畅度的关键。以下是系统性的优化策略和示例： 对惹，这里有一个游戏开发交流小组，希望大家可以点击进来一起交流一下开发经验呀！ 1. 避免高频操作中的开销 缓存组件引用 private …...
【Python Cookbook】文件与 IO（二）
文件与 IO（二） 6.字符串的 I/O 操作7.读写压缩文件8.固定大小记录的文件迭代（⭐⭐） 6.字符串的 I/O 操作 你想使用操作类文件对象的程序来操作文本或二进制字符串。 使用 io.StringIO() 和 io.BytesIO() 类来创建类文件对象操作…...
vue实现点击按钮input保持聚焦状态
主要功能： 点击"停顿"按钮切换对话框显示状态输入框聚焦时保持状态点击对话框外的区域自动关闭 以下是代码版本： <template><div class"input-container"><el-inputv-model"input"style"width: 2…...
[蓝桥杯]取球博弈
取球博弈 题目描述 两个人玩取球的游戏。 一共有 NN 个球，每人轮流取球，每次可取集合 n1,n2,n3n1,n2,n3中的任何一个数目。 如果无法继续取球，则游戏结束。 此时，持有奇数个球的一方获胜。 如果两人都是奇数ÿ…...
Spring Security入门：创建第一个安全REST端点项目
项目初始化与基础配置 创建基础Spring Boot项目 我们首先创建一个名为ssia-ch2-ex1的空项目（该名称与配套源码中的示例项目保持一致）。项目需要添加以下两个核心依赖： org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-secur…...
[Java 基础]数组
什么是数组？想象一下，你需要存储 5 个学生的考试成绩。你可以声明 5 个不同的 int 变量，但这会显得很笨拙。数组提供了一种更简洁、更有组织的方式来存储和管理这些数据。 数组可以看作是相同类型元素的集合，这些元素在内存中是连…...
fastadmin fildList 动态下拉框默认选中
html页面 <td><select class"form-control dtselect" data-rule"required" data-dtselected"<%row.type%>" name"<%name%>[<%index%>][type]">{foreach nametypeList idvo}<option value"{$vo…...
java学习笔记——数组和二维数组
一、一维数组 1. 定义数组 语法： // 动态初始化（指定长度） 数据类型[] 数组名 = new 数据类型[长度]; // 示例： int[] arr1 = new int[5]; // 默认值：0// 静态初始化（直接赋值） 数据类型[] 数组名 = {元素1, 元素2, ...}; // 示例： String[]…...
‘pnpm‘ 不是内部或外部命令，也不是可运行的程序
npm install -g pnpm changed 1 package in 4s 1 package is looking for funding run npm fund for details C:\Users\gang>pnpm pnpm 不是内部或外部命令，也不是可运行的程序 或批处理文件。 原来是安装的全局路径被我改了 npm list -g --depth 0 把上述…...
Android Test2 获取系统android id
Android Test2 获取系统 android id 这篇文章针对一个常用的功能做一个测试。 在项目中，时常会遇到的一个需求就是：一台设备的唯一标识值。然后，在网络请求中将这个识别值传送到后端服务器，用作后端数据查询的条件。Android 设备…...
webpack打包学习
vue开发 现在项目里安装vue： npm install vue vue的文件后缀是.vue webpack不认识vue的话就接着安插件 npm install vue-loader -D 这是.vue文件： <template> <div><h2 class"title">{{title}}</h2><p cla…...
基于Java（Jsp+servelet+Javabean）+MySQL实现图书管理系统
图书管理系统 一、需求分析 1.1 功能描述 1.1.1“读者”功能 1）图书的查询：图书的查询可以通过搜索图书 id、书名、作者名、出版社来实现,显示结果中需要包括书籍信息以及是否被借阅的情况； 2）图书的借阅：借阅图书…...
服务器CPU被WMI Provider Host系统进程占用过高，导致系统偶尔卡顿的排查处理方案
问题现状 最近一个项目遇到一个非常奇葩的问题：正式服务器被一个WMI Provider Host的系统进程占用大量的CPU资源，导致我们的系统偶尔卡顿 任务管理器-详细信息中CPU时间，这个进程也是占用最多的 接口时不时慢很多 但单独访问我们的接口又正…...
JavaSwing之--JMenuBar
Java Swing之–JMenuBar(菜单栏) JMenuBar是 Java Swing 库中的一个组件，用于创建菜单栏，通常位于窗口的顶部。它是菜单系统的容器，用于组织和显示应用程序的菜单结构 菜单栏由菜单构成，菜单由菜单项或子菜单构成，也…...
vue3+elementplus表格表头加图标及文字提示
表头加自定义内容有很多种方法，包括使用el-icon，插槽，CSS 伪元素添加图标还有font-awesome等等。 一、方法一：使用render-header属性 <el-table :data"tableData"><el-table-column prop"name" la…...
【物联网-S7Comm协议】
物联网-S7Comm协议 ■ 调试工具■ S7协议-简介■ S7协议和modbusTCP协议区别■ OSI 层 S7 协议■ S7协议数据结构 （TPKTCOTPS7Comm）■ TPKT（第五层：会话层） 总共占4个字节■ COTP（第六层：表示层…...
NLP中的input_ids是什么？
在自然语言处理（NLP）中，input_ids 是什么 在自然语言处理（NLP）中，input_ids 是将文本转换为模型可处理的数字表示后的结果，是模型输入的核心参数之一。 一、基本概念 文本数字化 原始文本（如 “Hello world!”）无法直接被模型处理，需要通过分词器（Tokenizer） 将其…...
LeetCode Hot100刷题——划分字母区间
763.划分字母区间 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段，同一字母最多出现在一个片段中。例如，字符串 "ababcc" 能够被分为 ["abab", "cc"]，但类似 ["aba", "bcc"…...
c++ 基于OpenSSL的EVP接口进行SHA3-512和SM3哈希计算
通过OpenSSL的EVP接口进行 SHA3-512 和 SM3 哈希计算 #include <iostream> #include <openssl/evp.h> #include <cstring>using namespace std;void PrintHex(const std::string &hexStr) {for (unsigned char c : hexStr){printf("%02x", c)…...
Vue3实现拖拽改变元素大小
代码实现 整体页面结构通过一个 dragResize-wrapper 包含左右两个区域，左侧区域包含一个可拖拽的边界。以下是关键代码 HTML 部分 <template><div class"dragResize-wrapper"><div class"dragResize-left"><div class&…...
Spring IoC 详解：原理、实现与实战
Spring IoC 详解：原理、实现与实战 前言 Spring IoC（Inversion of Control，控制反转）是Spring框架的核心基础。它通过解耦对象的创建与依赖关系管理，极大提升了系统的可维护性和扩展性。本文将系统梳理Spring IoC的原…...
深入Java NIO：构建高性能网络应用
引言 在上一篇文章中，我们介绍了Java网络编程的基础模型：阻塞式I/O和线程池模型。这些模型在处理高并发场景时存在明显的局限性。本文将深入探讨Java NIO（New I/O）技术，这是一种能够显著提升网络应用性能的非阻塞I/O模…...
数据分析后台设计指南：实战案例解析与5大设计要点总结
引言 数据于企业而言异常重要，企业通过数据可以优化战略决策，因此企业对数据的采集正趋向智能化、数字化，数据分析后台就是企业智能化、数字化记录、分析数据的渠道。本文分享一个数据分析后台原型实战案例，通过页面拆解总结原型…...
深度学习之模型压缩三驾马车：基于ResNet18的模型剪枝实战（1）
一、背景：为什么需要模型剪枝？ 随着深度学习的发展，模型参数量和计算量呈指数级增长。以ResNet18为例，其在ImageNet上的参数量约为1100万，虽然在服务器端运行流畅，但在移动端或嵌入式设备上部署时…...
SSH/RDP无法远程连接？腾讯云CVM及通用服务器连接失败原因与超全排查指南
更多服务器知识，尽在hostol.com 嘿，各位服务器的“船长”和“管理员”们！咱们在浩瀚的数字海洋中驾驭着自己的服务器“战舰”，最怕遇到什么情况？除了数据丢失，恐怕就是突然发现自己被锁在“驾驶舱”门外—…...
网络测试实战：金融数据传输的生死时速
阅读原文 7.4 网络测试实战--数据传输：当毫秒决定百万盈亏 你的交易指令为何总是慢人一步？ 在2020年"原油宝"事件中，中行原油宝产品因为数据传输延迟导致客户未能及时平仓，最终亏损超过90亿元。这个血淋淋的案例揭示了…...
数据库系统概论（十四）详细讲解SQL中空值的处理
数据库系统概论（十四）详细讲解SQL中空值的处理 前言一、什么是空值？二、空值是怎么产生的？1. 插入数据时主动留空2. 更新数据时设置为空3. 外连接查询时自然出现 三、如何判断空值？例子：查“漏填数据的学生…...