企业官网建设流程全解析

拿到手就是一套比较完整的“Java Web医院药品管理系统”源码包，后端SpringBoot2、前端Vue3，ORM用MyBatis-Plus，数据库落在MySQL8.0上，还带开发文档。我把它实际部署跑了一遍，又把前后端代码翻了一遍，今天把整套系统的模块划分、核心代码位置、启动步骤和我在部署过程中遇到的坑全部拆开聊一遍。这东西说白了就是一个典型的“前后端分离的中小型管理系统”，对正在做毕业设计、课程设计，或者刚学完SpringBoot想找一个完整项目练手的同学来说，参考价值很高。

先说结论：这套项目的完成度相当不错，三张核心业务表、两种角色权限、完整的药品入库出库流程、库存预警和统计报表都有，文档也确实能给到实用的引导。看标题就知道技术栈非常主流，SpringBoot2 + Vue3 + MyBatis-Plus + MySQL8.0这套组合在中小型项目里非常常见，学会了这套，往后的单体管理系统基本都能拿来套用。

1. 项目整体拆解：一条线看懂这套系统

1.1 业务模型：医院药房的日常流程

拿到一个项目源码，先别急着点运行，第一步一定是读文档、看数据库脚本、理清业务模型。药品管理系统的核心其实就是药房的日常进销存流程。

这套系统里涉及的角色很清晰，管理员和普通用户。管理员负责药品信息维护、供应商管理、审核入库出库记录；普通用户侧重点偏向日常操作，比如药品入库登记、出库登记、查询库存和查看预警信息。

整个业务闭环是：药品信息建档（药品名称、规格、生产厂家、批准文号、有效期）→ 供应商供货入库 → 药房库存增加 → 临床科室领用出库 → 库存扣减 → 库存低于阈值触发预警 → 管理员看到预警后补充采购计划。这条链路上每一步都有对应页面和接口支撑，代码里模块边界划分得比较清楚。

给我印象比较深的是有效期管理。药品不同于普通商品，过期药品会造成医疗事故，所以系统里设置了生产日期和有效期两个字段，这部分设计思路很贴近真实场景。

1.2 功能模块划分

理解一个管理系统的第一步，是先把页面和表对应起来。以下是这套系统的核心模块拆分：

这套模块划分非常典型，单从写代码的角度看，本质就是围绕几张核心业务表做CRUD，但业务上有逻辑闭环，不是纯粹的“增删改查演示项目”。

1.3 这套系统适合谁来学

在正式开始部署之前，先给读者们定位一下。这套源码的定位非常精准，就是给学生和初级开发者准备的培训型项目。如果你是这几种情况之一，这套系统值得仔细研究：

• 计算机相关专业的学生，正在选题做毕业设计或者课程设计，需要一个前后端分离的完整案例；
• 自学Java Web大半年的新手，看教程一学就会、一写就废，需要拿一个有完整业务逻辑的项目来找感觉；
• 刚接触Vue3和SpringBoot前后端分离开发，想搞清楚两者怎么配合、怎么做到接口联调的人。

如果你已经是工作三年以上的后端开发，那这套系统的技术深度可能满足不了你，但拿来看一下MyBatis-Plus的设计方式和项目分层结构，也有一定参考价值。

1.4 文档到底包含什么

“含文档”是这套源码比较加分的地方。我翻了一下，文档内容覆盖了三块：

• 项目介绍文档：说明系统背景、技术栈选型、功能模块和适用场景；
• 数据库设计说明书：每张表的核心字段说明、表关系图、设计思路，这一块写电论文或设计文档时是现成的素材；
• 部署运行文档：从环境准备到启动成功，每一步都配了说明，照着操作基本能跑起来。

这个点我要特别强调一下。很多学生拿到源码跑不起来，不是代码有问题，而是文档太薄。这套系统的文档能够帮助你降低启动门槛，省去网上到处搜资料的麻烦。

2. 技术选型：为什么是SpringBoot2 + Vue3 + MyBatis-Plus + MySQL8.0

2.1 SpringBoot2：依然是市场主流

