[已解决]html5 左边菜单栏保持展开或者关闭的状态

FishC · 发表于昨天 22:24

kerln888 发表于 2026-03-09 22:23
@FishC 鱼C，想用js写个流程审批，能给个例子吗？就是 ...

下面是一个简单的JavaScript流程审批示例，包含发起、两级审批和归档功能：

// 审批状态常量
const STATUS = {
DRAFT: '草稿',
PENDING_FIRST: '待一级审批',
PENDING_SECOND: '待二级审批',
APPROVED: '已批准',
REJECTED: '已驳回',
ARCHIVED: '已归档'
};
// 审批流程类
class ApprovalFlow {
constructor(initiator) {
this.initiator = initiator; // 发起人
this.firstApprover = null; // 第一审批人
this.secondApprover = null; // 第二审批人
this.currentStatus = STATUS.DRAFT;
this.history = []; // 审批历史记录
}
// 发起流程
submit(firstApprover, secondApprover) {
if (this.currentStatus !== STATUS.DRAFT) {
console.log('流程已提交，无法重复发起');
return false;
}
this.firstApprover = firstApprover;
this.secondApprover = secondApprover;
this.currentStatus = STATUS.PENDING_FIRST;
this.history.push({
operator: this.initiator,
action: '提交流程',
time: new Date().toLocaleString(),
status: this.currentStatus
});
console.log(`流程已提交，等待 ${firstApprover} 审批`);
return true;
}
// 第一级审批
firstApprove(approver, isApproved, remark = '') {
if (this.currentStatus !== STATUS.PENDING_FIRST) {
console.log('当前不是第一级审批阶段');
return false;
}
if (approver !== this.firstApprover) {
console.log('审批人权限不足');
return false;
}
if (isApproved) {
this.currentStatus = STATUS.PENDING_SECOND;
console.log(`第一级审批通过，等待 ${this.secondApprover} 审批`);
} else {
this.currentStatus = STATUS.REJECTED;
console.log('第一级审批驳回，流程结束');
}
this.history.push({
operator: approver,
action: isApproved ? '一级审批通过' : '一级审批驳回',
remark: remark,
time: new Date().toLocaleString(),
status: this.currentStatus
});
return true;
}
// 第二级审批
secondApprove(approver, isApproved, remark = '') {
if (this.currentStatus !== STATUS.PENDING_SECOND) {
console.log('当前不是第二级审批阶段');
return false;
}
if (approver !== this.secondApprover) {
console.log('审批人权限不足');
return false;
}
if (isApproved) {
this.currentStatus = STATUS.APPROVED;
console.log('第二级审批通过，流程完成');
} else {
this.currentStatus = STATUS.REJECTED;
console.log('第二级审批驳回，流程结束');
}
this.history.push({
operator: approver,
action: isApproved ? '二级审批通过' : '二级审批驳回',
remark: remark,
time: new Date().toLocaleString(),
status: this.currentStatus
});
return true;
}
// 归档
archive() {
if (this.currentStatus !== STATUS.APPROVED) {
console.log('只有已批准的流程才能归档');
return false;
}
this.currentStatus = STATUS.ARCHIVED;
this.history.push({
operator: '系统',
action: '流程归档',
time: new Date().toLocaleString(),
status: this.currentStatus
});
console.log('流程已归档');
return true;
}
// 查看审批历史
showHistory() {
console.log('===== 审批历史记录 =====');
this.history.forEach(record => {
console.log(`[${record.time}] ${record.operator} - ${record.action}`);
if (record.remark) console.log(`备注：${record.remark}`);
});
}
}
// 使用示例
const flow = new ApprovalFlow('张三');
// 发起流程
flow.submit('李四', '王五');
// 第一级审批
flow.firstApprove('李四', true, '同意，请下一级审批');
// 第二级审批
flow.secondApprove('王五', true, '审批通过');
// 归档
flow.archive();
// 查看历史
flow.showHistory();

复制代码

使用方法：

1. 创建流程实例：new ApprovalFlow('发起人姓名')

