当前位置： 首页 > news >正文

React之简易笔记本

news 来源：原创 2024/9/22 9:38:51

此文使用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().then((data) => {return res.json({ success: true, data: data });}).catch((err) => {return res.json({ success: false, error: err });})

新增数据代码，如下所示：

let data = new Data();const { id, message } = req.body;if ( (!id && id !==0) || !message) {return res.json({success: false,error: 'INVALID INPUTS'});}data.message = message;data.id = id;data.save().then(() => res.json({ success: true })).catch(err => res.json({ success: false, error: err }));

删除数据数据代码，如下所示：

const { id } = req.body;Data.findOneAndDelete(id).then(data=>res.json({ success: true })).catch(err =>res.json({ success: false, error: err }));

更新数据代码，如下所示：

    const { id, update } = req.body;Data.findOneAndUpdate({_id: id},update).then(data=>{return res.json({ success: true });}).catch(err =>{return res.json({ success: false, error: err });});

以上是Mongodb数据库在线使用方法和访问代码，访问数据库采用mongoose库。

二、后台应用

项目后台采用nodejs+express+mongooseb库的方式运行，侦听端口为3000，其中：

‘/getData’ 为获取数据，访问方式get

‘/putData’ 为新增数据，访问方式post

‘/deleteData’ 为删除数据，访问方式delete

‘/updateData’ 为更新数据，访问方式post

注意：1、采用bodyParser的json编码方式。

           2、采用cors库解决访问跨域问题。

           3、需安装相应库，其中mongoose为数据库访问库，morgan库为日志库。

后台代码如下所示：

//定义Mongodb连接
const mongoose=require('mongoose');
//引入express
const express = require('express');
//引入body-parser
const bodyParser = require('body-parser');
//引入morgan
const logger= require('morgan');
const Data=require('./data');
const API_PORT = 3000;
//express实例
const app = express();
const cors = require('cors');
// 允许所有源访问
app.use(cors());
//路由
const router = express.Router();
//使用body-parser
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//开启日志
app.use(logger('dev'));//连接数据库
/*
const { MongoClient, ServerApiVersion } = require('mongodb');
const uri = "mongodb+srv://guest:qqq123456@cluster0.gulaw.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0";
// Create a MongoClient with a MongoClientOptions object to set the Stable API version
const client = new MongoClient(uri, {serverApi: {version: ServerApiVersion.v1,strict: true,deprecationErrors: true,}
});
async function run() {try {// Connect the client to the server	(optional starting in v4.7)await client.connect();// Send a ping to confirm a successful connectionawait client.db("admin").command({ ping: 1 });console.log("Pinged your deployment. You successfully connected to MongoDB!");} finally {// Ensures that the client will close when you finish/errorawait client.close();}
}
run().catch(console.dir);
*/
//连接数据库
const uri = "mongodb+srv://guest:qqq123456@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')
})//获取数据的方法
router.get('/getData', (req, res) => {console.log('/getData已经执行');Data.find().exec().then((data) => {return res.json({ success: true, data: data });}).catch((err) => {return res.json({ success: false, error: err });})
});//添加数据的方法
//用于向数据库添加新的数据
router.post('/putData', (req, res) => {let data = new Data();const { id, message } = req.body;if ( (!id && id !==0) || !message) {return res.json({success: false,error: 'INVALID INPUTS'});}data.message = message;data.id = id;data.save().then(() => res.json({ success: true })).catch(err => res.json({ success: false, error: err }));
})//数据更新的方法
//用于对数据库已有数据进行更新
router.post('/updateData', (req, res) => {const { id, update } = req.body;console.log('updateData已经执行');console.log(id,update);Data.findOneAndUpdate({_id: id},update).then(data=>{return res.json({ success: true });}).catch(err =>{return res.json({ success: false, error: err });});
});//删除数据的方法
//用于对数据库已有数据进行删除
router.delete('/deleteData', (req, res) => {const { id } = req.body;Data.findOneAndDelete(id).then(data=>res.json({ success: true })).catch(err =>res.json({ success: false, error: err }));
});//对http请求增加/api路由
app.use('/api', router);
//开启端口 
app.listen(API_PORT, () => console.log(`LISTENING ON PORT ${API_PORT}`));

三、前台应用

前台采用React +antd组件方式编写，  整个界面分为四部分，第一部分为List显示笔记内容，第二部分为Card ,包含一个输入框和新增按钮，第三部分为Card ,主要功能是删除笔记，包含一个输入框和删除按钮，第四部分为Card,主要功能是更新笔记，包含两个输入框和更新按钮。前端采用React自带的fetch从服务器中获取笔记，使用axios从服务器中，新增笔记、删除笔记、更新笔记，代码如下所示：

