前言
一些技术或者功能的使用,经常是需要翻阅多个文档才能得到想要的答案。故整理成文档,一条线下来从基础概念到简单使用,方便有需要的人查阅。
首先会展示 目标(效果)
来让你了解该篇内容要达到什么样的使用情况,其次会告诉你通过什么样的过程达到该 目标
,最后会整理过程中遇到的 常见问题
及解决方法,也欢迎各位能把遇到的问题和解决方案私信让我补充上去,感谢!
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 即可看到效果