2. 提交流程：submit('第一审批人', '第二审批人')

3. 第一级审批：firstApprove('审批人', 是否通过, '备注')

4. 第二级审批：secondApprove('审批人', 是否通过, '备注')

5. 归档：archive()

6. 查看历史：showHistory()

这个示例包含了基本的流程控制、状态验证和审批历史记录。实际使用时，你可以根据需求扩展以下功能：
- 添加更多审批层级
- 连接数据库持久化存储
- 添加邮件或消息通知
- 实现撤回功能
- 添加附件上传功能

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

kerln888 · 发表于昨天 22:35

FishC 发表于 2026-3-9 22:24
下面是一个简单的JavaScript流程审批示例，包含发起、两级审批和归档功能：

@FishC
连接数据库持久化存储
- 添加邮件或消息通知
- 实现撤回功能
- 添加附件上传功能
这些怎么做，请给个例子

FishC · 发表于昨天 22:38

kerln888 发表于 2026-03-09 22:35
FishC 发表于 2026-3-9 22:24
下面是一个简单的JavaS ...

连接数据库持久化存储
- 添加邮件或消息通知
- 实现撤回功能
- 添加附件上传功能
这些怎么做，请给个例子

我来为你扩展之前的流程审批示例，添加这些实用功能。这是一个完整的全栈示例，使用Node.js + Express + SQLite：

