前端(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,优化一下即可。比如我的退出登录没反应,我就输入:
退出登录按钮没反应

完美~~~

相关文章
|
4天前
|
Java API
用链表实现队列/栈
本文介绍如何用链表实现栈和队列,利用双链表头尾操作均为O(1)的特性,通过调用LinkedList API高效实现。栈可选头部或尾部作栈顶,队列同理,只需调整增删位置。文末引出数组实现队列的性能问题,启发优化思考。
|
4天前
|
存储 API 索引
队列/栈基本原理 ❗前置知识
本文介绍队列和栈两种“操作受限”的数据结构:队列遵循先进先出(FIFO),只能队尾入、队头出;栈遵循先进后出(FILO),仅在栈顶进行增删操作。二者底层多由数组或链表实现,核心API包括push、pop、peek和size,是后续复杂数据结构的基础。
|
3天前
|
存储 JSON NoSQL
MongoDB常用命令
本文介绍MongoDB数据库操作,以文章评论系统为例,涵盖数据库与集合的创建、删除,文档的增删改查、批量操作、投影查询、分页排序及统计功能,详细说明数据插入、更新条件控制、分页查询等常用操作方法。
|
3天前
|
存储 安全 开发工具
Git 的基础知识
在软件开发中,版本控制如Git至关重要,它支持代码历史追踪、团队协作、分支实验、错误回滚与代码审查。通过提供变更审计轨迹、备份恢复及功能隔离,提升开发效率与代码质量,助力团队高效协同,保障项目稳定演进。
|
4天前
|
JavaScript 前端开发 算法
React框架
React是一个用于构建用户界面的JavaScript库,专注于视图层,采用虚拟DOM和Diff算法实现高效渲染。支持组件化开发、服务端渲染、状态管理,易于测试与集成,通过生命周期、setState机制及高阶组件等特性提升开发效率与性能。
|
4天前
|
存储 缓存 运维
一场FullGC故障排查
本文记录了一次JDOS容器CPU告警的排查过程,通过分析发现实际为JVM Full GC引发CPU占用升高。结合泰山与SGM监控,定位到堆内存中大对象导致老年代频繁占满。经JPofiler分析,确认问题源于将Excel数据以List<Map<String, String>>形式加载至内存,造成严重内存膨胀。最终提出优化方案:避免大对象驻留JVM或改用高效存储结构,降低GC压力。
|
3天前
|
存储 缓存 算法
学习数据结构和算法的框架思维
本文系统总结数据结构与算法本质:所有数据结构皆源于数组和链表,核心操作为遍历与访问;算法本质是穷举,关键在于无遗漏、无冗余。文章提炼出通用框架,帮助读者建立计算机思维,掌握高效解题方法,适合初学者建立全局观,也适合进阶者温故知新。
|
3天前
|
缓存 网络协议 算法
核心原理:能否画张图解释下 RPC 的通信流程?
RPC(远程过程调用)是一种实现分布式系统间通信的技术,它让调用远程服务像调用本地方法一样简单。本文深入浅出地讲解了RPC的定义、核心目标、通信流程及在微服务架构中的关键作用,帮助开发者理解其底层原理,掌握如何通过动态代理、序列化、协议设计等机制屏蔽网络复杂性,提升开发效率与系统可维护性。
|
3天前
|
消息中间件 Kubernetes 网络协议
别老想着怎么用好 RPC 框架,你得多花时间琢磨原理
2011年加入京东,亲历技术演进,现任技术架构部首席架构师。主导微服务、消息中间件等核心系统研发,深耕分布式架构。课程涵盖RPC基础、进阶与高级实战,带你掌握网络通信核心,构建高效可靠分布式系统。(238字)
|
3天前
|
算法 Java 索引
双指针技巧秒杀七道数组题目
本文介绍双指针技巧在数组和链表中的应用,重点解析快慢指针如何实现原地修改。通过LeetCode经典题如删除有序数组/链表重复项,展示如何用慢指针记录结果、快指针遍历数据,高效完成去重,时间复杂度O(N),避免频繁数据搬移。