基于SpringBoot与Vue的中医药膳服务系统设计与实现
系统架构概述
本项目采用前后端分离架构,后端基于SpringBoot框架构建,前端使用Vue.js实现用户界面,移动端通过Uniapp开发跨平台应用。整体技术栈结合了SSM(Spring、Spring MVC、MyBatis)核心组件,并集成MyBatis-Plus增强数据访问能力,提升开发效率。
关键技术选型说明
后端:SpringBoot框架优势
SpringBoot提供自动配置机制和内嵌Web服务器(如Tomcat),简化部署流程。通过依赖管理可快速集成安全控制(Spring Security)、数据持久化(Spring Data)及分布式服务(Spring Cloud)。本系统利用其简洁的配置方式实现RESTful API接口开发,支持高并发请求处理。
前端:Vue.js响应式设计
前端采用Vue.js框架,依托其虚拟DOM机制实现高效视图更新。结合Vue Router进行页面路由管理,使用Vuex集中管理应用状态。界面组件模块化设计,提升代码复用性与维护性,确保良好的用户体验。
数据层:MyBatis-Plus高效操作
MyBatis-Plus在MyBatis基础上封装常用CRUD操作,减少SQL编写工作量。支持Lambda表达式查询、分页插件、乐观锁等功能。系统通过其代码生成器自动生成实体类、Mapper接口和XML映射文件,显著加快开发进度。
核心功能测试方案
系统采用黑盒测试方法验证各功能模块的正确性与稳定性,重点覆盖登录认证、用户管理等关键流程。
登录功能测试用例
| 输入条件 | 预期输出 | 实际结果 | 测试结论 |
|---|---|---|---|
| 正确用户名、密码、验证码 | 成功跳转至首页 | 登录成功,进入主界面 | 通过 |
| 用户名正确,密码错误 | 提示"密码不正确" | 显示密码错误信息 | 通过 |
| 验证码输入错误 | 提示"验证码错误" | 弹出验证码错误提示 | 通过 |
| 用户名为空 | 提示"请输入用户名" | 前端校验并提示必填项 | 通过 |
用户管理功能测试
涵盖用户的增删改查操作:
- 新增用户时未填写必填字段 → 提示对应字段不能为空
- 添加重复用户名 → 返回"该账号已存在"提示
- 编辑用户信息 → 更新后列表中数据同步刷新
- 删除用户 → 弹窗确认后从数据库移除记录
身份认证与权限控制实现
系统通过Token机制实现无状态会话管理,用户登录后生成JWT风格令牌,后续请求携带Token完成鉴权。
登录接口逻辑
@IgnoreAuth
@PostMapping("/login")
public R login(String username, String password, HttpServletRequest request) {
UsersEntity user = userService.getOne(new QueryWrapper<UsersEntity>().eq("username", username));
if (user == null || !user.getPassword().equals(password)) {
return R.error("账户或密码错误");
}
String token = tokenService.createToken(user.getId(), username, "users", user.getRole());
return R.ok().put("token", token);
}
Token生成策略
@Override
public String createToken(Long userId, String username, String table, String role) {
TokenEntity existing = tokenMapper.selectOne(
new QueryWrapper<TokenEntity>().eq("userid", userId).eq("role", role)
);
String newToken = RandomUtil.randomString(32);
Calendar now = Calendar.getInstance();
now.add(Calendar.HOUR, 1); // 设置过期时间为1小时后
if (existing != null) {
existing.setToken(newToken);
existing.setExpiratedtime(now.getTime());
tokenMapper.updateById(existing);
} else {
TokenEntity entity = new TokenEntity(userId, username, table, role, newToken, now.getTime());
tokenMapper.insert(entity);
}
return newToken;
}
全局拦截器实现权限校验
@Component
public class AuthInterceptor implements HandlerInterceptor {
@Autowired
private TokenService tokenService;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
// 跨域预检请求放行
if ("OPTIONS".equals(request.getMethod())) {
response.setStatus(200);
return false;
}
// 添加跨域头
setCORSHeaders(response, request);
// 检查是否忽略认证
IgnoreAuth ignore = getIgnoreAuthAnnotation(handler);
if (ignore != null) return true;
// 获取请求头中的Token
String token = request.getHeader("Token");
if (StrUtil.isBlank(token)) {
sendUnauthorizedResponse(response, "请先登录");
return false;
}
TokenEntity tokenInfo = tokenService.verifyToken(token);
if (tokenInfo == null) {
sendUnauthorizedResponse(response, "登录已失效,请重新登录");
return false;
}
// 存储用户上下文
request.setAttribute("userId", tokenInfo.getUserid());
request.setAttribute("role", tokenInfo.getRole());
request.setAttribute("username", tokenInfo.getUsername());
return true;
}
}
数据库设计片段
用于存储用户会话凭证的token表结构如下:
CREATE TABLE `token` (
`id` BIGINT NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`userid` BIGINT NOT NULL COMMENT '用户ID',
`username` VARCHAR(100) NOT NULL COMMENT '用户名',
`tablename` VARCHAR(100) DEFAULT NULL COMMENT '关联表名',
`role` VARCHAR(100) DEFAULT NULL COMMENT '角色类型',
`token` VARCHAR(200) NOT NULL COMMENT '令牌字符串',
`addtime` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`expiratedtime` TIMESTAMP NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '过期时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户令牌表';
测试总结与系统评估
经过完整的功能测试流程,系统各项业务逻辑运行稳定,接口响应准确,符合原始需求定义。测试过程以用户视角为核心,模拟真实使用场景,有效发现潜在问题并及时修复。最终结果显示,系统在功能性、可用性和安全性方面均达到预期目标,具备上线运行条件。