// 1. 安装依赖：npm install express sqlite3 multer nodemailer body-parser
// ---------- server.js ----------
const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const multer = require('multer');
const nodemailer = require('nodemailer');
const path = require('path');
const fs = require('fs');
const app = express();
const port = 3000;
// 数据库初始化
const db = new sqlite3.Database('./approval.db');
db.serialize(() => {
// 流程表
db.run(`CREATE TABLE IF NOT EXISTS processes (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
content TEXT,
applicant TEXT NOT NULL,
status TEXT DEFAULT 'pending',
level1_approver TEXT,
level2_approver TEXT,
level1_result TEXT,
level2_result TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
can_withdraw BOOLEAN DEFAULT 1
)`);
// 附件表
db.run(`CREATE TABLE IF NOT EXISTS attachments (
id INTEGER PRIMARY KEY AUTOINCREMENT,
process_id INTEGER,
filename TEXT,
path TEXT,
uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (process_id) REFERENCES processes(id)
)`);
// 消息通知表
db.run(`CREATE TABLE IF NOT EXISTS notifications (
id INTEGER PRIMARY KEY AUTOINCREMENT,
process_id INTEGER,
user TEXT,
message TEXT,
is_read BOOLEAN DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (process_id) REFERENCES processes(id)
)`);
});
// 文件上传配置
const storage = multer.diskStorage({
destination: './uploads/',
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname));
}
});
const upload = multer({ storage });
// 邮件配置（示例使用Ethereal测试邮件服务）
const transporter = nodemailer.createTransport({
host: 'smtp.ethereal.email',
port: 587,
auth: {
user: 'your-email@ethereal.email',
pass: 'your-password'
}
});
// 中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use('/uploads', express.static('uploads'));
// ---------- API接口 ----------
// 1. 发起申请（带附件上传）
app.post('/api/process', upload.array('attachments', 5), async (req, res) => {
const { title, content, applicant, level1_approver, level2_approver } = req.body;
const files = req.files || [];
db.run(
`INSERT INTO processes (title, content, applicant, level1_approver, level2_approver)
VALUES (?, ?, ?, ?, ?)`,
[title, content, applicant, level1_approver, level2_approver],
function(err) {
if (err) {
return res.status(500).json({ error: err.message });
}
const processId = this.lastID;
// 保存附件信息
files.forEach(file => {
db.run(
`INSERT INTO attachments (process_id, filename, path) VALUES (?, ?, ?)`,
[processId, file.originalname, file.path]
);
});
// 发送邮件通知一级审批人
sendEmailNotification(
level1_approver,
'新的审批申请',
`您有一个新的审批申请需要处理：${title}`
);
// 添加消息通知
addNotification(processId, level1_approver, '您有一个新的待审批申请');
res.json({
success: true,
processId,
message: '申请提交成功'
});
}
);
});
// 2. 一级审批
app.post('/api/process/:id/level1-approve', (req, res) => {
const { result, comment } = req.body;
const processId = req.params.id;
db.run(
`UPDATE processes SET level1_result = ?, status = ?, updated_at = CURRENT_TIMESTAMP
WHERE id = ? AND status = 'pending'`,
[result, result === 'approved' ? 'level1_approved' : 'rejected', processId],
function(err) {
if (err || this.changes === 0) {
return res.status(400).json({ error: '审批失败' });
}
// 通知申请人
db.get(`SELECT applicant FROM processes WHERE id = ?`, [processId], (err, row) => {
if (row) {
addNotification(processId, row.applicant, `一级审批结果：${result}`);
}
});
// 如果通过，通知二级审批人
if (result === 'approved') {
db.get(
`SELECT level2_approver FROM processes WHERE id = ?`,
[processId],
(err, row) => {
if (row) {
addNotification(processId, row.level2_approver, '请进行二级审批');
sendEmailNotification(
row.level2_approver,
'二级审批通知',
'请处理待审批的申请'
);
}
}
);
}
res.json({ success: true, message: '审批完成' });
}
);
});
// 3. 撤回申请（只有pending状态且未超过5分钟可撤回）
app.post('/api/process/:id/withdraw', (req, res) => {
const processId = req.params.id;
db.run(
`UPDATE processes SET status = 'withdrawn', can_withdraw = 0
WHERE id = ? AND status = 'pending'
AND datetime(created_at, '+5 minutes') > datetime('now')`,
[processId],
function(err) {
if (err || this.changes === 0) {
return res.status(400).json({
error: '撤回失败，可能已超时或状态不符'
});
}
// 通知审批人
db.get(
`SELECT level1_approver FROM processes WHERE id = ?`,
[processId],
(err, row) => {
if (row) {
addNotification(processId, row.level1_approver, '申请已撤回');
}
}
);
res.json({ success: true, message: '撤回成功' });
}
);
});
// 4. 获取用户通知
app.get('/api/notifications/:user', (req, res) => {
const user = req.params.user;
db.all(
`SELECT n.*, p.title as process_title
FROM notifications n
LEFT JOIN processes p ON n.process_id = p.id
WHERE n.user = ? AND n.is_read = 0
ORDER BY n.created_at DESC`,
[user],
(err, rows) => {
if (err) {
return res.status(500).json({ error: err.message });
}
res.json(rows);
}
);
});
// 5. 获取申请详情（含附件）
app.get('/api/process/:id', (req, res) => {
const processId = req.params.id;
db.get(
`SELECT p.*,
GROUP_CONCAT(a.filename) as attachments
FROM processes p
LEFT JOIN attachments a ON p.id = a.process_id
WHERE p.id = ?
GROUP BY p.id`,
[processId],
(err, process) => {
if (err) {
return res.status(500).json({ error: err.message });
}
// 获取附件详情
db.all(
`SELECT * FROM attachments WHERE process_id = ?`,
[processId],
(err, attachments) => {
process.attachments = attachments;
res.json(process);
}
);
}
);
});
// ---------- 辅助函数 ----------
// 发送邮件通知
async function sendEmailNotification(to, subject, text) {
try {
const info = await transporter.sendMail({
from: '"审批系统" <system@example.com>',
to: to,
subject: subject,
text: text
});
console.log('邮件已发送:', info.messageId);
} catch (error) {
console.error('邮件发送失败:', error);
}
}
// 添加消息通知
function addNotification(processId, user, message) {
db.run(
`INSERT INTO notifications (process_id, user, message) VALUES (?, ?, ?)`,
[processId, user, message]
);
}
app.listen(port, () => {
console.log(`服务器运行在 [url=http://localhost:${port}`);]http://localhost:${port}`);[/url]
});
// ---------- 前端HTML示例 ----------
/*
<!DOCTYPE html>
<html>
<head>
<title>流程审批系统</title>
<style>
.container { max-width: 800px; margin: 20px auto; padding: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group textarea {
width: 100%; padding: 8px;
}
.btn { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
.btn:hover { background: #0056b3; }
.notification { background: #f8f9fa; padding: 10px; margin: 10px 0; border-left: 4px solid #007bff; }
.attachment-list { margin-top: 10px; }
.attachment-item {
display: inline-block;
background: #e9ecef;
padding: 5px 10px;
margin: 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<h1>发起审批申请</h1>
<form id="processForm" enctype="multipart/form-data">
<div class="form-group">
<label>标题:</label>
<input type="text" name="title" required>
</div>
<div class="form-group">
<label>内容:</label>
<textarea name="content" rows="4" required></textarea>
</div>
<div class="form-group">
<label>申请人:</label>
<input type="text" name="applicant" required>
</div>
<div class="form-group">
<label>一级审批人邮箱:</label>
<input type="email" name="level1_approver" required>
</div>
<div class="form-group">
<label>二级审批人邮箱:</label>
<input type="email" name="level2_approver" required>
</div>
<div class="form-group">
<label>附件上传（最多5个）:</label>
<input type="file" name="attachments" multiple>
<div class="attachment-list" id="attachmentPreview"></div>
</div>
<button type="submit" class="btn">提交申请</button>
<button type="button" class="btn" onclick="checkNotifications()">检查通知</button>
</form>
<div id="notifications"></div>
<div id="processList"></div>
</div>
<script>
// 提交申请（带附件）
document.getElementById('processForm').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const response = await fetch('/api/process', {
method: 'POST',
body: formData
});
const result = await response.json();
alert(result.message || result.error);
});
// 检查通知
async function checkNotifications() {
const user = document.querySelector('[name="applicant"]').value;
const response = await fetch(`/api/notifications/${user}`);
const notifications = await response.json();
const container = document.getElementById('notifications');
container.innerHTML = '<h2>通知</h2>';
notifications.forEach(notify => {
const div = document.createElement('div');
div.className = 'notification';
div.innerHTML = `
<strong>${notify.process_title || '系统通知'}</strong>
<p>${notify.message}</p>
<small>${new Date(notify.created_at).toLocaleString()}</small>
`;
container.appendChild(div);
});
}
// 附件预览
document.querySelector('[name="attachments"]').addEventListener('change', (e) => {
const preview = document.getElementById('attachmentPreview');
preview.innerHTML = '';
Array.from(e.target.files).forEach(file => {
const span = document.createElement('span');
span.className = 'attachment-item';
span.textContent = file.name;
preview.appendChild(span);
});
});
// 撤回申请
async function withdrawProcess(processId) {
if (!confirm('确定要撤回申请吗？')) return;
const response = await fetch(`/api/process/${processId}/withdraw`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
});
const result = await response.json();
alert(result.message || result.error);
}
</script>
</body>
</html>
*/

