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-- ----------------------------DROPTABLEIFEXISTS`product`;CREATETABLE`product`(`id`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOTNULLCOMMENT'id',`title`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULLDEFAULTNULLCOMMENT'标题',`content`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULLDEFAULTNULLCOMMENT'内容',`description`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULLDEFAULTNULLCOMMENT'描述',`type`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULLDEFAULTNULLCOMMENT'类型',`html_text`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULLDEFAULTNULLCOMMENT'html内容',`img`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULLDEFAULTNULLCOMMENT'封面图片',`create_time`datetime(0)NULLDEFAULTNULLCOMMENT'创建时间',`update_time`datetime(0)NULLDEFAULTNULLCOMMENT'更新时间',`create_user`varchar(255)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULLDEFAULTNULLCOMMENT'创建用户',PRIMARYKEY(`id`)USINGBTREE)ENGINE=InnoDBCHARACTERSET= utf8mb4 COLLATE= utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

💖 node后端操作数据库实现增删改查

koa 实现对表product的增删改查

const Router =require('koa-router');const router =newRouter();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=awaitexecMysql(`select * from product where title like '%${
     name}%' order by create_time desc limit ${
     start},${
     end};`);const searchTotal=awaitexecMysql(`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()