老程序员博客

编程生涯的最后一舞

当前位置：首页 > 技术 > 正文内容

社区维修服务平台：基于Spring Boot与Vue的全栈实现方案

访客 技术 2026年6月26日 1

社区维修服务平台：基于Spring Boot与Vue的全栈实现方案

系统架构概述

本社区维修服务平台采用前后端分离架构，后端使用Spring Boot框架构建RESTful API，前端采用Vue.js框架实现用户界面，同时支持uniapp实现跨平台移动端应用。系统通过MyBatis-Plus作为持久层框架，实现高效的数据访问与操作。

技术栈详解

后端框架：Spring Boot

Spring Boot简化了Java应用的开发过程，通过内嵌Web服务器（如Tomcat、Jetty或Undertow）实现了零配置部署。其核心优势在于自动配置机制，能够根据项目依赖自动调整应用配置，大幅减少手动配置的工作量。Spring Boot还提供了丰富的开箱即用功能，包括Spring Data、Spring Security和Spring Cloud等，加速了企业级应用的开发进程。

前端框架：Vue.js

Vue.js采用虚拟DOM技术，通过响应式数据绑定实现高效的UI更新。其组件化架构使开发者能够构建可复用、可维护的用户界面。Vue的数据驱动特性让开发者能够专注于业务逻辑处理，而无需手动操作DOM，从而提高了开发效率和应用性能。

持久层框架：MyBatis-Plus

MyBatis-Plus作为MyBatis的增强工具，提供了丰富的API和注解，简化了数据访问层的开发。它支持多种数据库，包括MySQL、Oracle、SQL Server和PostgreSQL等。MyBatis-Plus的代码生成器可以自动创建实体类、Mapper接口和XML映射文件，显著提升开发效率。此外，它还提供了分页查询、动态SQL、乐观锁和性能分析等实用功能，满足复杂数据操作需求。

系统功能设计

社区维修服务平台主要包含以下功能模块：

  • 用户管理：支持多角色用户（管理员、维修人员、普通用户）的注册、登录、信息管理
  • 维修服务：发布维修需求、选择维修人员、跟踪维修进度
  • 评价系统：对维修服务进行评分和评价
  • 通知系统：实时推送维修状态更新和系统通知

核心代码实现

用户认证与授权


@IgnoreAuth
@PostMapping("/auth/login")
public ResponseResult login(String username, String password, String captcha, HttpServletRequest request) {
    UserEntity user = userService.queryOne(new QueryWrapper<UserEntity>().eq("username", username));
    if(user == null || !user.getPassword().equals(password)) {
        return ResponseResult.fail("账号或密码不正确");
    }
    String token = authService.generateToken(user.getId(), username, "users", user.getRole());
    return ResponseResult.success().put("token", token);
}

@Override
public String generateToken(Long userId, String username, String tableName, String role) {
    TokenEntity tokenEntity = this.getOne(new QueryWrapper<TokenEntity>()
        .eq("user_id", userId)
        .eq("role", role));
    
    String token = TokenUtil.generateRandomToken(32);
    Calendar cal = Calendar.getInstance();   
    cal.setTime(new Date());   
    cal.add(Calendar.HOUR_OF_DAY, 1);
    
    if(tokenEntity != null) {
        tokenEntity.setToken(token);
        tokenEntity.setExpiryTime(cal.getTime());
        this.updateById(tokenEntity);
    } else {
        this.save(new TokenEntity(userId, username, tableName, role, token, cal.getTime()));
    }
    return token;
}

权限拦截器


@Component
public class AuthInterceptor implements HandlerInterceptor {

    public static final String AUTH_TOKEN_HEADER = "X-Auth-Token";

    @Autowired
    private TokenService tokenService;
    
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", 
            "x-requested-with,request-source,X-Auth-Token, Origin,Content-Type, cache-control");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        
        // 处理OPTIONS请求
        if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
            response.setStatus(HttpStatus.OK.value());
            return false;
        }
        
        // 检查方法是否需要跳过认证
        SkipAuth annotation;
        if (handler instanceof HandlerMethod) {
            annotation = ((HandlerMethod) handler).getMethodAnnotation(SkipAuth.class);
        } else {
            return true;
        }

        // 从header中获取token
        String token = request.getHeader(AUTH_TOKEN_HEADER);
        
        // 不需要验证权限的方法直接放过
        if(annotation != null) {
            return true;
        }
        
        TokenEntity tokenEntity = null;
        if(StringUtils.isNotBlank(token)) {
            tokenEntity = tokenService.getTokenByValue(token);
        }
        
        if(tokenEntity != null) {
            request.getSession().setAttribute("userId", tokenEntity.getUserId());
            request.getSession().setAttribute("role", tokenEntity.getRole());
            request.getSession().setAttribute("tableName", tokenEntity.getTableName());
            request.getSession().setAttribute("username", tokenEntity.getUsername());
            return true;
        }
        
        // 返回未登录错误
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
        try {
            response.getWriter().print(JsonUtil.toJsonString(ResponseResult.fail(401, "请先登录")));
        } finally {
            response.getWriter().close();
        }
        return false;
    }
}

数据库设计

用户认证表


-- ----------------------------
-- Table structure for authentication_tokens
-- ----------------------------
DROP TABLE IF EXISTS `authentication_tokens`;
CREATE TABLE `authentication_tokens` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `user_id` bigint(20) NOT NULL COMMENT '用户ID',
  `username` varchar(100) NOT NULL COMMENT '用户名',
  `table_name` varchar(100) DEFAULT NULL COMMENT '关联表名',
  `role` varchar(100) DEFAULT NULL COMMENT '用户角色',
  `token` varchar(200) NOT NULL COMMENT '认证令牌',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `expiry_time` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '过期时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=27 DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='认证令牌表';

