企业官网建设流程全解析

简介：本资源是一套基于RuoYi框架（SpringBoot+Vue前后端分离）开发的售货机管理系统，面向Java全栈初学者、Web应用开发者及后台管理平台实践者，聚焦智能硬件运营场景中的商品、库存、设备、支付与销售数据等核心管理需求。压缩包共541个文件，含124个Vue组件文件（实现管理界面交互）、94个JS逻辑脚本（支撑前端业务流程）、159个PNG/128个SVG图标资源（覆盖系统UI视觉体系），以及SCSS/CSS样式文件、Bat启动脚本、配置与环境文件等，整体14.81MB，结构完整、开箱即用。已有321人学习下载，资源提供可直接运行的前后端工程，包含商品上下架、库存动态更新、多终端设备状态监控、微信/支付宝支付对接模拟等真实功能模块，代码分层清晰、注释规范，适合作为SpringBoot+Vue全栈开发实战范例或智能零售类项目二次开发基座。

1. 基于 RuoYi 的售货机管理系统：不是模板套壳，而是把 SpringBoot + Vue 拆开重装的实战切片

你有没有试过——花三天搭好 RuoYi 官方后台，一加「售货机状态心跳上报」「货道实时库存联动」「远程指令下发」就卡在 Controller 层？不是接口报 404，是逻辑跑通了但前端永远显示“离线”，后端日志里却有心跳包进来了。这不是你代码写错了，是 RuoYi 默认没为「设备侧长连接+弱网终端+异步指令回执」留出钩子。这个资源不是又一个“RuoYi + 表单生成器”的截图合集，而是一套完整落地过某高校园区 237 台智能售货机的真实系统源码包：它把 RuoYi 的权限模块原样保留，但把设备通信层从 HTTP 短轮询硬切成了 WebSocket + MQTT 双通道；把默认的 SysUser 表扩展成 DeviceUser（绑定物理设备 ID、SIM 卡号、最后在线时间戳）；连 Vue 端的图表组件都替换成 ECharts + WebSocket 实时数据流驱动。适合正在做物联网类后台、需要快速交付但拒绝“假后台真 Excel”的开发者——尤其当你已经踩过“用 admin 后台硬改设备管理页结果导出功能崩掉”这类坑时，这份资源就是你翻车现场的黑匣子回放。

2. 架构解耦：为什么必须动 RuoYi 的三层结构，而不是只改页面？

RuoYi 的经典分层（Controller → Service → Mapper）在纯业务系统里很稳，但售货机场景下，设备数据流天然撕裂这层抽象：心跳包要毫秒级入库，但库存变更要走事务；指令下发要记录“已发送/已接收/已执行”三态，而 RuoYi 默认的 SysLog 只记“谁在什么时候操作了什么菜单”。不重构，就会出现“管理员点了‘补货’按钮，数据库里库存+10，但实际机器没收到指令，运维还得手动 telnet 连设备发 AT 命令”这种玄学现场。本项目不是打补丁，而是对 RuoYi 做了三处手术式改造：

2.1 设备通信层：从 HTTP 轮询到 WebSocket + MQTT 混合通道

官方 RuoYi 的设备管理模块通常用@GetMapping("/device/status")拉取状态，每 30 秒一次。但售货机在电梯井、地下车库等弱网环境，HTTP 请求超时率高达 37%（实测数据），且无法感知“设备突然断电”这种瞬态事件。本项目引入spring-boot-starter-websocket和org.eclipse.paho:org.eclipse.paho.client.mqttv3，构建双通道：

• WebSocket 通道：承载设备主动上报（心跳、库存变化、故障告警），前端 Dashboard 页面通过new WebSocket("ws://host:8080/device/ws")直连，服务端用@OnMessage解析 JSON 包；
• MQTT 通道：承载后台下发指令（补货、重启、固件升级），使用MqttClient发布到device/cmd/{deviceId}主题，设备端订阅该主题并执行。

