利用WEX5的BAAS修改的登录实例和简单通讯录实例（Java）

biyaooo · 发表于 2015-5-19 07:27:40

本帖最后由 biyaooo 于 2015-5-19 07:42 编辑

并不熟悉JAVA语言和编程思路，很多地方安全性和逻辑性没有过多考虑（比如没有做MD5之类的加密），仅仅是提供给新人一些思路。通讯录的电话号码，用WEX5最新版本做的，打包后，测试是能直接调用拨打电话的界面。

QQ图片20150519074137.jpg

login.w

<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;">
<div component="$UI/system/components/justep/model/model" xid="model1" style="width:143px;height:auto;left:14px;top:443px;" onLoad="model1Load">
<div component="$UI/system/components/justep/data/data" autoLoad="true" xid="userData" idColumn="fID" autoNew="false" confirmRefresh="false">
<column label="fID" name="fID" type="Integer" xid="default1"></column>
<column label="username" name="username" type="String" xid="default1"></column>
<column label="userpass" name="password" type="String" xid="default2"></column>
<column label="Sname" name="sbrand" type="String" xid="default3"></column>
<column label="Sarea" name="shopname" type="String" xid="default4"></column>
<column label="Sbrand" name="brandsort" type="String" xid="default5"></column>
<column label="Spower" name="smarket" type="String" xid="default6"></column>
<column label="Sdepartment" name="sarea" type="String" xid="default7"></column>
<column label="city" name="city" type="String" xid="default8"></column>
<column label="mcity" name="mcity" type="String" xid="default9"></column>
<column label="scity" name="scity" type="String" xid="default10"></column></div>
</div>
<span component="$UI/system/components/justep/messageDialog/messageDialog" xid="messageDialog" style="left:13px;top:415px;"></span><div component="$UI/system/components/justep/contents/contents" class="x-contents x-full" active="0" xid="contents1">
<div class="x-contents-content" xid="content1" style="background-image:url(img/loginbg4.jpg);"><div xid="div1" style="margin:10px 50px 0px 50px;" align="center"><img src="img/logo.png" alt="" xid="image1" height="150"></img>
</div>
<div class="form-vertical" component="$UI/system/components/bootstrap/form/form" xid="form1"><div xid="div12" class="form-group" style="margin-right:auto;margin-left:auto;width:95%;">
<label xid="label4" class="sr-only"><![CDATA[用户名]]></label>
<div xid="div14" class="input-group"><div xid="div15" class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input component="$UI/system/components/justep/input/input" class="form-control" xid="username" placeHolder="请输入用户名" autoFocus="true"></input></div></div><div xid="div13" class="form-group" style="margin-right:auto;margin-left:auto;width:95%;"> <label xid="label5" class="sr-only"><![CDATA[密码]]></label>
<div xid="div16" class="input-group"><div xid="div17" class="input-group-addon"><span class="glyphicon glyphicon-edit"></span></div>
<input component="$UI/system/components/justep/input/password" class="form-control" xid="password" placeHolder="请输入密码"></input>
</div></div></div><div component="$UI/system/components/justep/row/row" class="x-row" xid="row4">
<div class="x-col" xid="col10" style="text-align:center;"><a component="$UI/system/components/justep/button/button" class="btn btn-success btn-block" label="登录系统" xid="button1" onClick="btnCheckUserLogin">
<i xid="i1"></i>
<span xid="span1">登录系统</span></a>
</div>
</div><div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
<div class="x-col" xid="col2"><div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30" xid="labelToggle2">
<label class="x-label" xid="label3" style="text-align:center;"><![CDATA[记住密码]]></label>
<span component="$UI/system/components/justep/button/toggle" class="x-toggle x-edit" xid="toggle1" ON="开启" OFF="关闭"></span></div></div>
</div>
<div xid="div3" style="margin:50px 20px 50px 20px;height:50px;text-align:center;"><span xid="span2"><![CDATA[ © Biyao]]></span>
</div>
</div></div>
</div>

复制代码

login.js

