Koa中使用MySQL数据库实现增删改查

最新推荐文章于 2024-08-12 09:57:12 发布
最新推荐文章于 2024-08-12 09:57:12 发布
阅读量4.1k 收藏 13
点赞数 4
分类专栏： node 进阶之旅 文章标签： koa mysql vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36718999/article/details/99836762
版权

查看更多资源

1. 简介：

使用 koa 框架、vue.js 与 mysql 数据库，搭建一个简单的任务管理器demo，实现任务列表的展示、分页查询、增删改查。 

2. 安装：

npm install koa koa-router koa-static-cache koa-bodyparser mysql2 --save

3. 图示：

4. app.js 代码： 

(async function () {

  const Koa = require('koa');
  const Static = require('koa-static-cache');
  const Router = require('koa-router');
  const Bodyparser = require('koa-bodyparser');
  const fs = require('fs');
  const mysql = require('mysql2/promise'); // 1. 加载模块

  const app = new Koa();
  const router = new Router();

  app.use(Bodyparser());

  app.use(Static('./static', { // 配置静态资源
    prefix: '/static',
    gzip: true
  }));

  const connection = await mysql.createConnection({ // 2. 连接 mysql 数据库
    host: '127.0.0.1',
    user: 'root',
    password: '123456',
    database: 'test'  // 数据库名
  });

  router.get('/', ctx => {
    const content = fs.readFileSync('./static/index.html');
    ctx.body = content.toString();
  });

  router.get('/todos', async ctx => {

    /*
    * (1) 查询及排序 
    */
    // 语法：SELECT 字段名 FROM 表名 ORDER BY 字段名 DESC        
    // ASC：升序，默认;  DESC：降序 

    const [data] = await connection.query("SELECT id,title,done FROM todos ORDER BY done DESC, id DESC");

    // 接受前端 分页请求参数 
    let page = ctx.query.page || 1; 
    page = Number(page);
    let prepage = ctx.query.prepage || 4;
    prepage = Number(prepage);
    let type = ctx.query.type;
    let where = '';

    if (type) {
      where = 'WHERE done=' + type;
    }

    // 查询总的记录条数
    const sql = `SELECT id,title,done FROM todos ${where}`;
    const [todosAll] = await connection.query(sql);
    // 总的数据量 / 每页显示条数，注意：小数
    const pages = Math.ceil(todosAll.length / prepage);

    /*
    * (2) 分页查询 
    */
    // 语法：LIMIT 5 OFFSET 3  查询5条，偏移3条
    // 语法 where ??=?  其中 ?? 表示字段或表名，? 表示值

    const sql2 = `SELECT id,title,done FROM todos ${where} LIMIT ? OFFSET ?`;

    const [todos] = await connection.query(sql2, [prepage, (page - 1) * prepage]);

    ctx.body = {
      code: 0,
      data: {
        page,
        prepage,
        pages,
        todos
      }
    }
  });

  router.post('/add', async ctx => {
    const title = ctx.request.body.title || '';

    if (title == '') {
      ctx.body = {
        code: 1,
        data: 'title不能为空'
      }
      return;
    }

    /*
    * (3) 添加数据 
    */

    const [rs] = await connection.query("INSERT INTO todos (title, done) VALUES ('" + title + "', 0)");

    if (rs.affectedRows > 0) {
      ctx.body = {
        code: 0,
        data: '添加成功'
      }
    } else {
      ctx.body = {
        code: 2,
        data: '添加失败'
      }
    }
  });

  router.post('/toggle', async ctx => {

    let id = Number(ctx.request.body.id) || 0;
    let todo = Number(ctx.request.body.todo) || 0;

    /*
    * (4) 更新数据 
    */

    let sql = "UPDATE todos SET ??=? WHERE ??=?";

    let [rs] = await connection.query(sql, ['done', todo, 'id', id]);

    if (rs.affectedRows > 0) {
      ctx.body = {
        code: 0,
        data: '修改成功'
      }
    } else {
      ctx.body = {
        code: 2,
        data: '修改失败'
      }
    }
  });

  router.post('/remove', async ctx => {
    let id = Number(ctx.request.body.id) || 0;

    /*
    * (5) 删除数据 
    */

    let sql = "DELETE FROM todos WHERE ??=?";

    let [rs] = await connection.query(sql, ['id', id]);

    if (rs.affectedRows > 0) {
      ctx.body = {
        code: 0,
        data: '删除成功'
      }
    } else {
      ctx.body = {
        code: 2,
        data: '删除失败'
      }
    }
  });

  app.use(router.routes());
  app.listen(8081);
})();

