从零一起学koa2(9)---实战1备忘录

这个实战主要是为了练习一下MySQL的增删查改。点击这里clone下载。

前言

这是一个前后端分离的小项目，前端就是用vue-cli写的一个非常简单的界面。生成的静态文件在dist文件夹中。后端是用koa2实现的api接口，主要就是对数据库的增删查改。

数据库

我是新建了一个koaDemo数据库，当然也可以用其他的。

create database koaDemo;
use koaDemo;

然后创建了一个表，表结构也很简单，一个自增的id主键，things存memo的内容，status为0表示事情未完成，为1表示事情已完成。

create table if not exists memo(
id INT NOT NULL AUTO_INCREMENT,
things VARCHAR(100) NOT NULL,
status TINYINT NOT NULL,
PRIMARY KEY ( id ));

koa2代码

设置静态文件的路径。

const staticPath = './dist'
 
app.use(static(
  path.join( __dirname,  staticPath)
))

连接数据库，创建数据连接池。

let config = {
    host     : 'localhost',
    user     : 'root',
    password : '123456',
    database : 'koaDemo',
    port:3306,
    multipleStatements: true//允许多条sql同时执行
};
let pool = mysql.createPool(config);
let query = (sql) => {
    return new Promise((resolve, reject) => {
        pool.getConnection((err, connection) => {
            if (err) {
                reject(err)
            } else {
                connection.query(sql, (err, rows) => {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(rows)
                    }
                    connection.release()
                })
            }
        })
    })
};

使用query对数据库进行操作（put操作为例）。

if(ctx.url=='/api/updateMemo' && ctx.method=='PUT'){
        let putData = ctx.request.body;
        let sql = 'update memo set status=1 where things="'+putData.things+'"';
        await query(sql).then(res => {
            ctx.body={
                status:true
            };
        }).catch(e => {
            console.log(e)
            ctx.body={
                status:false
            };
 }

前端代码

前端代码比较简单，主要是调用koa2提供的api来操作数据库，例如读取备忘录列表代码：

created(){
    this.$http.get('/api/getMemo')
    .then((res) => {
      if (res.status === 200) {
        this.items = res.data.items;
        this.itemsFinished = res.data.itemsFinished;
      } else {
        this.$message.error('获取列表失败！')
      }
    }, (err) => {
      this.$message.error('连接数据库失败！')
      console.log(err)
    })
  },

完整代码在这里。