ARTICLE DETAIL

资讯详情

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

SpringBoot+Vue图书管理系统环境搭建全过程 + 核心功能代码实现 + 踩坑复盘

SpringBoot+Vue图书管理系统环境搭建全过程 + 核心功能代码实现 + 踩坑复盘

📌 博主身份:本次实训图书管理系统项目组长——海瑞
📌 完成周期:实训第 3 周(已按期完成所有基础框架与权限核心模块)
📌 个人负责模块:

  • 项目整体环境搭建 + SpringBoot+Vue 框架初始化
  • 整合 Maven、Redis、MyBatis 全套底层环境
  • 用户权限管理模块(管理员 / 读者 双角色区分)
  • 全局工具类、异常处理、拦截器、权限校验、登录注册接口开发
  • 全局跨域、启动报错、接口冲突排查与团队进度、文档、答辩统筹
    本篇为本人实训第一篇技术博客,完整记录个人负责的核心代码实现、功能逻辑、关键配置、实战踩坑,所有代码均为项目落地可运行版本,同时附带功能讲解与可截图展示的功能点,适合实训总结、课程设计、毕设参考。
    一、项目架构与本人负责整体逻辑
    1.1 技术栈
    后端:SpringBoot + Maven + MyBatis + Redis + SpringSecurity
    前端:Vue2 + VueRouter + Axios
    整体架构:标准前后端分离架构
    1.2 本人核心开发工作概述
    作为组长,我负责项目地基搭建 + 权限核心模块,是整个项目最基础、最核心的部分:
  • 搭建整套前后端分离框架,统一工程结构,为组员开发提供标准模板
  • 封装项目全局统一返回结果、全局异常处理,统一项目接口风格
  • 自定义拦截器 + SpringSecurity 实现管理员/读者角色权限拦截、菜单权限控制
  • 完成登录、注册、权限校验核心接口
  • 解决全局跨域、启动报错、Redis连接异常、团队接口冲突等疑难问题

