做presentation的网站,dw做网站首页代码,企业 怎么建交互网站,ghost 博客wordpress使用ndoe实现自动化完成增删改查接口 最近工作内容比较繁琐#xff0c;手里需要开发的项目需求比较多#xff0c;常常在多个项目之间来回切换#xff0c;有时候某些分支都不知道自己开发了什么、做了哪些需求#xff0c; 使用手写笔记的方式去记录分支到头来也是眼花缭乱手里需要开发的项目需求比较多常常在多个项目之间来回切换有时候某些分支都不知道自己开发了什么、做了哪些需求 使用手写笔记的方式去记录分支到头来也是眼花缭乱作为前端工作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、 最终结果展示
