使用Chakra-UI封装简书的登录页面组件(React)
要求:使用chakra ui和react 框架将简书的登录页面的表单封装成独立的可重用的组件
使用到的API:
注册API
请求方式:POST
请求地址:
https://conduit.productionready.io/api/users
请求数据:
{"user":{ "username": "Jacob2","email": "jake@jake.jake2","password": "jakejake"}
}返回结果:
{"user": {"email": "jake@jake.jake2","username": "Jacob2","bio": null,"image": "https://api.realworld.io/images/smiley-cyrus.jpeg","token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Impha2VAamFrZS5qYWtlMiIsInVzZXJuYW1lIjoiSmFjb2IyIiwiaWF0IjoxNjc3OTEwODIyLCJleHAiOjE2ODMwOTQ4MjJ9.KU0oMG73UxK3JcbN0wp3yzxgybFHsB3EtlECUhX3f4I"}
}登录API
请求方式:POST
请求地址:
https://conduit.productionready.io/api/users/login
请求数据:
{"user":{ "email": "jake@jake.jake2","password": "jakejake"}
}返回结果:
{"user": {"email": "jake@jake.jake2","username": "Jacob2","bio": null,"image": "https://api.realworld.io/images/smiley-cyrus.jpeg","token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Impha2VAamFrZS5qYWtlMiIsInVzZXJuYW1lIjoiSmFjb2IyIiwiaWF0IjoxNjc3OTExNjM2LCJleHAiOjE2ODMwOTU2MzZ9.neo74ygv6iD9EN1U1d1L6jAL4tCp-UrhAz8x-uvg0fQ"}
}使用create-react-app脚手架进行项目初始化
create-react-app jianshu-loginform-react
依赖安装及运行
cd jianshu-loginform-react
npm run start
开始拆分组件并进行封装组合