复制代码

功能说明：

1. 数据库持久化
- 使用SQLite存储流程数据
- 三个核心表：processes（流程）、attachments（附件）、notifications（通知）
- 支持状态跟踪和时间戳

2. 邮件/消息通知
- 使用nodemailer发送邮件（示例使用Ethereal测试服务）
- 数据库存储消息通知
- 重要节点自动发送通知

3. 撤回功能
- 只有pending状态且5分钟内可撤回
- 撤回后状态变更为withdrawn
- 自动通知相关审批人

4. 附件上传
- 使用multer中间件处理文件上传
- 限制最多5个附件
- 文件存储在uploads目录
- 数据库记录文件信息

使用步骤：
1. 安装依赖：运行 npm install express sqlite3 multer nodemailer
2. 创建uploads目录：mkdir uploads
3. 启动服务器：node server.js
4. 访问前端页面进行操作

注意：这只是一个教学示例，生产环境需要添加更多安全措施（如身份验证、输入验证、错误处理等）。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

kerln888 · 发表于昨天 23:07

@FishC 请举一个RBAC实例。以js和mysql数据库为例，创建了导航栏和侧边栏，不同权限显现的导航栏和侧边栏。比如导航栏有4个标签ABCD，侧边栏6个标签efghijk。管理员全部显示，员工显示AB和efgh，游客只显示C和k。

