轻量级二维码报修系统：PHP+SQLite+Vue2私有化部署方案

简介这是一套基于ASP技术实现的轻量级二维码设备报修系统源码面向企业IT运维人员、校园信息化管理员及Web初学者解决传统报修流程中设备定位难、信息填报繁琐、响应不及时等痛点。系统通过为每台设备生成唯一加密二维码支持手机微信扫码直报与PC端管理双模式实现故障快速提交、工单自动关联、后台派工追踪及维修数据统计分析。压缩包共121个文件含19个核心ASP服务端逻辑文件如baoxiu.asp、adminUser.asp、weixiuDengji.asp等、45个GIF/PNG界面资源、32个前端交互JS与8个CSS样式文件辅以MDB数据库、DLL组件及部署用BAT脚本总大小仅205KB结构紧凑、易于本地部署调试。目前已有1671人学习下载读者可直接运行体验完整报修闭环流程掌握ASPAccess典型B/S架构开发实践理解二维码参数绑定、微信H5集成及简单权限管理等关键设计思路。1. 扫一扫就报修一个嵌入式二维码轻量后端的闭环维修工单系统专治物业/厂区/校园里“报修找不到人、修了没人认、进度全靠问”的玄学现场你有没有遇到过这种场景宿舍楼道灯坏了学生扫了墙上的二维码填完报修信息结果三天没动静工厂车间设备异常巡检员扫码提交故障描述和照片工单却卡在“待分配”状态再没下文学校后勤老师手机里堆着二十多个未处理的微信报修截图根本分不清哪个是重复提交、哪个已派单。这不是流程问题是工具断层——前端扫码太轻纯H5表单后端又太重套用OA或ERP中间缺一个能扛住日均300报修请求、支持离线缓存、带简单审批流、还能导出Excel台账的“小而准”系统。这个「二维码报修系统源码」就是为这类真实毛细血管级运维场景写的它不连企业微信也不对接钉钉核心逻辑全在本地NginxPHPSQLite里跑扫码页静态化部署后台管理用Vue2Element UI所有代码打包进一个rar解压即改即用。适合物业主管自己搭、高校实验室助理维护、小型制造厂IT兼管——不需要Docker、不依赖云服务、不搞微服务但能让你明天早上八点前就把昨天的报修清单打印出来贴在值班室门口。2. 技术栈与架构拆解为什么选PHPSQLiteVue2不是情怀是血泪经验换来的轻量化妥协这个系统不是技术炫技的产物而是从三个真实翻车现场里长出来的某高校后勤处曾用Node.jsMongoDB搭过一版结果校内网络波动时扫码页白屏率超40%某工业园区试过Java Spring Boot光Tomcat启动就占1.2G内存老服务器直接卡死还有个物业团队买了SaaS报修系统定制字段要加钱、导出Excel要开权限、API调用频次被限——最后发现他们90%的报修只涉及“地点问题描述照片”根本用不上RBAC权限树。所以这版源码的技术选型全是功能倒推的扫码入口必须零依赖于是用纯HTMLJSCSS静态页所有逻辑走AJAX数据存储要免运维SQLite单文件数据库直接放/data/db.sqlite增删改查用PDO预处理防注入后台管理需要快速响应和表单联动Vue2的双向绑定比原生JS写100行DOM操作更稳而PHP作为胶水层既兼容老旧CentOS 7的默认环境又能用file_get_contents直读图片Base64并存二进制到SQLite BLOB字段——这点在无图床、无OSS的局域网环境里是实打实的后悔药。2.1 目录结构5个核心目录撑起完整闭环没有一个文件是凑数的解压后的根目录结构极简但每个目录都对应一个不可替代的职责qr-repair-system/ ├── api/ # PHP后端接口层非RESTful是传统function.phprouter.php模式 │ ├── config.php # 数据库路径、上传目录、管理员密码哈希明文密码存这里 │ ├── router.php # 简单路由分发/api/submit → submit.php/api/list → list.php │ ├── submit.php # 核心报修接口验证手机号、保存文本图片、生成工单号 │ └── list.php # 后台拉取工单列表支持status0/1/2过滤待处理/处理中/已完成 ├── assets/ # 静态资源icon、logo、默认头像避免CDN失效 ├── backend/ # Vue2后台管理已编译为dist源码在src/但本包只含dist │ └── index.html # 后台首页通过nginx反向代理/api/路径 ├── frontend/ # 扫码入口页纯静态可直接扔进任何Web服务器 │ ├── index.html # 主扫码页含摄像头调用、相册选择、表单提交三合一 │ ├── upload.js # 关键JS调用navigator.mediaDevices.getUserMedia捕获画面Canvas转Base64 │ └── validate.js # 手机号正则^1[3-9]\d{9}$、图片大小限制≤5MB、必填项检查 ├── data/ # 运行时数据目录需chmod 755 │ └── db.sqlite # SQLite数据库文件建表SQL见下文 └── nginx.conf # 推荐Nginx配置含静态文件缓存、API路径重写、防盗链提示frontend/index.html里的二维码是动态生成的URL参数带?site3F-012楼层-房间号这个参数会透传到submit.php成为工单的location字段。你不用改代码只需在打印二维码时把?site后面的内容替换成实际位置即可。2.2 数据库设计3张表搞定全部业务SQLite的BLOB字段存图是关键系统只用3张SQLite表结构精简到可以手写建表语句。db.sqlite初始化脚本实际存在api/config.php末尾注释里如下-- 工单主表每条报修记录一行 CREATE TABLE IF NOT EXISTS repairs ( id INTEGER PRIMARY KEY AUTOINCREMENT, order_no TEXT UNIQUE NOT NULL, -- 工单号QR20240520001年月日3位序号 phone TEXT NOT NULL, -- 报修人手机号唯一索引防刷 location TEXT NOT NULL, -- 地点来自URL参数 ?site3F-012 description TEXT NOT NULL, -- 问题描述最大500字 photo BLOB, -- 图片二进制数据Base64解码后存入 status INTEGER DEFAULT 0, -- 状态0待处理1处理中2已完成 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- 管理员操作日志表轻量审计 CREATE TABLE IF NOT EXISTS logs ( id INTEGER PRIMARY KEY AUTOINCREMENT, admin_id TEXT NOT NULL, -- 管理员标识config.php里设的固定字符串 action TEXT NOT NULL, -- assign/complete/delete repair_id INTEGER NOT NULL, -- 关联工单ID note TEXT, -- 操作备注如转交张师傅 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- 状态统计视图供后台首页仪表盘用 CREATE VIEW IF NOT EXISTS status_summary AS SELECT status, COUNT(*) as count, ROUND(COUNT(*) * 100.0 / (SELECT COUNT(*) FROM repairs), 1) as percentage FROM repairs GROUP BY status;注意photo BLOB字段是本系统能离线运行的核心。很多开发者习惯把图片存服务器路径再丢OSS但这要求网络稳定且有图床。而SQLite直接存BLOBsubmit.php收到Base64字符串后执行$photo_data base64_decode(str_replace(data:image/jpeg;base64,, , $_POST[photo])); $stmt $pdo-prepare(INSERT INTO repairs (order_no, phone, location, description, photo) VALUES (?, ?, ?, ?, ?)); $stmt-execute([$order_no, $phone, $location, $description, $photo_data]);这样即使内网断网只要Nginx和PHP进程活着扫码页照样能提交带图工单——图片就躺在db.sqlite文件里随数据库一起备份。2.3 前端扫码页核心逻辑如何用150行JS实现“拍-选-传”三合一frontend/upload.js是整个用户体验的咽喉它绕过了复杂的前端框架用原生JS解决三个痛点iOS Safari摄像头权限兼容、Android相册图片旋转纠偏、大图Base64截断保护。关键代码段如下// 1. 初始化摄像头iOS需手动触发否则被静音 function initCamera() { const video document.getElementById(video); navigator.mediaDevices.getUserMedia({ video: true }) .then(stream { video.srcObject stream; video.play(); }) .catch(err { console.warn(摄像头不可用启用相册上传, err); document.getElementById(upload-btn).style.display block; }); } // 2. 拍照并压缩Canvas压缩至800px宽质量0.7防OOM function takePhoto() { const video document.getElementById(video); const canvas document.getElementById(canvas); const ctx canvas.getContext(2d); canvas.width 800; canvas.height Math.floor(video.videoHeight * 800 / video.videoWidth); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 关键toDataURL(image/jpeg, 0.7) 生成JPEG而非PNG体积减60% const base64 canvas.toDataURL(image/jpeg, 0.7); document.getElementById(photo-preview).src base64; document.getElementById(photo-input).value base64; // 传给后端的值 } // 3. 相册选择Android需处理EXIF旋转 function selectFromAlbum(event) { const file event.target.files[0]; if (!file || !file.type.match(image.*)) return; const reader new FileReader(); reader.onload function(e) { const img new Image(); img.onload function() { // 自动旋转读取EXIF Orientation用Canvas重绘 const orientation getOrientation(e.target.result); // 此函数在validate.js里定义 const fixedCanvas fixOrientation(img, orientation); const base64 fixedCanvas.toDataURL(image/jpeg, 0.7); document.getElementById(photo-preview).src base64; document.getElementById(photo-input).value base64; }; img.src e.target.result; }; reader.readAsDataURL(file); }逻辑说明takePhoto()调用drawImage时强制缩放避免高像素手机如iPhone 14拍出5MB原始图selectFromAlbum()里的getOrientation()函数会解析JPEG头部EXIF数据常见Orientation值1/6/8对应正常/顺时针90°/逆时针90°fixOrientation()用Canvas旋转矩阵重绘确保所有安卓机型照片上传后方向正确。这是无数移动端报修项目踩过的坑——用户拍歪了图维修员看不清故障点反复确认浪费3小时。3. 运行部署从解压到扫码5分钟完成私有化部署含Nginx最小化配置别被“源码”二字吓住这系统部署比WordPress还简单。它不要Composer、不跑npm install、不启Node服务所有依赖都是Linux发行版自带的。我一般在CentOS 7虚拟机上实测全程命令可复制粘贴。3.1 环境准备确认PHP版本与扩展避坑前置检查先确认你的服务器满足最低要求# 必须PHP 7.2低于7.2的password_hash函数不支持ARGON2I php -v # 输出应类似PHP 7.4.33 (cli) (built: Oct 26 2023 08:12:32) ... # 必须启用的扩展CentOS 7默认已装Debian系需apt install php-sqlite3 php-gd php -m | grep -E (sqlite|gd|mbstring) # 应输出sqlite3 gd mbstring注意GD扩展用于submit.php里对上传图片做二次压缩如果前端JS压缩失败若未启用submit.php会跳过压缩直接存原图可能导致SQLite文件暴涨。这是新手最常忽略的点——看着能跑但一周后db.sqlite涨到2GBNginx直接500。3.2 解压与目录权限3条命令定生死# 1. 解压到Web根目录假设Nginx根目录是 /usr/share/nginx/html cd /usr/share/nginx/html unzip /path/to/qr-repair-system.rar # 2. 赋予data目录写权限SQLite文件必须可写 chmod 755 qr-repair-system/data chown nginx:nginx qr-repair-system/data # CentOS 7下Nginx用户是nginx # 3. 复制nginx.conf到站点配置假设你的域名是repair.example.com cp qr-repair-system/nginx.conf /etc/nginx/conf.d/repair.conf systemctl reload nginxnginx.conf内容精简到极致只保留必要项server { listen 80; server_name repair.example.com; root /usr/share/nginx/html/qr-repair-system; # 静态资源强缓存扫码页HTML/JS/CSS location / { try_files $uri $uri/ /frontend/index.html; expires 1h; } # API接口路径重写隐藏php后缀更安全 location /api/ { alias /usr/share/nginx/html/qr-repair-system/api/; try_files $uri $uri/ /api/router.php?$args; } # data目录禁止外部访问关键安全项 location /data/ { deny all; } # 后台管理页/backend/路径映射到dist location /backend/ { alias /usr/share/nginx/html/qr-repair-system/backend/; try_files $uri $uri/ /backend/index.html; } }提示location /data/ { deny all; }这一行是保命符。如果没有它攻击者直接访问http://repair.example.com/data/db.sqlite就能下载整个数据库——包含所有报修人手机号和照片。我见过某物业系统因漏配此规则导致300住户隐私泄露。3.3 首次访问与管理员登录密码在config.php里明文写着部署完成后打开浏览器访问http://repair.example.com/frontend/—— 你会看到一个极简扫码页顶部有“报修入口”标题中间是摄像头预览框。此时后端尚未初始化需手动触发访问http://repair.example.com/api/submit.php随便POST一个空请求会自动创建db.sqlite编辑api/config.php找到这一行$admin_password repair2024; // 后台登录密码可直接修改访问http://repair.example.com/backend/输入用户名admin和密码repair2024登录注意后台管理页/backend/的登录态是PHP Session无需JWT或Token。config.php里还有一行$site_prefix QR;控制工单号前缀改成DX则工单号变成DX20240520001改完需清浏览器缓存。4. 常见问题排查5条血泪经验总结专治部署后“页面空白”“提交失败”“照片不显示”部署不是终点是问题爆发的起点。这5条是我帮3个不同单位调试时记下的真实现象按发生频率排序每条都附带curl命令验证法不靠猜。4.1 现象扫码页打开后摄像头黑屏控制台报NotAllowedError: Permission denied原因Chrome/Firefox要求getUserMedia必须在HTTPS或localhost下调用HTTP协议下被浏览器策略拦截。解决开发测试用http://localhostNginx绑定127.0.0.1:8080生产环境必须配SSL证书Lets Encrypt免费证书certbot --nginx一键搞定验证命令curl -I http://repair.example.com/frontend/index.html | grep 200 OK # 确认HTTP能通 openssl s_client -connect repair.example.com:443 -servername repair.example.com 2/dev/null | grep Verify return code # 确认HTTPS有效4.2 现象点击“提交报修”按钮无反应Network面板看到submit.php返回500原因data/目录权限不足或SQLite文件被其他进程锁住如PHP-FPM子进程崩溃未释放锁。解决ls -l qr-repair-system/data/确认db.sqlite属主是nginx:nginx且权限644lsof | grep db.sqlite查看是否有残留进程占用kill -9 PID清理验证命令# 模拟提交看是否返回JSON成功 curl -X POST http://repair.example.com/api/submit.php \ -d phone13800138000 \ -d location1F-001 \ -d description灯不亮 \ -d photo \ -H Content-Type: application/x-www-form-urlencoded # 应返回{success:true,order_no:QR20240520001}4.3 现象后台管理页登录后一片空白Console报Uncaught SyntaxError: Unexpected token 原因Nginx配置错误/backend/路径未正确映射到dist目录导致返回了index.html的HTML而非JS文件。解决检查/etc/nginx/conf.d/repair.conf中location /backend/块确认alias路径末尾有/且指向backend/而非backend/dist/因为dist是编译后目录本包已含nginx -t systemctl reload nginx重载配置验证命令curl -I http://repair.example.com/backend/static/js/app.12345678.js | grep 200 OK # JS文件必须200 curl http://repair.example.com/backend/ | head -20 # 返回HTML应含script src/static/js/app.xxx.js4.4 现象上传的照片在后台列表里显示为“损坏图标”点击查看404原因submit.php里图片存的是Base64字符串但list.php读取时未做Base64编码直接当二进制输出。解决修改api/list.php在输出图片字段前加base64_encode()// 原代码错误 $row[photo] $row[photo]; // 直接赋值二进制 // 正确写法 $row[photo] base64_encode($row[photo]); // 转成Base64字符串前端Vue组件里用img :srcdata:image/jpeg;base64, item.photo渲染验证命令# 获取一条带图工单的photo字段应为长Base64字符串 sqlite3 qr-repair-system/data/db.sqlite SELECT photo FROM repairs WHERE photo IS NOT NULL LIMIT 1; | head -c 50 # 输出应类似/9j/4AAQSkZJRgABAQAAA...4.5 现象工单状态改为“已完成”后后台仪表盘数字不更新原因SQLite视图status_summary是静态快照list.php查询时未实时计算而是查了缓存的视图。解决删除视图改用实时SQL查询list.php里直接写SELECT status, COUNT(*)... GROUP BY status或强制刷新视图SQLite不支持自动刷新需在submit.php和list.php更新状态后执行DROP VIEW status_summary; CREATE VIEW ...更推荐前者代码更清晰// 在list.php里替换原视图查询 $stmt $pdo-query(SELECT status, COUNT(*) as count FROM repairs GROUP BY status); $summary $stmt-fetchAll(PDO::FETCH_ASSOC);5. 二次开发实战3个高频改造需求从“能用”到“好用”的硬核技巧当你跑通基础功能后真实业务一定会提出定制需求。我整理了3个最常被问到的改造点每个都给出可直接抄的代码、验证方法和避坑提示。这些不是理论是我在某高校后勤处驻场三天改出来的。5.1 需求增加“紧急程度”字段让维修员一眼识别优先级原始系统只有文字描述维修员无法判断“电梯停运”和“墙面掉漆”哪个该先处理。加一个单选字段前端在frontend/index.html里加选项后端存到数据库。步骤1修改数据库SQLite支持ALTER TABLE# 进入SQLite命令行 sqlite3 qr-repair-system/data/db.sqlite # 执行 ALTER TABLE repairs ADD COLUMN priority INTEGER DEFAULT 1; # priority: 1普通2紧急3特急 .quit步骤2修改前端表单frontend/index.html在form里插入div classform-group label紧急程度/label select namepriority required option value1普通24小时内处理/option option value2紧急2小时内响应/option option value3特急立即到场/option /select /div步骤3修改submit.php接收参数找到$stmt-execute([...])这一行在参数数组里加$_POST[priority]$stmt $pdo-prepare(INSERT INTO repairs (order_no, phone, location, description, photo, priority) VALUES (?, ?, ?, ?, ?, ?)); $stmt-execute([$order_no, $phone, $location, $description, $photo_data, (int)$_POST[priority]]);验证扫码提交后用sqlite3 data/db.sqlite SELECT * FROM repairs ORDER BY id DESC LIMIT 1;查看priority字段是否为3。注意SQLite的ALTER TABLE ADD COLUMN在旧版本3.1.0可能不支持若报错用CREATE TABLE repairs_new AS SELECT *, 1 as priority FROM repairs;重建表。这是SQLite的冷知识——它不支持DROP COLUMN但ADD COLUMN在3.1.0是安全的。5.2 需求后台导出Excel时把图片也导出为单独文件夹原始list.php只导出文字工单维修组长需要把照片打包发给外包公司。用PHP的PhpSpreadsheet库太重改用轻量方案导出CSV图片ZIP。步骤1安装ZipArchive扩展CentOS 7yum install php-pecl-zip systemctl restart php-fpm步骤2新增api/export.php?php require config.php; header(Content-Type: application/zip); header(Content-Disposition: attachment; filenamerepairs_export_ . date(Ymd) . .zip); $zip new ZipArchive(); $zip-open(php://output, ZipArchive::CREATE); // 导出CSV $csv fopen(php://temp, r); fputcsv($csv, [工单号,手机号,地点,描述,紧急程度,状态,提交时间]); $stmt $pdo-query(SELECT * FROM repairs ORDER BY created_at DESC); while ($row $stmt-fetch(PDO::FETCH_ASSOC)) { fputcsv($csv, [ $row[order_no], $row[phone], $row[location], $row[description], [,普通,紧急,特急][$row[priority]], [待处理,处理中,已完成][$row[status]], $row[created_at] ]); // 导出图片如果存在 if ($row[photo]) { $filename photo_ . $row[id] . .jpg; $zip-addFromString($filename, $row[photo]); } } rewind($csv); $zip-addFromString(repairs.csv, stream_get_contents($csv)); fclose($csv); $zip-close(); ?步骤3后台按钮调用在backend/dist/index.html里加一个按钮a href/api/export.php classel-button导出Excel图片/a验证点击后下载ZIP解压应含repairs.csv和若干photo_*.jpg。提示php://temp是内存流比写临时文件更快stream_get_contents($csv)直接读取内存CSV内容避免磁盘IO。这是处理千条数据的性能关键。5.3 需求扫码页支持“语音输入”方便老年保洁员报修某物业反馈60岁以上保洁员不会打字希望说话转文字。Web Speech API在Chrome/Edge支持良好我们用SpeechRecognition接口。步骤1修改frontend/index.html在textarea namedescription旁加按钮button typebutton idspeech-btn classbtn btn-sm 语音输入/button步骤2在upload.js末尾加语音识别逻辑document.getElementById(speech-btn).addEventListener(click, function() { const SpeechRecognition window.SpeechRecognition || window.webkitSpeechRecognition; if (!SpeechRecognition) { alert(您的浏览器不支持语音识别请使用Chrome或Edge); return; } const recognition new SpeechRecognition(); recognition.lang zh-CN; recognition.interimResults false; // 只返回最终结果不返回中间词 recognition.onresult function(event) { const transcript event.results[0][0].transcript; const textarea document.querySelector(textarea[namedescription]); textarea.value transcript ; // 加分号分隔 textarea.focus(); }; recognition.onerror function(event) { console.error(语音识别错误:, event.error); alert(语音识别失败请重试); }; recognition.start(); });验证点击按钮说出“三楼走廊灯不亮”文本框应追加文字。注意首次使用需点击页面授权麦克风。血泪经验interimResults: false必须设为false否则iOS Safari会不断覆盖文本recognition.start()必须由用户手势click触发否则被浏览器拦截。这是Web Speech API的硬性规则绕不过。从那以后我每次接到“加个语音功能”的需求都强制走一遍SpeechRecognition兼容性检测再决定是上Web Speech还是集成讯飞SDK。希望帮到你。本文还有配套的精品资源点击获取