|
|
@@ -0,0 +1,154 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>sqlite数据库测试</title>
|
|
|
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
+ <script src="https://cdn.bootcss.com/sql.js/0.5.0/js/sql-optimized.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ color: darkslateblue;
|
|
|
+ background-color: papayawhip;
|
|
|
+ font-family: "Al Bayan";
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ input {border-color: darkslateblue;
|
|
|
+ height: 40px;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ color: darkslateblue;
|
|
|
+ background-color: lavender;
|
|
|
+ height: 40px;
|
|
|
+ width: 80px;
|
|
|
+ font-size: larger;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<br>
|
|
|
+
|
|
|
+
|
|
|
+<div id="container">
|
|
|
+
|
|
|
+ <div id="header" style="background-color:#FFA500;">
|
|
|
+ <h1 style="margin-bottom:0;">Chinese Hand Writing</h1></div>
|
|
|
+
|
|
|
+
|
|
|
+ <div id="content" style="background-color:#EEEEEE;float:left;" style="text-align:center">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+<script></script>
|
|
|
+<div class="" style=" text-align:center;">
|
|
|
+
|
|
|
+ <h1>汉字手写</h1>
|
|
|
+ <input type="text" id="key">
|
|
|
+ <button onclick=query()>检索</button>
|
|
|
+ <br>
|
|
|
+ <img src="" alt="0000" id="img0" sizes="100">
|
|
|
+ <img src="" alt="1111" id="img1" sizes="100">
|
|
|
+ <img src="" alt="2222" id="img2" sizes="100">
|
|
|
+ <img src="" alt="3333" id="img3" sizes="100">
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ function query() {
|
|
|
+ var key = document.getElementById('key').value;
|
|
|
+
|
|
|
+ // alert(key);
|
|
|
+
|
|
|
+
|
|
|
+ axios.get("chinese.db", {responseType: 'arraybuffer'})
|
|
|
+ .then(function (response) {
|
|
|
+ let db = new window.SQL.Database(new Uint8Array(response.data));
|
|
|
+ // 执行查询
|
|
|
+ for (let i=0;i<key.length;i++){
|
|
|
+ let sql="SELECT * FROM chinese WHERE font='"+key[i]+"'";
|
|
|
+ let r = db.exec(sql);
|
|
|
+ console.log(sql)
|
|
|
+ // 解析数据
|
|
|
+ let obj = dbToObj(r);
|
|
|
+
|
|
|
+ document.getElementById('img'+i).src='../res/'+obj[0].font+"_"+obj[0].time+"_"+obj[0].author+'_'+obj[0].type+'.png';
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(function (error) {
|
|
|
+ console.info(error);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 方法传入两个数组，第一个数组为key，第二个数组对应位置为value，此方法在Python中为zip()函数。
|
|
|
+ const ArraytoObj = (keys = [], values = []) =>
|
|
|
+ {
|
|
|
+ if (keys.length === 0 || values.length === 0) return {};
|
|
|
+ const len = keys.length > values.length ? values.length : keys.length;
|
|
|
+ const obj = {};
|
|
|
+ for (let i = 0; i < len; ++i) {
|
|
|
+ obj[keys[i]] = values[i]
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+
|
|
|
+ // 转驼峰表示：func.camel('USER_ROLE',true) => UserRole
|
|
|
+ // 转驼峰表示：func.camel('USER_ROLE',false) => userRole
|
|
|
+ const camel = (str, firstUpper = false) =>
|
|
|
+ {
|
|
|
+ let ret = str.toLowerCase();
|
|
|
+ ret = ret.replace(/_([\w+])/g, function (all, letter) {
|
|
|
+ return letter.toUpperCase();
|
|
|
+ });
|
|
|
+ if (firstUpper) {
|
|
|
+ ret = ret.replace(/\b(\w)(\w*)/g, function ($0, $1, $2) {
|
|
|
+ return $1.toUpperCase() + $2;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return ret;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+
|
|
|
+ // 把数组里面的所有转化为驼峰命名
|
|
|
+ const camelArr = (arrs = []) =>
|
|
|
+ {
|
|
|
+ let _arrs = [];
|
|
|
+ arrs.map(function (item) {
|
|
|
+ _arrs.push(camel(item));
|
|
|
+ });
|
|
|
+ return _arrs;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+
|
|
|
+ // 读取数据库
|
|
|
+ // 1.把columns转化为驼峰；
|
|
|
+ // 2.把columns和values进行组合；
|
|
|
+ const dbToObj = (_data = {}) =>
|
|
|
+ {
|
|
|
+ let _res = [];
|
|
|
+ _data.map(function (item) {
|
|
|
+ let _columns = camelArr(item.columns);
|
|
|
+ item.values.map(function (values) {
|
|
|
+ _res.push(ArraytoObj(_columns, values));
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return _res;
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
mac