可能有人会问：现在SpringBoot3都出来了，为什么还在用SpringBoot2？道理很简单，对于这套系统的目标用户来说，SpringBoot2才是最合适的选择。

一方面，SpringBoot2技术积累足够深，网上搜到的资料、问答、踩坑案例绝大多数都基于这个版本，新手碰见问题更容易找到解决方案。另一方面，很多高校的教学体系、毕业设计项目要求，仍然锁定在SpringBoot2这条线上。SpringBoot3的底层是Jakarta EE规范，虽然看起来是新方向，但配套生态和旧版衔接都还在过渡期。

从实际开发角度看，SpringBoot2的自动配置机制比传统的SSH、SSM框架省去了大量XML配置。在application.yml里配置好数据源，就能直接写业务代码。这套源码里标准的Controller-Service-Mapper三层结构也很清晰，对于学习来说比较友好。

2.2 Vue3：前端组合式API的实践

前端的Vue3是近年来的技术热点，尤其是组合式API（Composition API）让代码复用和逻辑组织方式有了很大变化。这套系统采用了Vue3 + Element Plus的组合，页面元素都是比较标准的表格、表单、弹窗、消息提示，UI风格简洁实用。

项目里前端部分使用vite构建，开发模式下热更新速度比传统webpack要快不少，页面响应也比较流畅。

我建议前端基础薄弱的同学重点看看Vue3的几个用法：

• ref和reactive管理响应式数据的状态；
• onMounted生命周期钩子里请求后端接口拉数据；
• 使用axios封装的request模块，统一处理请求头和响应拦截器；
• 使用vue-router实现路由守卫，根据用户角色做页面访问控制。

这些知识点实际项目里经常用到，学会了不止能看懂这套系统，往后写任意Vue3项目都能快上手。

2.3 MyBatis-Plus：单表CRUD效率神器

持久层选择MyBatis-Plus，这是目前Java生态里非常热门的增强框架。和原生MyBatis相比，它的核心优势完全体现在开发效率上。

设想一下，如果没有MyBatis-Plus，光是为每一张表写一遍基础的增删改查SQL，就是一笔不小的重复工作量。一个完整系统至少十几张表，工作量成倍增加。

MyBatis-Plus带来的变化是：写一个实体类，再写一个继承BaseMapper<T>的接口，基础的insert、deleteById、selectById、updateById、selectPage等方法就全部拥有了，不需要再写SQL。这套项目正体现了这一点，业务模块里几乎看不到传统MyBatis那种冗长的XML映射文件。

比如分页查询，传统写法要手写limit语句、count查询，代码量大且容易出错。MyBatis-Plus的分页插件把分页逻辑封装好了，只需要配置一个分页拦截器，然后在Service层直接写``

java LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.like(StringUtils.isNotBlank(keyword), Drug::getDrugName, keyword) .orderByDesc(Drug::getCreateTime); IPage page = drugMapper.selectPage(new Page<>(current, size), queryWrapper);