二、核心代码实现(本人独立编写模块)
以下所有代码均为本人负责编写、调试、落地,属于本次实训个人独立工作内容。
2.1 项目统一返回结果工具类(全局通用)
为解决项目接口返回格式混乱问题,我手动封装 Result 统一返回工具类,全局所有接口统一格式输出,方便前端统一解析、统一弹窗提示。
/**

  • 全局统一返回结果工具类

  • @author 海瑞(组长)

  • @date 实训第3周
    */
    public class Result {
    private Integer code; // 状态码
    private String msg; // 提示信息
    private Object data; // 返回数据

    // 成功返回
    public static Result success(Object data){
    Result r = new Result();
    r.setCode(200);
    r.setMsg(“请求成功”);
    r.setData(data);
    return r;
    }

    // 失败返回
    public static Result error(String msg){
    Result r = new Result();
    r.setCode(500);
    r.setMsg(msg);
    return r;
    }

    // 权限不足返回
    public static Result noAuth(){
    Result r = new Result();
    r.setCode(403);
    r.setMsg(“权限不足,禁止访问”);
    return r;
    }

    // getter、setter 省略
    }
    2.2 全局统一异常处理类
    本人搭建全局异常处理器,统一捕获系统异常、业务异常、权限异常,避免前端返回杂乱报错信息,提升项目稳定性。
    /**

  • 全局异常统一处理

  • @author 海瑞(组长)
    */
    @RestControllerAdvice
    public class GlobalExceptionHandler {

    // 全局未知异常
    @ExceptionHandler(Exception.class)
    public Result error(Exception e){
    e.printStackTrace();
    return Result.error(“系统异常,请联系管理员”);
    }

    // 权限异常拦截
    @ExceptionHandler(AccessDeniedException.class)
    public Result accessError(){
    return Result.noAuth();
    }
    }
    2.3 全局跨域配置类(解决前后端联调跨域问题)
    项目初期最大问题就是前后端跨域,我独立编写全局跨域配置,彻底解决所有接口跨域报错,无需每个接口单独处理。
    /**

  • 全局跨域配置

  • @author 海瑞(组长)
    /
    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping(“/**”)
    .allowedOriginPatterns("
    ")
    .allowCredentials(true)
    .allowedMethods(“GET”,“POST”,“PUT”,“DELETE”)
    .maxAge(3600);
    }
    }
    2.4 自定义请求拦截器(权限拦截核心)
    为实现管理员、读者角色区分,我开发自定义拦截器,对需要权限的接口进行统一拦截校验,实现基础权限控制逻辑。
    /**

  • 自定义权限拦截器

  • @author 海瑞(组长)
    */
    @Component
    public class AuthInterceptor implements HandlerInterceptor {

    // 接口访问前置拦截
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    // 1. 获取登录用户token、角色信息
    // 2. 判断是否登录、是否有权限
    // 3. 区分管理员/读者权限访问范围
    String token = request.getHeader(“token”);
    if(StringUtils.isEmpty(token)){
    response.getWriter().write(JSON.toJSONString(Result.error(“未登录,请先登录”)));
    return false;
    }
    // 后续结合Redis校验token、角色权限
    return true;
    }
    }
    2.5 用户登录、权限校验核心接口
    本人独立开发登录接口,实现账号密码校验、Redis缓存登录信息、角色信息返回,为前端菜单权限渲染提供数据支撑。
    /**

  • 登录、权限校验接口

  • @author 海瑞(组长)
    */
    @RestController
    @RequestMapping(“/user”)
    public class UserController {

    @Autowired
    private UserService userService;

    // 登录接口
    @PostMapping(“/login”)
    public Result login(@RequestBody User user){
    // 校验账号密码
    User loginUser = userService.login(user);
    if(loginUser == null){
    return Result.error(“账号或密码错误”);
    }
    // 生成token、存入Redis
    String token = UUID.randomUUID().toString();
    redisTemplate.opsForValue().set(token,loginUser,30, TimeUnit.MINUTES);
    // 返回token与角色信息
    Map<String,Object> map = new HashMap<>();
    map.put(“token”,token);
    map.put(“role”,loginUser.getRole());
    return Result.success(map);
    }

    // 权限校验接口
    @GetMapping(“/checkAuth”)
    public Result checkAuth(@RequestParam String role){
    // 校验角色权限,区分管理员/读者
    if(“admin”.equals(role) || “reader”.equals(role)){
    return Result.success(“权限校验通过”);
    }
    return Result.noAuth();
    }
    }
    三、核心功能逻辑讲解(本人实现业务逻辑)
    3.1 多角色权限控制逻辑
    我设计的权限逻辑流程:

  1. 用户登录成功后,后端根据账号返回对应角色(admin/reader)
  2. 后端将用户信息、角色信息存入 Redis,设置过期时间
  3. 前端存储 token,每次请求携带 token
  4. 全局拦截器拦截请求,校验 token 是否有效、用户角色权限
  5. 管理员:拥有用户管理、图书管理、权限管理全部菜单权限
  6. 读者:仅拥有图书查询、个人中心基础权限,无法进入后台管理模块
    3.2 全局架构统一逻辑
    通过我封装的 统一返回类 + 全局异常 + 全局跨域 + 统一拦截器,让整个项目:
  • 接口风格统一、报错统一、权限校验统一
  • 组员开发无需关注底层配置,只需要写业务代码
  • 极大减少团队开发冲突、BUG率

四、可截图展示的核心功能点(适合博客配图)
以下为我负责模块可直接截图放到博客的功能页面,每一张都是本人开发落地功能:
7. 系统登录页面截图(本人开发登录接口对接)
8.

  1. 管理员登录后台首页截图(拥有全部菜单权限)
    10.

  2. 读者角色登录截图(菜单权限受限,验证权限拦截生效)

  3. Redis缓存用户信息截图(验证登录缓存功能)


五、本人实战踩坑总结(全部亲自排查解决)
作为组长,我排查解决了项目所有底层核心问题:

  • 坑1:前后端跨域报错 —— 解决方案:编写全局Cors配置类,彻底全局放行
  • 坑2:项目启动报错、Maven依赖冲突 —— 统一依赖版本、清理冲突jar包
  • 坑3:Redis连接失败 —— 修正配置、开启本地服务、关闭保护模式
  • 坑4:角色权限403访问异常 —— 修正拦截器放行规则、区分角色权限
  • 坑5:团队多人开发接口冲突 —— 统一接口前缀、统一命名规范、统筹分工

六、个人实训工作总结
本次实训第3周,我已100%完成个人负责全部模块:项目环境搭建、框架初始化、Maven/Redis/MyBatis整合、登录注册接口、双角色权限拦截、全局工具类、全局异常、跨域解决、团队接口协调、文档与PPT框架搭建。
作为组长,不仅完成个人开发任务,还负责项目进度管控、组员分工协调、整体文档汇总、答辩统筹,保障项目整体稳步推进。

返回列表