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

完美~~~

相关文章
|
5月前
|
数据采集 JavaScript 前端开发
“所见即所爬”:使用Pyppeteer无头浏览器抓取动态壁纸
“所见即所爬”:使用Pyppeteer无头浏览器抓取动态壁纸
|
1月前
|
机器学习/深度学习 算法 安全
基于yolov8深度学习的农作物识别检测系统
本研究基于YOLOv8深度学习技术,构建农作物识别检测系统,旨在实现对作物种类、生长状态及病虫害的快速精准识别。通过Python与先进算法结合,提升农业智能化水平,助力精准施肥、减少农药使用,推动农业可持续发展,具有重要应用价值。
|
数据采集 存储 JavaScript
如何利用 Puppeteer 的 Evaluate 函数操作网页数据
本文介绍如何使用Puppeteer结合代理IP技术,高效采集界面新闻等网站的文章标题和摘要。通过`evaluate`函数操作DOM,配合代理IP实现稳定的数据抓取。
400 0
|
机器学习/深度学习 编解码 算法框架/工具
使用Python实现深度学习模型:图像超分辨率与去噪
【7月更文挑战第17天】 使用Python实现深度学习模型:图像超分辨率与去噪
526 4
|
机器学习/深度学习 TensorFlow API
【计算机视觉】Keras API和Tensorflow API的讲解(超详细必看)
【计算机视觉】Keras API和Tensorflow API的讲解(超详细必看)
321 1
|
传感器 存储 机器学习/深度学习
Python树莓派开发
Python树莓派开发
1018 0
Python树莓派开发
|
数据采集 监控 数据可视化
分享57个Python源码,总有一款适合您
分享57个Python源码,总有一款适合您
1649 0
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
215 0
|
编解码 监控 网络安全
python实战讲解之强版监控系统(上)
python实战讲解之强版监控系统
|
人工智能 调度 开发工具
基于Python开发的智能停车场车牌识别计费系统(源码+可执行程序+程序配置说明书+程序使用说明书)
基于Python开发的智能停车场车牌识别计费系统(源码+可执行程序+程序配置说明书+程序使用说明书)
620 0