ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

基于Spring Boot与Vue的协作机器人门户网站系统设计

基于Spring Boot与Vue的协作机器人门户网站系统设计 “058协作机器人门户网站系统”这个标题一看就是从毕业设计或者企业信息化项目里来的。协作机器人这两年不新鲜了但是围绕它的门户网站系统很多团队还在用传统多页应用硬啃维护起来相当痛苦。这次我基于Spring Boot Vue的组合把整套门户从零到一搭了一遍接下来直接把我实际做的设计、代码结构和踩坑记录全部摊开讲项目最后打包成一个可运行的单体Jar包前后端不再分家。1. 项目整体设计与技术选型思路1.1 协作机器人门户网站到底解决什么问题协作机器人Cobot门户网站本质上是一个面向“人”的展示与信息管理平台。它不像工业机器人控制系统那样需要高实时性核心业务集中在几个方向机器人型号展示、参数对比、应用场景案例、行业新闻动态、技术文档下载以及后台管理端的用户权限、内容审核和数据统计。这就决定了它的技术诉求很明确页面交互要顺滑、内容要能灵活管理、接口要清晰稳定。门户网站的访客通常不会在列表页停留太久他们要的是快速看到负载、臂展、重复定位精度这些关键参数最好还能直接按参数筛选。后台管理员要的是能快速发布文章、上下架产品、管理图片资源而不是对着改代码。我之前见过不少团队用JSP或者Thymeleaf做这类门户页面多了以后前端和后端代码完全纠缠在一起一个 banner 图样式改动都可能要重启服务。所以这次直接采用前后端分离Spring Boot 只负责提供 RESTful APIVue 负责页面渲染和交互。开发时期用 Vite 的代理转发请求生产时期把 Vue 构建产物放进 Spring Boot 的静态资源目录一个 Jar 全部搞定。1.2 为什么是 Spring Boot Vue而不是其他方案有人会问这种门户网站用 Node.js React 不也一样吗确实可以但这里有个很现实的场景项目要部署在学校或者企业内部服务器上运维人员最熟悉的往往还是 Java 技术栈。Spring Boot 的自动配置和内置 Tomcat让部署变成了一条java -jar命令的事情省去了单独配置 Nginx 和 Node 运行时的步骤。选择 Vue 而不是 React也有实际原因。Vue 的学习曲线相对平缓模板语法对后端出身的人来说非常友好。尤其在做门户这种以展示为主的项目时Vue 的单文件组件SFC可以把一个机器人详情页的模板、脚本、样式全部收拢在一起团队成员各自维护不同的组件冲突概率明显比传统 JSP include 方案低很多。版本选择上也要说清楚我这次用的是 Spring Boot 2.7.18不是最新的 3.x。因为 3.x 基于 Jakarta EEjavax 包名全部变成了 jakarta很多老牌的代码生成器和数据库插件还没有完全适配。如果团队里有人习惯用 MyBatis Generator 反向生成代码Spring Boot 2.7 绝对是当前的稳妥选择。Vue 那边用的 3.4 版本配合 Vite 5 和 Vue Router 4组合拳比较成熟。2. 后端设计Spring Boot 核心模块拆解2.1 项目结构和 Maven 父子工程构建后端我用的是标准的 Maven 多模块结构但基于部署便利考虑最终只保留一个可执行模块。项目目录是这样规划的cobot-portal-backend/ ├── cobot-common/ # 公共模块工具类、统一返回结果、异常处理 ├── cobot-system/ # 核心业务模块权限、用户、角色、菜单 ├── cobot-content/ # 门户内容模块产品、新闻、案例、文档 └── cobot-admin/ # 启动模块Application入口、配置、定时任务模块划分的逻辑很简单把权限体系和内容体系拆开。因为这套系统的后台管理不仅给门户用后续如果要接入内部的知识库或者工单系统cobot-system 可以直接复用不用再做一遍登录和权限。构建的时候需要特别注意 Java 版本一致性问题。各模块的pom.xml里我都显式指定了properties java.version1.8/java.version maven.compiler.source1.8/maven.compiler.source maven.compiler.target1.8/maven.compiler.target /properties这里有一个实操细节值得拿出来说如果某个模块忘记指定编译版本而你的机器默认 JDK 是 17Maven 编译时会报“无效的目标发行版”错误。就算你在 IDE 里改了对单个模块的编译级别多模块构建时父 POM 的 properties 依然会覆盖子模块配置。所以统一在父 POM 中声明是正确做法。2.2 数据库设计与数据模型门户网站的数据模型不太复杂但要把关键表设计透彻。我的核心表如下-- 机器人产品表 CREATE TABLE cobot_product ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL COMMENT 产品名称, model_no VARCHAR(50) NOT NULL COMMENT 型号, payload_kg DECIMAL(5,2) COMMENT 额定负载/kg, reach_mm INT COMMENT 工作半径/mm, repeatability_mm DECIMAL(6,3) COMMENT 重复定位精度/mm, weight_kg DECIMAL(6,2) COMMENT 本体重量/kg, image_url VARCHAR(255) COMMENT 主图URL, detail_html TEXT COMMENT 详情页富文本, status TINYINT DEFAULT 1 COMMENT 1上架 0下架, sort_order INT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT协作机器人产品表;DO NOT omit重要但答案已截断。在 此处继续
返回列表