UNI-APP 使用sqlite本地缓存数据处理 demo 增删
2021-09-09 本文已影响0人
开飞机的杰瑞
这篇文章是对上一篇的补充 demo
UNI-APP 使用sqlite数据库本地缓存
首要工作
引入 封装的 sqlite.js 地址传送门
源码
HTML
<template>
<view>
<view class="uni-divider uni-divider__content">Demo</view>
<button @click="openSQL">打开数据库</button>
<button @click="createTable">创建表</button>
<button @click="insertTableData">新增表数据</button>
<button @click="selectTableData">查询表数据</button>
<button @click="updateTableData">修改表数据</button>
<button @click="deleteTableData">按条件删除表数据</button>
<button @click="closeSQL">关闭数据库</button>
<view class="uni-divider__content" v-for="(item,index) in listData" :key='index'>
<view>名字:{{item.name}}</view>
<view>内容:{{item.content}}</view>
<view>时间:{{item.time}}</view>
</view>
</view>
</template>
js
<script>
// 引入封装的 sqlite
import DB from "@/common/sqlite.js";
export default {
data() {
return {
listData: []
};
},
onLoad() {
this.openSQL();
},
methods: {
// 打开数据库
openSQL() {
// 这个是查询有没有打开数据库
let open = DB.isOpen();
console.log("数据库状态", open ? "开启" : "关闭");
if (!open) {
DB.openSqlite()
.then(res => {
this.showToast("数据库已打开");
})
.catch(error => {
console.log("数据库开启失败");
});
}
},
// 关闭数据库
closeSQL() {
// 这个是查询有没有打开数据库
let open = DB.isOpen();
if (open) {
DB.closeSqlite()
.then(res => {
this.showToast("数据库已关闭");
})
.catch(error => {
this.showToast("数据库关闭失败");
});
}
},
// 创建表
createTable() {
let open = DB.isOpen();
if (open) {
this.openSQL();
let sql =
'"id" INTEGER PRIMARY KEY AUTOINCREMENT,"name" text,"content" text,"time" text';
// 创建表 DB.createTable(表名, 表的列)
DB.createTable("chat", sql)
.then(res => {
this.showToast("创建chat表成功");
})
.catch(error => {
this.showToast("创建表失败");
});
} else {
this.showToast("数据库未打开");
}
},
// 新增表数据
insertTableData() {
let open = DB.isOpen();
if (open) {
let arr = [{
name: '小明',
content: "你好呀"
},
{
name: '小红',
content: "HI"
}
]
arr.map(item => {
let time = this.formatDate(new Date().getTime());
let sql = `'${item.name}','${item.content}','${time}'`;
let condition = "'name','content','time'";
// 新增 DB.insertTableData(表名, 对应表头列的数据)
DB.insertTableData("chat", sql, condition)
.then(res => {
this.showToast("新增数据成功");
this.selectTableData();
})
.catch(error => {
console.log("失败", error);
});
})
} else {
this.showToast("数据库未打开");
}
},
// 查询表数据
selectTableData() {
let open = DB.isOpen();
if (open) {
// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
DB.selectTableData("chat")
.then(res => {
console.log("contact表数据", res);
this.listData = res;
})
.catch(error => {
console.log("查询失败", error);
});
} else {
this.showToast("数据库未打开");
}
},
// 修改表数据
updateTableData() {
let open = DB.isOpen();
if (open) {
let time = this.formatDate(new Date().getTime());
let data = `content = '我被修改了',time = '${time}'`;
// 修改表数据 DB.updateTableData(表名, 要修改的列名=修改后列值, 修改条件的列名, 修改条件的列值)
DB.updateTableData("chat", data, "name", "小明")
.then(res => {
this.showToast("更新chat表成功");
this.selectTableData();
})
.catch(error => {
console.log("修改失败", error);
});
} else {
this.showToast("数据库未打开");
}
},
// 删除表数据
deleteTableData() {
let open = DB.isOpen();
if (open) {
// 删除表 DB.deleteTableData(表名,查询条件列名,查询条件列值)
DB.deleteTableData("chat", "name", "小红")
.then(res => {
this.showToast("删除表数据成功");
this.selectTableData();
})
.catch(error => {
console.log("删除失败", error);
});
} else {
this.showToast("数据库未打开");
}
},
// 提示框
showToast: function(str) {
uni.showToast({
icon: "none",
title: str,
mask: true
});
},
// 时间戳转年月日
formatDate(data) {
let now = new Date(data);
var year = now.getFullYear(); //取得4位数的年份
var month =
now.getMonth() + 1 < 10 ?
"0" + (now.getMonth() + 1) :
now.getMonth() + 1;
var date = now.getDate() < 10 ? "0" + now.getDate() : now.getDate();
var hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
var minute =
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
var second =
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
return (
year +
"-" +
month +
"-" +
date +
" " +
hour +
":" +
minute +
":" +
second
);
}
}
};
</script>
这是自己弄了一个小demo，有什么错误可以指出来共同学习，共同进步。
