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>
|