动漫网站一、项目定位一个 Spring Boot MyBatis Thymeleaf Vue.js Element UI的动漫资讯社区平台支持普通用户(USER) 和 管理员(ADMIN)双角色体系。二、核心功能特色及实现代码1双角色认证体系前端自适应 UI描述登录后根据角色显示不同导航栏——普通用户看到个人中心/退出登录管理员看到用户管理/文章审核/退出管理。后端逻辑UserController.java登录时区分存入 Session 的 key// USER → session.setAttribute(loginUser, user) // ADMIN → session.setAttribute(admin, user) session.setAttribute(loginUser, user)两个 GET 接口分别校验不同的 session keyGetMapping(/api/auth/current) // 检查 session.getAttribute(loginUser) GetMapping(/api/auth/admin) // 检查 session.getAttribute(admin)前端逻辑所有模板index.html、category.html、detail.html在created()钩子中同时调用两个接口根据结果设置isAdmin/isLogin布尔值用v-if控制导航栏按钮的显隐。!-- 登录前显示 -- a v-if!isLogin href/login登录/a !-- 普通用户显示 -- a v-ifisLogin !isAdmin hrefjavascript:; onclickhandleLogout()退出登录/a !-- 管理员显示 -- a v-ifisAdmin hrefjavascript:; onclickhandleLogout()退出管理/a2文章审核工作流三态状态机描述用户发布文章默认status0待审核管理员可批准→1或驳回→2。首页和分类页仅展示status1的文章个人中心可按状态筛选。状态流转用户发布 → [待审核 0] → 管理员审核 → [已通过 1] (前台可见→ [已驳回 2] (仅作者可见)用户编辑 → 重置为 [待审核 0]后端逻辑AnimeArticleController.java发布接口PostMapping(/api/articles) public Result publish(RequestBody AnimeArticle article, HttpSession session) { SysUser user (SysUser) session.getAttribute(loginUser); article.setAuthorId(user.getId()); article.setStatus(0); // 默认待审核 articleService.insert(article); return Result.success(); }审核接口管理员专用PutMapping(/api/admin/articles/{id}/approve) // status1 PutMapping(/api/admin/articles/{id}/reject) // status2 驳回原因AnimeArticleService查询时过滤// 前台列表WHERE status 1 AND cat_id #{catId} // 个人中心WHERE author_id #{userId}支持 status 筛选参数 // 管理员查全部可按 status 过滤前端逻辑发布页publish.html选择分类 → 提交 POST → 提示发布成功等待审核管理后台admin/article-manage.html待审核列表 → 点击通过/驳回 → 调用 PUT 接口 → 刷新列表3四大分类 动态布局描述catId1/2/3/4分别代表漫圈动态、番剧评测、同好讨论、追番日历同一条路由/category/{catId}根据 catId 加载不同的布局和内容。后端逻辑PageController.java统一路由转发GetMapping(/category/{catId}) public String category(PathVariable Integer catId, Model model) { model.addAttribute(catId, catId); return category; }AnimeArticleController.java分类查询接口GetMapping(/api/articles) public Result listByCategory( RequestParam Integer catId, RequestParam(defaultValue 1) int page, RequestParam(defaultValue 10) int size) { return Result.success(articleService.pageByCategory(catId, page, size)); }前端逻辑category.html从 Thymeleaf 模型获取catId在 Vue data 中存储页面标题和 banner 根据 catId 动态切换。例如catId4时加载追番日历组件而非文章列表。4论坛热帖排行 通用详情页描述论坛帖子按回复数 TOP 8 展示在首页侧边栏详情页/detail?typeid一个模板承载文章/帖子/番剧三种内容。后端逻辑ForumPostController.java热帖接口GetMapping(/api/forum/rank) public Result rank() { return Result.success(forumPostService.top8ByReplyCount()); }MyBatis 注解实现Select(SELECT TOP 8 * FROM forum_post ORDER BY reply_count DESC) ListForumPost selectTop8();详情路由PageController.javaGetMapping(/detail) public String detail(RequestParam String type, RequestParam Long id, Model model) { model.addAttribute(type, type); // article | post | schedule model.addAttribute(id, id); return detail; }前端逻辑detail.html根据 URL 参数type决定调用/api/articles/{id}或/api/forum/{id}或/api/schedules/{id}渲染对应的内容结构。5MD5 加盐密码存储描述密码使用 MD5 固定盐值demo加密后存入数据库注册和登录均做加盐比对。后端实现util/MD5Util.javapublic static String md5(String input) { return DigestUtils.md5Hex(input demo); }注册逻辑UserController.javaPostMapping(/api/auth/register) public Result register(RequestBody SysUser user) { user.setPassword(MD5Util.md5(user.getPassword())); userService.register(user); return Result.success(); }登录逻辑PostMapping(/api/auth/login) public Result login(RequestBody SysUser loginUser, HttpSession session) { SysUser user userService.login(loginUser.getUsername(), MD5Util.md5(loginUser.getPassword())); if (user.getStatus() 0) return Result.error(账号已被禁用); // 存入 session... }6Session 拦截器 优雅退出描述/admin/**路由和/api/admin/**API 由LoginInterceptor保护未登录管理员自动重定向退出登录调用后端session.invalidate()。后端config/LoginInterceptor.javapublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { if (request.getSession().getAttribute(admin) ! null) return true; response.sendRedirect(/login); return false; }config/WebConfig.javaregistry.addInterceptor(loginInterceptor) .addPathPatterns(/admin/**, /api/admin/**);UserController.java退出接口PostMapping(/api/auth/logout) public Result logout(HttpSession session) { session.invalidate(); // 彻底销毁 session return Result.success(); }前端退出函数8 个模板统一function handleLogout() { fetch(/api/auth/logout, { method: POST, credentials: same-origin }) .then(function() { window.location.href /; }) .catch(function() { window.location.href /; }); }7管理员后台用户管理 内容审核描述管理员可查看用户列表支持关键词搜索、禁用/启用账号、重置密码审核文章通过/驳回。后端AdminController.java核心接口接口功能GET /api/admin/users分页 关键词搜索用户PUT /api/admin/users/{id}/status切换启用/禁用PUT /api/admin/users/{id}/reset-pwd重置为 MD5(123456)GET /api/admin/articles查看所有文章可按 status 筛选PUT /api/admin/articles/{id}/approve审核通过PUT /api/admin/articles/{id}/reject审核驳回附带原因前端逻辑admin/user-manage.htmlElement UI 表格 分页 搜索框行内操作按钮启用/禁用/重置密码admin/article-manage.html按状态 Tab 切换待审核/已通过/已驳回每个文章卡片上有通过/驳回按钮三、整体架构总结┌──────────────────────────────────────────────────┐│ 前端 (Thymeleaf) ││ index / category / detail / profile / publish... ││ Vue.js Element UI │└────────────────────┬─────────────────────────────┘│ HTTP / JSON┌────────────────────▼─────────────────────────────┐│ Controller 层 (6个控制器) ││ UserController | AnimeArticleController ││ ForumPostController | AnimeScheduleController ││ AdminController | PageController (路由) │└────────────────────┬─────────────────────────────┘│┌────────────────────▼─────────────────────────────┐│ Service 层 (4个Service) ││ AnimeArticleService | ForumPostService ││ AnimeScheduleService | SysUserService │└────────────────────┬─────────────────────────────┘│┌────────────────────▼─────────────────────────────┐│ Mapper 层 (纯注解 MyBatis) ││ Select / Insert / Update / Delete │└────────────────────┬─────────────────────────────┘│┌────────────────────▼─────────────────────────────┐│ SQL Server 数据库 (Anime 库, 1433端口) ││ sys_user | anime_article | forum_post ││ anime_schedule │└──────────────────────────────────────────────────┘关注点实现方式安全认证Session LoginInterceptor 拦截/admin/**密码加密MD5UtilMD5 盐值 demo统一响应Result.java(code message data)CSRF 防护fetch 请求使用credentials: same-origin前端通知Element UIthis.$message/this.$notify总结这是一个麻雀虽小五脏俱全的 Spring Boot 实战项目核心在于双角色认证体系文章三态审核工作流追番日历周视图一个模板承载多类内容的通用详情路由。