前言这几天学习了mongoDB的基础知识。因为之前没有用过，所以差点忘了一些命令。昨天也是零碎的写了一些代码，今天正式实现了一些功能。正文1.预览效果之前，这个页面一直是摆设，没有具体的效果。前天也实现了数据库的通信和注册。先来看看效果吧。目前数据库中没有数据。点击注册会提示注册成功。重复注册会提升用户名已经存在。可以看到数据库中多了一条数据，就是刚才注册的信息。二、实现勾选同意阅读注册按钮的交互1.这个比较简单。首先，设置一个状态来定义按钮的禁用属性。当勾选按钮的onChange事件被触发时，改变这个状态。请注意，此复选按钮不是onClick事件。这两个按钮之间的布尔值正好相反。因为checked状态为true，按钮的disabled属性为false，即未禁用。效果如下：3、要实现数据库与服务器的通信，这里需要了解一下express。详细介绍可以看我的mongDB文章。1.打开server.js文件。2.这是服务器和数据库需要的头文件。constexpress=require('快递');constapp=express();constmongoose=require("猫鼬");3、我们的注册信息一般是发送一个post请求，但是我们不能直接读取前端post请求数据中的body，所以还需要引入第三方包。constbodyParser=require('body-parser')然后使用app的use方法链接这个包的翻译方法。具体原理还没完全看懂，先这样用吧。app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:false}));4.现在一切就绪。首先mongoose需要与mongoDB链接。Mongoose是一个第三方包，可以让我们在node环境中调用mongoBD。两者是不同的东西，这个前提知识还是要知道的。调用上面的connect方法，因为我们的mongodb服务器挂在下面的端口号上，使用的数据库是user，所以可以按照下面的方法链接。mongoose.connect("mongodb://localhost:27017/user")5.现在数据库也连接上了，现在需要使用mongoose语法。首先，它需要一个Scheme实例来约束文档内容和数据库集合类型的内容。这一步是必须的，否则后面的根本做不了。这类似于Java不声明类，不能定义对象。当Schema被实例化时，它接受一个参数对象。由于我们只需要一个简单的用户名和用户名密码，所以我们简单地将其定义为一个字符串。这样，如果前端发送数据，后端就不可能在向数据库录入数据时录入错误的信息。（至少类型不能错~）下面的代码是链接数据库集合的方法。注意这里的userinfos名称需要和数据库中的名称完全一致，并且需要加上s，因为集合中不可能只有一个文档，别问为什么，是标准的。6.编写一个简单的界面，在前端页面接受用户的输入。response.setHeader设置为允许跨域，接受所有类型的跨域。跨域其实有几种，比如不同的端口号，不同的ip地址，不同的协议。这个setHeader可以专门制定来允许某种跨域，因为这里接受起来比较容易，全部直接接受。接下来我们来接收前端给我们的数据。这里我们直接定义了一个对象，对象的属性就是Schema中的约束。7.这里我们在userinfos集合上使用findOne方法。该方法可以接受三个参数。这里我们只需要两个。第一个参数接受一个配置对象，用于查找数据库中是否有前端消息。用户名。这里的逻辑是，如果找到了，那么第二个回调函数的data参数就会收到这个重复的值，然后if(data)会执行为true的语句。用于检查用户名是否重复，如果重复则返回重复的字符串。如果数据不存在，则表示该用户名在数据库中不存在。我们使用userinfos集合的create方法。该方法的第一个参数接受一个对象，即我们要输入数据库的数据。（这个mongoDB原生的collection.insert有点不一样）下图是原生的mongoDBshell命令行输入代码。就像理解一样。4.前端页面因为之前的博文有很详细的介绍，这里只是简单的介绍一下。这里使用MaterialUI的表单配合第三方包react-hook-form'完成对表单的约束和整体提交。从'react-hook-form'导入{useForm}；当不满足设定的规格时，将动态显示错误信息。如果成功入库，如果用户名重复则不测试。说说这几天的学习心得吧。好几天没更新的原因是学习进度有点慢，因为之前的文章都是在学习过程中改的，但是随着后面的功能逻辑越来越复杂，我也个人觉得边学边记录效率不是很高。也写过几篇零碎的博文，但是语言概括的不是很好。所以耽误了好几天，以后的文章都会更新，作为对之前知识的晚上复习。预览一下，目前已经完成的功能：实现了新增的功能，显示了一些逻辑判断。把这些内容整理一下语言再总结一下吧~
