使用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、
最终结果展示
