【Koa】五分钟入手Koa2增删查改

Bertha 。 2022-11-15 12:29 89阅读 0赞

# 前言 #

一些技术或者功能的使用，经常是需要翻阅多个文档才能得到想要的答案。故整理成文档，一条线下来从基础概念到简单使用，方便有需要的人查阅。

首先会展示 `目标（效果）` 来让你了解该篇内容要达到什么样的使用情况，其次会告诉你通过什么样的过程达到该 `目标` ，最后会整理过程中遇到的 `常见问题` 及解决方法，也欢迎各位能把遇到的问题和解决方案私信让我补充上去，感谢！

--------------------

# 1. 目标 #

1）搭建 Koa 初始框架

2）Koa 连接数据库增删改查

最终目录结构如下

> node\_modules
> 
> router
> 
> > index.js
> > 
> > user.js
> 
> utils
> 
> > db.js
> 
> app.js
> 
> package-lock.json
> 
> package.json
> 
> yarn.lock

# 2. 过程 #

## 2.1 Koa2 的安装 ##

1）新建空文件夹，进入到 VSCode 中

2）进入终端管理器，初始化项目

npm init -y

3）安装 Koa2

cnpm i koa2 -S

## 2.2 入口文件 ##

1）与 `package.json` 同级目录下新建文件夹 `app.js`

2）编写如下代码

> app.js

// 1.引入
    const Koa = require('koa2');
    
    // 2.声明实例
    const app = new Koa();
    
    // 3.抛出内容
    app.use(async (ctx, next) => { 
      ctx.body = 'Hello Koa'
    })
    
    // 4.监听端口
    const port = 5050;
    app.listen(port, () => { 
      console.log('Server is running at http://localhost:' + port)
    })

3）在 `package.json` 中配置启动命令，之后便可通过 `node start` 启动项目

{ 
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node app.js"
      }
    }

4）终端输入 `npm start` 启动项目

显示 `Server is running at http://localhost:5050` 即说明启动成功，此时进入 http://localhost:5050 即可看到页面显示 `Hello Koa`

## 2.3 安装路由 ##

1）安装路由

cnpm i koa-router

2）引入路由

> app.js

// 1.引入
    const Koa = require('koa2');
    const Router = require('koa-router');
    
    // 2.声明实例
    const app = new Koa();
    const router = new Router();
    
    // 3.抛出内容
    router.get('/first', async (ctx, next) => { 
      ctx.body = 'First router'
    })
    
    // 4.调用router中间件
    app.use(router.routes(), router.allowedMethods())
    
    // 5.监听端口
    const port = 5050;
    app.listen(port, () => { 
      console.log('Server is running at http://localhost:' + port)
    })

备注：

app.use(router.routes(), router.allowedMethods())
    
    // router.routes() 用于组装匹配好的路由，返回一个中间件
    // router.allowedMethods() 允许调用所有方法

3）`npm start` 启动项目

进入 `http://localhost:5050/first` 即可看到页面展示内容 `First router`

## 2.4 路由拆分 ##

将路由放在统一的文件夹中，方便维护

1）在 `app.js` 同级目录下，建立 `router` 文件夹及子文件，目录结构如下

- router
    ---- index.js
    ---- user.js
    - app.js
    - package.json

2）`user.js` 作为业务逻辑模块进行抽取，编写如下内容

> user.js

// 1.引入
    const Router = require('koa-router');
    
    // 2.声明实例
    const user = new Router();
    
    // 3.抛出内容
    user.get('/', async (ctx, next) => { 
      ctx.body = '用户-首页'
    })
    user.get('/list', async (ctx, next) => { 
      ctx.body = '用户-列表'
    })
    
    // 4.导出本模块
    module.exports = user

备注：

user.get('/', ...)
    
    // '/'代表当前路径，如在 user.js 中加入斜杠，则表示当前路径为：http://localhost:5050/user

3）`index.js` 作为入口文件，编写如下内容

> index.js

// 路由入口文件
    // 1.引入
    const Router = require('koa-router');
    const user = require('./user')
    
    // 2.声明实例
    const router = new Router();
    
    // 3.调用路由中间件
    router.use('/user',user.routes(), user.allowedMethods())
    
    // 4.导出路由模块
    module.exports = router

