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

前言

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

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

---

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官方文档

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

效果

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）建立对象映射模型

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 即可看到效果