使用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安装教程 数据库的可视化工具免费的哦，

    

  • 🟢 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实现增删改查

文件结构

• 🟢 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

• 🔴 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、
  最终结果展示