4）`app.js` 调用入口文件，内容如下

> app.js

// 1.引入
    const Koa = require('koa2');
    const router = require('./router/index')
    
    // 2.声明实例
    const app = new Koa();
    
    // 3.调用router入口文件中间件
    app.use(router.routes(), router.allowedMethods())
    
    // 5.监听端口
    const port = 5050;
    app.listen(port, () => { 
      console.log('Server is running at http://localhost:' + port)
    })

5）启动项目并访问

输入 `http://localhost:5050/user` 将看到内容 `用户-首页`

输入 `http://localhost:5050/user/list` 将看到内容 `用户-列表`

如上便是模拟了前端访问不同接口时，返回的不同数据的情况

## 2.5 连接MySQL数据库 ##

假设当前已有 MySQL 数据库，用户名为 root，密码为 123456，数据库为 node\_test ，端口号为 3306，连接的操作如下：

1）安装 mysql 依赖

yarn add mysql

2）与 `package.json` 同级目录下， 新建 `utils` 文件夹及子文件 `db.js`

3）在 `db.js` 中编写代码如下

> db.js

// 1.引入
    const db = require('mysql')
    
    // 2.创建连接池
    let pool = db.createPool({ 
      host: 'localhost',
      port: '3306',
      database: 'node_test',
      user: 'root',
      password: '123456'
    })
    
    // 3.增删查改操作
    function query (sql, callback) { 
      pool.getConnection((err, connection) => { 
        connection.query(sql, (err, rows) => { 
          callback(err, rows)
          // 中断连接
          connection.release()
        })
      })
    }
    
    // 4.导出增删改查方法
    exports.query = query

## 2.6 数据库增删改查（只展示增、查，删改同理） ##

> 作如下操作前，记得先将 MySQL 服务开启
> 
> 然后打开 Navicat 连接 MySQL 后继续如下操作

### 2.6.1 增 ###

假设在 `node_test` 数据库中，已有表 `user`， 表中的数据结构如下

*  username: varchar
 *  userid: int
 *  password: varchar

1）在对应的业务路由中引入 `db.js`，以 `user.js` 为例

> user.js

const DB = require('../utils/db')
    // ...省略其他代码

2）编写数据库语句

insert into user values ('user5',5,'5')

3）调用 `db.js` 中的 `query` 方法

> user.js

// 1.引入
    const Router = require('koa-router');
    const DB = require('../utils/db')
    
    // 2.声明实例
    const user = new Router();
    
    // 3.抛出内容
    user.put('/addUser', async (ctx, next) => { 
      let sql = "insert into user values ('user5',5,'5')"
      // (err, data) 要么报错，要么返回正常的数据
      DB.query(sql, (err, data) => { 
        if (err) throw err;
        console.log('data', data)
      })
    })
    
    // 4.导出本模块
    module.exports = user

4）启动项目

5）使用 `postman` 接口测试工具，输入路径 `http://localhost:5050/user/addUser`， 方法为 `put`

当看到 koa 项目的控制台出现如下情况则表示新增成功

data OkPacket { 
      fieldCount: 0,
      affectedRows: 1,
      insertId: 0,
      serverStatus: 2,
      warningCount: 0,
      message: '',
      protocol41: true,
      changedRows: 0
    }

### 2.6.2 查 ###

1）在 `user.js` 中编写如下代码

注意 查找的方法中，需要加 `Promise` 的原因是：页面内容可能在数据库还未返回数据时就进行展示，因此需要设置异步来等待数据库返回数据后，再进行展示。

// 1.引入
    const Router = require('koa-router');
    const DB = require('../utils/db')
    
    // 2.声明实例
    const user = new Router();
    
    // 3.抛出内容
    // 新增
    user.put('/addUser', async (ctx, next) => { 
      let sql = "insert into user values ('user5',5,'5')"
      DB.query(sql, (err, data) => { 
        if (err) throw err;
        console.log('data', data)
      })
    })
    
    // 查找
    user.get('/list', async (ctx, next) => { 
      let result = await new Promise((resolve, reject) => { 
        let sql = "select * from user where userid=5"
        return DB.query(sql, (err, data) => { 
          if (err) throw err;
          resolve(data)
        })
      })
      ctx.body = result
    })
    
    // 4.导出本模块
    module.exports = user

