React之简易笔记本

此文使用React实现简易笔记本，包括环境配置，前台界面和后台应用等内容。其中后台应用主要功能是数据库操作，前台应用的主要功能是显示，增加，删除，更新数据 ，效果如下所示：

一、数据库设计

MongoDB是一个基于分布式文件存储 的数据库，具有高性能、易部署、易使用，存储数据方便等特点。此项目所采用的是Mongodb数据库，集合文件主要包含id,message,timestamps三个字段，其数据文件如下所示：

1、数据结构

//data.js
//引入mongoose模块
const mongoose = require('mongoose');
//引入schema
const Schema = mongoose.Schema;
//数据结构
const DataSchema = new Schema(
    {
        id: Number,
        message: String
    },
    { timestamps: true }
);
//返回schema ,便于通过Node.js使用
module.exports = mongoose.model('Data', DataSchema);

2、注册免费数据库

在浏览器中访问Mongodb官网（MongoDB: The Developer D，如ata Platform | MongoDB），如图所示：

单击如图所示画红线部分,按照提示先进行注册，注册界面如下所示：

注册后出现登录界面如下所示：

登录后按照提示进行操作，注意选择AWS的512MB 自由数据库，并新建访问用户名为guest，完成设置后，如图所示：

单击红色按钮，出现如图所示，使当前MO为右侧512MB自由数据库。

单击黄色按钮，选择第一项，nodejs连接，出现如图所示：

连接代码如上红色所示，连接数据库代码如下：

//连接数据库
const uri = "mongodb+srv://guest:<guest用户访问密码>@cluster0.gulaw.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0";
mongoose.connect(uri, { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
//检查数据库连接是否成功
db.on('error', console.error.bind(console, 'connection error:'));
//显示连接成功
db.once('open', function() {
  console.log('Connected to MongoDB')
})

获取数据代码，如下所示：

const Data=require('./data');
Data.find().exec()