共计 2191 个字符，预计需要花费 6 分钟才能阅读完成。
前言
最近几天补习了一下 mongoDB 的基础知识，之前因为没用到，所以一些命令都差不多忘了。昨天也是零零碎碎的写了一些代码，明天才正式实现了一些性能。
注释
一. 预览成果
之前这个页面始终是个陈设，没有怎么具体实现成果，前天也是实现了数据库的通信和注册。先看成果。
目前数据库里是没有数据的。
点击注册会提醒注册胜利。
反复注册会晋升用户名曾经存在。
能够看到数据库内曾经多了一条数据，也就是刚刚注册的那个信息。
二. 实现勾选批准浏览和注册按钮的互动
1. 这个比较简单，首先设置一个状态，来定义按钮的 disabled 属性。
当勾选按钮的 onChange 事件被触发的时候，扭转这个状态。
留神，这个勾选按钮并不是 onClick 事件。这两个按钮之间的布尔值正好是相同的。因为勾选状态是 true，那么按钮的 disabled 属性就是false，也就是 不禁用。
成果如下：
三. 实现数据库和服务器之间的通信
这里须要咱们有一点点 express 的常识，能够去看我 mongDB 的文章，外面有具体的介绍。
1. 关上 server.js 文件。
2. 这是服务器和数据库所必须的头文件。
const express = require('express');
const app = express();
const mongoose = require("mongoose");3. 咱们注册信息个别是发送 post 申请，然而咱们无奈间接读取前台 post 申请里的 body 数据，所以咱们还须要引入一个第三方包。
const bodyParser = 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 办法，这个办法能够承受三个参数，这里咱们只须要两个就够用了，第一个参数承受一个配置对象，用来查找数据库里是否有前端发来的 userName。这里的逻辑是，如果查找到了，那么第二个回调函数的data 参数就会接管到这个反复值，那么 if(data) 就会执行为 true 的语句。用来核实用户名是否反复，反复的话返回字符串 反复。
如果 data 不存在，那么就能够阐明数据库内不存在这个用户名，咱们应用 userinfos 汇合的 create 办法，这个办法第一个参数承受一个对象，即咱们筹备录入数据库的那个数据。（这个 mongoDB 原生的 collection.insert 有点区别）
上面这个图是原生mongoDB 的 shell 命令行输出代码。作为理解即可。
四. 前端页面
因为之前的博文有很具体的介绍，这里只简略概述一下，这里应用的是 Material UI 的form搭配应用 react-hook-form' 这个第三方包，来实现对表单的束缚和整体提交。
import {useForm} from 'react-hook-form';
当不合乎设定的标准时，就会动静的显示错误信息。
胜利录入数据库，用户名反复就不测试了。
谈谈这几天的学习感触吧，好几天没更新的起因就是学习的进度有点慢了，因为之前的文章都是边学习的过程中变记录，然而随着前面的性能逻辑都越来越简单，个人感觉边学习边记录的形式效率不是很高，本人也写了几篇系统的博文，然而语言总结的不是很好。故拖更了好几天，当前的文章都作为早晨温习之前的常识来更新吧
预报一下，目前曾经实现的性能：
实现了增加性能，和一些显示的逻辑判断。
这些内容后续待组织好语言再来总结吧~
