站内本项目源代码下载地址技术栈: Node.js Express SQLite 原生前端1. 系统概述1.1 项目背景极简OA系统是一款面向中小型团队的办公自动化解决方案采用极简设计理念提供核心的办公功能模块包括审批流程、考勤打卡、通知公告、用户管理和角色权限管理。1.2 功能模块模块功能描述适用角色工作台数据概览、快速打卡、最新公告所有用户审批流程请假/报销/加班等审批申请与处理所有用户考勤打卡上下班打卡、考勤记录查询所有用户通知公告公告发布与查看管理员/人事用户管理用户增删改查管理员角色管理角色配置、权限分配管理员1.3 默认账号账号密码角色权限范围adminadmin123系统管理员所有权限managermanager123部门经理审批处理、考勤管理、用户查看employeeemployee123普通员工基本办公功能hrhr123人事专员用户管理、考勤管理、公告管理2. 技术架构2.1 技术栈┌─────────────────────────────────────────┐ │ 前端层 (Frontend) │ │ HTML5 CSS3 JavaScript (ES6) │ │ Font Awesome 图标库 │ ├─────────────────────────────────────────┤ │ 接口层 (API Layer) │ │ RESTful API / JSON │ │ JWT Token 认证 │ ├─────────────────────────────────────────┤ │ 服务层 (Backend) │ │ Node.js Express 4.x │ │ 中间件: CORS, Body-Parser │ ├─────────────────────────────────────────┤ │ 数据层 (Data Layer) │ │ SQLite3 (文件型数据库) │ │ 零配置开箱即用 │ └─────────────────────────────────────────┘2.2 项目结构mini-oa/ ├── app.js # 应用入口 ├── package.json # 依赖配置 ├── oa.db # SQLite数据库文件 ├── middleware/ │ └── auth.js # 认证与权限中间件 ├── models/ │ ├── db.js # 数据库连接与操作类 │ └── initData.js # 系统初始化数据 ├── routes/ │ ├── auth.js # 认证路由 │ ├── users.js # 用户路由 │ ├── approvals.js # 审批路由 │ ├── attendance.js # 考勤路由 │ ├── announcements.js # 公告路由 │ └── roles.js # 角色路由 └── public/ # 前端静态资源 ├── index.html # 主页面 ├── css/ │ └── style.css # 样式文件 ├── js/ │ └── app.js # 前端逻辑 └── images/ # 图片资源2.3 依赖清单依赖包版本用途express^4.18.2Web框架sqlite3^5.1.6数据库bcryptjs^2.4.3密码加密jsonwebtoken^9.0.2JWT认证cors^2.8.5跨域支持body-parser^1.20.2请求体解析multer^1.4.5-lts.1文件上传nodemon^3.0.1开发热重载3. 数据库设计3.1 ER关系图┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ users │ │ user_roles │ │ roles │ ├─────────────┤ ├─────────────┤ ├─────────────┤ │ PK id │◄──────┤ PK user_id │ │ PK id │ │ username │ │ PK role_id │──────►│ name │ │ password │ └─────────────┘ │ desc │ │ name │ └──────┬──────┘ │ ... │ │ └─────────────┘ │ │ │ │ ┌─────────────┐ ┌───────────────┘ │ │role_permissions│ │ │ ├─────────────┤ │ └───►│ FK role_id │ │ │ FK perm_id │◄──────┘ └─────────────┘ ┌─────────────┐ │ permissions │ ├─────────────┤ │ PK id │ │ code │ │ name │ │ module │ └─────────────┘ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ approvals │ │ attendance │ │announcements│ ├─────────────┤ ├─────────────┤ ├─────────────┤ │ PK id │ │ PK id │ │ PK id │ │ FK applicant│──────►│ FK user_id │──────►│ FK author_id│ │ FK approver │──────►│ date │ │ title │ │ title │ │ check_in │ │ content │ │ status │ │ check_out│ │ priority │ └─────────────┘ └─────────────┘ └─────────────┘3.2 表结构定义3.2.1 用户表 (users)字段类型约束说明idINTEGERPK, AUTOINCREMENT主键usernameTEXTUNIQUE, NOT NULL用户名passwordTEXTNOT NULL加密密码nameTEXTNOT NULL真实姓名roleTEXTDEFAULT ‘user’角色标识(保留字段)departmentTEXT部门emailTEXT邮箱phoneTEXT电话avatarTEXT头像URLstatusINTEGERDEFAULT 1状态(1正常/0禁用)created_atDATETIMEDEFAULT CURRENT_TIMESTAMP创建时间3.2.2 审批表 (approvals)字段类型约束说明idINTEGERPK, AUTOINCREMENT主键titleTEXTNOT NULL审批标题typeTEXTNOT NULL类型(leave/expense/overtime/business/other)contentTEXT详细内容applicant_idINTEGERNOT NULL, FK申请人IDapprover_idINTEGERFK审批人IDstatusTEXTDEFAULT ‘pending’状态(pending/approved/rejected)remarkTEXT审批意见created_atDATETIMEDEFAULT CURRENT_TIMESTAMP创建时间updated_atDATETIMEDEFAULT CURRENT_TIMESTAMP更新时间3.2.3 考勤表 (attendance)字段类型约束说明idINTEGERPK, AUTOINCREMENT主键user_idINTEGERNOT NULL, FK用户IDdateTEXTNOT NULL日期check_inTEXT上班时间check_outTEXT下班时间statusTEXTDEFAULT ‘normal’状态(normal/late/early/absent)remarkTEXT备注created_atDATETIMEDEFAULT CURRENT_TIMESTAMP创建时间唯一约束: (user_id, date)3.2.4 公告表 (announcements)字段类型约束说明idINTEGERPK, AUTOINCREMENT主键titleTEXTNOT NULL标题contentTEXTNOT NULL内容author_idINTEGERNOT NULL, FK发布人IDpriorityTEXTDEFAULT ‘normal’优先级(high/normal/low)statusINTEGERDEFAULT 1状态(1显示/0删除)created_atDATETIMEDEFAULT CURRENT_TIMESTAMP创建时间3.2.5 角色表 (roles)字段类型约束说明idINTEGERPK, AUTOINCREMENT主键nameTEXTUNIQUE, NOT NULL角色名称descriptionTEXT描述statusINTEGERDEFAULT 1状态created_atDATETIMEDEFAULT CURRENT_TIMESTAMP创建时间3.2.6 权限表 (permissions)字段类型约束说明idINTEGERPK, AUTOINCREMENT主键codeTEXTUNIQUE, NOT NULL权限代码nameTEXTNOT NULL权限名称moduleTEXTNOT NULL所属模块descriptionTEXT描述3.2.7 角色权限关联表 (role_permissions)字段类型约束说明role_idINTEGERPK, FK角色IDpermission_idINTEGERPK, FK权限ID3.2.8 用户角色关联表 (user_roles)字段类型约束说明user_idINTEGERPK, FK用户IDrole_idINTEGERPK, FK角色ID4. API接口设计4.1 认证模块 (auth)登录POST /api/auth/login Content-Type: application/json Request: { username: admin, password: admin123 } Response 200: { token: eyJhbGciOiJIUzI1NiIs..., user: { id: 1, username: admin, name: 系统管理员, department: 管理部, roles: [{id: 1, name: 系统管理员}], permissions: [dashboard:view, approval:view, ...] } } Response 401: { message: 用户名或密码错误 }注册POST /api/auth/register Content-Type: application/json Request: { username: newuser, password: password123, name: 新用户, department: 技术部, email: usercompany.com, phone: 13800138000 } Response 201: { message: 注册成功, userId: 5 }4.2 用户模块 (users)获取用户列表GET /api/users Authorization: Bearer {token} Response 200: [ { id: 1, username: admin, name: 系统管理员, department: 管理部, roles: 系统管理员, email: admincompany.com, status: 1, created_at: 2026-06-04 14:29:00 } ]获取当前用户信息GET /api/users/me Authorization: Bearer {token} Response 200: { id: 1, username: admin, name: 系统管理员, department: 管理部, email: admincompany.com, roles: [...], permissions: [...] }更新用户信息PUT /api/users/:id Authorization: Bearer {token} Content-Type: application/json Request: { name: 新名称, department: 新部门, email: newcompany.com, phone: 13800138001 } Response 200: { message: 更新成功 }修改密码PUT /api/users/:id/password Authorization: Bearer {token} Content-Type: application/json Request: { oldPassword: admin123, newPassword: newpassword123 } Response 200: { message: 密码修改成功 } Response 400: { message: 旧密码错误 }删除用户DELETE /api/users/:id Authorization: Bearer {token} Response 200: { message: 删除成功 }4.3 审批模块 (approvals)获取审批列表GET /api/approvals?statuspendingtypeleave Authorization: Bearer {token} Response 200: [ { id: 1, title: 请假申请, type: leave, applicant_name: 张三, approver_name: 李四, status: pending, created_at: 2026-06-04 14:30:00 } ]创建审批POST /api/approvals Authorization: Bearer {token} Content-Type: application/json Request: { title: 请假申请-年假3天, type: leave, content: 因家中有事申请年假3天, approver_id: 2 } Response 201: { message: 提交成功, approvalId: 1 }审批处理PUT /api/approvals/:id Authorization: Bearer {token} Content-Type: application/json Request: { status: approved, remark: 同意 } Response 200: { message: 审批处理成功 }获取审批统计GET /api/approvals/stats/overview Authorization: Bearer {token} Response 200: [ {status: pending, count: 5}, {status: approved, count: 10}, {status: rejected, count: 2} ]4.4 考勤模块 (attendance)获取考勤记录GET /api/attendance?month2026-06 Authorization: Bearer {token} Response 200: [ { id: 1, date: 2026-06-04, check_in: 09:00, check_out: 18:00, status: normal } ]打卡POST /api/attendance/check Authorization: Bearer {token} Response 200: { message: 上班打卡成功, type: check_in, time: 09:00 } Response 200 (下班): { message: 下班打卡成功, type: check_out, time: 18:00 }获取今日考勤状态GET /api/attendance/today Authorization: Bearer {token} Response 200: { hasCheckedIn: true, hasCheckedOut: false, checkInTime: 09:00, checkOutTime: null }4.5 公告模块 (announcements)获取公告列表GET /api/announcements Authorization: Bearer {token} Response 200: [ { id: 1, title: 端午节放假通知, content: ..., author_name: 系统管理员, priority: normal, created_at: 2026-06-04 14:30:00 } ]获取公告详情GET /api/announcements/:id Authorization: Bearer {token}发布公告POST /api/announcements Authorization: Bearer {token} Content-Type: application/json Request: { title: 新公告, content: 公告内容, priority: high } Response 201: { message: 发布成功, announcementId: 1 }删除公告DELETE /api/announcements/:id Authorization: Bearer {token} Response 200: { message: 删除成功 }4.6 角色模块 (roles)获取角色列表GET /api/roles Authorization: Bearer {token} Response 200: [ { id: 1, name: 系统管理员, description: 拥有所有权限, user_count: 1, status: 1, created_at: 2026-06-04 14:29:00 } ]获取角色详情GET /api/roles/:id Authorization: Bearer {token} Response 200: { id: 1, name: 系统管理员, description: ..., permissions: [ {id: 1, code: dashboard:view, name: 查看工作台, module: dashboard} ] }创建角色POST /api/roles Authorization: Bearer {token} Content-Type: application/json Request: { name: 新角色, description: 角色描述, permissions: [1, 2, 3] } Response 201: { message: 角色创建成功, roleId: 5 }更新角色PUT /api/roles/:id Authorization: Bearer {token} Content-Type: application/json Request: { name: 更新后的角色名, description: 新描述, permissions: [1, 2, 4, 5] }删除角色DELETE /api/roles/:id Authorization: Bearer {token} Response 200: { message: 角色删除成功 }获取所有权限列表GET /api/roles/permissions/all Authorization: Bearer {token} Response 200: { dashboard: [ {id: 1, code: dashboard:view, name: 查看工作台, module: dashboard} ], approval: [...], attendance: [...], ... }为用户分配角色POST /api/roles/assign Authorization: Bearer {token} Content-Type: application/json Request: { userId: 5, roleIds: [2, 3] } Response 200: { message: 角色分配成功 }5. 权限设计5.1 RBAC模型系统采用基于角色的访问控制(Role-Based Access Control)模型用户(User) ──N:M──► 角色(Role) ──N:M──► 权限(Permission)一个用户可拥有多个角色一个角色可包含多个权限权限按模块分组管理5.2 权限清单模块权限代码权限名称工作台dashboard:view查看工作台审批流程approval:view查看审批approval:create创建审批approval:approve审批处理考勤打卡attendance:view查看考勤attendance:check打卡attendance:manage管理考勤通知公告announcement:view查看公告announcement:create发布公告announcement:delete删除公告用户管理user:view查看用户user:create创建用户user:edit编辑用户user:delete删除用户角色管理role:view查看角色role:create创建角色role:edit编辑角色role:delete删除角色role:assign分配角色5.3 默认角色权限分配┌──────────────┬─────────────────────────────────────────────┐ │ 系统管理员 │ 所有权限 │ ├──────────────┼─────────────────────────────────────────────┤ │ 部门经理 │ dashboard:view, approval:view/create/approve │ │ │ attendance:view/manage, announcement:view │ │ │ user:view │ ├──────────────┼─────────────────────────────────────────────┤ │ 普通员工 │ dashboard:view, approval:view/create │ │ │ attendance:view/check, announcement:view │ ├──────────────┼─────────────────────────────────────────────┤ │ 人事专员 │ dashboard:view, approval:view/approve │ │ │ attendance:view/manage │ │ │ announcement:view/create/delete │ │ │ user:view/create/edit │ └──────────────┴─────────────────────────────────────────────┘5.4 权限中间件// 认证中间件 - 验证JWT Tokenauthenticate(req,res,next)// 权限检查中间件 - 检查是否拥有指定权限requirePermission(permissionCode)// 任意权限检查 - 拥有任一指定权限即可requireAnyPermission(...permissionCodes)// 获取用户权限列表getUserPermissions(userId)6. 前端设计6.1 页面结构┌─────────────────────────────────────────────┐ │ 顶部栏 (Top Bar) │ │ [页面标题] [当前日期] │ ├──────────┬──────────────────────────────────┤ │ │ │ │ 侧边栏 │ 主内容区 │ │ (Sidebar)│ (Main Content) │ │ │ │ │ 工作台 │ ┌──────────────────────┐ │ │ 审批流程 │ │ 统计卡片区域 │ │ │ 考勤打卡 │ └──────────────────────┘ │ │ 通知公告 │ ┌──────────┬──────────┐ │ │ 用户管理 │ │ 快速打卡 │ 最新公告 │ │ │ 角色管理 │ └──────────┴──────────┘ │ │ │ │ │ [用户信息]│ │ │ [修改密码]│ │ │ [退出] │ │ └──────────┴──────────────────────────────────┘6.2 页面清单页面路由说明登录页/用户名密码登录工作台#dashboard数据概览、快速操作审批流程#approvals审批列表、新建审批考勤打卡#attendance打卡、考勤记录通知公告#announcements公告列表、发布公告用户管理#users用户列表、添加用户角色管理#roles角色列表、权限配置6.3 前端状态管理// 全局状态letcurrentUsernull;// 当前用户信息letauthTokennull;// JWT TokenletuserPermissions[];// 用户权限列表// 权限检查函数functionhasPermission(permCode){returnuserPermissions.includes(permCode);}6.4 菜单权限控制菜单项通过data-perm属性绑定权限代码ahref#classnav-itemdata-pageusersdata-permuser:viewiclassfas fa-users/ispan用户管理/span/a登录后根据用户权限动态显示/隐藏菜单functionsetupUserInterface(){document.querySelectorAll(.nav-item[data-perm]).forEach(item{constrequiredPermitem.dataset.perm;item.classList.toggle(hidden,!hasPermission(requiredPerm));});}6.5 组件说明组件说明统计卡片显示待处理审批、已通过审批、出勤天数、最新公告数量数据表格统一风格的表格支持空状态显示筛选标签审批状态筛选全部/待处理/已通过/已拒绝模态框表单弹窗支持创建/编辑操作Toast提示操作成功/失败的消息提示权限配置面板按模块分组的权限复选框列表7. 部署说明7.1 环境要求Node.js 14.0npm 6.07.2 安装步骤# 1. 解压项目unzipmini-oa.zipcdmini-oa# 2. 安装依赖npminstall# 3. 启动服务npmstart# 4. 访问系统# 打开浏览器访问 http://localhost:30007.3 开发模式# 使用 nodemon 热重载npmrun dev7.4 配置说明配置项环境变量默认值说明端口PORT3000服务监听端口JWT密钥JWT_SECRETmini-oa-secret-keyToken签名密钥7.5 数据初始化系统首次启动时会自动创建数据库表结构初始化默认角色系统管理员、部门经理、普通员工、人事专员初始化权限列表分配角色默认权限创建默认管理员账号admin/admin123创建测试账号manager、employee、hr附录A. 审批类型枚举类型值含义leave请假expense报销overtime加班business出差other其他B. 审批状态枚举状态值含义pending待处理approved已通过rejected已拒绝C. 公告优先级枚举优先级含义high重要normal普通low一般D. 考勤状态枚举状态值含义normal正常late迟到early早退absent缺勤