平台默认没有提供注册用户,是需要登录后到组织管理功能中添加的,如果要提供注册用户的功能参考如下:
本例是通过扩展空间修改的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(); } }
评一波