前几天帮一个学长做了一个Web端的作品,结合之前做的一些东西,总结发现很多东西的复用率还是挺高的,例如用户注册、用户登录这些任何项目中都要使用到的功能模块。所以,很有必要将它们进行总结,不断精化,日后用起来也会比较简单。
先贴几张前台的图:
1.首页
2.用户注册、用户登录页面
3.故障诊断页面
4.诊断结果页面
JPA + JSF + HTML + CSS + JavaScript
前端部分是实验室小伙伴提供的技术支持。
用户注册部分大体可以分为以下步骤:
用户登录部分大体可以分为以下步骤:
如何更好地增强用户体验,例如在用户注册时自动提醒用户注册用户名的长度、密码设计的长度、组成,用户登录时判断该用户名是否存在等。
该部分主要使用JSF的验证器、ajax等技术。还需要系统学习。
前台设计:
ajax事件类型为”blur”。
<h:inputText id="username" placeholder="5-20个英语,字符,数字,区分大小写"
validator="#{UserController.userNameValidate}"
value="#{UserController.user.username}" size="10">
<f:ajax event="blur" render="nameError" />
h:inputText>
<br />
<h:message for="username" id="nameError"
style="color: red; font-size:75%" />
后台validator设计:
/*
* * 用户名验证 长度 用户注册
*/
public void userNameValidate(FacesContext context, UIComponent component, Object value)
throws IllegalStateException, SecurityException, HeuristicMixedException, HeuristicRollbackException,
RollbackException, SystemException {
if (value.toString().length() < 5 || value.toString().length() > 20) {
throw new ValidatorException(new FacesMessage("用户名长度应为5-20个字符"));
}
if (loginValidate1(value.toString())) {
throw new ValidatorException(new FacesMessage("该用户名已注册"));
}
}
前台设计:
ajax事件类型为”keyup”。
<h:inputText id="password" placeholder="5-20个英语,字符,数字,区分大小写"
validator="#{UserController.passwordValidate}"
value="#{UserController.user.password}" size="10">
<f:ajax event="keyup" render="passwordError" />
h:inputText>
<br />
<h:message for="password" id="passwordError"
style="color: red;font-size:75%" />
后台validator设计:
/*
* s * 用户密码验证 长度 用户注册
*/
public void passwordValidate(FacesContext context, UIComponent component, Object value)
throws IllegalStateException, SecurityException, HeuristicMixedException, HeuristicRollbackException,
RollbackException, SystemException {
if (value.toString().length() < 5 || value.toString().length() > 12) {
throw new ValidatorException(new FacesMessage("密码长度应为5-12个字符"));
}
}
前台设计:
ajax事件类型为”blur”。
<h:inputText id="login-username"
validator="#{UserController.loginUserNameValidate}"
value="#{UserController.tempUser.username}" size="10">
<f:ajax event="blur" render="login-nameError" />
h:inputText>
<h:message for="login-username" id="login-nameError"
style="color: red; font-size:75%" />
后台validator设计:
/*
* * 用户名验证 用户登录
*/
public void loginUserNameValidate(FacesContext context, UIComponent component, Object value)
throws IllegalStateException, SecurityException, HeuristicMixedException, HeuristicRollbackException,
RollbackException, SystemException {
if (!loginValidate1(value.toString())) {
throw new ValidatorException(new FacesMessage("该用户不存在"));
}
}
前台设计:
请移步:
https://github.com/GaoZiqiang/314DiagnosisSystem/blob/master/src/main/webapp/index.xhtml
后台设计:
请移步:
https://github.com/GaoZiqiang/314DiagnosisSystem/blob/master/src/main/java/cn/edu/sdut/softlab/controller/UserController.java