node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查

⭐前言

大家好，我是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()