使用ndoe实现自动化完成增删改查接口

使用ndoe实现自动化完成增删改查接口

最近工作内容比较繁琐,手里需要开发的项目需求比较多,常常在多个项目之间来回切换,有时候某些分支都不知道自己开发了什么、做了哪些需求,
使用手写笔记的方式去记录分支到头来也是眼花缭乱,作为前端工作3年的弟弟想着为啥不能自己直接将这些数据存在数据库里,实现一个增删改查的日常工作记录管理呢?
说干就开始搞!!!

  • 🔴 1、 首先我们先安装mysql数据库

    • 🟢 1.1、这个就直接搜一个教程即可:mac电脑mysql数据库安装教程

    • 🟢 1.2、有时候忘记mysql的密码了。怎么重置一下呢?咳咳!我这边是卸载了一遍重新安装了一下 mac使用brew安装mysql

    • 🟢 1.3、完成数据库的安装,能正常启动我们即可进入正题

  • 🔴 2、安装Navicat Premium Lite 是一款免费的数据库管理工具

    • 🟢 2.1、Navicat Premium Lite安装教程 数据库的可视化工具免费的哦,

      img

    • 🟢 2.2、我们新建一个连接,连接到我们的数据库,连接成功之后,我们新建一个数据 名字你随便,然后我们新建表,我们在上面的新建查询中执行

      CREATE TABLE `daily_record` (`id` INT(11) NOT NULL AUTO_INCREMENT,`daily_tag` VARCHAR(255) NOT NULL,`daily_remark` VARCHAR(255) NOT NULL,`status` VARCHAR(255) NOT NULL,`create_time` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,`git_name` VARCHAR(255) NOT NULL,PRIMARY KEY (`id`)
      );
      
    • 🟢 2.3、我们的表就创建完成了,接下来我们就可以使用node连接我们这个数据库去实现一些增删改查的操作了

  • 🔴 3、使用node实现增删改查

文件结构

img

  • 🟢 3.1、连接数据建立连接池,首先我们安装我们后面需要的依赖,我们在package.json文件中添加一下依赖项
       "body-parser": "^1.20.2","express": "^4.19.2","mysql": "^2.18.1","mysql2": "^3.9.6"
执行`yarn` 安装完成之后,我们新建一个数据库连接池:
     // initDatabase.js
const mysql = require('mysql2/promise');
const pool = mysql.createPool({host: 'localhost',user: 'root',password: '12345678',database: 'dev_database',connectionLimit: 10
});module.exports = pool;
  • 🟢 3.2、完成我们的获取数据库的接口、新增接口
 const pool = require('../../service/initPool/init');
async function getDaily(req, res) {try {const [rows] = await pool.query('SELECT * FROM daily_record');res.json(rows);} catch (error) {res.status(500).json({ error: 'Error retrieving users' });}
}async function getDailyById(req, res) {const { id } = req.params;try {const [rows] = await pool.query('SELECT * FROM daily_record WHERE id = ?', [id]);if (rows.length === 0) {res.status(404).json({ error: 'not find' });} else {res.json(rows[0]);}} catch (error) {res.status(500).json({ error: 'Error getting daily_record by ID' });}
}module.exports = { getDaily, getDailyById };
 const pool = require('../../service/initPool/init');
async function addDaily(req, res) {try {const { daily_tag , daily_remark , status , git_name } = req.body;const [result] = await pool.query('INSERT INTO daily_record ( daily_tag , daily_remark , status , git_name ) VALUES ( ?,?,?,? )',[ daily_tag , daily_remark , status , git_name ]);res.status(201).json({ id: result.insertId, message: 'daily_record added successfully' });} catch (error) {res.status(500).json({ error: 'Error adding error' });}
}module.exports = { addDaily };
  • 🟢 3.3、创建我们的服务器部署我们的接口
 // index.js