主要分为三个区域子组件:
表头区域(表单内容切换控件)
表单内容区域
表底区域(其他登录方式选项)
4. 项目代码
不想描述太多了,直接上代码:
仓库地址
应用地址
相关文章:
使用Chakra-UI封装简书的登录页面组件(React)
要求:使用chakra ui和react 框架将简书的登录页面的表单封装成独立的可重用的组件使用到的API:注册API请求方式:POST 请求地址:https://conduit.productionready.io/api/users请求数据: {"user":{ "username&quo…...
Three.js初试——基础概念(二)
前言 姊妹篇:Three.js初试——基础概念 介绍了 Three.js 的一些核心要素概念,这篇文章会讲一下它的关键要素概念。 之前我们了解到展示一个3D图像,必须要有场景、相机、渲染器这些核心要素,仅仅这些还不够,我们还需要…...
Qt音视频开发21-mpv内核万能属性机制
一、前言 搞过vlc内核后又顺带搞了搞mpv内核,mpv相比vlc,在文件数量、sdk开发便捷性方面绝对占优势的,单文件(可能是静态编译),不像vlc带了一堆插件,通过各种属性来set和get值,后面…...
C语言学生随机抽号演讲计分系统
6.学生随机抽号演讲计分系统(★★★★) 设计一款用于课程大作业检查或比赛计分的软件,基本功能: (1)设置本课程的学生总数 (2)根据本次参与的学生总数,随机抽取一个还未汇报演讲的学生的学号。 (3)每个学生汇报演讲完毕,输入该学生…...
Spring Boot 3.0系列【12】核心特性篇之任务调度
有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot版本3.0.3 源码地址:https://gitee.com/pearl-organization/study-spring-boot3 文章目录 前言Spring Scheduler1. 单线程任务2. 自动配置3. 多线程异步任务Quartz1. 简介2. 核心组件2.1 Job(任务)2.2 Trigger(…...
Java操作XML
Java操作XML XML语法 一个XML文件分为文档声明、元素、属性、注释、CDATA区、特殊字符、处理指令。 转义字符 对于一些单个字符,若想显示其原始样式,也可以使用转义的形式予以处理。 & > & < > < > > > " &g…...
女神节灯笼祝福【HTML+CSS】
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
CUDA并行计算基础知识
1、相关缩写术语 显卡:GPU 显卡驱动:驱动软件 GPU架构: 硬件的设计方式,例如是否有L1 or L2缓存 CUDA: 一种编程语言像C++, Python等,只不过它是专门用来操控GPU的 cudnn: 一个专门为深度学习计算设计的软件库,里面提供了很多专门的计算函数 CUDAToolkit:所谓的装cuda首先…...
88. 合并两个有序数组
给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数目。请你 合并 nums2 到 nums1 中,使合并后的数组同样按 非递减顺序 排列。注意:最终,合并后数组不应…...
卢益贵(码客):软件开发团队的管理要素
卢益贵(码客):软件开发团队的管理要素 最好的范例是领导 无论个人素养、技术水平和代码风格,管理者应该起到典范的作用。 最高的权力是威望 管理者的威望比手中权力更有信服力。在处处倚仗权力施压的团队中,高压必有…...
中小企业的TO B蓝海,如何「掘金」?
中国中小企业的数字化转型土壤,如今究竟成长到了哪一步?对一众数字服务厂商而言,在另一个付费群体出现的当下,产品形态是否应该进行微调? 作者|皮爷 出品|产业家 中国市场存在一个黄金定律:二八法则。 这…...
C++ 算法主题系列之集结0-1背包问题的所有求解方案
1. 前言 背包问题是类型问题,通过对这一类型问题的理解和掌握,从而可以归纳出求解此类问题的思路和模板。 背包问题的分类有: 0-1背包问题,也称为不可分割背包问题。无限背包问题。判定性背包问题.带附属关系的背包问题。双背包…...
【Vue】Vue常见的6种指令
Vue的6种指令-前言指令(Directives)是vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下6 大类① 内容渲染指令 ② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令 ⑥ …...
计算机科学与技术(嵌入式)四年学习资料_文件目录树
说明: 资料内容主要包括:计嵌专业2019级大学四年主要科目的各种电子资料,有电子实验报告、课程设计报告、课程设计项目、整理复习笔记、电子书、ppt、练习题、期末试卷、部分课程软件资源、科创项目,职业生涯规划书,大…...
【java】Java 继承
文章目录继承的概念生活中的继承:类的继承格式为什么需要继承公共父类:继承类型继承的特性继承关键字extends关键字implements关键字super 与 this 关键字final 关键字构造器继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建…...
自媒体账号数据分析从何入手?
账号的数据可以直接反应这个账号的好坏,数据越高收益就会越好,数据越差收益自然高不了。 新手要从哪些方面入手见效更快呢?今天大周就来把自己的经验分享给粉丝们! 1、账号定位 (1)账号所创作的领域 &a…...
Clickhouse新版本JSON字段数据写入方式
Clickhouse新版本JSON字段数据写入方式 在Clickhouse版本22.3.1版本以上,提供了针对JSON格式数据的新的数据类型:JSON,从而实现了存储此类数据由原先的结构化表结构,更新为现在的半结构化表存储。对于新增字段,某些同…...
HNU-电路与电子学-实验2
实验二 模型机组合部件的实现(一) 班级 计XXXXX 姓名 wolf 学号 2021080XXXXX 一、实验目的 1.了解简易模型机的内部结构和工作原理。 2.熟悉译码器、运算器的工作原理。 3.分析模型机的功…...
从0开始学python -49
Python MySQL - mysql-connector 驱动 -2 插入数据 插入数据使用 “INSERT INTO” 语句: demo_mysql_test.py: 向 sites 表插入一条记录。 import mysql.connectormydb mysql.connector.connect(host"localhost",user"root",passwd"…...
Spring MVC 详解(连接、获取参数、返回数据)
在之前我们先简单那谈谈Spring、SpringBoot以及Spring MVC框架之间有什么关系?首先Spring是一个框架,SpringBoot脚手架是为了快速开发Spring框架而创造的技术。可以理解为SpringBoot又在Spring上面包了一层壳子,是基于Spring的,是…...
SpeedyStepper Forked:嵌入式步进电机硬实时控制库解析
1. SpeedyStepper Forked:面向嵌入式实时控制的高性能步进电机驱动库深度解析1.1 库定位与工程价值SpeedyStepper Forked 是一个专为嵌入式平台(尤其是基于Arduino生态的MCU)设计的轻量级、高精度步进电机运动控制库。其核心目标并非提供图形…...
【2026最新】AI产品经理学习路径全解析:顺序错了,努力全白费!
导语 为什么90%的人学不好AI产品经理? 在2025年这个AI爆发的时代,AI产品经理已成为最炙手可热的职业之一。然而,许多“转行者”却在学习过程中频频踩坑: 学了3个月Python却连模型调参都不会?看懂了Prompt Engineeri…...
语义分割实战:如何用Python快速计算mIoU和mAcc(附完整代码)
语义分割实战:Python高效计算mIoU与mAcc的工程化实现 在计算机视觉领域,语义分割模型的性能评估离不开mIoU(平均交并比)和mAcc(平均准确率)这两个核心指标。许多教程停留在理论公式层面,而实际项…...
系统架构设计师知识点21-40
21.ABSD方法的三个基础。①功能分解,使用已有的基于模块的内聚与耦合技术②选择架构风格实现质量和业务需求③软件模板使用22.ABSD方法是一个自顶向下,递归细化的方法,软件系统的体系结构通过该方法得到细化,直到能产生软件构件和…...
5分钟搞定ollama+qwen2.5模型配置:从下载到对话测试全流程指南
5分钟极速部署ollama与qwen2.5:零基础打造本地AI对话系统 在AI技术平民化的今天,拥有一个本地运行的对话模型不再是专业开发者的专利。本文将带您用最短时间完成ollama服务部署与qwen2.5模型配置,无需复杂环境搭建,从零开始构建属…...
Framer.js测试策略终极指南:构建可靠UI原型的完整测试方案
Framer.js测试策略终极指南:构建可靠UI原型的完整测试方案 【免费下载链接】Framer Framer - Design Everything 项目地址: https://gitcode.com/gh_mirrors/fr/Framer Framer是一款强大的UI设计和原型工具,能够帮助设计师和开发者快速创建交互丰…...
League-Toolkit英雄联盟工具集启动故障解决方案
League-Toolkit英雄联盟工具集启动故障解决方案 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit作为一款基于LCU A…...
3个核心革新让英雄联盟玩家彻底告别繁琐游戏操作
3个核心革新让英雄联盟玩家彻底告别繁琐游戏操作 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的英雄联盟对局中&#…...
OpenClaw定时任务管理:Qwen3.5-4B-Claude模型驱动智能提醒系统
OpenClaw定时任务管理:Qwen3.5-4B-Claude模型驱动智能提醒系统 1. 为什么需要AI驱动的定时任务系统 上个月我连续错过了三个重要会议,直到同事发消息询问"人到哪了"才猛然惊醒。这种尴尬促使我开始寻找解决方案——传统日历提醒太被动&#…...
社交媒体机器人检测的终极对决:TwiBot-22基准测试深度解析
社交媒体机器人检测的终极对决:TwiBot-22基准测试深度解析 【免费下载链接】TwiBot-22 项目地址: https://gitcode.com/gh_mirrors/tw/TwiBot-22 在数字时代,社交媒体上的机器人账号已成为信息传播的重要参与者。它们既能推动正面信息传播&#…...
