RONGYAN IMAGE,Typecho博客日记,NAS技术,网站SEO优化 - IT资产管理系统
一、系统介绍 我的零售业务有好多的IT设备，销售给客户的数据原来都是表格管理，不仅查询不方便，客户也会有想要知道设备质保期的信息。由于市面上一直没能够找到符合我预期的产品，所以一直也就这样将就着用着。 前两天心血来潮下载了Cursor，结果在这AI编程器的配合下，竟然花了两天时间手搓出了个不错的资产管理系统，不管是界面、还是功能上，都是非常符合我原先的预期了。 所以这是一套面向 IT 服务商的设备与资产管理平台，包含前端客户自助查询系统和后端资产管理系统两部分。20260525:为简化布署，系统已改为php语言，以下描述是初版，不再更新。稍后有时间会重新编辑功能说明。有兴趣的可以直接点击新版宣传页进行查看： IT设备销售管理系统 ，有购买意向或者定制功能的的可以直接联系站长。二、技术栈层级技术后端Express 5 + Node.js数据库MySQL（mysql2 连接池）Sessionexpress-session + express-mysql-session（MySQL 持久化，24h 有效期）安全helmet（安全响应头）、cors、express-rate-limit（限流）日志winston + winston-daily-rotate-file（按天轮转，保留 30 天）HTTP 日志morgan压缩compression（Gzip）文件上传自定义 multipart 解析数据导出exceljs（Excel）、pdfkit（PDF）前端框架Vue 3 + Vite + Element Plus路由vue-router 4（createWebHistory，懒加载）状态管理PiniaHTTP 客户端Axios图表Chart.js 4 + vue-chartjs三、项目结构├── server/ # 后端 │ ├── index.js # Express 入口，路由注册 │ ├── schema.sql # 数据库建表语句 │ ├── .env # 环境变量配置 │ ├── lib/ # 业务模块 │ │ ├── db.js # 数据库连接池与初始化 │ │ ├── env.js # .env 加载器 │ │ ├── auth.js # 认证（登录/登出/改密/会话校验） │ │ ├── session.js # Session 持久化配置 │ │ ├── rate-limiter.js # 请求限流 │ │ ├── devices.js # 设备 CRUD、公开查询、图片上传 │ │ ├── customers.js # 客户 CRUD、联系人管理 │ │ ├── assets.js # 资产 CRUD（配件/软件/耗材/服务） │ │ ├── todos.js # 维护记录 CRUD │ │ ├── dashboard.js # 仪表盘统计与图表 │ │ ├── config.js # 站点配置读写、LOGO 上传 │ │ ├── audit.js # 操作审计日志 │ │ ├── export.js # Excel / PDF 导出 │ │ ├── faults.js # 故障记录管理（JSON 文件存储） │ │ ├── logger.js # Winston 日志配置 │ │ ├── pagination.js # 分页工具 │ │ └── utils.js # 通用工具函数 │ └── package.json ├── public-vue/ # 前端构建产物（Vite build 输出） │ └── assets/ # 代码分割后的 JS/CSS 文件 └── data/ # 数据文件 └── faults.json # 故障记录（JSON 存储）四、环境要求Node.js >= 18MySQL >= 8.0五、快速开始# 1. 进入服务端目录 cd server # 2. 安装依赖 npm install # 3. 配置环境变量 cp .env.example .env # 编辑 .env，填入数据库连接信息和管理员账号 # 4. 启动服务 npm start # 或指定端口 PORT=8020 npm start启动后访问：前台查询页：http://localhost:3000/管理后台：http://localhost:3000/login六、环境变量配置在 server/.env 文件中配置：变量名说明默认值PORT服务监听端口3000DB_HOSTMySQL 主机地址—DB_PORTMySQL 端口3306DB_NAME数据库名称support_itDB_USER数据库用户名support_itDB_PASSWORD数据库密码自己设置ADMIN_USERNAME管理员用户名adminADMIN_PASSWORD管理员密码admin123SESSION_SECRETSession 加密密钥随机生成七、功能说明1、前台 — 客户自助查询前台面向客户，提供设备信息自助查询功能，如购买日期、质保期、脱保期、设备图片等。访问地址： /功能：前台设备查询输入客户编码（必填，精确匹配,防止有闲得蛋疼的访客手痒）输入设备序列号（必填，支持部分模糊匹配）单条结果直接展示详情卡片；多条结果展示列表，点击可展开，图片可以点击浮动放大查看详情展示：设备名称、序列号、客户信息、销售日期、质保期、质保截止日期、质保状态（在保/已过保/已报废）、多张设备图片（缩略图 + 灯箱预览）、备注多图灯箱支持左右箭头切换和圆点指示维护模式后台开启维护模式后，前台自动跳转至维护提示页面，暂停查询服务2、后台 — 管理系统访问地址： /login（未登录时自动跳转）默认账号： admin / admin1232.1、 业务看板后台首页，展示关键业务数据概览。统计卡片（8 个）：设备总数、客户总数、过保设备数、在保设备数、设备总值、配件总值、耗材总值、资产总值趋势图表（Chart.js 折线图）：展示各类资产价值随时间的变化趋势支持按月 / 按年切换统计粒度系统每月自动记录快照，历史数据持久化存储2.2、 维护记录管理设备的维护/维修/巡检记录。列表展示：标题、关联设备、维护日期、优先级（高/中/低）、状态（待处理/进行中/已完成）新增 / 编辑 / 删除维护记录关联设备：下拉选择已有设备，自动填充设备名称和序列号关键词搜索：支持按标题、设备名、备注模糊搜索状态标签：已完成（绿色）、待处理（红色）、进行中（蓝色）2.3、 客户管理管理客户信息及联系人。列表展示：客户编码、名称、地址、网址、联系人列表新增 / 编辑 / 删除客户多联系人：每个客户支持添加多个联系人（姓名、邮箱、电话），可动态增删唯一性校验：客户编码和名称不可重复删除保护：存在关联设备或资产时禁止删除自动同步：修改客户名称时，自动同步更新所有关联设备和资产的客户名称字段客户联动选择器：在设备/资产表单中输入编码自动匹配名称，反之亦然2.4、 设备管理管理客户设备信息，每台设备最多支持 3 张图片。列表展示：图片缩略图（+N 角标）、序列号、设备名称、客户编码/名称、销售日期、质保期、质保截止日期、质保状态（在保/过保/已报废）、价格新增 / 编辑 / 删除设备设备图片上传：每台设备最多 3 张，支持 JPG/PNG/GIF/WEBP，最大 5MB图片预览：表格内单击预览，支持灯箱大图浏览设备报废：标记设备为报废状态质保自动计算：根据销售日期 + 质保月数自动计算质保截止日期和状态客户联动：输入客户编码或名称自动匹配另一项唯一性校验：同一客户下序列号不可重复关键词搜索：支持按序列号、设备名称、客户名称搜索2.5、 资产管理（配件 / 软件 / 耗材 / 服务）四类资产统一管理，通过路由参数 :type 区分。2.5.1、配件列表展示：图片缩略图、名称、编码、所属设备、客户编码/名称、单价、数量、总价、质保状态、备注新增 / 编辑 / 删除配件质保状态自动计算（在保/已过保）报废功能归属设备：可选关联到已有设备，选择设备后自动匹配客户编码和名称客户联动选择：输入客户编码自动匹配客户名称质保期输入：支持设置质保月数2.5.2、软件功能与配件管理类似，支持质保状态自动计算、报废、归属设备关联、质保期输入。2.5.3、耗材列表展示：图片缩略图、名称、编码、所属设备、客户编码/名称、单价、数量、总价、购买日期、备注新增 / 编辑 / 删除耗材归属设备：可选关联到已有设备，选择后自动匹配客户编码和名称购买日期：支持记录购买日期无质保期字段2.5.4、服务列表展示：名称、编码、客户编码/名称、价格、起始日期、服务时间、服务状态、备注新增 / 编辑 / 删除服务服务期限自动计算：起始日期 + 服务月数脱保状态自动判断无数量字段（服务按项计费）无归属设备字段2.5.5、资产管理通用功能图片上传：每项资产最多 3 张，支持预览和删除Excel 导入/导出客户联动：所有资产模块均支持客户编码/名称自动匹配2.6、 系统配置管理系统全局设置。基础配置系统名称（同步前台标题和后台侧边栏）站点域名文字 LOGO（侧边栏显示）图片 LOGO 上传（支持 JPG / PNG / GIF / WEBP / SVG，最大 2MB）调试/维护模式开关（开启后前台跳转维护页）版权信息：支持 HTML 内容，显示在前台和后台页脚SEO / TDK：保存后服务端注入 HTML，立即生效页面标题、SEO 元信息从后台配置读取，服务端直接注入 HTML系统名称、LOGO、版权信息动态渲染2.7、 数据导出支持将各模块数据导出为 Excel 或 PDF 文件。可导出模块：设备列表、资产列表（配件/软件/耗材/服务）、客户列表、维护记录、审计日志导出格式：Excel（.xlsx）/ PDF导出字段包含各模块的核心信息2.8、 审计日志系统自动记录所有关键操作，并提供后台查询界面。记录内容：操作人、操作类型、目标类型、目标 ID、操作详情、IP 地址、浏览器标识、操作时间自动记录的操作：登录/登出、设备的增删改/报废、客户的增删改、资产的增删改/报废、维护记录的增删改、修改密码、更新系统配置、上传 LOGO 等查询筛选：操作人、操作类型、日期时间范围分页浏览：每页 20 条2.9、 界面主题暗色主题：全后台采用暗色主题配色，Element Plus 组件（表格、输入框、按钮、对话框、下拉框、分页、标签、气泡提示等）全局适配暗色统一圆角：表格 12px 圆角，与卡片风格一致多级菜单：资产侧边栏按类型分类八、数据库表结构系统共使用 10 张数据表：表名说明admin_users管理员账号（用户名、密码哈希、盐值）site_settings站点配置（KV 键值对结构）customers客户信息（编码、名称、地址、网址）customer_contacts客户联系人（姓名、邮箱、电话，关联客户）devices设备信息（序列号、名称、客户、质保、价格、图片 url×3、状态）assets资产信息（配件/软件/耗材/服务统一存储，含类型、质保、服务、归属设备等字段）todos维护记录（标题、状态、优先级、关联设备）value_history资产价值历史快照（按月/年记录各类资产价值）sessionsSession 持久化（express-mysql-session 自动管理）audit_logs操作审计日志（操作人、类型、详情、IP、时间）完整建表语句见 server/schema.sql。九、部署说明1、前端/public-vue/2、使用 PM2 守护进程（推荐）npm install -g pm2 cd server pm2 start index.js --name "support-it" pm2 save pm2 startup3、使用 Nginx 反向代理server { listen 80; server_name your-domain.com; location / { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }4、数据库初始化系统启动时会自动执行 server/schema.sql 创建所需表结构，无需手动导入。5、宝塔面板布署教程5.1、资产管理系统的文件列表说明show 目录：系统功能说明图片及演示网页database.sql.zip 示例数据库文件public-vue.zip 前端程序readme.md 系统功能说明server.zip 后端程序5.2、建立数据库在宝塔的数据库中建立如下数据库：记得把这些信息拷贝备用：数据库名称、帐号、密码数据库建立完成后，上传示例数据库文件并导入database.sql.zip5.3、上传前后端程序在宝塔文件管理中建立系统专用的目录Asset-Management-System并把前后端程序上传如下：public-vue为前端程序目录，server为后端程序目录5.4、修改数据库连接信息server目录下有个.env文件，打开它：把你刚才建立的数据库里的信息填入，如实填就行，不要和我的一样。5.5、建立前端网站网站建立的时候选择纯静态即可，网站目录要选择前端目录public-vue5.6、安装及运行服务端在宝塔的--网站--Node项目中，打开Node项目管理器，安装好Node.js依赖再添加一个Node项目，目录要选择后端目录server，其它的都是自动匹配的，不需要手动去填，最下面的包管理器要手动选择npm顺利的话确定之后后端程序就应该跑起来了后端面板查看一下运行日志，确定没问题，成功在跑这时候我们就可以通过以下链接进行使用了：管理后台: http://localhost:3000/admin/前台访问: http://192.168.64.13:30005.7、做反代去端口访问程序为了和其它项目共生，默认并没有直接跑80端口，我设置了3000端口使用。为了去端口访问，我们可以在宝塔做个反向代理即可在网站前台项目属性找到反向代理，进行如下设置即可：如此，我们的资产管理系统就算正式上线了！十、安全说明管理员密码使用 scrypt 算法加盐哈希存储登录接口限流 5 次/分钟/IP，防止暴力破解API 接口限流 100 次/分钟/IP（含前台查询和后台管理接口）Session 有效期 24 小时，存储在 MySQL 中使用 helmet 设置安全响应头所有管理接口需登录认证关键操作自动记录审计日志（含 IP 和 User-Agent）十一、管理员密码找回若忘记管理员密码，可通过以下方式重置：1、直接修改数据库# 进入 MySQL mysql -u 数据库用户名 -p # 使用系统数据库 USE support_it; # 删除管理员账号，系统重启后会自动使用 .env 中的配置重新创建默认账号 DELETE FROM admin_users WHERE username = 'admin';重启服务后，系统会自动使用 .env 中配置的 ADMIN_USERNAME 和 ADMIN_PASSWORD 创建管理员账号。2、默认账号用户名：admin（可在 .env 中配置 ADMIN_USERNAME）密码：admin123（可在 .env 中配置 ADMIN_PASSWORD）十二、下载地址百度网盘下载地址，说明：此价格仅是程序包价格，不提供技术支持，请自行研究。若需要代布署至服务器，或者功能需要定制，请联系站长，提供有偿服务。