FishC · 发表于昨天 23:11

kerln888 发表于 2026-03-09 23:07
@FishC 请举一个RBAC实例。以js和mysql数据库为例，创 ...

RBAC实例：基于JavaScript和MySQL的导航栏与侧边栏权限控制

本实例展示如何使用RBAC管理用户对导航栏和侧边栏的访问。假设导航栏有4个标签A、B、C、D，侧边栏有7个标签e、f、g、h、i、j、k（注：用户提及6个，但示例使用常见字母，您可按需调整）。权限分配如下：
- 管理员：显示所有标签。
- 员工：显示导航栏A、B和侧边栏e、f、g、h。
- 游客：显示导航栏C和侧边栏k。

1. 数据库设计
创建MySQL数据库和表，存储用户、角色、权限信息。

-- 创建数据库
CREATE DATABASE rbac_example;
USE rbac_example;
-- 用户表
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);
-- 角色表
CREATE TABLE roles (
id INT AUTO_INCREMENT PRIMARY KEY,
role_name VARCHAR(50) NOT NULL
);
-- 权限表
CREATE TABLE permissions (
id INT AUTO_INCREMENT PRIMARY KEY,
permission_name VARCHAR(50) NOT NULL,
type ENUM('nav', 'side') NOT NULL
);
-- 用户角色关联表
CREATE TABLE user_roles (
user_id INT,
role_id INT,
FOREIGN KEY (user_id) REFERENCES users(id),
FOREIGN KEY (role_id) REFERENCES roles(id),
PRIMARY KEY (user_id, role_id)
);
-- 角色权限关联表
CREATE TABLE role_permissions (
role_id INT,
permission_id INT,
FOREIGN KEY (role_id) REFERENCES roles(id),
FOREIGN KEY (permission_id) REFERENCES permissions(id),
PRIMARY KEY (role_id, permission_id)
);
-- 插入示例角色
INSERT INTO roles (role_name) VALUES ('admin'), ('employee'), ('guest');
-- 插入权限
INSERT INTO permissions (permission_name, type) VALUES
('nav_a', 'nav'),
('nav_b', 'nav'),
('nav_c', 'nav'),
('nav_d', 'nav'),
('side_e', 'side'),
('side_f', 'side'),
('side_g', 'side'),
('side_h', 'side'),
('side_i', 'side'),
('side_j', 'side'),
('side_k', 'side');
-- 分配权限给管理员（所有权限）
INSERT INTO role_permissions (role_id, permission_id)
SELECT r.id, p.id FROM roles r, permissions p WHERE r.role_name = 'admin';
-- 分配权限给员工
INSERT INTO role_permissions (role_id, permission_id)
SELECT r.id, p.id FROM roles r, permissions p
WHERE r.role_name = 'employee'
AND p.permission_name IN ('nav_a', 'nav_b', 'side_e', 'side_f', 'side_g', 'side_h');
-- 分配权限给游客
INSERT INTO role_permissions (role_id, permission_id)
SELECT r.id, p.id FROM roles r, permissions p
WHERE r.role_name = 'guest'
AND p.permission_name IN ('nav_c', 'side_k');
-- 插入示例用户（密码应使用哈希，此处为简化使用明文占位）
INSERT INTO users (username, password) VALUES
('admin_user', 'hashed_pass'),
('employee_user', 'hashed_pass'),
('guest_user', 'hashed_pass');
-- 分配角色给用户
INSERT INTO user_roles (user_id, role_id) VALUES
(1, (SELECT id FROM roles WHERE role_name = 'admin')),
(2, (SELECT id FROM roles WHERE role_name = 'employee')),
(3, (SELECT id FROM roles WHERE role_name = 'guest'));

复制代码

2. 后端API（使用Node.js和Express）
创建后端服务，提供权限查询接口。

