前端(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月前
|
人工智能 安全 搜索推荐
OpenClaw“小龙虾”进阶保姆级攻略!阿里云/本地部署+百炼API配置+常见Skills安装方法
本文详解OpenClaw(“小龙虾”)Skills安装与安全配置:针对新手“能用不好用”痛点,系统梳理4种安装方式(含ClawHub一键安装)、阿里云极速部署全流程、百炼API配置及8大高频实用Skills(如Tavily搜索、Office自动化等),强调安全优先原则,所有命令可直接执行,助你1-2小时打造真正能做事的AI管家。
3865 16
|
7月前
|
算法 搜索推荐 JavaScript
基于python智能推荐算法的全屋定制系统
本研究聚焦基于智能推荐算法的全屋定制平台网站设计,旨在解决消费者在个性化定制中面临的选择难题。通过整合Django、Vue、Python与MySQL等技术,构建集家装设计、材料推荐、家具搭配于一体的一站式智能服务平台,提升用户体验与行业数字化水平。
|
8月前
|
数据采集 JavaScript 前端开发
“所见即所爬”:使用Pyppeteer无头浏览器抓取动态壁纸
“所见即所爬”:使用Pyppeteer无头浏览器抓取动态壁纸
|
4月前
|
机器学习/深度学习 算法 安全
基于yolov8深度学习的农作物识别检测系统
本研究基于YOLOv8深度学习技术,构建农作物识别检测系统,旨在实现对作物种类、生长状态及病虫害的快速精准识别。通过Python与先进算法结合,提升农业智能化水平,助力精准施肥、减少农药使用,推动农业可持续发展,具有重要应用价值。
|
机器学习/深度学习 编解码 算法框架/工具
使用Python实现深度学习模型:图像超分辨率与去噪
【7月更文挑战第17天】 使用Python实现深度学习模型:图像超分辨率与去噪
584 4
|
机器学习/深度学习 编解码 监控
利用Python实现监控视频的超分辨率提升
利用Python实现监控视频的超分辨率提升
913 2
|
机器学习/深度学习 TensorFlow API
【计算机视觉】Keras API和Tensorflow API的讲解(超详细必看)
【计算机视觉】Keras API和Tensorflow API的讲解(超详细必看)
357 1
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
254 0