2）启动项目，打开 `http://localhost:5050/user/list` 即可查看到内容

[{ "username":"user5","userid":5,"password":"5"}]

# 3. 常见问题 #

## 3.1 后端配置允许跨域 ##

1）安装 `cors` 依赖

npm i koa2-cors

2）`app.js` 中编写如下代码

const cors = require('koa2-cors')
    
    // 注意：cors中间件必须写在router中间件之前
    app.use(cors())
    app.use(router.routes(), router.allowedMethods())

## 3.2 路由重定向 ##

假如要默认指定路径为 `/user`，也就是当访问 `localhost:5050` 时自动跳转到 `localhost:5050/user` 该如何做？

在 `router/index.js` 中编码如下：

router.use('/user', user.routes(), user.allowedMethods())
    ...
    router.redirect('/','user')

# 4. 补充 #

## 使用 sequelize 对象映射 ##

官方文档：[sequelize官方文档][sequelize]

原本需要手写 SQL，改成类似于 springboot 中的 myBatis-plus ，使用 findOne、findAll 语法来进行查询

**效果**  
![在这里插入图片描述][20210408162319626.png]

1）安装 sequelize

npm install sequelize --save

2）根目录下，新建 models 文件夹

> models/sequelize.js

var Sequelize = require('sequelize')
    var sequelize = new Sequelize({ 
      host: 'localhost',
      database: 'node_test',
      username: 'root',
      dialect: 'mysql',
      password: '123456',
      define: { 
        // 用自己指定的表名来映射对象
        freezeTableName: true
      }
    });
    module.exports = sequelize;

3）建立对象映射模型  
![在这里插入图片描述][20210408162336783.png]

> models/user.js

var sequelize = require('./sequelize');
    var Sequelize = require('sequelize')
    var User = sequelize.define('user', { 
      userid: { 
        type: Sequelize.INTEGER,
        primaryKey: true
      },
      username: Sequelize.STRING(255),
      password: Sequelize.STRING(255)
      // models中无需指定 createAt & updateAt, sequelize会自行处理
    }, { 
      tableName: 'user'
    })
    module.exports = User;

4）编写查询逻辑

> router/user.js

// 1.引入
    const Router = require('koa-router');
    const DB = require('../utils/db')
    // 使用sequelize
    const User = require('../models/user')
    const {  Op } = require("sequelize");
    // 2.声明实例
    const user = new Router();
    // 3.抛出内容
    user.get('/list', async (ctx, next) => { 
      // ---------------------- 使用 sequelize 进行查询 ----------------------
      try { 
        // 1.查找单个 - findOne返回单个数据
        // let result = await User.findOne({ 
        // where: { 
        // userid: 5
        // }
        // })
        // ctx.body = result.dataValues
        // 2.查找多个 - findAll返回数组
        let result = await User.findAll({ 
          where: { 
            [Op.and]: [
              {  userid: 1 },
              {  password: 123 }
            ]
          }
        })
        ctx.body = result
      } catch (err) { 
        console.log('err', err)
      }
      // ---------------------- 使用 sql 语句进行查询 ----------------------
      // let result = await new Promise((resolve, reject) => { 
      // let sql = "select * from user where userid=5"
      // resolve(user)
      // return DB.query(sql, (err, data) => { 
      // if (err) throw err;
      // resolve(data)
      // })
      // })
      // ctx.body = result
    })
    // 4.导出本模块
    module.exports = user

5）启动项目后进入浏览器，输入 localhost:5050/user/list 即可看到效果

[sequelize]: https://www.sequelize.com.cn/core-concepts/model-querying-basics
[20210408162319626.png]: /images/20221022/1296a76e99124a3dad4429008fc917df.png
[20210408162336783.png]: /images/20221022/22ad97835ee84b90bbf9161314755d6c.png