这种写法非常直观，条件构造器能够自动忽略空字符串条件，查询条件清晰可读，这是它能成为项目主选框架的核心原因。 ### 2.4 MySQL8.0：性能和便利性的平衡 数据库选MySQL8.0，理由也很直接。MySQL8.0相比5.7版本在性能上提升了很多，比如支持窗口函数、公用表表达式、更好的JSON支持、默认字符集`utf8mb4`也足够稳妥，兼容性在新版MySQL客户端驱动下都很顺畅。 特别提醒第一次用MySQL8.0的同学：驱动类已经从`com.mysql.jdbc.Driver`改成了`com.mysql.cj.jdbc.Driver`，如果项目里还在用旧驱动会直接报`ClassNotFoundException`。 另外数据库连接串里一般都要带上`serverTimezone=Asia/Shanghai`参数，否则可能会碰到时区相关的报错。这类细节在部署文档里如果没写明，新手很容易卡住。这套系统的数据库初始化脚本会创建好数据库和全部表，数据字典也有示例数据，对学习者很友好。 ## 3. 数据库设计与核心代码实现 ### 3.1 数据库表结构设计思路 一个系统的质量如何，从数据库表设计就能判断个大概。这套系统的表结构设计整体比较规范，核心业务表大致包括： - 用户表：存登录账号、密码（BCrypt加密后的密文）、姓名、角色等； - 药品表：存药品名称、通用名、规格、剂型、生产厂家、批准文号、生产日期、有效期、售价等； - 供应商表：存供应商名称、联系人、电话、地址等； - 出入库记录表：记录每次出入库的药品、数量、操作人、时间、单据号等； - 库存表：记录每种药品的当前库存数量、预警阈值、更新时间等。 从表关系来看，出入库记录通过药品ID关联到药品主表，库存表也通过药品ID和药品表建立关联。这种设计在管理系统中很常规，但对初学者来说，有一张完整的表设计文档作为参照去理解，远比空谈“三范式”要有效得多。 ### 3.2 后端核心实现解析 后端分为几大包结构：`controller`、`service`、`mapper`、`entity`、`config`、`utils`、`common`。 先看登录鉴权这一块，它是前后端分离项目里最核心的一个环节。登录接口接收前端传来的用户名和密码，用BCrypt对密码做校验，校验通过后通过`JWT`工具类生成一个令牌返回给前端。前端的axios请求拦截器会在每次请求时带上这个令牌，后端的拦截器对除了登录接口之外的请求做令牌校验，校验不通过就返回401状态码。 给出核心的JWT生成的简化思路： ```java public String generateToken(String username, String role) { Map<String, Object> claims = new HashMap<>(); claims.put("username", username); claims.put("role", role); return Jwts.builder() .setClaims(claims) .setSubject(username) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 24)) .signWith(SignatureAlgorithm.HS256, secretKey) .compact(); } ``` 再来看药品管理的Controller层，代码风格比较统一： ```java @RestController @RequestMapping("/api/drug") public class DrugController { @Autowired private DrugService drugService; @GetMapping("/page") public Result<IPage<Drug>> page(@RequestParam Integer current, @RequestParam Integer size, @RequestParam(required = false) String keyword) { return Result.success(drugService.pageDrug(current, size, keyword)); } @PostMapping("/save") public Result<?> save(@RequestBody Drug drug) { drugService.saveDrug(drug); return Result.success("保存成功"); } @DeleteMapping("/delete/{id}") public Result<?> delete(@PathVariable Integer id) { drugService.deleteDrug(id); return Result.success("删除成功"); } } ``` 可以看到，Controller层只负责接收参数和返回结果，业务逻辑全部下沉到Service层。比如删除药品前，Service层会先判断该药品是否存在出入库记录，如果有，就禁止删除并抛出业务异常。这个逻辑在真实项目中很有必要，否则删掉药品主数据后，出入库记录会变成悬空的脏数据。 MyBatis-Plus在代码里的使用方式也值得细看。实体类上加`@TableName`注解映射表名，`@TableId(type = IdType.AUTO)`标注主键自增策略，然后Mapper接口继承`BaseMapper`即可。 ```java @TableName("drug") public class Drug { @TableId(type = IdType.AUTO) private Integer id; private String drugName; private String specification; private String manufacturer; private Date productionDate; private Date expirationDate; private BigDecimal price; private Integer stockQuantity; private Integer warnThreshold; } ``` 这种写法的优势是代码极其干净，省掉了一堆冗余的XML映射配置，初学者看起来也轻松。 ### 3.3 前端页面实现要点 前端部分我重点看了登录页、首页看板、药品管理页这三个页面，比较能代表整个前端的风格和技术要点。 登录页的逻辑不复杂：账号密码输入框、登录按钮、回车提交，提交后调用`login`接口，成功后把token存到localStorage里，同时在内存里存一份当前用户信息，再跳转路由到首页。 药品管理页的主结构是：搜索区、操作按钮区、数据表格、分页组件。搜索区里放一个关键字输入框，输入药品名称关键字后触发查询；操作按钮区放“新增”、“编辑”、“删除”按钮；数据表格展示药品列表；分页组件手动控制当前页码和每页条数。 Vue3的Composition API写法里，状态都用`ref`包装： ```javascript const keyword = ref(''); const tableData = ref([]); const total = ref(0); const current = ref(1); const size = ref(10); const loadData = async () => { const res = await request.get('/drug/page', { params: { current: current.value, size: size.value, keyword: keyword.value } }); tableData.value = res.data.records; total.value = res.data.total; }; onMounted(loadData); ``` axios封装这块基本也是标准做法，在request实例中统一注入了token和响应拦截，方便后期统一处理错误状态码。 ## 4. 从零到一：完整部署实战记录 ### 4.1 环境准备清单 在动手部署前，先把环境准备好，避免到一半卡住。 | 软件 | 版本建议 | 用途 | | --- | --- | --- | | JDK | 1.8或11 | SpringBoot2的运行时环境 | | Maven | 3.6以上 | 后端依赖管理 | | Node.js | 14.18+或16+ | 前端构建与依赖安装 | | MySQL | 8.0+ | 数据存储 | | IDE | IDEA / VSCode | 代码查看与运行 | 前端项目用npm或yarn都能安装依赖，我个人试了npm比较稳妥，node版本尽量选16左右的稳定版，太新的版本有时会出现依赖兼容问题。 ### 4.2 数据库初始化操作 第一步先把项目里提供的SQL脚本找出来，用Navicat或命令行执行。执行脚本前要特别注意：如果SQL文件里已经创建了数据库，比如`create database hospital_drug;`，那就不需要手动建库，直接整体执行即可。 如果脚本里只有建表语句，就需要自己先建库再导入。建库时务必把字符集设置为`utf8mb4`： ```sql CREATE DATABASE hospital_drug DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; ``` 导入完成后检查一下表是否齐全。常见的坑是SQL脚本执行一半报错，导致部分表缺失。解决办法是用source命令或在Navicat里以文件方式导入，报错时定位到具体行号修复问题再重新执行。 ### 4.3 后端环境配置启动 后端项目用IDEA打开，等Maven自动下载依赖。这一步是时间最长也最容易出问题的环节，网络不快时可能要等好几分钟。 重点检查`application.yml`。数据库的连接配置是必改项： ```yaml spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/hospital_drug?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false username: root password: 你自己数据库的密码 ``` 改完配置直接启动`Application`类，看到类似下面的日志就说明后端启动成功： ``` Tomcat started on port(s): 8080 (http) Started Application in 5.38 seconds ``` 特别提醒：如果后端端口不是8080或者被占用，可以在配置里改掉。同类端口冲突问题和解决方案，在第五部分会集中说明。 ### 4.4 前端环境配置启动 打开前端目录，安装依赖： ```bash npm install ``` 如果`npm install`报错或者下载特别慢，可以先用国内镜像源： ```bash npm config set registry https://registry.npmmirror.com ``` 依赖装好后启动开发服务器： ```bash npm run dev ``` 看到`VITE ready`之类的日志说明前端启动成功，然后浏览器访问控制台输出的本地地址。 这里有一个最容易踩的坑：前端请求后端接口的地址写在哪里？需要找到封装axios的`request.js`文件，看里面的baseURL指向哪个地址。默认是`http://localhost:8080`，如果你把后端端口改掉了，这里也要同步改，否则使用登录功能时一直无法正常发起请求。 > 注意：跨域问题的解决方式常见有两种。方案一是在后端写一个CorsFilter或全局配置跨域；方案二是借助前端vite的proxy代理转发。这套项目里用的是后端跨域配置，如果改动接口地址提示跨域，优先检查后端是否保留了跨域配置类。 ### 4.5 系统整体联调验证 启动好前后端之后，用系统管理员的账号登录系统。逐个把功能点测试一遍： - 登录成功后能否正常看到首页统计数据？ - 新增一种药品，刷新后它是否出现在列表里？ - 给该药品做一次入库操作，库存数量是否对应增加？ - 再做一次出库操作，库存数量是否对应减少？ - 把库存数量调整到预警阈值以下，首页是否出现预警记录？ 走完这一轮功能验证，整个系统就算完整跑通了。如果某一步没达到预期效果，优先按着第五部分的问题排查思路去检查。 ## 5. 常见问题排查与避坑技巧实录 ### 5.1 数据库连接失败 这个是我见过最多的问题，重要程度排第一。 报错信息一般是`Access denied for user 'root'@'localhost'`或者`Communications link failure`。 前一种说明用户名或密码错误，去`application.yml`里核对数据库账号密码；后一种检查MySQL服务是否启动，Windows下可以用命令行确认： ```bash net start mysql80 ``` 另外MySQL8.0默认的认证插件是`caching_sha2_password`，有的老驱动版本不兼容，如果你的项目报错涉及认证方式，可以在MySQL里修改账户认证插件： ```sql ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码'; ``` 改了之后一般就能连上。不过最好的办法还是直接使用MySQL8.0配套的驱动版本，省掉这些历史问题。 ### 5.2 端口冲突 后端启动报`Port 8080 was already in use`，说明8080端口已经被其他程序占用。 命令行查看占用进程： ```bash netstat -ano | findstr 8080 ``` 然后杀掉对应进程，或者在`application.yml`里换一个端口。改了端口就一定要同步修改前端axios的baseURL。 ### 5.3 Maven依赖下载缓慢或失败 首次加载依赖是漫长等待，失败的概率也不低。 推荐用阿里云镜像仓库，在Maven的`settings.xml`里配置： ```xml <mirror> <id>aliyunmaven</id> <mirrorOf>central</mirrorOf> <url>https://maven.aliyun.com/repository/public</url> </mirror> ``` 如果某个依赖一直报错下载不下来，先在本地仓库把对应目录删掉，再执行一次`mvn clean install`让它重新拉取。 ### 5.4 前端页面数据加载不出来 页面打开正常，但表格里没有数据，网络请求状态也是正常的200，这种情况大概率是跨域拦截，也可能是接口返回结构不一致导致的渲染问题。 打开浏览器开发者工具，切到控制台和网络面板，看请求返回的JSON结构。前端对应的`response.data.records`拿不到数据时，优先检查后端接口返回结构和前端解析逻辑是否一致。这类问题排查时要耐心走一遍数据链路。 ### 5.5 药品库存出现负数 库存扣减逻辑在并发场景下容易出问题。脑子里想一下这个场景：两个窗口同时给同一药品出库，两个请求同时读到库存是10，各出库8，最终库存被写成2而不是-6，但实际上是-6才对。 解决办法是使用乐观锁。MyBatis-Plus的乐观锁实现方式非常简单，给库存表加一个`version`字段，实体类里给字段加上`@Version`注解，然后配置乐观锁插件。更新时框架会自动拼接`where version = ?`，更新成功后把`version + 1`，一旦更新行数为0就提示重试，从源头避免并发覆盖。 这块项目里可能没有实现，但作为进阶优化点提出来，对学习和改造都很有价值。 ### 5.6 排查技巧速查表 | 症状 | 可能原因 | 排查思路 | | --- | --- | --- | | 后端无法启动，报数据库相关错误 | 数据库连接配置错误、MySQL未启动 | 检查yml配置、检查MySQL服务状态 | | 前端npm install卡住 | 网络问题 | 换国内镜像源 | | 接口返回401 | token过期或者没带token | 重新登录，检查请求头是否带Authorization | | 前端打不开页面 | 启动命令未执行成功 | 看终端日志，确认vite是否在监听端口 | | 登录后页面空白 | 路由守卫或权限配置问题 | 检查用户角色和路由meta里的role是否匹配 | ## 6. 运维安全与性能优化建议 ### 6.1 数据库账号权限收敛 在线上环境或生产用途中，用root直接操作应用数据库风险较大。建议单独创建一个应用账号，只分配对当前业务库的常用权限： ```sql CREATE USER 'hospital_app'@'localhost' IDENTIFIED BY '强密码'; GRANT SELECT, INSERT, UPDATE, DELETE ON hospital_drug.* TO 'hospital_app'@'localhost'; FLUSH PRIVILEGES; ``` 这样一来，就算该账号泄露，影响也被限制在这一个库里，无法波及整个数据库实例。对于毕业设计作品来说，这点小而实用的优化呈现出来也很有亮点。 ### 6.2 请求日志与拦截器 后端开发的细节里，日志和全局异常处理非常关键。这套项目里已经有基本的`@RestControllerAdvice`处理全局异常，建议再加一层日志切面，记录每个请求的路径、耗时、状态码，方便后期排查问题。 尤其在药品出入库这类关键操作上，操作日志的留存非常重要，否则出问题后连是谁在什么时间操作了什么药品都查不到。 ### 6.3 数据库索引设计 数据量大了之后，查询性能的瓶颈大多出现在索引缺失上。药品表可以给常用搜索列加索引，比如`drug_name`；出入库记录表可以给`drug_id`和操作时间列加复合索引。 ```sql CREATE INDEX idx_drug_name ON drug(drug_name); CREATE INDEX idx_inbound_drug_time ON drug_inbound(drug_id, create_time); ``` 索引不是越多越好，插入数据时会增加维护成本。给高频查询条件加索引，低基数列不需要索引，这个原则要记住。 ### 6.4 后续扩展方向 整套系统的核心链路是完整的，但从真实业务角度看，扩展空间还很大。几个典型的扩展方向供参考： - 加入采购计划审批流程，让采购申请、审批、入库形成闭环； - 加入药品批次管理，同一药品不同批号分开管理，真实药房经常有这个需求； - 增加患者用药记录和用药医嘱功能，将药品管理延伸至临床端； - 增加报表的图表可视化，按月份比对出入库趋势，辅助管理者做决策。 这些方向能让管理系统的业务纵横延伸很多。如果是以课程设计为目标，做到其中一两个扩展亮点，项目的完整性就非常不错了。 ## 7. 一批可以直接参考的项目资料清单 翻源码时顺手整理了一份本项目的核心参考资料清单，对理解源码和答辩展示都有用： - 项目技术文档：系统架构说明、环境要求、模块介绍，先看这个再动代码； - 数据库脚本：表结构和基础数据，理解业务的第一步； - 部署文档：部署流程按步骤操作即可，注意数据库密码和端口修改； - 答辩PPT参考：如果做毕业设计，模块设计图、ER图、系统截图、创新点说明能直接取材于这些素材； - 源码内的接口文档：部分接口注释或请求示例，配合Swagger或Postman做接口测试很高效。 总之在动项目前，先花30分钟通读文档，思路会清晰很多。千万别一上来就启动代码，碰见报错容易一头雾水。 ## 8. 写在最后：从跑通到吃透 整套系统跑通后，站在学习角度，这些提升方向值得花力气： 第一，重置数据库到空库，不看初始数据，完全从头按照自己的理解在系统前端页面填充一套药品数据，体会各类记录的联动效果。这是一个很有效的练习方式，能让你主动掌握系统字段的含义和表间联系。 第二，找一个不起眼的功能模块，不看现有代码，尝试自己一个人写一遍。比如供应商管理模块，只花一两个小时就能完整实现。自己亲手做一遍，收获往往比看十遍源码还大。 第三，深度过一遍登录鉴权的请求链路。从登录页输入开始，到后端校验账户密码，生成JWT，再到前端存token、路由守卫拦截、请求头携带token、后端拦截器验token，完整链路贯穿前后端，是前后端分离项目的精髓所在。 第四，修改一个功能的业务逻辑。比如把“删除药品时提示被引用”改成“删除药品时级联删除其出入库记录”（虽然从业务合理性的角度不建议这么做），但在代码层面能直观感受外键约束和业务层校验的作用。 我在多次指导学生跑这套系统的过程中，总计过一句话：初学者面对的困难，很多时候不是代码量太大，而是信息太多不知道从哪里看。这套带文档的项目刚好指了一条清晰的路，从跑通到吃透，踏踏实实走完一遍，SpringBoot和Vue3的实战经验会有一个很明显的提升。 最后再分享一个小技巧：运行哪怕只是一个小功能模块的调试，也要先理清楚数据走向。一条药品数据从页面表单到数据库，再从数据库返回页面表格的整个流转过程，能把前端、后端、数据库三层之间的协作方式彻底串起来，常用功能模块挨个排查一遍，这套系统就算真正跑明白了。