define(function(require){
var $ = require("jquery");
var Baas = require("$UI/blshopApp/JS/baas");
require("$UI/system/lib/cordova/cordova");
require("cordova!org.apache.cordova.device");
var Model = function(){
this.callParent();
};
Model.prototype.btnCheckUserLogin = function(event){
var self = this;
var userData = this.comp("userData");
//用户名和密码为空提示
if ( $.trim(this.comp('username').val()) === "" || $.trim(this.comp('password').val()) === "") {
this.comp("messageDialog").show({
"title" : "温馨提示",
"message" : "忘记输入用户名或密码?"
});
}
else
{
var params = {
"username":this.comp('username').val(),
"password":this.comp('password').val()
};
// 请求成功后的回调方法
var success = function(resultData) {
userData.loadData(resultData);
userData.refreshData();
if (userData.val('username')&&userData.val('password')) {
localStorage.setItem('username',userData.val('username'));
localStorage.setItem('password',userData.val('password'));
localStorage.setItem('sbrand',userData.val('sbrand'));
localStorage.setItem('brandsort',userData.val('brandsort'));
localStorage.setItem('smarket',userData.val('smarket'));
if(self.comp('toggle1').val()===true) //如果记住密码选中,登录成功则将用户名和密码保存到localStorage中
{
localStorage.setItem('un',userData.val('username'));
localStorage.setItem('pw',userData.val('password'));
localStorage.setItem('remeberMe',true);
}else //否则不存储localStorage
{
localStorage.removeItem("un");
localStorage.removeItem("pw");
localStorage.removeItem('remeberMe');
}
window.location.href="./index.w"; //登录成功，跳转到APP首页
}else
{
self.comp("messageDialog").show({
"title" : "温馨提示",
"message" : "输入的用户名或密码不正确!"
});
}
};
// 发送请求
Baas.sendRequest({
"url" : "/blshop", // servlet请求地址
"action" : "queryUserInfo", // action
"params" : params, // action对应的参数
"success" : success // 请求成功后的回调方法
});
}
};
Model.prototype.model1Load = function(event){
if(localStorage.getItem('remeberMe')){
var username = localStorage.getItem('un') ;
var password = localStorage.getItem('pw') ;
this.comp("username").set({value:username});
this.comp("password").set({value:password});
this.comp("toggle1").set({value:true});
}
};
return Model;
});

复制代码

biyaooo · 发表于 2015-5-19 07:32:53

本帖最后由 biyaooo 于 2015-5-19 18:27 编辑

后端利用Baas添加的 queryUserInfo动作代码

private static void queryUserInfo(ServletRequest request, ServletResponse response) throws SQLException, IOException, NamingException {
// 参数序列化
JSONObject params = (JSONObject) JSONObject.parse(request.getParameter("params"));
// 获取参数
Object columns = params.get("columns"); // 列定义
Integer limit = params.getInteger("limit"); // 分页查询的行数
Integer offset = params.getInteger("offset"); // 分页查询的行偏移
String username = params.getString("username"); // 分页查询的行数
String password = params.getString("password"); // 检索关键字
//System.out.println(password);
// 存放SQL中的参数值
List<Object> sqlParams = new ArrayList<Object>();
// 存放SQL中的过滤条件
List<String> filters = new ArrayList<String>();
filters.add("username = ? and password =?");
sqlParams.add(username);
sqlParams.add(password);
Table table = null;
// 获取数据源连接
Connection conn = Util.getConnection(DATASOURCE_BLSHOPAPP);
try {
// 执行单表数据查询，返回Table
table = Util.queryData(conn, TABLE_APP_USER, columns, filters, "fID DESC", sqlParams, offset, limit);
} finally {
// 必须关闭数据源连接
conn.close();
}
// 输出Table做为返回结果，这里会自动转换为Table的JSON格式
Util.writeTableToResponse(response, table);
}

复制代码

通讯录加载对应的JS代码 Content3.js

Model.prototype.addresslistDataCustomRefresh = function(event){
var data = event.source;
//alert(Baas.getDataColumns(data));
// 构造请求参数
var params = {
// 列定义
// "columns" : data.getColumnIDs(),
// 应从前端传入完整列定义（Baas.getDataColumns(data)），以解决oracle等数据库不区分date、time、datetime，导致的数据格式转换问题；
// 服务端兼容了以前只传入列名字符串（data.getColumnIDs()）的写法，但是已不再推荐。
//"columns" : Baas.getDataColumns(data),
// 分页信息 - 行数
"limit" : event.limit,
// 分页信息 - 行偏移
"offset" : event.offset,
// 检索关键字
"search" : this.getElementByXid("addressInput").value
};
// 请求成功后的回调方法
var success = function(resultData) {
// 通过event.options.append判断数据是否增量加载
var append = event.options && event.options.append;
// 加载返回数据到data
data.loadData(resultData, append);
};
// 发送请求
Baas.sendRequest({
"url" : "/blshop", // servlet请求地址
"action" : "queryAddressList", // action
"params" : params, // action对应的参数
"success" : success // 请求成功后的回调方法
});
};

复制代码

通讯录的代码，我的程序分了4个Content，我只把通讯录里面Content的代码贴出来

Content3.w

