⭐前言
大家好，我是yma16，本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。
技术选型
前端：vite+vue3+antd
后端：node koa
数据库：mysql
koa是一个现代的Node.js框架，可以用来构建Web应用程序。
Vue.js 是一款用于构建用户界面的开源JavaScript框架。Vue.js 3 是 Vue.js
的最新版本，于2020年9月正式发布。
Vue.js
3相对于之前的版本带来了许多重要的改进和新功能。其中一项重大改变是使用了全新的响应式系统，称为“Proxy”。这个新的响应式系统使得Vue.js更加高效和可扩展，能够处理更复杂的应用程序。
Vue.js 3还引入了一种全新的组件声明方式，称为“Composition API”。Composition
API允许开发者更灵活地组织和复用组件逻辑，使得组件更可读、可维护。
除了这些核心改进之外，Vue.js 3还提供了许多其他的新功能，比如更好的TypeScript支持、优化的虚拟DOM算法、更好的性能等等。
总的来说，Vue.js
3是一个更加现代化、高效和功能丰富的框架，为开发者提供了更好的开发体验和更好的性能。无论是新项目还是现有项目的升级，都可以考虑使用Vue.js
3来构建用户界面。
该系列往期文章
前端vite+vue3结合后端node+koa——实现代码模板展示平台（支持模糊搜索+分页查询）
⭐ 功能设计与实现
product表结构
-- ---------------------------- -- Table structure for product -- ---------------------------- DROP TABLE IF EXISTS `product`; CREATE TABLE `product` ( `id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 'id', `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '标题', `content` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '内容', `description` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '描述', `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '类型', `html_text` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT 'html内容', `img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '封面图片', `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间', `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间', `create_user` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '创建用户', PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
💖 node后端操作数据库实现增删改查
koa 实现对表product的增删改查
const Router = require('koa-router'); const router = new Router(); const jwtToken = require("jsonwebtoken"); const { execMysql}=require('../../utils/mysql/index') const { uuid,getCurrentTime}=require('../../utils/index'); // 获取product list router.post('/product/list', async (ctx) => { try{ // 解析参数 const bodyParams = ctx.request.body const { pageSize,page,name} = bodyParams; const start=Number(pageSize)*Number(page-1) const end=Number(pageSize) const search=await execMysql(`select * from product where title like '%${ name}%' order by create_time desc limit ${ start},${ end};`); const searchTotal=await execMysql(`select count(1 ) as total from product where title like '%${ name||''}%';`); ctx.body = { code: 200, data:search, total:searchTotal?searchTotal[0].total:0, msg: 'get product list success'}; } catch(r){ ctx.body = { code: 0, data:null, msg: JSON.stringify(r)}; } }); // 添加product list router.post('/product/add', async (ctx) => { try{ // 解析参数 const bodyParams = ctx.request.body const { title,content,description,type,img,create_user} = bodyParams; const create_time=getCurrentTime()
