webturing
/
ChineseHandWritingApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!DOCTYPE html>
<html lang="zh-cn">
<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>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.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" value="重庆大学">
    <button onclick=query()>检索</button>
    <div id="screen">
        <div id="row0"></div>
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
        <div id="row4"></div>
        <div id="row5"></div>
        <div id="row6"></div>
        <div id="row7"></div>
        <div id="row8"></div>
        <div id="row9"></div>
    </div>


</div>


<script>

    function query() {
        var key = document.getElementById('key').value;

       // alert(key);
        for(let i=0;i<10;i++)
        $('#row'+i).empty();

        axios.get("database/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);
                    for(let j=0;j<obj.length;j++)
                    {

                        $('#row'+j).append('<img width="100" height="100" src=res/'+obj[j].font+"_"+obj[j].time+"_"+obj[j].author+'_'+obj[j].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>