<div class="x-contents-content" xid="content4"><div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="panel3">
<div class="x-panel-top" xid="top3">
<div component="$UI/system/components/justep/row/row" class="x-row" xid="row3">
<div class="x-col" xid="col15">
<div class="input-group" component="$UI/system/components/bootstrap/inputGroup/inputGroup" xid="inputGroup2">
<input type="text" class="form-control" component="$UI/system/components/justep/input/input" xid="addressInput" onChange="{operation:'addresslistData.refresh'}"></input>
<div class="input-group-btn" xid="div6">
<a component="$UI/system/components/justep/button/button" class="btn x-black btn-only-icon" label="button" xid="button10" icon="icon-android-search" onClick="{operation:'addresslistData.refresh'}">
<i xid="i3" class="icon-android-search"></i>
<span xid="span3"></span></a> </div> </div> </div> </div> </div>
<div class="x-panel-content" xid="content7">
<div class="x-scroll" component="$UI/system/components/justep/scrollView/scrollView" xid="scrollView1">
<div class="x-content-center x-pull-down container" xid="div7">
<i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i16"></i>
<span class="x-pull-down-label" xid="span5">下拉刷新...</span></div>
<div class="x-scroll-content" xid="div16">
<div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="addresslistData" limit="-1">
<ul class="x-list-template" xid="listTemplateUl1">
<li xid="li1">
<div component="$UI/system/components/justep/row/row" class="x-row" xid="row2" style="padding:0px">
<div class="x-col" xid="col12">
<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelOutput1" style="margin:0px">
<label class="x-label" xid="label2"><![CDATA[姓名：]]></label>
<div component="$UI/system/components/justep/output/output" class="x-output x-edit" xid="output5" bind-ref="ref('name')"></div></div></div>
<div class="x-col" xid="col13">
<label xid="label5"><![CDATA[电话：]]></label>
<a xid="a1" bind-text="ref('phone')" data-bind="attr:{href:'tel:'+val('phone')}"><![CDATA[]]></a></div>
</div>
<div component="$UI/system/components/justep/row/row" class="x-row" xid="row5">
<div class="x-col" xid="col16" style="padding:0px;border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:#15800D;"><div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelOutput3" style="margin:0px">
<label class="x-label" xid="label4" style="background-color:transparent;"><![CDATA[通讯地址：]]></label>
<div component="$UI/system/components/justep/output/output" class="x-output x-edit" xid="output7" bind-ref="ref('address')"></div></div></div>
</div></li> </ul> </div>
</div>
<div class="x-content-center x-pull-up" xid="div5">
<span class="x-pull-up-label" xid="span17">加载更多...</span></div> </div> </div> </div></div>

复制代码

biyaooo · 发表于 2015-5-19 07:29:29

本帖最后由 biyaooo 于 2015-5-19 18:27 编辑

后端Baas添加的 Java代码

private static void queryAddressList(ServletRequest request, ServletResponse response) throws SQLException, IOException, NamingException {
// 参数序列化
JSONObject params = (JSONObject) JSONObject.parse(request.getParameter("params"));
// 获取参数
Object columns = params.get("columns"); // 列定义
Integer limit = params.getInteger("limit"); // 分页查询的行数
Integer offset = params.getInteger("offset"); // 分页查询的行偏移
String search = params.getString("search"); // 检索关键字
// 存放SQL中的参数值
List<Object> sqlParams = new ArrayList<Object>();
// 存放SQL中的过滤条件
List<String> filters = new ArrayList<String>();
if (!Util.isEmptyString(search)) {
// 增加过滤条件
filters.add("name LIKE ? OR phone LIKE ? OR address LIKE ? OR sort LIKE ?");
// 检索关键字中如果没有%，则前后自动加%
search = (search.indexOf("%") != -1) ? search : "%" + search + "%";
// sqlParams的参数个数和顺序必须与过滤条件的?相匹配
for (int i = 0; i < 4; i++) {
sqlParams.add(search);
}
}
Table table = null;
// 获取数据源连接
Connection conn = Util.getConnection(DATASOURCE_BLSHOPAPP);
try {
// 执行单表数据查询，返回Table
table = Util.queryData(conn, TABLE_APP_ADDRESS, columns, filters, "fID DESC", sqlParams, offset, limit);
} finally {
// 必须关闭数据源连接
conn.close();
}
// 输出Table做为返回结果，这里会自动转换为Table的JSON格式
Util.writeTableToResponse(response, table);
}

复制代码

biyaooo · 发表于 2015-5-19 07:31:20

本帖最后由 biyaooo 于 2015-5-19 18:28 编辑

占位！

pea2014 · 发表于 2015-5-19 09:11:26

很好很实用！赞一个！

luo123xj123 · 发表于 2015-5-19 11:32:21

想收藏，可是找不到收藏地方啊
找到了

tanshikao88 · 发表于 2015-5-19 15:59:01

很不错，加油！！！

luo123xj123 · 发表于 2015-5-27 17:01:21

哪一部分是前台填写的账号密码与后台数据库里的账号密码进行校验的部分呢？
我改了之后总是返回null

biyaooo · 发表于 2015-5-27 19:32:27

luo123xj123 发表于 2015-5-27 17:01
哪一部分是前台填写的账号密码与后台数据库里的账号密码进行校验的部分呢？
我改了之后总是返回null ...

queryUserInfo

luo123xj123 · 发表于 2015-5-27 19:35:47

能加你个qq 吗？我这里还是调不通，想请教一下。我的是895919745.谢谢了

		自动登录	找回密码
密码			注册

利用WEX5的BAAS修改的登录实例和简单通讯录实例（Java）

评分