React之简易笔记本

news2024/9/21 20:34:03

此文使用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 connection
    await 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/error
    await 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 {
  //初始化state
  state = {
    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.Meta
                avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                title={<span>创建时间：{item.createdAt}</span>}
                description={<span>{item.id}:{item.message}</span>}
              />
            </List.Item>
          )}
        />

        <Card
          title="新增笔记"
          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>
    
        <Card
            title="更新笔记"
            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库访问数据库的代码书写方式新，旧有所不同，跨域访问也应该是在调试时，特别加以留心。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2033045.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android Framework之Pkms详解

Android Framework之Pkms详解

PKMS是Android系统中负责安装包管理的服务&#xff0c;它的主要职责如下&#xff1a; 管理系统安装的所有应用程序&#xff0c;包括升级、安装、卸载 根据Intent匹配相应的Activity、Service、Provider和BroadcastReceiver等&#xff0c;并提供相关信息 解析应用权限&#xff…
阅读更多...
深入探讨进程间通信的重要性：理解不同的通信机制（下）

深入探讨进程间通信的重要性：理解不同的通信机制（下）

前言 在上一篇文章中&#xff0c;我们探讨了进程间通信的三种常见机制&#xff1a;管道、消息队列和共享内存。我们了解到&#xff0c;这些机制各有其特点和适用场景&#xff0c;可以根据实际需求选择合适的机制进行进程间通信。然而&#xff0c;进程间通信并不仅限于这三种方…
阅读更多...
Zookeeper学习、Tomcat

Zookeeper学习、Tomcat

怎样使用Zookeeper实现服务发现&#xff1f; 典型回答 服务发现是ZK的重要用途之一&#xff0c;当我们想要基于zk实现服务发现时&#xff0c;一般可以参考以下步骤&#xff1a;1. 向Zookeeper注册服务 服务提供者需要在Zookeeper上创建一个临时节点来注册自己的服务。节点的名…
阅读更多...
第五届IEEE先进电气和能源系统国际会议（AEES 2024）即将召开！

第五届IEEE先进电气和能源系统国际会议（AEES 2024）即将召开！

第五届先进电气和能源系统国际会议将于2024年11月29日至12月1日在中国兰州召开&#xff0c;欢迎参加&#xff01; 本届会议关注先进电气和能源系统的新理论及其应用&#xff0c;为相关领域的技术及相关研究领域的专家、学者交流最新研究成果、探讨学术发展方向提供一个广泛的交…
阅读更多...
LVS原理——详细介绍

LVS原理——详细介绍

目录 介绍 lvs简介 LVS作用 LVS 的优势与不足 LVS概念与相关术语 LVS的3种工作模式 LVS调度算法 LVS-dr模式 LVS-tun模式 ipvsadm工具使用 实验 nat模式集群部署 实验环境 webserver1配置 webserver2配置 lvs配置 dr模式集群部署 实验环境 router 效果呈现…
阅读更多...
漏洞复现-Cacti命令执行漏洞 (CVE-2022-46169)

漏洞复现-Cacti命令执行漏洞 (CVE-2022-46169)

1.漏洞描述 Cacti是一套基于PHP&#xff0c;MySQL&#xff0c;SNMP及RRDTool开发的网络流量监测图形分析工具&#xff0c;可为用户提供强大且可扩展的操作监控和故障管理框架。 该漏洞存在于remote_agent.php文件中&#xff0c;未经身份验证的恶意攻击者可以通过设置HTTP_变量…
阅读更多...
Vue2计算属性与Vue3的计算属性对比

Vue2计算属性与Vue3的计算属性对比

Vue2的计算属性 在Vue2文档上存在这么一个例子&#xff1a;通过计算属性来获取全名 var vm new Vue({el: #demo,data: {firstName: Foo,lastName: Bar},computed: {fullName: function () {return this.firstName this.lastName}} }) 同时&#xff0c;如果我们更改了计算…
阅读更多...
【学习笔记】Day 11

【学习笔记】Day 11

一、进度概述 1、《地震勘探原理》第四章 二、详情 4.1 影响地震波传播速度的因素分析 这里只做定性总结&#xff0c;定量参考书上公式&#xff08;p139-p143&#xff09;。这一章节是通过观测速度模型&#xff0c;确定岩层结构的基础知识&#xff08;虽然更像是地质解释那一…
阅读更多...
Vue中的路由与多种守卫常见问题及解决方案

Vue中的路由与多种守卫常见问题及解决方案

在Vue.js项目中&#xff0c;Vue Router是实现单页面应用&#xff08;SPA&#xff09;页面跳转的重要工具。路由守卫作为Vue Router的一个关键特性&#xff0c;用于在路由跳转前或跳转后进行逻辑判断&#xff0c;如权限验证、登录状态检查等。然而&#xff0c;在使用路由守卫时&…
阅读更多...
零基础5分钟学会谷歌云GCP核心云架构技能 - 成本分析篇

零基础5分钟学会谷歌云GCP核心云架构技能 - 成本分析篇