import React,{ Component } from 'react'
//引入axios用于发送异步请求获取数据
import axios from 'axios'
//引入antd组件库
import { Button ,Input,List,Avatar,Card } from 'antd'
//引入样式库
class App extends Component {//初始化statestate = {data: [],id:0,message: null,IntervalIsSet: false,idToDelete: null,idToUpdate: null,objectToUpdate: null}//获取数据getDataFromDb=()=>{fetch("http://localhost:3000/api/getData").then(data=> data.json()).then(res=>this.setState({data: res.data}))};//新增数据putDataToDB=(message)=>{let cureentIds=this.state.data.map((data)=>data.id);let idToBeAdded=0;while(cureentIds.includes(idToBeAdded)){idToBeAdded++;}axios.post("http://localhost:3000/api/putData",{id:idToBeAdded,message:message})console.log('message',message);}//删除数据deleteFromDB=(idToDelete)=>{let objIdToDelete=null;this.state.data.forEach((data)=>{if(data.id===idToDelete){objIdToDelete=data._id;}});axios.delete("http://localhost:3000/api/deleteData",{data:{id:objIdToDelete}});};//更新数据updateDB=(idToUpdate,objectToUpdate)=>{let objIdToUpdate=null;this.state.data.forEach((data)=>{if(data.id==idToUpdate){objIdToUpdate=data._id;}});axios.post("http://localhost:3000/api/updateData",{id:objIdToUpdate,update: {message: objectToUpdate}});}//组件挂载后执行componentDidMount() {this.getDataFromDb();if(!this.state.IntervalIsSet){let interval=setInterval(this.getDataFromDb,1000);this.setState({IntervalIsSet: interval});}}//组件卸载前执行componentWillUnmount() {if(this.state.IntervalIsSet){clearInterval(this.state.IntervalIsSet);this.setState({IntervalIsSet: null});}}//组件更新后执行render() {const {data=[]}=this.state;console.log('data',data);return (<div style={{width:990,margin:20,backgroundColor:'#ccc'}}><List itemLayout="horizontal"dataSource={data}renderItem={item => (<List.Item><List.Item.Metaavatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}title={<span>创建时间：{item.createdAt}</span>}description={<span>{item.id}:{item.message}</span>}/></List.Item>)}/><Cardtitle="新增笔记"style={{padding: 10,margin: 10}}><Input placeholder="请输入笔记内容"  style={{width: 200}} onChange={e=>this.setState({message: e.target.value})}/><Button type="primary"style={{margin: 20}}onClick={()=>this.putDataToDB(this.state.message)}>新增</Button></Card><Card title="删除笔记"style={{padding: 10,margin: 10}}><Input placeholder="填写所需删除ID"  style={{width: 200}} onChange={e=>this.setState({idToDelete: e.target.value})}/><Button type="primary"style={{margin: 20}}onClick={()=>this.deleteFromDB(this.state.idToDelete)}>删除</Button></Card><Cardtitle="更新笔记"style={{padding: 10,margin: 10}}><Input placeholder="填写所需更新ID"  style={{width: 200,marginRight: 10}} onChange={e=>this.setState({idToUpdate: e.target.value})}/><Input placeholder="填写所需更新内容"  style={{width: 200}} onChange={e=>this.setState({objectToUpdate: e.target.value})}/><Button type="primary"style={{margin: 20}}onClick={()=>this.updateDB(this.state.idToUpdate,this.state.objectToUpdate)}>更新</Button></Card>   </div>);}
}export default App

本文简要讲述了采用mogoose+express+react方式，完成一个简易的笔记本项目，其中在线数据库存由于网络问题，非常不稳定，在调试时需要非常注意，另外，mongoose库访问数据库的代码书写方式新，旧有所不同，跨域访问也应该是在调试时，特别加以留心。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • k8s部署kubeadm init初始化不成功，coredns处于pending,master和nodes处于notready状态
  • MySQL 查询分组内最新的第一条数据
  • ​【经验分享】微机原理、指令判断、判断指令是否正确判断指令是否正确​
  • go语言源码解读之数据结构堆
  • Redis远程字典服务器（5) —— list类型详解
  • Cocos Creator倒计时
  • jenkins升级踩坑记录
  • service 管理 web 管理插件
  • 电子音乐制作软件有哪些 电音制作用什么软件 好用的能够创作音乐的软件推荐 电音基础新手入门
  • OpenCV--图像梯度处理，图片轮廓，边缘检测
  • 打印一个字符串全部子序列（没有重复字面值）
  • 刷题记录第108天-求一个数的平方根(精确到小数点后五位)
  • 使用 C/C++访问 MySQL
  • repo简介
  • CUDA C++ 编程指南学习（待更）
  • Android 控件背景颜色处理
  • learning koa2.x
  • log4j2输出到kafka
  • magento2项目上线注意事项
  • mockjs让前端开发独立于后端
  • Netty+SpringBoot+FastDFS+Html5实现聊天App(六)
  • Python利用正则抓取网页内容保存到本地
  • React 快速上手 - 06 容器组件、展示组件、操作组件
  • Solarized Scheme
  • WebSocket使用
  • 阿里云前端周刊 - 第 26 期
  • 程序员最讨厌的9句话，你可有补充？
  • 大数据与云计算学习：数据分析（二）
  • 前端每日实战：70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 日剧·日综资源集合（建议收藏）
  • 使用agvtool更改app version／build
  • 视频flv转mp4最快的几种方法（就是不用格式工厂）
  • 原生 js 实现移动端 Touch 滑动反弹
  • 【干货分享】dos命令大全
  • Semaphore
  • ​补​充​经​纬​恒​润​一​面​
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • (day18) leetcode 204.计数质数
  • (el-Transfer)操作(不使用 ts)：Element-plus 中 Select 组件动态设置 options 值需求的解决过程
  • (poj1.3.2)1791(构造法模拟)
  • （Redis使用系列） Springboot 在redis中使用BloomFilter布隆过滤器机制 六
  • （独孤九剑）--文件系统
  • （翻译）Entity Framework技巧系列之七 - Tip 26 – 28
  • （附源码）springboot“微印象”在线打印预约系统 毕业设计 061642
  • （力扣）循环队列的实现与详解（C语言）
  • (免费领源码）Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • （七）Knockout 创建自定义绑定
  • （算法二）滑动窗口
  • .bat批处理出现中文乱码的情况
  • .gitignore文件_Git：.gitignore
  • .NET Core引入性能分析引导优化
  • .Net Core与存储过程(一)
  • .Net Web项目创建比较不错的参考文章
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .NET 反射的使用