后台管理系统模版（html + js + css）
一、后台管理系统模版
废话不多说，直接上源码
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电商后台管理系统</title>
<link rel="stylesheet" href="../style/css/index.css">
<!-- 小图标 -->
<link rel="stylesheet" href="../../StyleUtils/css/fontawesome-free-6.6.0-web/css/all.css">
<!-- 使用ajax必须要导入 -->
<script src="../../StyleUtils/js/utils/jQuery.js"></script>
</head>
<body>
<div class="admin-container">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="logo">
<button class="hamburger-btn">
<i class="fas fa-bars"></i>
</button>
<span>电商管理</span>
</div>
<button class="sidebar-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="sidebar-menu">
<div class="menu-group">
<div class="menu-title">主要</div>
<ul>
<li class="menu-item active">
<a href="#">
<i class="fas fa-home"></i>
<span>仪表盘</span>
</a>
</li>
<li class="menu-item">
<a href="#">
<i class="fas fa-shopping-cart"></i>
<span>订单管理</span>
</a>
</li>
<li class="menu-item">
<a href="#">
<i class="fas fa-box-open"></i>
<span>商品管理</span>
</a>
</li>
<li class="menu-item">
<a href="#">
<i class="fas fa-users"></i>
<span>用户管理</span>
</a>
</li>
</ul>
</div>
<div class="menu-group">
<div class="menu-title">运营</div>
<ul>
<li class="menu-item">
<a href="#">
<i class="fas fa-tags"></i>
<span>促销活动</span>
</a>
</li>
<li class="menu-item">
<a href="#">
<i class="fas fa-chart-line"></i>
<span>数据分析</span>
</a>
</li>
<li class="menu-item has-submenu">
<a href="#">
<i class="fas fa-bullhorn"></i>
<span>营销工具</span>
<i class="fas fa-chevron-down submenu-toggle"></i>
</a>
<ul class="submenu">
<li><a href="#">优惠券</a></li>
<li><a href="#">满减活动</a></li>
<li><a href="#">会员积分</a></li>
</ul>
</li>
</ul>
</div>
<div class="menu-group">
<div class="menu-title">系统</div>
<ul>
<li class="menu-item">
<a href="#">
<i class="fas fa-cog"></i>
<span>系统设置</span>
</a>
</li>
<li class="menu-item">
<a href="#">
<i class="fas fa-user-shield"></i>
<span>权限管理</span>
</a>
</li>
</ul>
</div>
</div>
<div class="sidebar-footer">
<div class="user-profile">
<img src="#" alt="用户头像">
<div class="user-info">
<div class="user-name">管理员</div>
<div class="user-role">超级管理员</div>
</div>
</div>
<button class="logout-btn">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</aside>
<!-- 主内容区 -->
<main class="main-content" id="main-content">
<!-- 内容将通过JS动态加载 -->
</main>
</div>
<script src="../style/js/index.js"></script>
</body>
</html>
index.css
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f6fa;
color: #333;
}
/* 主容器 */
.admin-container {
display: flex;
min-height: 100vh;
}
/* 侧边栏样式 */
.sidebar {
width: 260px;
background: linear-gradient(135deg, #3a416f 0%, #141727 100%);
color: #fff;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 10;
}
.sidebar-header {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 600;
}
.logo i {
font-size: 24px;
margin-right: 10px;
color: #e14eca;
}
.sidebar-toggle {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
display: none;
}
.sidebar-menu {
flex: 1;
overflow-y: auto;
padding: 20px 0;
}
.menu-group {
margin-bottom: 20px;
}
.menu-title {
padding: 10px 20px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
font-weight: 600;
}
.menu-item {
position: relative;
}
.menu-item a {
display: flex;
align-items: center;
padding: 12px 20px;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.menu-item a:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.menu-item.active a {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.menu-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: #e14eca;
}
.menu-item i:first-child {
font-size: 16px;
margin-right: 12px;
width: 20px;
text-align: center;
}
.badge {
margin-left: auto;
background: #e14eca;
color: white;
font-size: 10px;
padding: 3px 6px;
border-radius: 10px;
font-weight: bold;
}
/* 子菜单样式 */
.has-submenu .submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: rgba(0, 0, 0, 0.2);
}
.has-submenu .submenu a {
padding-left: 52px;
font-size: 13px;
}
.has-submenu .submenu-toggle {
margin-left: auto;
transition: transform 0.3s ease;
}
.has-submenu.open .submenu {
max-height: 300px;
}
.has-submenu.open .submenu-toggle {
transform: rotate(180deg);
}
/* 侧边栏底部样式 */
.sidebar-footer {
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.user-profile {
display: flex;
align-items: center;
}
.user-profile img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
}
.user-info {
line-height: 1.3;
}
.user-name {
font-size: 14px;
font-weight: 600;
}
.user-role {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.logout-btn {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
cursor: pointer;
transition: color 0.3s ease;
}
.logout-btn:hover {
color: #fff;
}
/* 主内容区样式 */
.main-content {
flex: 1;
padding: 30px;
background-color: #f5f6fa;
min-height: 100vh;
}
/* 仪表盘内容样式 */
.dashboard-container {
max-width: 1200px;
margin: 0 auto;
}
.welcome-message {
font-size: 24px;
color: #333;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
text-align: center;
}
/* 页面占位样式 */
.page-placeholder {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
max-width: 1200px;
margin: 0 auto;
}
.page-placeholder h1 {
margin-bottom: 20px;
color: #333;
}
/* 响应式设计 */
@media (max-width: 992px) {
.sidebar {
position: fixed;
left: -260px;
height: 100vh;
}
.sidebar.active {
left: 0;
}
.sidebar-toggle {
display: block;
}
.main-content {
margin-left: 0;
width: 100%;
}
}
/* 添加过渡效果 */
.sidebar {
transition: all 0.3s ease;
}
.logo span,
.menu-title,
.menu-item span,
.user-info,
.submenu-toggle {
transition: opacity 0.3s ease, display 0.3s ease;
}
/* 收起状态下的样式 */
.sidebar.collapsed {
width: 60px;
}
.sidebar.collapsed .logo span,
.sidebar.collapsed .menu-title,
.sidebar.collapsed .menu-item span,
.sidebar.collapsed .user-info,
.sidebar.collapsed .submenu-toggle {
display: none;
opacity: 0;
}
/* 汉堡按钮样式 */
.hamburger-btn {
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
margin-right: 10px;
padding: 5px;
display: none; /* 默认隐藏，只在桌面端显示 */
}
/* 响应式设计调整 */
@media (max-width: 992px) {
.sidebar-toggle {
display: block;
}
/* 在小屏幕下显示汉堡按钮 */
.hamburger-btn {
display: block;
}
}
@media (min-width: 993px) {
/* 在大屏幕下显示汉堡按钮 */
.hamburger-btn {
display: block;
}
/* 隐藏原来的侧边栏切换按钮 */
.sidebar-toggle {
display: none;
}
}
index.js（很重要，因为我利用了类似vue插槽功能，将页面插入右侧内容区，并且右侧内容区的js必须要在index.js中导入，不然会出现导入成功但是不生效的情况，然后加入其他页面时在“页面映射表”中加入，js也在其下方有模版显示，记得自己查看，接下来会给一个页面供实现）
document.addEventListener('DOMContentLoaded', function() {
// 侧边栏折叠/展开功能
const sidebarToggle = document.querySelector('.sidebar-toggle');
const sidebar = document.querySelector('.sidebar');
sidebarToggle.addEventListener('click', function() {
sidebar.classList.toggle('active');
});
// 子菜单展开/折叠功能
const submenuToggles = document.querySelectorAll('.submenu-toggle');
submenuToggles.forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const parent = this.closest('.has-submenu');
parent.classList.toggle('open');
});
});
// 页面加载器
const pageLoader = {
// 页面映射表 - 菜单文本对应页面文件名（重点看）
pageMap: {
'仪表盘': 'dashboard.html',
'订单管理': 'orders.html',
'商品管理': 'Product.html',
'用户管理': 'User.html',
'促销活动': 'promotions.html',
'数据分析': 'analytics.html',
'系统设置': 'settings.html',
'权限管理': 'permissions.html'
},
// 加载页面内容
load: function(pageName) {
const pageFile = this.pageMap[pageName];
// 动态加载其他页面的js（重点看）
if (pageName === '用户管理') {
const script = document.createElement('script');
script.src = '../style/js/User.js';
document.body.appendChild(script);
}
if (pageName === '商品管理') {
const script = document.createElement('script');
script.src = '../style/js/Product.js';
document.body.appendChild(script);
}
if (!pageFile) {
console.error('未找到对应的页面:', pageName);
this.showDefaultPage(pageName);
return;
}
fetch(`../component/${pageFile}`)
.then(response => {
if (!response.ok) {
throw new Error('页面加载失败');
}
return response.text();
})
.then(html => {
document.getElementById('main-content').innerHTML = html;
// 页面加载后执行的回调
this.afterPageLoad(pageName);
})
.catch(error => {
console.error(`加载${pageName}页面失败:`, error);
this.showDefaultPage(pageName);
});
},
// 显示默认页面（当指定页面不存在时）
showDefaultPage: function(pageName) {
document.getElementById('main-content').innerHTML = `
<div class="page-placeholder">
<h1>${pageName}</h1>
<p>这是${pageName}页面的内容区域</p>
<p class="error-message">未能加载${pageName}页面，显示默认内容</p>
</div>
`;
},
// 页面加载后的回调函数（可用于页面特定初始化）
afterPageLoad: function(pageName) {
console.log(`${pageName}页面加载完成`);
// 这里可以添加页面特定的初始化代码
// 例如 if(pageName === '仪表盘') { initDashboard(); }
}
};
// 菜单项点击事件处理
const menuItems = document.querySelectorAll('.menu-item:not(.has-submenu)');
menuItems.forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
// 移除所有active类
menuItems.forEach(i => i.classList.remove('active'));
// 给当前点击项添加active类
this.classList.add('active');
// 获取菜单文本并加载对应页面
const menuText = this.querySelector('span').textContent;
pageLoader.load(menuText);
});
});
// 初始加载仪表盘
pageLoader.load('仪表盘');
// 登出按钮点击事件
const logoutBtn = document.querySelector('.logout-btn');
logoutBtn.addEventListener('click', function() {
if(confirm('确定要退出系统吗？')) {
// 实际项目中这里应该是跳转到登出页面或执行登出API
alert('您已成功登出系统');
// window.location.href = '/logout';
}
});
const hamburgerBtn = document.querySelector('.hamburger-btn');
hamburgerBtn.addEventListener('click', function() {
sidebar.classList.toggle('collapsed');
// 可选：添加收起状态的样式变化
if(sidebar.classList.contains('collapsed')) {
// 侧边栏收起时的额外样式
sidebar.style.width = '60px';
document.querySelector('.logo span').style.display = 'none';
document.querySelectorAll('.menu-title, .menu-item span, .user-info, .submenu-toggle')
.forEach(el => el.style.display = 'none');
} else {
// 侧边栏展开时的样式
sidebar.style.width = '260px';
document.querySelector('.logo span').style.display = 'inline';
document.querySelectorAll('.menu-title, .menu-item span, .user-info, .submenu-toggle')
.forEach(el => el.style.display = '');
}
});
// 模拟响应式行为
function handleResize() {
if (window.innerWidth < 992) {
sidebar.classList.remove('active', 'collapsed');
sidebar.style.width = '260px';
// 确保所有元素在小屏幕下都显示
document.querySelectorAll('.logo span, .menu-title, .menu-item span, .user-info, .submenu-toggle')
.forEach(el => el.style.display = '');
} else {
sidebar.classList.add('active');
}
}
// 初始检查和窗口大小变化监听
handleResize();
window.addEventListener('resize', handleResize);
});
二、右侧内容区测试页面
注意看html页面的写法，必须要去掉body等属性，css样式在这可以导入，但是js必须在index.js中导入，注意页面要有
<div>
<h1>HelloWorld</h1>
</div>
<link rel="stylesheet" href="../style/css/User.css">
三、效果图
项目目录：可以根据这个来创建文件
最后，博主不会前端，只会后端之类的，前端太麻烦了，自己审美确实是路边一条，基本都是用AI生成并美化的，我再根据前端写接口来进行数据的交互，所以页面无法实现可以按F12查看页面是否报错等情况，自己解决一下，感谢大家支持！！！
浙公网安备 33010602011771号