平台默认没有提供注册用户,是需要登录后到组织管理功能中添加的,如果要提供注册用户的功能参考如下:
本例是通过扩展空间修改的portal实现的,可以下载资源直接复制到model下使用
model
1.在登录页添加注册按钮和页面
/UI2/portal_X/base/login/login.w放了contents组件,添加两个content,并把contents组件上的下面属性都设置为false
wrap="false" swipe="false" slidable="false" routable="false"
把平台默认的登录块放到第一个content中,把在登录按钮旁边添加注册按钮
<div class="form-group">
<div component="$UI/system/components/justep/row/row" class="x-row"
xid="row2">
<div class="x-col" xid="col3">
<a component="$UI/system/components/justep/button/button"
class="btn btn-default btn-block" label="登录" xid="login" onClick="loginClick">
<i xid="i1"/>
<span xid="span1">登录</span>
</a>
</div>
<div class="x-col" xid="col4">
<a component="$UI/system/components/justep/button/button"
class="btn btn-primary btn-block" label="注册" xid="button1"
onClick="button1Click">
<i xid="i2"/>
<span xid="span2">注册</span>
</a>
</div>
</div>
</div>
注册按钮的onClick中实现条件到注册页
Model.prototype.button1Click = function(event) {
this.comp("contents1").to("content2");
};
在model中添加data,用来输入注册信息并且控制必填和约束信息,注意autoNew设置true,autoLoad设置为false
<div component="$UI/system/components/justep/data/data" autoLoad="false"
xid="register" idColumn="fID" autoNew="true" confirmDelete="false" confirmRefresh="false">
<column name="fID" type="String" xid="xid3"/>
<column name="fName" type="String" xid="xid4"/>
<column name="fCode" type="String" xid="xid5"/>
<column name="fPasssWord" type="String" xid="xid6"/>
<column name="fRpassWord" type="String" xid="xid7"/>
<column name="fMobilePhone" type="String" xid="xid8"/>
<column name="fMail" type="String" xid="xid9"/>
<column name="fSex" type="String" xid="xid10"/>
<rule xid="rule2">
<col name="fName" xid="ruleCol1">
<required xid="required1">
<expr xid="default2">true</expr>
<message xid="default3">用户名必须填写!</message>
</required>
</col>
<col name="fCode" xid="ruleCol2">
<required xid="required2">
<expr xid="default4">true</expr>
<message xid="default5">编码必须填写!</message>
</required>
</col>
<col name="fPasssWord" xid="ruleCol3">
<required xid="required3">
<expr xid="default6">true</expr>
<message xid="default7">密码必须填写!</message>
</required>
</col>
<col name="fRpassWord" xid="ruleCol4">
<constraint xid="constraint1">
<message xid="default8">密码与确认密码必须一致!</message>
<expr xid="default9">$row.val("fPasssWord") && $row.val("fRpassWord")?$row.val("fPasssWord") == $row.val("fRpassWord"):false</expr>
</constraint>
</col>
</rule>
</div>
添加选择性别的data
<div component="$UI/system/components/justep/data/data" autoLoad="true"
xid="sex" idColumn="fID">
<column name="fID" type="String" xid="xid1"/>
<column name="fSex" type="String" xid="xid2"/>
<data xid="default1">[{"fID":"0","fSex":"男"},{"fID":"1","fSex":"女"},{"fID":"3","fSex":"保密"}]</data>
</div>
在第二content页中布局注册页面,
<div class="x-contents-content" xid="content2">
<div xid="div1" style="text-align:center;" class="register-box">注册
<div xid="div2" class="form-container"/>
<div xid="div3" class="register-box-body">
<div class="form-horizontal container-fluid" component="$UI/system/components/bootstrap/form/form"
xid="form2">
<div class="form-group" xid="formGroup1">
<div class="col-sm-4" xid="col6">
<label class="control-label" xid="controlLabel1"><![CDATA[用户名]]></label>
</div>
<div class="col-sm-8" xid="col7">
<input component="$UI/system/components/justep/input/input" class="form-control"
xid="input1" bind-ref="$model.register.ref("fName")"/>
</div>
</div>
<div class="form-group" xid="formGroup2">
<div class="col-sm-4" xid="col11">
<label class="control-label" xid="controlLabel2"><![CDATA[编码]]></label>
</div>
<div class="col-sm-8" xid="col12">
<input component="$UI/system/components/justep/input/input" class="form-control"
xid="input2" bind-ref="$model.register.ref("fCode")"/>
</div>
</div>
<div class="form-group" xid="formGroup3">
<div class="col-sm-4" xid="col15">
<label class="control-label" xid="controlLabel3"><![CDATA[密码]]></label>
</div>
<div class="col-sm-8" xid="col16">
<input component="$UI/system/components/justep/input/password"
class="form-control" xid="password2" bind-ref="$model.register.ref("fPasssWord")"/>
</div>
</div>
<div class="form-group" xid="formGroup4">
<div class="col-sm-4" xid="col19">
<label class="control-label" xid="controlLabel4"><![CDATA[确认密码]]></label>
</div>
<div class="col-sm-8" xid="col20">
<input component="$UI/system/components/justep/input/password"
class="form-control" xid="password1" bind-ref="$model.register.ref("fRpassWord")"/>
</div>
</div>
<div class="form-group" xid="formGroup5">
<div class="col-sm-4" xid="col23">
<label class="control-label" xid="controlLabel5"><![CDATA[手机号]]></label>
</div>
<div class="col-sm-8" xid="col24">
<input component="$UI/system/components/justep/input/input" class="form-control"
xid="input4" bind-ref="$model.register.ref("fMobilePhone")"/>
</div>
</div>
<div class="form-group" xid="formGroup6">
<div class="col-sm-4" xid="col27">
<label class="control-label" xid="controlLabel6"><![CDATA[邮箱]]></label>
</div>
<div class="col-sm-8" xid="col28">
<input component="$UI/system/components/justep/input/input" class="form-control"
xid="input5" bind-ref="$model.register.ref("fMail")"/>
</div>
</div>
<div class="form-group" xid="formGroup8">
<div class="col-sm-4" xid="col35">
<label class="control-label" xid="controlLabel7"><![CDATA[性别]]></label>
</div>
<div class="col-sm-8" xid="col36">
<span component="$UI/system/components/justep/select/radioGroup"
class="x-radio-group" xid="radioGroup1" bind-ref="$model.register.ref("fSex")"
bind-itemset="sex" bind-itemsetValue="ref("fSex")" bind-itemsetLabel="ref("fSex")"/>
</div>
</div>
<div class="form-group" xid="formGroup7">
<div class="col-sm-12" xid="col5">
<span xid="span6" bind-click="span6Click"><![CDATA[已有帐号,马上登录]]></span>
</div>
</div>
<div class="form-group" xid="formGroup9">
<div class="col-sm-6" xid="col39">
<a component="$UI/system/components/justep/button/button"
class="btn btn-default" label="提交" xid="button2" onClick="button2Click">
<i xid="i4"/>
<span xid="span4">提交</span>
</a>
</div>
<div class="col-sm-6" xid="col40">
<a component="$UI/system/components/justep/button/button"
class="btn btn-default" label="重置" xid="button3" onClick="button3Click">
<i xid="i5"/>
<span xid="span5">重置</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
提交按钮的事件中,获取输入的信息,传给.j进行注册
Model.prototype.button2Click = function(event) {
var registerData = this.comp("register");
//判断必须和约束项是否正确
var isValid = registerData.isValid(true);
if (!isValid) {
throw new Error(registerData.getInvalidInfo(true));
} else {
//调用.j完成注册
$.ajax({
type : "POST",
url : "/x5/UI2/portal/base/login/register.j",
data : {
name : window.encodeURI(registerData.getValue("fName")),
code : window.encodeURI(registerData.getValue("fCode")),
passsWord : registerData.getValue("fPasssWord"),
mobilePhone : registerData.getValue("fMobilePhone"),
mail : registerData.getValue("fMail"),
sex : registerData.getValue("fSex")
},
dataType : "json",
success : function(data){
alert("注册成功");
},
error:function(data){
alert(data.responseText+","+"请重写填写");
}
});
}
};
重置按钮的事件中,删除当前输入的信息,重新填写
Model.prototype.button3Click = function(event) {
var registerData = this.comp("register");
registerData.deleteData();
registerData.newData();
};
span已有帐号,马上登录上点击跳转到登录页
Model.prototype.span6Click = function(event){
this.comp("contents1").to("content1");
};
用到的css定义如下:
.register-box-body {
background: #fff;
padding: 20px;
border-top: 0;
color: #666;
}
.register-box {
margin: 0 auto;
padding-top: 7%;
width: 420px;
}
x5的注册用户需要操作两个表,用sql语句必须麻烦,可以用平台提供的API完成,在/BIZ/SA_X/OPM/logic/action定义action调用API
aciton的定义如下:
<action name="registerAction" global="false" procedure="registerProcedure"> <label language="zh_CN">注册</label> <public name="name" type="String"></public> <public name="code" type="String"></public> <public name="password" type="String"></public> <public type="String" name="mobilePhone"></public> <public type="String" name="mail"></public> <public type="String" name="sex"></public> </action>
对应的registerProcedure的定义如下:
<procedure name="registerProcedure" code-model="/SA_X/OPM/logic/code" code="Register.register">
<parameter name="name" type="String"/>
<parameter name="code" type="String"/>
<parameter name="password" type="String"/>
<parameter name="mobilePhone" type="String"/>
<parameter name="mail" type="String"/>
<parameter name="sex" type="String"/>
</procedure>
对应的java代码的定义如下:
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.util.HashMap;
import com.justep.system.opm.OrgUtils;
import com.justep.system.opm.api.PersonHelper;
import com.justep.system.util.CommonUtils;
public class Register {
public static void register(String name, String code, String password, String mobilePhone, String mail, String sex) throws UnsupportedEncodingException {
String psnID = CommonUtils.createShortGUID();
String orgID = "Pr7jJWKeDqH7bTAFQID";
HashMap<String, Object> exts = new HashMap<String, Object>();
exts.put("sMobilePhone", mobilePhone);
exts.put("sMail", mail);
exts.put("sSex", sex);
String uname = URLDecoder.decode(name, "UTF-8").replaceAll("\\\\", "/");
String ucode = URLDecoder.decode(code, "UTF-8").replaceAll("\\\\", "/");
PersonHelper.appendPerson(psnID, ucode, uname, null, OrgUtils.encryptPassword(password), null, null, orgID, exts);
}
}
然后在提交按钮调用的register.j.j中模拟登录调用注册的action,.j的如下:
import java.io.IOException;
import java.sql.Date;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.httpclient.HttpContentTooLargeException;
import com.alibaba.fastjson.JSONException;
import com.alibaba.fastjson.JSONObject;
import com.justep.biz.client.Action;
import com.justep.biz.client.ActionEngine;
import com.justep.biz.client.ActionResult;
import com.justep.biz.client.ActionUtils;
public class Register extends com.justep.ui.impl.JProcessorImpl {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取注册输入的信息
String name = request.getParameter("name");
String code = request.getParameter("code");
String passsWord = request.getParameter("passsWord");
String mobilePhone = request.getParameter("mobilePhone");
String mail = request.getParameter("mail");
String sex = request.getParameter("sex");
String ip = request.getRemoteAddr();
String language = "zh_CN";
Date loginDate = new Date(System.currentTimeMillis());
//登录获取bsessionid用于调用注册的action
ActionResult actionResult = ActionEngine.login2("system", ActionUtils.md5("123456"), ip, language, loginDate, null, ActionUtils.JSON_CONTENT_TYPE, null);
String message = "";
String bsessionid = "";
if (actionResult.isSuccess()) {
bsessionid = actionResult.getBSessionID();
//给action传参并调用action
Action action = new Action();
action.setProcess("/SA_X/OPM/system/systemProcess");
action.setActivity("mainActivity");
action.setName("registerAction");
action.setParameter("name", name);
action.setParameter("code", code);
action.setParameter("password", passsWord);
action.setParameter("mobilePhone", mobilePhone);
action.setParameter("mail", mail);
action.setParameter("sex", sex);
ActionResult ar2 = ActionEngine.invokeAction(action, ActionUtils.JSON_CONTENT_TYPE, bsessionid, null, null);
if (ar2.isSuccess()) {
message = ar2.getContent().toString();
} else {
message = ar2.getMessage();
}
ActionEngine.logout(bsessionid);
} else{
message = actionResult.getMessage();
}
response.setCharacterEncoding("UTF-8");
response.addHeader("Access-Control-Allow-Origin", "*");
response.setContentType(ActionUtils.JSON_CONTENT_TYPE);
response.getWriter().write(message);
response.flushBuffer();
}
}
评一波