这个实战主要是为了练习一下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)
})
},