提示：MQTT Broker 选用 Eclipse Mosquitto（轻量、Docker 一键启），不依赖云服务；WebSocket 不用 STOMP 协议，避免 Spring 的@MessageMapping带来的额外序列化开销——实测单机支撑 500+ 设备长连接无压力。

关键代码如下（DeviceWebSocketHandler.java）：

@Component public class DeviceWebSocketHandler extends TextWebSocketHandler { // 存储设备ID与Session映射，用于定向推送 private static final Map<String, WebSocketSession> DEVICE_SESSIONS = new ConcurrentHashMap<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { String deviceId = extractDeviceId(session.getUri()); // 从 ws://host/ws?deviceId=VEND-001 提取 if (deviceId != null && !deviceId.isEmpty()) { DEVICE_SESSIONS.put(deviceId, session); // 更新设备最后在线时间 deviceService.updateLastOnlineTime(deviceId, new Date()); } } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { String payload = message.getPayload(); JSONObject json = JSONObject.parseObject(payload); String deviceId = json.getString("deviceId"); // 解析设备上报的原始JSON（含货道列表、温度、电压等） DeviceReport report = DeviceReport.fromJSON(json); deviceService.saveReport(report); // 异步存入MySQL + 写入InfluxDB时序库 // 触发库存联动检查（如某货道余量<3，自动标记“需补货”） inventoryService.checkLowStock(deviceId, report.getCompartments()); } }

参数说明：

• extractDeviceId()从 URI 查询参数提取设备唯一标识，避免 Session 绑定错误；
• DeviceReport.fromJSON()是自定义解析器，跳过 Jackson 的反射开销，直接用JSONObject字段读取，吞吐量提升 3.2 倍；
• saveReport()方法内部做了 MySQL 写入 + InfluxDB 写入双写，但用@Async异步解耦，防止 WebSocket 线程阻塞。

2.2 数据模型层：SysUser → DeviceUser，一张表撑起设备全生命周期

RuoYi 的sys_user表字段（login_name、user_name、status）完全无法描述售货机：没有设备型号、没有 SIM 卡 ICCID、没有最后心跳时间、没有网络制式（4G/5G/NB-IoT）。本项目新建device_user表，复用 RuoYi 的用户认证体系但隔离数据存储：

注意：device_user表不继承sys_user，但登录鉴权仍走 RuoYi 的ShiroRealm——只是doGetAuthenticationInfo()方法里查询的是device_user表，并将device_id作为 principal 返回。这样既复用权限控制（如“设备运维员”角色只能看自己负责的设备），又避免污染核心用户表。

2.3 权限控制层：RBAC 扩展为 RBAC+DAC（基于设备维度的动态授权）

RuoYi 默认的权限是“菜单→按钮→角色→用户”四级静态控制。但售货机场景需要“张三能管 A 栋所有设备，李四只能管 B 栋 3F 的 5 台机器”。本项目在sys_role和sys_user之间插入device_role_binding关联表，并在 Shiro 的AuthorizationInfo构建时注入设备白名单：

// DeviceAuthorizingRealm.java @Override protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) { String username = (String) principals.getPrimaryPrincipal(); SimpleAuthorizationInfo info = new SimpleAuthorizationInfo(); // 1. 加载角色和菜单权限（原逻辑） info.setRoles(roleService.selectRoleKeys(username)); info.setStringPermissions(permissionService.selectMenuPerms(username)); // 2. 新增：加载该用户可操作的设备ID列表 List<String> bindDevices = deviceRoleBindingService.selectBoundDeviceIds(username); info.addStringPermission("device:bind:" + String.join(",", bindDevices)); // 如 "device:bind:VEND-001,VEND-002" return info; }

前端 Vue 页面（DeviceList.vue）在mounted()钩子中调用getAuthPermissions()，拿到device:bind:...字符串后，用v-if="hasDevicePermission('VEND-001')"控制行级按钮显隐。这不是前端校验，而是后端接口@RequiresPermissions("device:bind:VEND-001")的硬拦截——Shiro 会自动匹配字符串前缀。

3. Vue 前端改造：ECharts 实时图表 + 设备拓扑图的落地细节

RuoYi Vue 版（ruoyi-ui）默认用vue-easytable做表格，但售货机运营最常看的是“某台机器近 2 小时温度曲线”“A 栋各楼层设备在线率热力图”。本项目彻底替换图表方案，不用任何付费组件，全部基于开源生态组合：

3.1 WebSocket 驱动的 ECharts 实时折线图

官方 demo 里的 ECharts 图表都是init()后setOption()一次，数据靠定时器setInterval()拉取。但售货机要求“设备一上报，图表立刻刷新”，必须用 WebSocket 推送。关键在于：不能每次收到新点就setOption()全量重绘（性能爆炸），而要用appendData()增量更新。

// DeviceChart.vue export default { data() { return { chart: null, option: { tooltip: { trigger: 'axis' }, xAxis: { type: 'time', splitNumber: 5 }, yAxis: { type: 'value' }, series: [{ name: '温度', type: 'line', smooth: true, data: [] // 初始化为空数组 }] } } }, mounted() { this.initChart() this.connectWebSocket() }, methods: { initChart() { this.chart = echarts.init(this.$refs.chartDom) this.chart.setOption(this.option) }, connectWebSocket() { this.ws = new WebSocket(`ws://${location.host}/device/ws?deviceId=${this.deviceId}`) this.ws.onmessage = (event) => { const data = JSON.parse(event.data) if (data.type === 'temperature') { // ECharts 2.0+ 支持 appendData，传入 [x, y] 数组 this.chart.appendData(0, [[new Date().getTime(), data.value]]) } } } } }

避坑点：appendData()的第一个参数是 seriesIndex（从 0 开始），第二个参数是[x, y]数组。如果传错 index，图表会空白；如果 x 值不是时间戳（毫秒），坐标轴会错乱。我们强制new Date().getTime()保证时间轴对齐。

3.2 SVG 设备拓扑图：用原生 DOM 操作替代 D3.js

想用 D3.js 画楼层设备分布？放弃吧。D3 学习成本高，且售货机拓扑图结构极固定（每层 4×3 网格，共 5 层），用 D3 是杀鸡用牛刀。本项目用纯 Vue 模板 + CSS Grid + 动态 class：

<!-- FloorMap.vue --> <template> <div class="floor-map" :style="{ gridTemplateColumns: `repeat(${cols}, 1fr)` }"> <div v-for="device in floorDevices" :key="device.deviceId" class="device-card" :class="{ 'online': device.status === 1, 'offline': device.status === 0, 'fault': device.status === 2 }" @click="selectDevice(device)" > <div class="device-id">{{ device.deviceId }}</div> <div class="device-temp">{{ device.temperature }}°C</div> <div class="device-battery" :style="{ width: device.batteryLevel + '%' }"></div> </div> </div> </template> <script> export default { props: ['floorDevices', 'cols'], // cols=4 表示每行4台 methods: { selectDevice(device) { this.$emit('device-select', device) } } } </script> <style scoped> .floor-map { display: grid; gap: 12px; } .device-card { border-radius: 4px; padding: 8px; text-align: center; cursor: pointer; transition: all 0.2s; } .device-card:hover { transform: scale(1.03); } .online { background: #67C23A; color: white; } .offline { background: #909399; color: #fff; } .fault { background: #F56C6C; color: white; } </style>

优势：零依赖、渲染快（200 台设备 DOM 更新 < 16ms）、CSS 可定制性强（运维要求“故障设备红色边框加闪烁动画”，一行animation: blink 1s infinite;就搞定）。

3.3 表格行内操作：用scopedSlots替代render函数

RuoYi Vue 的Table组件（基于el-table）默认不支持复杂行内操作。比如“补货”按钮要点开弹窗，“重启”要二次确认，“导出该设备全部日志”要调用不同 API。官方文档教用render函数写 JSX，但团队新人根本看不懂。本项目用 Vue 2.6+ 的scopedSlots语法，在模板里直写：

<el-table-column label="操作" width="200"> <template slot-scope="{ row }"> <el-button size="mini" @click="handleRefill(row)">补货</el-button> <el-button size="mini" type="danger" @click="handleReboot(row)">重启</el-button> <el-dropdown trigger="click"> <el-button size="mini">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="handleExportLogs(row)">导出日志</el-dropdown-item> <el-dropdown-item @click.native="handleViewDetail(row)">详情</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> </el-table-column>

血泪经验：slot-scope必须写全{ row }，漏掉{}会报Cannot read property 'row' of undefined；@click.native是给el-dropdown-item绑定点击事件的必需写法，否则事件不触发。

4. 避坑指南：部署上线前必须验证的五个致命问题

这套系统在开发环境跑得飞起，但一上生产就翻车？别急，以下是某公司真实上线前踩过的坑，按严重程度排序，每条都附带复现方式和修复命令：

4.1 现象：WebSocket 连接数超过 1000 后，新连接被拒绝，Nginx 报502 Bad Gateway

原因：Nginx 默认worker_connections为 1024，且未配置 WebSocket 长连接超时参数，导致连接堆积。
解决：修改/etc/nginx/nginx.conf，在events块增加worker_connections 4096;，在location /device/ws块添加：

proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_read_timeout 86400; # 保持连接24小时

然后sudo nginx -t && sudo systemctl reload nginx

4.2 现象：MQTT 指令下发后，设备端收不到，Mosquitto 日志显示Client xxx disconnected due to keep alive timeout

原因：设备端 MQTT 客户端设置的keepAliveInterval为 60 秒，但网络抖动时响应延迟 > 60 秒，Broker 主动断连。
解决：设备固件升级，将keepAliveInterval改为 120 秒；同时服务端MqttClient创建时显式设置：

MqttConnectOptions options = new MqttConnectOptions(); options.setKeepAliveInterval(120); // 与设备端一致 options.setCleanSession(true);

4.3 现象：Vue 打包后访问/device/list页面白屏，浏览器控制台报Uncaught SyntaxError: Unexpected token '<'

原因：Vue Router 使用history模式，但 Nginx 未配置try_files，导致/device/list这种前端路由被当作真实路径去磁盘找文件，找不到就返回 index.html，但 Nginx 默认配置返回的是 404 HTML，内容是<h1>Not Found</h1>，JS 解析失败。
解决：Nginx 配置location /块改为：

location / { try_files $uri $uri/ /index.html; }

注意：不是index index.html，必须用try_files！

4.4 现象：设备心跳包高频上报（1秒1次），MySQLdevice_report表写入变慢，CPU 持续 90%+

原因：device_report表缺少复合索引，SELECT COUNT(*) FROM device_report WHERE device_id = ? AND create_time > ?查询慢，而saveReport()方法里默认先查再插（防重复），拖垮整个链路。
解决：给device_report表加联合索引：

ALTER TABLE device_report ADD INDEX idx_device_time (device_id, create_time);

实测查询从 1.2s 降到 3ms，CPU 回落至 30%。

4.5 现象：RuoYi 后台登录后，点击“设备管理”菜单，页面报403 Forbidden，但其他菜单正常

原因：device_user表里status字段为TINYINT，但 MyBatis-Plus 的@TableField未指定jdbcType=JdbcType.TINYINT，导致 SQL 生成为WHERE status = '1'（字符串比较），而 MySQL 中TINYINT字段与字符串比较会全表扫描。
解决：在DeviceUser.java的status字段上加注解：

@TableField(value = "status", jdbcType = JdbcType.TINYINT) private Integer status;

并确保mybatis-plus.configuration.default-scripting-language-driver为org.apache.ibatis.scripting.xmltags.XMLLanguageDriver（默认值，一般不用改）。

5. 进阶技巧：用 Logback + Kafka 实现设备指令审计的不可抵赖性

售货机运营有个硬需求：谁在什么时候给哪台机器下了什么指令，必须留痕，且不能被后台管理员删除——这是财务对账和故障追责的底线。RuoYi 自带的sys_oper_log表可以记录“张三点击了补货按钮”，但无法证明“指令确实发到了设备端，且设备返回了执行成功”。本项目用 Logback 的KafkaAppender，把关键指令流实时推送到 Kafka，由独立服务消费并存入 Elasticsearch，实现三重保障：

5.1 指令日志的精准切面：只记录@DeviceCommand注解的方法

不全局拦截所有 Controller，而是定义自定义注解@DeviceCommand，仅对真正下发指令的方法生效：

@Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) public @interface DeviceCommand { String value() default ""; // 指令类型，如 "REFILL", "REBOOT" }

在DeviceCommandAspect.java中，用ProceedingJoinPoint拦截：

@Around("@annotation(deviceCommand)") public Object logDeviceCommand(ProceedingJoinPoint joinPoint, DeviceCommand deviceCommand) throws Throwable { Object[] args = joinPoint.getArgs(); String deviceId = extractDeviceId(args); // 从方法参数中提取 String cmdType = deviceCommand.value(); // 记录指令发出前的状态（准备发） CommandLog preLog = new CommandLog(deviceId, cmdType, "PREPARE", new Date()); kafkaTemplate.send("device-command-topic", preLog.toJson()); Object result = joinPoint.proceed(); // 执行原方法 // 记录指令发出后的结果（成功/失败） String status = (result instanceof Boolean && (Boolean) result) ? "SUCCESS" : "FAILED"; CommandLog postLog = new CommandLog(deviceId, cmdType, status, new Date()); kafkaTemplate.send("device-command-topic", postLog.toJson()); return result; }

关键设计：CommandLog类包含traceId字段，前后两条日志用同一traceId关联，方便在 Kibana 中用traceId查完整链路。

5.2 Kafka Topic 分区策略：按deviceId哈希，保证同设备日志顺序

Kafka 默认轮询分区，会导致同一设备的PREPARE和SUCCESS日志落到不同分区，消费时顺序无法保证。必须自定义Partitioner：

public class DeviceIdPartitioner implements Partitioner<String, String> { @Override public int partition(String topic, String key, String value, Cluster cluster) { // key 是 deviceId，如 "VEND-001" int hash = Math.abs(key.hashCode()); List<PartitionInfo> partitions = cluster.partitionsForTopic(topic); return hash % partitions.size(); } }

配置application.yml：

spring: kafka: producer: properties: partitioner.class: com.example.DeviceIdPartitioner

5.3 Elasticsearch 索引模板：按天滚动，自动清理 90 天前数据

创建device-command-*索引模板，让日志按天分片：

PUT _template/device-command-template { "index_patterns": ["device-command-*"], "settings": { "number_of_shards": 3, "number_of_replicas": 1, "rollover_alias": "device-command" }, "mappings": { "properties": { "deviceId": { "type": "keyword" }, "cmdType": { "type": "keyword" }, "status": { "type": "keyword" }, "timestamp": { "type": "date", "format": "strict_date_optional_time||epoch_millis" } } } }

每天凌晨用 Curator 自动 rollover 并删除旧索引：

# curator.yml actions: 1: action: delete_indices description: >- Delete indices older than 90 days. options: ignore_empty_list: True disable_action: False filters: - filtertype: pattern kind: prefix value: device-command- - filtertype: age source: creation_date direction: older unit: days unit_count: 90

从那以后我每次上线新设备功能，都强制走一遍curl -X POST "localhost:9200/device-command/_rollover"+curator --config curator.yml action.yml，确保审计链路始终可用。这套机制上线半年，帮某高校处理了 3 起“学生投诉补货未到账”纠纷，后台直接拉出traceId对应的完整指令流，对方当场认错。希望帮到你。

本文还有配套的精品资源，点击获取