wex5 ——— 前台界面展现数据库内容

本文主要介绍简单的前台界面与数据库链接，并展现其内容

链接数据库，配置数据源

一、建立数据库：

　　点击根目录下的启动MySQL管理工具

打开会话管理器，点击打开进去主界面

右击x5选择建立新的-->数据库

二、在studio中链接数据库

点击工具栏中的窗口 ——>首选项——>Studio配置——>数据源

点击增长，选择数据库类型，并添加相应信息，例如：

默认密码为x5，以后点击测试链接，提示链接成功以后，点击肯定，关闭弹窗

这个时候数据库已经加进来了，可是进去数据库的界面查看，并无新加的mytest数据库，是由于咱们尚未配置。

打开Baas下的db.config.m文件

将mytest勾选上，并保存关闭

此时切换到数据库界面，右击数据源刷新，会看到新增的mytest数据库出现了

此时能够双击mytest数据库对其进行编辑，添加表及数据等

新增服务与前台界面对接

一、在Baas下新建文件夹，在文件夹中新建服务，例如：

点击新建数据表Action，选择相应数据库与表

点击肯定，新增Action。这里包含了两个Action，一个为查询一个为保存。若是只须要展现数据，能够不勾选saveAction

二、前台页面显示数据：

在界面model中添加baasData数据组件，并选择该组件的tableName，在弹窗中选择本身新增的action点击肯定

在内容区域，添加展现数据的组件，并绑定其data属性

下面就是显示其具体数据：个人数据库中是一个user表，其中包含id，name,age。这里我只用一个span作展现，其余的能够本身发挥

添加span组件，并绑定其bind-text属性，在弹窗中选择须要显示的属性，这里我选择name。双击name，下面的文本域会出现相应的代码。注意：若是是$model.baasData1.val("name")，列表就会只循环数据库的第一条数据。这里应该是 $object.val("name")

到这里与数据库的初级链接已经实现。

三、最后在浏览器中查看：

在根目录中启动MySQL数据库，并使其保持打开状态，

右击Baas点击模型编译，

启动Tomcat，

右击前台界面选择用浏览器运行

结果：

与数据库中数据匹配。

至于数据的增删改，能够在当前页面中添加button组件，或者对其余组件绑定事件，在事件中对数据库中数据进行编辑。

若是须要对数据进行过滤显示，能够在数据组件的onBeforeRefresh事件中调用数据组件的 setFilter 方法：

this.comp("baasData1").setFilter("f1", "id= 1");

如图：

排序：this.comp("baasData1").setOrderBy("name", "asc");

 

 

 

自定义服务：

在以前Baas新建的文件夹下新建java文件

注意：java文件的名称要与服务文件名称同样，且首字母要大写

新建的java文件

在Zhyell中写 baasjava 按alt+/组合键，补全代码

鼠标放在JSONObject上，按ctrl+shift+o组合键 补全引用

此时能够自定义本身的方法：

其中代码的意思为：在控制台输出一串减号，接收前台传过来的abc参数并在控制台输出，往前台传一个值1000

方法建立完成后须要在服务中新建action与方法链接：

填写名称及须要调用的方法。注意第三个红框，第一个zhyell是文件夹的名称，第二个Zhyell是java文件的名称，第三个userlogin为java文件中的方法名，填写完成后保存。便可像以前前台界面调用后台action同样使用当前action。这里不在重复