aardio学习记录-3.使用Vue+JSON实现aardio与HTML内容互动

最新推荐文章于 2024-08-08 07:28:59 发布

DexterLien

最新推荐文章于 2024-08-08 07:28:59 发布

阅读量4k

点赞数 1

文章标签： aardio

本文链接：https://blog.csdn.net/lpwmm/article/details/77888599

版权

aardio 专栏收录该内容

5 篇文章 8 订阅

订阅专栏

学习记录-2里面用的那套方法太过于复杂和紊乱了,正好刚研究了一下Vue.js发现用在aardio嵌入式HTML应用开发里面再好不过了,于是重新实现一下,代码更简洁,效率更高,结构也更清晰了

工程资源一览

这里写图片描述
因为所调用到的js库都直接用了CDN的链接,所以这次在工程资源里面并没有嵌入js文件,其实做离线应用的话还是嵌入进去比较好,这次就先这样用了,下面主要说一下核心文件的代码

main.aardio

创建工程时候自动生成的,不用修改

资源文件/database.db

sqlite数据库文件,还是原来的配方,还是熟悉的味道

HTML/main.aardio(HTML)

其实也就是程序主体HTML文件,这部分的代码如下,主要是在head里面增加对vue和jquery的引用,以及rside层里面使用vue模板的部分,还有最后script代码部分,其他css样式什么的都是程序自动生成的,不要在意这些细节~vue的使用参考这一篇学习日志Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
html, body {
    margin: 0;
    background: #fff;
    height: 100%;
}
* {
    -webkit-user-select: none;
}
/*标题栏*/
#header {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 28px;
    width: 100%;
    background: rgb(52,152,220);
    cursor: default;
}
/*中间内容栏*/
#container {
    box-sizing: border-box;/*使高度包含padding*/
    height: 100%;
    width: 100%;
    padding-top: 28px;
    padding-bottom: 35px;
    margin: 0 auto;
    overflow: auto;
}
/*底栏*/
#footer {
    height: 35px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: rgb(239,237,238);
    text-align: right;
    padding: 3px 5px;
    box-sizing: border-box;
}
/*中间内容栏 左侧列*/
#container .lside {
    height: 100%;
    width: 150px;
    float: left;
    background: rgb(110,179,210);
}
/*中间内容栏 右侧列*/
#container .rside {
    height: 100%;
    margin-left: 150px;
    background: #FFF;
    padding: 20px;
    box-sizing: border-box;
}
#footer button {
    padding: 4px 13px;
    font-size: 12px;
    background: rgb(27,174,93);
    color: white;
    border: 0;
}
#footer button:hover {
    background: rgb(33,127,188);
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    cursor: pointer;
}
#footer button:active {
    background: rgb(20,110,170);
    cursor: pointer;
}
#header .title-bar {
    margin-right: 75px;
    padding-left: 10px;
    height: 28px;
    line-height: 28px;
    font-size: 9pt;
    color: #eee;
}
#header .ctrls {
    width: 75px;
    height: 28px;
    float: right;
}
#header .ctrls a {
    display: block;
    float: left;
    height: 14px;
    font-family: "Marlett";
    font-size: 14px;
    padding: 4px;
    color: #fff;
    cursor: default;
}
#header .ctrls a[id]:hover {
    background: #6ebccf;
}
#header .ctrls a[id]:active {
    background: #FF0000;
}
</style>
<body>
<div id="header">
  <div class="ctrls"> <a id="window-min" onclick="windowCommand('min')">0</a> <a id="window-max" onclick="this.innerText = windowCommand('max')?'2':'1';">1</a> <a id="window-close" onclick="windowCommand('close')">r</a> </div>
  <div class="title-bar" onmousedown="windowCommand('drag')"> <span class=title> 我 的 软 件 </span></div>
</div>
<div id="container">
  <div class="lside"> </div>
  <div class="rside">
    <div id="main">
      <table border=1>
        <tr>
          <td>id</td>
          <td>name</td>
          <td>type</td>
          <td>location</td>
        </tr>
        <tr v-for="r in rows">
          <td>{{r.id}}</td>
          <td>{{r.name}}</td>
          <td>{{r.type}}</td>
          <td>{{r.location}}</td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div id="footer">
  <button onclick="javascript:external.aardioCall('hello')">点击这里调用external.aardioCall('hello') </button>
</div>
<script>
    $(document).ready(function () {
        $.getJSON("data/lawer.aardio", function (result, status) {
            var v = new Vue({
                el: '#main',
                data: {
                    rows: result
                }
            })
        });
    });
</script>
</body>
</html>

HTML/data/lawer.aardio

这个文件其实是用aardio实现了类似php返回json格式数据的功能,相当于直接在程序内部进行了数据的处理和json格式化输出过程,在上一个文件的script中,getJSON方法直接调用的url就是data/lawer.aardio这种形式,很方便的,代码如下,一共就5行,就实现了从数据库中执行sql查询并输出成json格式字符串,so easy~

import sqlite;
import web.json;

var db=sqlite("\res\database.db");
var result=db.getTable("SELECT * FROM lawer");
print(web.json.stringify(result,true));