简介&#xff1a; 欢迎来到小李哥谷歌云GCP云计算知识学习系列&#xff0c;适用于任何无云计算或者谷歌云技术背景的开发者&#xff0c;让大家零基础5分钟通过这篇文章就能完全学会谷歌云一个经典的服务开发架构方案。 我将每天介绍一个基于全球三大云计算平台&#xff08;AW…
阅读更多...
基于单片机的智能风扇设计

基于单片机的智能风扇设计

摘 要: 传统风扇无法根据周围环境的温度变化进行风速的调整&#xff0c;必须人为地干预才能达到需求 。 本文基于单片机的智能风扇主要解决以往风扇存在的问题&#xff0c;其有两种工作模式: 手动操作模式和自动运行模式&#xff0c;人们可以根据需要进行模式选择。 在自动运行…
阅读更多...
TIM定时器 溢出时间计算

TIM定时器 溢出时间计算

在f1系列&#xff0c;所有定时器的时钟源频率都是72mhz&#xff0c;因为不管是挂在apb1还是apb2时钟总线上的定时器&#xff0c;经过倍频或者不倍频以后都将把定时器的频率设置成72mhz 时钟源频率除以psc1以后得到实际的频率&#xff0c;之所以psc要加1&#xff0c;是因为设置…
阅读更多...
无人机测绘技术如何？

无人机测绘技术如何？

无人机测绘技术作为现代测绘技术的重要组成部分&#xff0c;正以其独特的优势在多个领域发挥着重要作用。以下是对无人机测绘技术的详细分析&#xff1a; 一、技术特点 1. 高精度&#xff1a;无人机测绘搭载高精度传感器和相机&#xff0c;能够快速、准确地获取地面信息&…
阅读更多...
Datawhale X 魔搭 AI夏令营第四期-魔搭生图task1学习笔记

Datawhale X 魔搭 AI夏令营第四期-魔搭生图task1学习笔记

根据教程提供的链接&#xff0c;进入相应文章了解魔搭生图的主要工作是通过对大量图片的训练&#xff0c;生成自己的模型&#xff0c;然后使用不同的正向、反向提示词使模型输出对应的图片 1.官方跑baseline教程链接:Task 1 从零入门AI生图原理&实践 2.简单列举一下赛事的…
阅读更多...
【Material-UI】Floating Action Button (FAB) 详解：基础用法

【Material-UI】Floating Action Button (FAB) 详解：基础用法

文章目录 一、Floating Action Button (FAB) 简介1. FAB 的定义2. FAB 的特点 二、Basic FAB 的基础用法1. 基础 FAB 按钮2. 次要颜色的 FAB 按钮3. 扩展变体的 FAB 按钮4. 禁用状态的 FAB 按钮 三、FAB 按钮的高级自定义1. 自定义按钮大小2. 调整按钮的悬浮位置 四、FAB 的无障…
阅读更多...
研究报告系列二：供应链安全风险原因分析及相关新质生产力重要技术探讨

研究报告系列二：供应链安全风险原因分析及相关新质生产力重要技术探讨

随着软件开发的复杂性和动态性不断增加&#xff0c;软件供应链的安全风险成为了一个亟需重视的重要议题&#xff0c;而在技术的飞速发展和广泛应用下&#xff0c;新质生产力相关领域同样存在着软件供应链安全方面的问题&#xff0c;作为《2023软件供应链安全研究报告》系列中的…
阅读更多...
js逆向——2024最新金山词霸(练习二)

js逆向——2024最新金山词霸(练习二)

首先还是看响应&#xff0c;返回了一串加密数据 继续放大招hook JSON&#xff0c;详细流程在上一篇文章 然后直接跟栈找到解密位置 var t 1 (null e || void 0 e ? void 0 : e.status) ? A(A({}, e), {}, {content: JSON.parse((0,_.B6)(e.content))}) : e; t是解密之后…
阅读更多...
护眼大路灯哪个牌子好？公认五款最好护眼大路灯分享

护眼大路灯哪个牌子好？公认五款最好护眼大路灯分享

护眼大路灯哪个牌子好&#xff1f;很多家长都是为了孩子的视力健康而置换的护眼大路灯&#xff0c;但是有一部分孩子用了之后反而会和家长说出现眼睛不太舒服&#xff0c;甚至近视加深的情况。而引发这种情况的大多数为产品不达标或非专业台灯&#xff0c;因为专业护眼大路灯是…
阅读更多...
白屏检测系统的设计与实现

白屏检测系统的设计与实现

目录 一、 什么是白屏问题&#xff1f;二、 问题分析与拆解2.1 人工判定一个白屏问题的逻辑2.2 自动化判定一个白屏问题的算法思想 三、 白屏检测算法3.1 图像灰度化3.2 图像二值化3.3 计算&#xff08;判定为白屏&#xff09;置信度 四、 白屏检测系统的设计与实现4.1 UI自动化…
阅读更多...
某通用系统0day审计过程

某通用系统0day审计过程

前言 代码审计篇章都是自己跟几个师傅们一起审计的1day或者0day(当然都是小公司较为简单)&#xff0c;禁止未经允许进行转载&#xff0c;发布到博客的用意主要是想跟师傅们能够交流下审计的思路&#xff0c;毕竟审计的思路也是有说法的&#xff0c;或者是相互源码共享也OK&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023