基于React.js的后台管理系统开发全过程(八)

本文涉及的产品
云数据库 MongoDB,独享型 2核8GB
推荐场景:
构建全方位客户视图
简介: 基于React.js的后台管理系统开发全过程(八)

前言


最近几天补习了一下mongoDB的基础知识,之前因为没用到,所以一些命令都差不多忘了。昨天也是零零碎碎的写了一些代码,今天才正式实现了一些功能。

正文


一.预览效果


image.png

之前这个页面一直是个摆设,没有怎么具体实现效果,前天也是实现了数据库的通信和注册。先看效果。

image.png

目前数据库里是没有数据的。

image.png

点击注册会提示注册成功。

image.png

重复注册会提升用户名已经存在。

image.png

image.png

可以看到数据库内已经多了一条数据,也就是刚刚注册的那个信息。

二.实现勾选同意阅读和注册按钮的互动


1.这个比较简单,首先设置一个状态,来定义按钮的disabled属性。

image.png

image.png

当勾选按钮的onChange事件被触发的时候,改变这个状态。

image.png

注意,这个勾选按钮并不是onClick事件。这两个按钮之间的布尔值正好是相反的。因为勾选状态是true,那么按钮的disabled属性就是false,也就是不禁用

效果如下:

image.png

image.png

三.实现数据库和服务器之间的通讯


这里需要我们有一点点express的知识,可以去看我mongDB的文章,里面有详细的介绍。

1.打开server.js文件。

image.png

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,所以按照下面的方法即可链接。

image.png

image.png

mongoose.connect("mongodb://localhost:27017/user")

5.现在数据库也链接好了,现在需要使用mongoose的语法,首先它需要一个Scheme的实例,来约束数据库集合的文档内容和内容的类型。这个步骤是必须的,否则下面根本无法进行,这个和Java的不声明类,就无法定义对象类似。

image.png

Schema在实例化的时候,接受一个参数对象,由于我们只需要简单的一个用户名和用户名密码,故只简单定义为字符串即可。这样,如果前端发来数据的,后端在向数据库录入数据的时候,不可能会录入错误的信息。(至少类型不可能是错误的~)

接下来的代码就是链接数据库集合的方法。

image.png

注意这里userinfos名称需要和数据库里的名称一摸一样,并且需要加s,因为集合里的文档不可能只有一条,不要问为什么,规范。

image.png

6.编写一个简单的接口来接受前端页面用户的输入。

image.png

response.setHeader是设置了允许跨域,所有类型的跨域都接受,跨域其实也分好几种跨域,比如端口号不同,ip地址不同,协议不同,这个setHeader都可以专门制定是否允许某一种跨域,这里因为比较省事,直接全部接受。

接下来我们接收一下前端给我们的数据。

image.png

这里我们直接定义一个对象,对象的属性就是Schema里的约束。

7.这里使用userinfos集合身上的findOne方法,这个方法可以接受三个参数,这里我们只需要两个就够用了,第一个参数接受一个配置对象,用来查找数据库里是否有前端发来的userName。这里的逻辑是,如果查找到了,那么第二个回调函数的data参数就会接收到这个重复值,那么if(data)就会执行为true的语句。用来核实用户名是否重复,重复的话返回字符串重复

image.png

如果data不存在,那么就可以说明数据库内不存在这个用户名,我们使用userinfos集合的create方法,这个方法第一个参数接受一个对象,即我们准备录入数据库的那个数据。(这个mongoDB原生的collection.insert有点区别)

image.png

下面这个图是原生mongoDB 的shell命令行输入代码。作为了解即可。

image.png

四.前端页面


image.png

因为之前的博文有很详细的介绍,这里只简单概述一下,这里使用的是Material UIform搭配使用react-hook-form'这个第三方包,来完成对表单的约束和整体提交。

import { useForm } from 'react-hook-form';

当不符合设定的规范时,就会动态的显示错误信息。

image.png

image.png

image.png

成功录入数据库,用户名重复就不测试了。

image.png

谈谈这几天的学习感受吧,好几天没更新的原因就是学习的进度有点慢了,因为之前的文章都是边学习的过程中变记录,但是随着后面的功能逻辑都越来越复杂,个人感觉边学习边记录的方式效率不是很高,自己也写了几篇零碎的博文,但是语言总结的不是很好。故拖更了好几天,以后的文章都作为晚上复习之前的知识来更新吧

预告一下,目前已经完成的功能:


实现了添加功能,和一些显示的逻辑判断。

image.png

image.png

image.png

image.png

这些内容后续待组织好语言再来总结吧~






相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。   相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
7月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
7月前
|
存储 移动开发 前端开发
【第35期】一文学会React-Router开发权限
【第35期】一文学会React-Router开发权限
141 0
|
前端开发 数据库 Docker
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
一款可以直接使用的招聘网站, react django开发招聘网站,docker 部署
89 0
|
3月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
7月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
7月前
|
前端开发 JavaScript
你可能需要的React开发小技巧!(下)
你可能需要的React开发小技巧!(下)
|
7月前
|
前端开发 API
你可能需要的React开发小技巧!(上)
你可能需要的React开发小技巧!(上)
|
7月前
|
前端开发 JavaScript
React vscode 开发插件与代码补全提示
React vscode 开发插件与代码补全提示
277 0
|
存储 前端开发 JavaScript
react typescript 开发
react typescript 开发
65 0
|
前端开发 JavaScript 容器
react组件化开发详解
react组件化开发详解
127 0