用JS编写一个后台管理系统
时间: 2023-08-26 12:07:20 浏览: 44
好的,我可以给你提供一个简单的后台管理系统的代码框架,你可以在此基础上进行完善和优化。
HTML文件:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统</title>
</head>
<body>
<h1>后台管理系统</h1>
<nav>
<ul>
<li><a href="#dashboard">仪表盘</a></li>
<li><a href="#products">产品管理</a></li>
<li><a href="#orders">订单管理</a></li>
<li><a href="#customers">客户管理</a></li>
<li><a href="#settings">设置</a></li>
</ul>
</nav>
<main>
<!-- 这里放置各个页面的内容 -->
</main>
</body>
</html>
```
JS文件:
```
// 页面切换函数
function switchPage(pageId) {
// 隐藏所有页面
document.querySelectorAll("main > section").forEach(section => {
section.style.display = "none";
});
// 显示目标页面
document.querySelector(`main > section#${pageId}`).style.display = "block";
}
window.onload = () => {
// 绑定导航栏链接的点击事件
document.querySelectorAll("nav a").forEach(link => {
link.onclick = event => {
event.preventDefault();
switchPage(link.getAttribute("href").substring(1));
};
});
// 默认显示仪表盘
switchPage("dashboard");
};
```
CSS文件:
```
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
h1 {
text-align: center;
margin-top: 20px;
}
/* 导航栏样式 */
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 5px;
border-radius: 5px;
}
nav a:hover {
background-color: #555;
}
/* 页面内容样式 */
main {
margin: 20px;
}
section {
display: none;
}
section h2 {
margin-top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even) {
background-color: #f2f2f2;
}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #333;
color: #fff;
}
```
这个后台管理系统简单而实用,页面切换使用了简单的JS代码实现,样式使用了常用的CSS样式表,你可以在此基础上添加更多的功能和优化。