logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

准备用户登录表单并请求登录

在登录页面上,添加一个表单组件all slog in,其中包含namepassword两个状态,初始值为空字符串。创建一个log in箭头函数方法,用于处理登录请求,通过useState hook设定状态修改器setNamesetPassword。请求成功后,会获得后端服务提供的用户登录接口的响应数据。登录表单包含输入用户名和密码的字段,通过绑定onSubmitonChange事件来处理用户输入,并阻止默认提交行为。在样式表app.css中定义文本和密码输入框的样式。用户输入用户名(如“李白”)和密码(“123123”)后,点击登录按钮,如果服务器处理成功,响应数据包含用户的ID和令牌。前端在后续请求服务接口时需在头部包含令牌,以便服务端识别用户身份。