5. index.html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        li {
            line-height: 40px;
        }
        .done span {
            text-decoration: line-through;
            color: #cccccc;
        }
        .pages {
            margin: 10px;
        }
        .pages a {
            margin: 15px;
        }
        .pages a.active {
            color: red;
        }
        .footer {
            margin: 10px;
        }
        .footer button.active {
            background: yellow;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>App</h1>
        <div>
            <input type="text" v-model="newValue" />
            <button @click="add">添加新任务</button>
        </div>
        <hr />
        <ul>
            <li v-for="todo of todos" :key="todo.id" :class="{done: todo.done}">
                <input type="checkbox" :checked="todo.done" @click.prevent="toggle(todo.id, !todo.done)" />
                <span>#{{todo.id}} - {{todo.title}}</span>
                <button @click="remove(todo.id)">删除</button>
            </li>
        </ul>
        <div class="pages">
            <a href="" :class="{active: n == page}" @click.prevent="changePage(n)" v-for="n of pages">{{n}}</a>
        </div>
        <div class="footer">
            <button :class="{active: type===''}" @click="changeType('')">所有</button>
            <button :class="{active: type===1}" @click="changeType(1)">已完成</button>
            <button :class="{active: type===0}" @click="changeType(0)">未完成</button>
        </div>
    </div>

    <script>
    
        new Vue({
            el: '#app',
            data: {
                newValue: '',
                page: 1,
                prepage: 4,
                pages: 0,
                type: '',
                todos: []
            },
            created() {
                this.getData();
            },
            methods: {
                getData() {
                    fetch('/todos?type='+ this.type +'&page=' + this.page + '&prepage=' + this.prepage).then(res => {
                        return res.json();
                    }).then( data => {
                        this.todos = data.data.todos;
                        this.pages = data.data.pages;
                    } );
                },
                changePage(n) {
                    this.page = n;
                    this.getData();
                },
                changeType(m) {
                    this.type = m;
                    this.getData();
                },
                add() {
                    fetch('/add', {
                        method: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify( {title: this.newValue} )
                    }).then(res => {
                        return res.json();
                    }).then( data => {
                        if (!data.code) {
                            this.getData();
                        }
                    } )

                    this.newValue = '';
                },
                toggle(id, todo) {
                    fetch('/toggle', {
                        method: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify( {id, todo: Number(todo)} )
                    }).then(res => {
                        return res.json();
                    }).then(data => {
                        if (!data.code) {
                            this.getData();
                        }
                    });
                },
                remove(id) {
                    fetch('/remove', {
                            method: 'post',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify( {id} )
                        }).then(res => {
                            return res.json();
                        }).then(data => {
                            if (!data.code) {
                                this.getData();
                            }
                        });
                }
            }
        })
    
    </script>
</body>
</html>

 

 

Mr.XiaoYang
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
koa mysql jwt_GitHub - No2015/nodejs-koa2-mysql-sequelize-jwt: Koa2+Vue前后端分离项目.
weixin_36163101的博客
02-17 136
一、项目二、项目介绍技术栈：Nodejs, Vuejs, MySQL; Koa2, Sequelize, jwt.前后端分离：用nodejs的koa2框架搭建接口服务器，提供API接口；前后端用vuejs搭建，从API接口获取数据。接口包含：jwt做权限接口验证。用户登录注册接口；文章增删改查，搜索，分页接口；分类增删改查接口；分类关联多文章。Sequelize管理mysql数据库。已实现完整...
Koa增删改查（curd）
qq_39579242的博客
06-04 1221
数据库的基本操作莫过于是crud ，（增删改查）；本文记录日常操作，便于以后查阅 1.增（INSERT INTO 语句） 语法： INSERT INTO 表名称 VALUES (值1, 值2,....) 我们也可以指定所要插入数据的列 INSERT INTO 表名称 (列1, 列2,...) VALUES (值1, 值2,....) 2.删 （DELETE 语句） 语法： DELETE FROM 表名称 WHERE 列名称 = 值 可以在不删除表的情况下删除所有的行。这意味着表的结构
Node.js-基于koa2实现数据库增删改查逻辑
08-10
koa2-mongo-mongoose 一套基于koa2 mongo mongoose的简单的nodejs server，实现数据库增删改查逻辑
基于koa+mysql实现用户的增删改查
a1217483005的博客
05-29 394
基于koa+mysql实现用户的增删改查
koa中使用mysql增删改_koa+mysql实现增删改查-全栈之路（001）
weixin_36361600的博客
01-20 132
Date: 2020-4-23以前很少写文章，从今天开始我要挑战一下自己，连续输出100篇技术类文章。这100篇文章我尽量以实战案例为主。如果你觉得本文还不错，记得关注或者给个 star，你们的赞和 star 是我编写更多更精彩文章的动力！GitHub 地址本文重点内容从 0 到 1 集成 node + mysql + ejs 用户管理系统上手 sequelize 不使用sql操作数据库熟悉 MV...
koa+mysql实现增删改查-全栈之路（001）
石兴龙的博客
04-24 466
Date: 2020-4-23 以前很少写文章，从今天开始我要挑战一下自己，连续输出100篇技术类文章。这100篇文章我尽量以实战案例为主。 如果你觉得本文还不错，记得关注或者给个 star，你们的赞和 star 是我编写更多更精彩文章的动力！ GitHub 地址 本文重点内容 从 0 到 1 集成 node + mysql + ejs 用户管理系统 上手 sequelize 不使用sql操...
Node.js-使用nodejs-koa2-mysql-sequelize-jwt实现登录注册文章增删改查接口
08-10
在本项目中，我们主要探讨如何使用Node.js的Koa2框架、MySQL数据库、Sequelize ORM以及JSON Web Tokens（JWT）来构建一个完整的登录注册系统，并实现文章的增删改查接口。以下是对这些技术及其应用的详细解析： 1. ...
vue3+koa2+mysql增删改查
10-06 876
【代码】vue3+koa2+mysql增删改查。
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
热门推荐
编程知识分享，主打前端
02-15 2万+
大家好，我是yma16，本文分享关于 node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查。技术选型前端：vite+vue3+antd后端：node koa数据库：mysqlkoa是一个现代的Node.js框架，可以用来构建Web应用程序。Vue.js 是一款用于构建用户界面的开源JavaScript框架。Vue.js 3 是 Vue.js的最新版本，于2020年9月正式发布。Vue.js3相对于之前的版本带来了许多重要的改进和新功能。
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
10-17
本文将重点介绍如何利用Koa.js框架实现对本地JSON文件的增删改查操作。这种操作在开发小型应用或者原型设计时非常有用，尤其是在没有数据库环境的场景中。 首先，Koa.js是一个由Express原班人马打造的新的Web框架，...
Koa+mysql后台框架
09-12
使用koa2+mysql搭建的后台管理系统,封装了mysql的常规用法,支持分页查询,
node.js后端koa2框架博客项目连接mysql数据库实现简单的增删改查等（二）
laimaodashuaige的博客
05-15 987
所需软件： vscode，官网链接下载：https://code.visualstudio.com/；（也可以用自己习惯的编辑器） node.js，官网链接下载：http://nodejs.cn/； mysql，官网链接下载：https://dev.mysql.com/downloads/file/?id=503267； workbench（一款mysql数据库可视化软件），官网下载：https://downloads.mysql.com/archives/workbench/。 安装自己电脑的合适版本即可
nodeJS 使用koa实现一个增删改查
weixin_45932157的博客
03-28 590
const Koa = require("koa"); const Router = require("koa-router"); const bodyparser = require("koa-bodyparser"); const app = new Koa(); const router = new Router(); const usersRouter = new Router({ prefix: "/users" }); const db = [{ name: '张三' }] route
koa连接mysql数据库并进行简单增删改查
福小娟儿的博客
02-23 1150
连接数据库 初级菜鸟，为图方便暂时在路由中配置数据库未使用连接池 ，路由文件 const mysql = require('mysql') //引入数据库插件 const koaRouter = require('koa-router'); const router = koaRouter(); //连接数据库 const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '123456
koa2 mysql增删改查_koa2实现对mysql的增删改查函数封装
weixin_35997503的博客
01-19 253
// 项目开始先造一个简单的node服务器server.js：const Koa = require(‘koa‘);const Path= require(‘path‘);const Static= require(‘koa-static‘);const KoaBody= require(‘koa-body‘)();const Route= require(‘./router/router‘);c...
koa连接mysql怎么做_koa-连接mysql数据库
weixin_31272749的博客
01-27 582
koa-连接mysql数据库安装数据库插件npm install mysql -sdefault.js编写：// 数据库配置const config = {port: 3000, // koa运行端口database:{DATABASE: '****', //数据库USERNAME: '****', //用户PASSWORD: '****', //密码PORT: '3306'...
koa2+mysql实现简单的登陆注册
itKingOne的博客
04-30 4109
先附上源码地址：https://github.com/zj0715zh/koa2-mysql 有兴趣的可以下载看看，那么现在我们进入正题： 什么是koa框架？ koa是一个基于node实现的一个新的web框架，它是由express框架的原班人马打造的。它的特点是优雅、简洁、表达力强、自由度高。它更express相比，它是一个更轻量的node框架，因为它所有功能都通过插件实现。 关...
Koa操作MySQL
weixin_44813858的博客
09-23 915
Koa操作Mysql
Node-Koa-Mysql
最新发布
weixin_48242059的博客
08-12 879
推出koa的最大原因是如果需要处理异步任务，express中间件如果处理异步任务，洋葱模型会被打破，koa能够处理异步任务，并保证代码的执行顺序，koa更加简洁，核心代码仅1600多行，很多框架都趋于这种方式，更简洁，可扩展，就像vue2早期社区内部还封装了网络请求，后面被去除，建议我们使用axios来发送网络请求。如果遇到关键字作为表名或者字段名称，可以使用``来包裹。主键primary key，区分唯一性，主键是表中唯一的索引，也可以设置多列索引，主键的字段应该与业务无关，应该是not null。
使用Koa和Mongoose实现NodeJS增删改查接口教程
"本文将介绍如何使用Koa和Mongoose框架在Node.js环境中实现基本的CRUD（创建、读取、更新、删除）接口。Koa是一个轻量级的Web应用框架，而Mongoose则是用于MongoDB的数据建模工具。通过结合这两个库，可以轻松地构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值