const express = require('express');
const mysql = require('mysql2');
const app = express();
const port = 3000;
// 数据库连接
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'rbac_example'
});
db.connect(err => {
if (err) throw err;
console.log('Database connected');
});
app.use(express.json());
// 获取用户权限的API端点
app.get('/permissions/:userId', (req, res) => {
const userId = req.params.userId;
const query = `
SELECT p.permission_name, p.type
FROM users u
JOIN user_roles ur ON u.id = ur.user_id
JOIN roles r ON ur.role_id = r.id
JOIN role_permissions rp ON r.id = rp.role_id
JOIN permissions p ON rp.permission_id = p.id
WHERE u.id = ?
`;
db.query(query, [userId], (err, results) => {
if (err) {
res.status(500).json({ error: err.message });
} else {
res.json(results);
}
});
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});

复制代码

3. 前端JavaScript
在HTML页面中，使用JavaScript动态生成导航栏和侧边栏。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RBAC Example</title>
<style>
.navbar, .sidebar {
display: flex;
list-style: none;
padding: 0;
}
.navbar li, .sidebar li {
margin: 0 10px;
}
</style>
</head>
<body>
<nav>
<ul id="navbar" class="navbar"></ul>
</nav>
<aside>
<ul id="sidebar" class="sidebar"></ul>
</aside>
<script>
// 假设当前用户ID为1（管理员），实际应从登录会话获取
const userId = 1;
fetch(`[url=http://localhost:3000/permissions/${userId}`)]http://localhost:3000/permissions/${userId}`)[/url]
.then(response => response.json())
.then(permissions => {
const navbar = document.getElementById('navbar');
const sidebar = document.getElementById('sidebar');
navbar.innerHTML = '';
sidebar.innerHTML = '';
// 标签映射配置
const tagMap = {
'nav_a': { text: 'A', href: '#' },
'nav_b': { text: 'B', href: '#' },
'nav_c': { text: 'C', href: '#' },
'nav_d': { text: 'D', href: '#' },
'side_e': { text: 'e', href: '#' },
'side_f': { text: 'f', href: '#' },
'side_g': { text: 'g', href: '#' },
'side_h': { text: 'h', href: '#' },
'side_i': { text: 'i', href: '#' },
'side_j': { text: 'j', href: '#' },
'side_k': { text: 'k', href: '#' }
};
// 生成导航栏
permissions.filter(p => p.type === 'nav').forEach(perm => {
const tag = tagMap[perm.permission_name];
if (tag) {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = tag.href;
a.textContent = tag.text;
li.appendChild(a);
navbar.appendChild(li);
}
});
// 生成侧边栏
permissions.filter(p => p.type === 'side').forEach(perm => {
const tag = tagMap[perm.permission_name];
if (tag) {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = tag.href;
a.textContent = tag.text;
li.appendChild(a);
sidebar.appendChild(li);
}
});
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>

复制代码

总结
以上实例实现了RBAC控制的前端菜单显示。通过数据库分配角色权限，后端API提供权限数据，前端JavaScript动态渲染界面。您可以根据实际需求调整角色和权限分配。注意：实际应用中需加强安全性，如使用密码哈希、会话管理和错误处理。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

kerln888 · 发表于昨天 23:43

@FishC 更改一下条件。请举一个RBAC实例。以js和mysql数据库为例，创建了导航栏和侧边栏，导航栏有4个标签ABCD，且导航栏和侧边栏关联。就是点击A显示侧边栏2个标签A1 A2，点击B显示B1 B2 B3，点击C显示C1 C2，点击D显示D D2 D3 D4。现在要求管理员全部显示，员工显示ABD和A1 B1 B2 D1 D2 D4，游客只显示C和C1。

FishC · 发表于昨天 23:47

kerln888 发表于 2026-03-09 23:43
@FishC 更改一下条件。请举一个RBAC实例。以js和mysql ...

更改一下条件。请举一个RBAC实例。以js和mysql数据库为例，创建了导航栏和侧边栏，导航栏有4个标签ABCD，且导航栏和侧边栏关联。就是点击A显示侧边栏2个标签A1 A2，点击B显示B1 B2 B3，点击C显示C1 C2，点击D显示D D2 D3 D4。现在要求管理员全部显示，员工显示ABD和A1 B1 B2 D1 D2 D4，游客只显示C和C1。

下面是一个基于RBAC的实例，使用MySQL数据库和JavaScript实现。数据库存储角色和权限，前端根据用户角色动态生成导航栏和侧边栏。

1. 数据库设计

首先，创建角色表、权限表和角色权限关联表，并插入示例数据。

-- 创建角色表
CREATE TABLE roles (
id INT PRIMARY KEY AUTO_INCREMENT,
role_name VARCHAR(50) NOT NULL UNIQUE
);
-- 插入角色数据
INSERT INTO roles (role_name) VALUES ('admin'), ('staff'), ('guest');
-- 创建权限表
CREATE TABLE permissions (
id INT PRIMARY KEY AUTO_INCREMENT,
permission_name VARCHAR(100) NOT NULL UNIQUE
);
-- 插入权限数据：导航栏和侧边栏标签的访问权限
INSERT INTO permissions (permission_name) VALUES
('view_nav_A'), ('view_nav_B'), ('view_nav_C'), ('view_nav_D'),
('view_sidebar_A1'), ('view_sidebar_A2'),
('view_sidebar_B1'), ('view_sidebar_B2'), ('view_sidebar_B3'),
('view_sidebar_C1'), ('view_sidebar_C2'),
('view_sidebar_D1'), ('view_sidebar_D2'), ('view_sidebar_D3'), ('view_sidebar_D4');
-- 创建角色权限关联表
CREATE TABLE role_permissions (
role_id INT,
permission_id INT,
FOREIGN KEY (role_id) REFERENCES roles(id),
FOREIGN KEY (permission_id) REFERENCES permissions(id),
PRIMARY KEY (role_id, permission_id)
);
-- 为管理员分配所有权限
INSERT INTO role_permissions (role_id, permission_id)
SELECT r.id, p.id
FROM roles r, permissions p
WHERE r.role_name = 'admin';
-- 为员工分配权限：导航栏A、B、D，侧边栏A1、B1、B2、D1、D2、D4
INSERT INTO role_permissions (role_id, permission_id)
SELECT r.id, p.id
FROM roles r, permissions p
WHERE r.role_name = 'staff'
AND p.permission_name IN (
'view_nav_A', 'view_nav_B', 'view_nav_D',
'view_sidebar_A1', 'view_sidebar_B1', 'view_sidebar_B2',
'view_sidebar_D1', 'view_sidebar_D2', 'view_sidebar_D4'
);
-- 为游客分配权限：导航栏C，侧边栏C1
INSERT INTO role_permissions (role_id, permission_id)
SELECT r.id, p.id
FROM roles r, permissions p
WHERE r.role_name = 'guest'
AND p.permission_name IN ('view_nav_C', 'view_sidebar_C1');

复制代码

2. 前端HTML结构

创建一个简单的HTML页面，包含导航栏和侧边栏容器。

<!DOCTYPE html>
<html>
<head>
<title>RBAC导航示例</title>
<style>
.navbar {
display: flex;
background-color: #333;
padding: 10px;
}
.nav-item {
padding: 10px 15px;
color: white;
cursor: pointer;
margin-right: 5px;
}
.nav-item:hover {
background-color: #555;
}
.sidebar {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
min-height: 100px;
}
.sidebar-item {
padding: 5px;
border-bottom: 1px dashed #ddd;
}
</style>
</head>
<body>
<div id="navbar" class="navbar"></div>
<div id="sidebar" class="sidebar"></div>
<script src="menu.js"></script>
</body>
</html>

复制代码

3. JavaScript逻辑

在 menu.js 中，假设从后端获取用户权限，并根据权限动态生成导航栏和侧边栏。这里模拟一个API调用返回权限列表。

// 假设当前用户角色，实际应从登录状态获取
let userRole = 'staff'; // 可改为 'admin' 或 'guest' 测试
// 模拟权限数据，实际应从后端API获取
const permissionMap = {
admin: [
'view_nav_A', 'view_nav_B', 'view_nav_C', 'view_nav_D',
'view_sidebar_A1', 'view_sidebar_A2',
'view_sidebar_B1', 'view_sidebar_B2', 'view_sidebar_B3',
'view_sidebar_C1', 'view_sidebar_C2',
'view_sidebar_D1', 'view_sidebar_D2', 'view_sidebar_D3', 'view_sidebar_D4'
],
staff: [
'view_nav_A', 'view_nav_B', 'view_nav_D',
'view_sidebar_A1', 'view_sidebar_B1', 'view_sidebar_B2',
'view_sidebar_D1', 'view_sidebar_D2', 'view_sidebar_D4'
],
guest: [
'view_nav_C', 'view_sidebar_C1'
]
};
// 模拟从后端获取权限
function fetchPermissions(role) {
return new Promise(resolve => {
setTimeout(() => resolve(permissionMap[role] || []), 100);
});
}
// 导航栏和侧边栏配置
const navConfig = [
{
id: 'A',
navPermission: 'view_nav_A',
sidebarItems: [
{ id: 'A1', permission: 'view_sidebar_A1' },
{ id: 'A2', permission: 'view_sidebar_A2' }
]
},
{
id: 'B',
navPermission: 'view_nav_B',
sidebarItems: [
{ id: 'B1', permission: 'view_sidebar_B1' },
{ id: 'B2', permission: 'view_sidebar_B2' },
{ id: 'B3', permission: 'view_sidebar_B3' }
]
},
{
id: 'C',
navPermission: 'view_nav_C',
sidebarItems: [
{ id: 'C1', permission: 'view_sidebar_C1' },
{ id: 'C2', permission: 'view_sidebar_C2' }
]
},
{
id: 'D',
navPermission: 'view_nav_D',
sidebarItems: [
{ id: 'D1', permission: 'view_sidebar_D1' },
{ id: 'D2', permission: 'view_sidebar_D2' },
{ id: 'D3', permission: 'view_sidebar_D3' },
{ id: 'D4', permission: 'view_sidebar_D4' }
]
}
];
// 生成导航栏和侧边栏
async function generateMenu() {
const permissions = await fetchPermissions(userRole);
const navBar = document.getElementById('navbar');
const sidebar = document.getElementById('sidebar');
navBar.innerHTML = '';
sidebar.innerHTML = '';
// 生成导航栏
navConfig.forEach(item => {
if (permissions.includes(item.navPermission)) {
const navElement = document.createElement('div');
navElement.className = 'nav-item';
navElement.textContent = item.id;
navElement.addEventListener('click', () => {
generateSidebar(item.sidebarItems, permissions);
});
navBar.appendChild(navElement);
}
});
// 默认显示第一个有权限的导航栏对应的侧边栏
const firstNav = navConfig.find(item => permissions.includes(item.navPermission));
if (firstNav) {
generateSidebar(firstNav.sidebarItems, permissions);
}
}
// 生成侧边栏
function generateSidebar(sidebarItems, permissions) {
const sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
sidebarItems.forEach(item => {
if (permissions.includes(item.permission)) {
const sidebarElement = document.createElement('div');
sidebarElement.className = 'sidebar-item';
sidebarElement.textContent = item.id;
sidebar.appendChild(sidebarElement);
}
});
}
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', generateMenu);

复制代码

4. 使用说明

- 修改 userRole 变量为 'admin'、'staff' 或 'guest' 测试不同角色。
- 实际应用中，后端需提供API（如 /api/permissions）根据用户角色查询数据库返回权限列表，替换 fetchPermissions 函数中的模拟数据。
- 导航栏点击时，侧边栏会动态显示对应项，且只显示当前角色有权限的标签。

这个实例实现了RBAC的基本逻辑，通过数据库管理权限，前端根据权限动态渲染界面。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册