使用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的,是…...
OpenClaw配置优化:GLM-4.7-Flash模型响应速度提升
OpenClaw配置优化:GLM-4.7-Flash模型响应速度提升 1. 为什么需要优化GLM-4.7-Flash的响应速度 第一次用OpenClaw对接GLM-4.7-Flash模型时,我遇到了典型的"等待焦虑"——一个简单的文件整理任务竟然花了3分钟才返回结果。通过日志分析发现&am…...
计算机毕业设计springboot彝族民族文化宣传网站 基于SpringBoot的彝族非物质文化遗产数字化展示平台 SpringBoot框架下彝族传统风俗文化传播系统
计算机毕业设计springboot彝族民族文化宣传网站l36tn9 (配套有源码 程序 mysql数据库 论文)本套源码可以先看具体功能演示视频领取,文末有联xi 可分享 在当今数字化浪潮席卷全球的背景下,少数民族文化的保护与传承面临着前所未有…...
Cursor+Qt5.12.12开发环境配置全攻略:从插件安装到项目构建
CursorQt5.12.12开发环境配置全攻略:从插件安装到项目构建 对于刚接触Qt开发或从其他IDE迁移到Cursor的开发者来说,配置一个高效的开发环境是首要任务。Qt5.12.12作为长期支持版本(LTS),在稳定性和兼容性方面表现优异,而Cursor作为…...
WPF图片处理避坑指南:Image控件Stretch属性的4种模式详解(含效果对比图)
WPF图片处理避坑指南:Image控件Stretch属性的4种模式详解 刚接触WPF开发的工程师们,是否经常遇到图片显示变形、比例失调的困扰?Image控件的Stretch属性看似简单,却藏着不少设计哲学。今天我们就来彻底拆解这个影响图片显示效果的…...
Android开发避坑指南:registerForActivityResult找不到?可能是依赖版本惹的祸
Android开发实战:全面解析registerForActivityResult的正确使用与版本适配 在Android应用开发中,Activity之间的数据传递一直是核心功能之一。随着Jetpack组件的不断演进,Google推出了registerForActivityResult这一现代化API来替代传统的sta…...
LingBot-World:1秒生成16帧!开源世界模型新突破
LingBot-World:1秒生成16帧!开源世界模型新突破 【免费下载链接】lingbot-world-base-cam 项目地址: https://ai.gitcode.com/hf_mirrors/robbyant/lingbot-world-base-cam 导语:Robbyant团队发布开源世界模型LingBot-Worldÿ…...
计算机毕业设计springboot基于的医院预约挂号系统 智慧医疗服务平台的设计与实现——以在线挂号预约为核心功能 SpringBoot框架下的医疗机构门诊预约管理系统开发
计算机毕业设计springboot基于的医院预约挂号系统w6r0k82u (配套有源码 程序 mysql数据库 论文) 本套源码可以在文本联xi,先看具体系统功能演示视频领取,可分享源码参考。随着互联网技术的快速发展和普及,医疗领域也逐渐受到其影响…...
基于ChatGPT的文字冒险游戏开发实战:从对话引擎到状态管理
背景痛点:当传统文字游戏遇上AI叙事革命 文字冒险游戏(Interactive Fiction, IF)有着悠久的历史,从早期的《巨洞冒险》到后来的《80天》,其核心魅力在于通过文字构建一个充满想象力的世界,让玩家通过输入指…...
java 短信验证码接口开发面向接口编程实现
在Java企业级后端开发中,短信验证码是用户登录、注册、密码重置的核心身份验证方案,java短信验证码接口的规范化开发直接决定系统的扩展性与维护性。传统硬编码开发模式存在耦合度高、服务商切换困难等问题,本文基于面向接口编程思想…...
无限级数求和的Java实现与数学分析
本文旨在详细说明如何使用Java精确计算特定形式的无限级数 S -(2x)^2/2! (2x)^4/4! - (2x)^6/6! ... 在指定区间 [0.1, 1.5] 内部和。我们将深入分析等级数的数学性质,推导其闭合形式,并在此基础上纠正原始Java代码…...
