声明：本文组件均为函数组件，仅作为记录，记录使用react全家桶开发后台管理平台，所以文章内容可能如下从自己的角度来写，比如省略了一些知识，跳过了一些重点。因此，本文不作为教程发布。请读者选择性观看1.前期工作准备1.git创建仓库2.create-react-appxxx3.连接仓库4.创建分支和切换分支2.创建项目的基本结构自己根据实际项目的大概基本配置自己完成src文件夹下的基础设施以后有需要可以添加。3、准备在首页登陆页面执行路由工作，BrowserRouter包入口文件。接下来是用户登录界面和后台管理页面路由的切换。首先，构建骨架。但是此时首页默认是没有组件的，因为我们进来的时候想要一个登录页面，所以需要添加一行代码。这里使用MaterialUI组件快速生成登录页面组件http://localhost:3000/login现在localhost:3000默认地址为4登录页面表单验证这里我们选择第三方组件库react-hook-form，一个极其优雅的表单提交验证工具，没有antd那么重，但是它的功能可以和materialinput类的组件完美契合！register和handleSubmit是这个hook的灵魂组件，其他部分可以根据结构赋值。register是一个可以接受两个参数的函数。第一个参数相当于输入框的名称值，是字符串类型。第二个参数是一个配置选项，是一个object类型的数据，用来约束输入框。值值的格式。register的作用是在输入类的组件中注入，然后返回输入框的name值和对应的值。需要注意的是，如果注入了register函数，TextField组件不能有额外的name属性，否则TextField的name属性将基于内联样式，我们将无法从中获取到对应的值寄存器的返回值！！这个钩子还有一个作用就是可以完美配合TextField的helperText动态提示用户是否输入了我们规定的条件值。从引入方法不难看出，errors方法是在formState——表单的状态中引入的。它不需要您监视onchange事件。该方法本身可以实时获取用户当前的输入，判断用户是否输入错误。errors通常与register("userName")中的第一个参数一起使用。errors.userName.message表示动态检测用户输入的值。如果输入过程中出现错误，将返回相应的错误信息。下面是错误提示类型的演示，这些是输入过程中动态显示的，不是我点击多次提交的效果。提交按钮只有在输入的值符合规范时才会生效。handleSubmit()接收用户定义的函数作为参数，并将表单的名称和值传递给函数的参数。注意括号里的提交是我自定义的方法。名称不必提交。让我们在控制台上打印它。userInfo，可以看到已经获取到了用户的输入信息。下面是submit发送一个ajax请求，模拟获取服务器信息，然后比较用户输入的值，判断是否允许用户登录。（服务器是expressshortanswer写的虚拟服务器）下面是虚拟服务器信息，只写了一个get方法，数据库还没有学过。以后打算学习mongoDB来模拟数据库，完成后续的用户注册功能。至此，检查用户密码账号是否正确的功能就完成了。