const express = require('express');
const bodyParser = require('body-parser');
const { getDaily, getDailyById } = require('./dailyRecord/getdaily');
const { addDaily } = require('./dailyRecord/adddaily');
// 引入新增用户模块
// 引入其他模块,如readUser, updateUser, deleteUser等const app = express();
app.use(bodyParser.json());// 设置路由
app.get('/getdaily', getDaily);       // 获取所有用户
app.get('/dailyById/:id', getDailyById); // 根据ID获取用户
app.post('/adddaily', addDaily);       // 添加用户// 根据需要设置其他路由,如GET, PUT, DELETE等
// /* 允许跨域 */
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');next();
});// 启动服务
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port http://localhost:${PORT}`));

使用node启动我们的服务

node index.js

访问 http://localhost:3000/getdaily
img

  • 🔴 4、在我们react -vite 项目中进行配置

    • 🟢 4.1、vite.config 配置代理实现跨于请求
 import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react(),],server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},css: {preprocessorOptions: {less: {javascriptEnabled: true, // 开启Less的JavaScriptEnabled},},},
});
  • 🟢 4.2、接口调用方式
     const getDailyList = (params = {}) => {window.fetch('/api/getDaily').then(async (res) => {const data = await res.json();setDataSource(data);}).catch(() => {setDataSource([]);}).finally(() => {setLoading(false);});};
  • 🟢 4.3、
    最终结果展示
    img

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode调试教程

VSCode调试 VSCode Debuggers VSCode使用launch.json进行细粒度的控制,可以启动程序或将其附加到复杂的调试场景中 打开Run and Debug视图Ctrl Shift D 点击create a launch.json file,选择C(GDB/LLDB) 会在工作目录自动创建.vscode/launch.json文…

【Python】已解决:(MongoDB安装报错)‘mongo’ 不是内部或外部命令,也不是可运行的程序

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例及解决方案五、注意事项 已解决:(MongoDB安装报错)‘mongo’ 不是内部或外部命令,也不是可运行的程序 一、分析问题背景 在安装和配置MongoDB时,有…

怎样在 PostgreSQL 中优化对 UUID 数据类型的索引和查询?

文章目录 一、UUID 数据类型概述二、UUID 索引和查询的性能问题三、优化方案(一)选择合适的索引类型(二)压缩 UUID(三)拆分 UUID(四)使用覆盖索引(五)优化查询…

一二三应用开发平台应用开发示例(6)——代码生成、权限配置、运行效果查看

生成代码 完成配置工作,接下来就是见证奇迹的时刻~ 返回到实体列表,选中“文件夹”记录,点击“生成代码”按钮,提示成功后,在项目的output目录下输出了平台基于配置模板产生的各层代码,在原有后端的基础上…

Pyserial设置缓冲区大小失败

文章目录 问题描述原因分析解决方案 问题描述 使用set_buffer_size()设置缓冲区大小后,buffer size仍为默认的4096 import time import serial ser serial.Serial(baudrate9600, timeout0.5) ser.port COM1 ser.set_buffer_size(rx_size8192) ser.open() while …

windows上部署python3.11

hello,大家好,我是一名测试开发工程师,至今已在自动化测试领域深耕9个年头,现已将本人实战多年的多终端自动化测试框架【wyTest】开源啦,在接下来的一个月里,我将免费指导大家使用wyTest,请大家…

欧拉函数.

性质1:质数n的欧拉函数为n-1. 性质2:如果p,q都是质数,那么ϕ ( p ∗ q ) ϕ ( p ) ∗ ϕ ( q ) ( p − 1 ) ∗ ( q − 1 ) 证明:p,2p....q*p都不与q*p互质,q同理,所以总的不互质个…

STM32芯片系列与产品后缀解读

一. 产品系列 STM32单片机是一系列基于ARM Cortex-M内核的32位微控制器,广泛应用于嵌入式系统中。 STM32系列由STMicroelectronics(意法半导体)开发和生产,并凭借其灵活的设计、丰富的外设和强大的生态系统,成为嵌入式…

咬文嚼字:词元是当今生成式人工智能失败的一个重要原因

生成式人工智能模型处理文本的方式与人类不同。了解它们基于"标记"的内部环境可能有助于解释它们的一些奇怪行为和顽固的局限性。从 Gemma 这样的小型设备上模型到 OpenAI 业界领先的 GPT-4o 模型,大多数模型都建立在一种称为转换器的架构上。由于转换器在…

Ubuntu24.04清理常见跟踪软件tracker

尽量一天一更,不刷视频,好好生活 打开系统监视器,发现开机有个tracker-miner-fs-fs3的跟踪程序,而且上传了10kb的数据。 搜索知,该程序会搜集应用和文件的信息。 删除tracker 显示带tracker的apt程序 sudo apt lis…

书生·浦语2.5开源,推理能力再创新标杆

导读 2024 年 7 月 3 日,上海人工智能实验室与商汤科技联合香港中文大学和复旦大学正式发布新一代大语言模型书⽣浦语2.5(InternLM2.5)。相比上一代模型,InternLM2.5 有三项突出亮点: 推理能力大幅提升,在…

Python | Leetcode Python题解之第222题完全二叉树的节点个数

题目: 题解: # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def countNodes(self,…

【Elasticsearch】Elasticsearch倒排索引详解

文章目录 📑引言一、倒排索引简介二、倒排索引的基本结构三、Elasticsearch中的倒排索引3.1 索引和文档3.2 创建倒排索引3.3 倒排索引的存储结构3.4 词典和倒排列表的优化 四、倒排索引的查询过程4.1 过程4.2 示例 五、倒排索引的优缺点5.1 优点5.2 缺点 六、倒排索…

【Excel】求和带文字的数据

目录标题 1. 给出样例2. CtrlE3. CtrlH → A替换为 → 全部替换 1. 给出样例 2. CtrlE 3. CtrlH → A替换为 → 全部替换

仿qq音乐播放微信小程序模板源码

手机qq音乐应用小程序,在线音乐播放器微信小程序网页模板。包含:音乐歌曲主页、推荐、排行榜、搜索、音乐播放器、歌单详情等。 仿qq音乐播放微信小程序模板源码

【ubuntu自启shell脚本】——在ubuntu中如何使用系统自带的启动应用程序设置开机自启自己的本地shell脚本

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、设置开机自启shell脚本1.使用 gnome-session-properties2.测试的shell例程代码 总结 前言 在Ubuntu系统中设置开机自启脚本是一种重要的自动化方法。开机自…

YOLO-World实时开集检测论文阅读

论文:《YOLO-World: Real-Time Open-Vocabulary Object Detection》 代码:https://github.com/AILab-CVC/YOLO-World 1.Abstract 我们介绍了YOLO World,这是一种创新的方法,通过在大规模数据集上进行视觉语言建模和预训练&#…

vue3+antd 实现点击按钮弹出对话框

格式1&#xff1a;确认对话框 按钮&#xff1a; 点击按钮之后&#xff1a; 完整代码&#xff1a; <template><div><a-button click"showConfirm">Confirm</a-button></div> </template> <script setup> import {Mod…

阶段三:项目开发---大数据开发运行环境搭建:任务4:安装配置Spark集群

任务描述 知识点&#xff1a;安装配置Spark 重 点&#xff1a; 安装配置Spark 难 点&#xff1a;无 内 容&#xff1a; Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎。Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop …

Bean的管理

1.主动获取Bean spring项目在需要时&#xff0c;会自动从IOC容器中获取需要的Bean 我们也可以自己主动的得到Bean对象 &#xff08;1&#xff09;获取bean对象&#xff0c;首先获取SpringIOC对象 private ApplicationContext applicationContext //IOC容器对象 (2 )方法…