本学期通过课程实训，我完成了 EMS 设备能耗统计系统的登录模块开发，项目采用 SpringBoot 后端搭配 Vue 前端的前后端分离架构，实现账号密码校验、MD5 密码加密、JWT 令牌签发与验证全套登录逻辑，在实操过程中收获了大量编程落地经验，下面分享我的学习与开发心得。

//登录接口核心代码
@RequestMapping("/login")
public R< String> login(@RequestBody Logininfo logininfo){
    User loginUser = userService.selectUserByName(logininfo.getUsername());
    if(loginUser==null){
        return R.fail("用户名错误");
    }
    //MD5密码加密比对
    if(Md5Util.md5(logininfo.getPassword()).equals(loginUser.getPassword())){
        Map<String,Object> Claims = new HashMap<>();
        Claims.put("id",loginUser.getUserId());
        Claims.put("username",loginUser.getUsername());
        String token = JWTUtil.genToken(Claims);
        return R.ok(token);
    }
    return R.fail("密码错误");
}

    后端项目基于 SpringBoot 搭建，遵循 MVC 分层开发规范，项目目录划分为 mapper 持久层、service 业务层、web 控制层与 utils 工具包。其中 utils 包封装了 MD5 加密工具与 JWT 生成工具，解决明文密码存储的安全隐患。在登录控制器 LoginController 中，登录接口接收前端提交的账号密码，后端使用 MD5 算法对前端传入密码加密后，和 MySQL 数据库中加密存储的用户密码做比对；校验成功后，将用户 ID、用户名封装为载荷，调用 JWT 工具生成身份令牌并返回前端，密码不一致则向前端返回错误提示。除此之外我额外开发了 validateToken 令牌校验接口，用来校验前端携带 token 的合法性，为后续接口权限拦截做铺垫，用户信息依靠 User 实体映射 MySQL 数据表完成持久化存储。开发初期我曾出现参数接收异常、MD5 加密前后密文不匹配的 bug，经过逐行断点调试，理清了前端传参格式与加密编码规则，深刻体会到分层架构对代码纠错、后期维护的重要作用。

    前端使用 Vue 框架开发登录页面，核心文件为 AuthLogin.vue，页面拆分登录、注册两个表单视图，依靠状态变量切换页面显示。表单使用 v-model 完成账号密码双向数据绑定，点击登录按钮触发 onLogin 请求函数，接口请求期间登录按钮添加 loading 禁用状态，避免用户重复提交表单；后端返回报错信息时，页面通过 errorMsg 变量实时展示提示文案。前端借助 Axios 网络请求库对接后端登录接口，拿到后端返回的 JWT 令牌后进行本地存储，用于后续页面访问鉴权。在页面调试阶段，我踩过跨域报错、表单双向绑定失效的坑，通过配置后端跨域注解、修正 v-model 绑定字段顺利解决，熟练掌握了 Vue 表单交互的基础逻辑。

项目整体联调测试阶段，我分场景验证功能：输入错误密码时前端接收后端错误码并弹窗提示密码错误；填写正确账号密码，后端校验通过下发 token，前端登录成功；单独调用令牌校验接口，有效 token 返回成功标识、无效 token 返回报错，整套登录流程闭环可用。这套登录模块可以直接落地到企业能耗管理项目中，作为运维人员进入系统的门户。

  经过本次项目实操，我跳出了课本理论，把 SpringBoot 接口开发、Vue 前端交互、非对称加密、JWT 无状态鉴权等知识点落地成可运行项目，明白了前后端分离项目的协作逻辑，后续我会继续完善设备能耗数据查询模块，不断积累项目实战经验。

项目联调时曾出现 JWT 令牌过期配置不合理的问题，一开始没有设置令牌有效期，后期学习后可结合 Redis 缓存 token 实现过期自动失效，这也是后续项目优化方向，通过实操我意识到安全配置在登录模块里不可或缺。