前端(Cursor)-登录

简介: 根据登录页面原型和接口文档,完成员工登录功能开发。实现POST请求调用/login接口,处理用户名密码验证,解析JWT令牌并存储,后续请求携带token头。登录失败提示错误信息,成功后跳转至系统首页。支持退出登录功能,清除token并重定向到登录页。

编写提示语
请根据截图中的登录页面的原型 和 提供的接口文档,帮我完成员工登录功能的页面制作。

  1. 登录接口的基本信息如下:
    1.1 请求路径: /login
    1.2 请求方式: POST
    1.3 接口描述: 该接口用于员工登录智学云帆-教学管理系统,登录完毕后,系统下发JWT令牌。
    1.4 请求参数样例:

      {
          "username": "songjiang",
          "password": "123456"
      }
    

    1.5 响应数据样例:

      1.5.1 登录成功
      {
          "code": 1,
          "msg": "success",
          "data": {
              "id": 2,
              "username": "songjiang",
              "name": "宋江",
              "token": "eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MiwidXNlcm5hbWUiOiJzb25namlhbmciLCJleHAiOjE2OTg3MDE3NjJ9.w06EkRXTep6SrvMns3w5RKe79nxauDe7fdMhBLK-MKY"
          }
      }
    
      1.5.2 登录失败
          {
             "code": 0,
             "msg": "用户名或密码错误",
             "data": null
          }
    

    1.6 备注说明: 用户登录成功后,系统会自动下发JWT令牌,然后在后续的每次请求中,都需要在请求头header中携带到服务端,请求头的名称为 token ,值为 登录时下发的JWT令牌。 如果服务端检测到用户未登录,则直接响应 401 状态码,如果服务端响应的状态码为 401,前端需要跳转到登录页面。

  2. 请根据上述页面原型及接口文档的描述,帮我完成登录页面的开发。
    页面原型图如下:

点击submit

代码运行测试
首先,我们将之前注释掉的后端代码:放开+重启

然后通过前端页面访问:https://rwcezvlxrwzm.sealoshzh.site/login
如果你的代码存在一些bug,优化一下即可。比如我的退出登录没反应,我就输入:
退出登录按钮没反应

完美~~~

相关文章
|
2天前
|
存储 消息中间件 开发框架
应用架构图
技术架构是将业务需求转化为技术实现的关键过程,涵盖分层设计、技术选型与关键技术整合。基于应用架构,构建包括表现层、业务层、数据层和基础层的单体或分布式架构,明确系统内外调用关系与边界,支撑业务高效落地。(238字)
|
1天前
|
运维 Devops 开发工具
生产环境缺陷管理
在大型团队中,多分支开发易导致bug修复遗漏,引发严重生产事故。我们基于go-git打造通用化git-poison工具,实现分布式、自动化bug追溯与发布卡点,无需依赖人工沟通,精准阻塞“带毒”提交,有效避免漏修、漏发问题,显著降低协同成本与人为失误风险。
|
1天前
|
开发者
业务架构图
业务架构图是将现实业务抽象化表达的工具,通过分层、分模块、分功能梳理业务关系。它帮助客户直观理解业务,助力开发者全局掌握系统结构,提升协作效率与系统可扩展性。
|
2天前
|
存储 缓存 运维
一场FullGC故障排查
本文记录了一次JDOS容器CPU告警的排查过程,通过分析发现实际为JVM Full GC引发CPU占用升高。结合泰山与SGM监控,定位到堆内存中大对象导致老年代频繁占满。经JPofiler分析,确认问题源于将Excel数据以List<Map<String, String>>形式加载至内存,造成严重内存膨胀。最终提出优化方案:避免大对象驻留JVM或改用高效存储结构,降低GC压力。
|
2天前
|
JavaScript 前端开发 算法
React框架
React是一个用于构建用户界面的JavaScript库,专注于视图层,采用虚拟DOM和Diff算法实现高效渲染。支持组件化开发、服务端渲染、状态管理,易于测试与集成,通过生命周期、setState机制及高阶组件等特性提升开发效率与性能。
|
1天前
|
存储 安全 开发工具
Git 的基础知识
在软件开发中,版本控制如Git至关重要,它支持代码历史追踪、团队协作、分支实验、错误回滚与代码审查。通过提供变更审计轨迹、备份恢复及功能隔离,提升开发效率与代码质量,助力团队高效协同,保障项目稳定演进。
|
1天前
|
NoSQL Linux Shell
MongoDB单机部署
本文介绍MongoDB在Windows与Linux系统的安装启动方法,包括下载、解压、配置数据目录及命令行或配置文件方式启动服务。支持设置环境变量、自定义端口与日志路径,并提供shell连接、图形化工具Compass使用指南,以及Linux下防火墙配置与服务关闭操作,确保单机部署稳定运行。
|
2天前
|
存储 JSON NoSQL
MongoDB常用命令
本文介绍MongoDB数据库操作,以文章评论系统为例,涵盖数据库与集合的创建、删除,文档的增删改查、批量操作、投影查询、分页排序及统计功能,详细说明数据插入、更新条件控制、分页查询等常用操作方法。
|
1天前
|
缓存 Java 数据库连接
mybatis常见配置
本文介绍MyBatis核心配置机制,涵盖属性加载优先级(方法参数 > resource/url > properties内嵌)、常用配置项如缓存、延迟加载、执行器类型等,并详解多环境配置方式及事务管理(JDBC与MANAGED)。适用于需灵活管理数据源与事务的开发者。
|
1天前
|
XML Java 数据格式
springboot@Configuration
`@Configuration` 注解用于标记配置类,相当于 XML 配置文件,配合 `@Bean` 注解注册 Bean 到 Spring 容器。通过 `AnnotationConfigApplicationContext` 可加载配置类并启动 IOC 容器,实现组件的自动管理与注入。