维修服务表


-- ----------------------------
-- Table structure for repair_services
-- ----------------------------
DROP TABLE IF EXISTS `repair_services`;
CREATE TABLE `repair_services` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `title` varchar(100) NOT NULL COMMENT '服务标题',
  `description` text COMMENT '服务描述',
  `category_id` bigint(20) NOT NULL COMMENT '服务分类ID',
  `requester_id` bigint(20) NOT NULL COMMENT '请求者ID',
  `provider_id` bigint(20) DEFAULT NULL COMMENT '服务提供者ID',
  `status` tinyint(4) DEFAULT '0' COMMENT '状态：0-待处理，1-处理中，2-已完成，3-已取消',
  `address` varchar(255) NOT NULL COMMENT '服务地址',
  `contact_phone` varchar(20) NOT NULL COMMENT '联系电话',
  `appointment_time` datetime DEFAULT NULL COMMENT '预约时间',
  `completion_time` datetime DEFAULT NULL COMMENT '完成时间',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT COMMENT='维修服务表';

系统测试

功能测试

系统测试主要采用黑盒测试方法，通过模拟用户操作验证各个功能模块的正确性。测试内容包括用户登录、权限验证、维修服务发布与处理等核心功能。

登录功能测试用例

输入数据 预期结果 实际结果 结果分析
用户名：admin
密码：123456
验证码：正确		 登录成功 成功登录系统 符合预期
用户名：admin
密码：111111
验证码：正确		 密码错误提示 显示密码错误信息 符合预期
用户名：admin
密码：123456
验证码：错误		 验证码错误提示 显示验证码错误信息 符合预期

维修服务测试用例

测试场景 预期结果 实际结果 结果分析
发布新的维修服务 服务成功创建 服务列表显示新记录 符合预期
选择维修人员 状态更新为处理中 状态正确更新 符合预期
完成维修服务 状态更新为已完成 状态正确更新 符合预期

部署指南

环境要求

  • Java 8 或更高版本
  • MySQL 5.7 或更高版本
  • Node.js 12 或更高版本
  • Maven 3.6 或更高版本

后端部署步骤

  1. 克隆项目代码到本地
  2. 配置数据库连接信息
  3. 执行数据库初始化脚本
  4. 使用Maven构建项目：mvn clean package
  5. 运行生成的jar文件：java -jar target/community-repair-platform.jar

前端部署步骤

  1. 进入前端项目目录
  2. 安装依赖：npm install
  3. 修改API接口地址配置
  4. 构建项目：npm run build
  5. 将dist目录下的文件部署到Web服务器
标签: Spring BootVue.jsMyBatis-Plus全栈开发
返回列表

上一篇：进制转换技术详解

下一篇：冒泡排序算法实现

相关文章

Linux crontab 详解

1) crontab 是什么cron 是 Linux 的定时任务守护进程；crontab 是用来编辑/查看“按时间周期执行命令”的表（cron table）。常见两类：用户 crontab：每个用户一份（crontab -e 编辑）系统级 crontab / cron.d：可指定执行用户（/etc/crontab、/etc/cron.d/*）2) crontab 时间...

富文本里可以允许的 HTML 属性

一、所有标签默认允许的安全属性（极少）class        （可选）id           （通常建议禁用）title️ 注意：id 容易被滥用做锚点注入，很多系统直接禁用class 允许的话最好只允许固定前缀（如 editor-*）二、a 标签允许属性<a href="" t...

Mac 安装 Node.js 指南

方法一：通过官网安装包（最简单，适合初学者）如果你只是想快速安装并开始使用，这是最直接的方法。访问 Node.js 官网。页面会显示两个版本：LTS (Recommended For Most Users)：长期支持版，最稳定。建议选这个。Current：最新特性版，包含最新功能但可能不够稳定。下载 .pkg 安装包并运行。按照安装向导点击“下一步”即可完成。方法二：使用 Homebrew 安装（...

Dom\HTML_NO_DEFAULT_NS 的副作用：自动加闭合标签

在使用Dom\HTMLDocument时，Dom\HTML_NO_DEFAULT_NS 将禁止在解析过程中设置元素的命名空间, 此设置是为了与DOMDocument向后兼容而存在的。当使用它时，已知的一个副作用就是：自动加闭合标签例如 </img> 为什么会这样？当你使用：Dom\HTML_NO_DEFAULT_NS文档会变成 无命名空间模式，此时内部更接近 XML...

Laravel 事件和监听器创建

在 Laravel 中，使用 Artisan 命令创建 Events（事件） 和 Listeners（监听器） 是非常高效的。你可以通过以下几种方式来实现：1. 手动创建单个 Event如果你只想创建一个事件类，可以使用 make:event 命令：Bashphp artisan make:event UserRegistered执行后，文件将生成在 app/Even...

自定义域名解析神器 dnsmasq

什么是 dnsmasq？dnsmasq 是一个轻量级、功能强大的网络服务工具，专为小型和中等规模网络设计。它是一个综合的网络基础设施解决方案[1]。dnsmasq 能做什么？功能说明应用场景DNS 转发与缓存将 DNS 查询转发到上游服务器（ISP、Google DNS 等），并在本地缓存结果加快 DNS 查询速度，减少外部 DNS 流量本地 DNS解析本地网络设备的主机名，无需编辑&n...

发表评论

访客

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright © agingcoder.cn

Powered By Z-BlogPHP. Theme by TOYEAN.