本次内容为注册页面以及功能实现：
注册页面主要采用了Bootstrap以及框架自带JQ以及Angualr.JS 框架进行功能的实现
我们需要先向Myeclipse中倒入我们需要的包（分别有以下）：
在JSP中导入所需要的框架和包：
其中一些自定义的样式将陆续介绍：
我们先编写顶部的header：
/*头部*/
#header{
height:45px;
background-color:#000000;
}
/*底部*/
.footer{
clear:both;
width:100%;
margin-left:-15px;
background-color:#000000;
text-align:center;
}<body ng-app="app">
<div id="container-fluid" >
<%--头 --%>
<div id="header" >
<h3 class="text-white">Your Book Shop</h3>
</div>
<%--底部 --%>
<footer class="footer">
<p class="text-white">联系：[email protected] </p>
</footer>
</div>
</body>将会实现下列头部与尾部
接下来是主体的注册表单以及功能：
我们采用了Bootstrap的Form表单以及Angular的MVC模式对表单进行控制
<%--主体 --%>
<div id="RegisterForm" >
<%--submitForm传了表单正确与否的验证boolean值给后台进行验证 --%>
<form name="RegisterForm1" id="RegisterForm1" ng-submit="submitForm(RegisterForm1.$valid)"
ng-controller="RegisterFormInputCtrl" novalidate >
<div class="form-group row">
<label for="inputUserName" class="col-sm-2 col-form-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputUserName" name="inputUserName"
ng-model="inputUserName" placeholder="用户名" ng-maxlength="20" required>
</div>
<small id="inputUserNameInfo" class="text-muted"
ng-show="RegisterForm1.inputUserName.$error.required
||RegisterForm1.inputUserName.$error.maxlength" >
请您输入20位以内的非空用户名!
</small>
</div>
<div class="form-group row">
<label for="inputUserPassword1" class="col-sm-2 col-form-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputUserPassword1" name="inputUserPassword1"
ng-model="inputUserPassword1" placeholder="密码" ng-maxlength="20" required>
</div>
<small id="inputPassword1Info" class="text-muted"
ng-show="RegisterForm1.inputUserPassword1.$error.required||RegisterForm1.inputUserPassword1.$error.maxlength" >
请您输入20位以内的非空密码!
</small>
</div>
<div class="form-group row">
<label for="inputUserPassword2" class="col-sm-2 col-form-label">确认密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputUserPassword2" name="inputUserPassword2"
ng-model="inputUserPassword2" placeholder="确认密码" ng-maxlength="20" required >
</div>
<small id="inputUserPassword2Info" class="text-muted"
ng-show="RegisterForm1.inputUserPassword2.$error.required
||RegisterForm1.inputUserPassword2.$error.maxlength">
请您输入一致的密码!
</small>
<small class="text-muted text-danger" >{{samepassword}}</small>
</div>
<div class="form-group row">
<label for="inputUserEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputUserEmail" name="inputUserEmail"
ng-model="inputUserEmail" placeholder="Email" ng-maxlength="50" required >
</div>
<small id="inputUserEmailInfo" class="text-muted"
ng-show="RegisterForm1.inputUserEmail.$error.required
||RegisterForm1.inputUserEmail.$error.maxlength||RegisterForm1.inputUserEmail.$error.email">
请您输入合法的邮箱形式!
</small>
</div>
<div class="form-group row">
<label for="inputUserRealName" class="col-sm-2 col-form-label">真实姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputUserRealName" name="inputUserRealName"
ng-model="inputUserRealName" placeholder="姓名" ng-maxlength="10" required>
</div>
<small id="inputUserRealNameInfo" class="text-muted"
ng-show="RegisterForm1.inputUserRealName.$error.required||RegisterForm1.inputUserRealName.$error.maxlength">
请您输入您的真实姓名!
</small>
</div>
<%--下拉框的选择;密保 --%>
<div class="form-group row">
<select class="custom-select col-sm-4" id="inputUserProblem">
<option selected>请选择您的密保问题:</option>
<option value="您的手机号码后四位">您的手机号码后四位</option>
<option value="您的家乡城市名称">您的家乡城市名称</option>
<option value="您最喜欢的歌手">您最喜欢的歌手</option>
</select>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputUserAnswer" name="inputUserAnswer"
ng-model="inputUserAnswer" ng-maxlength="200" required>
</div>
<small id="inputUserAnswerInfo" class="text-muted"
ng-show="RegisterForm1.inputUserAnswer.$error.required||RegisterForm1.inputUserRealName.$error.maxlength">
请您输入您的密保问题,这将是您找回密码的关键信息,请牢记!
</small>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" >提交注册!</button>
<p class="text-danger" id="alertinfo"></p>
</div>
</div>
</form>
</div>
<%--调用入验证文件 --%>
<script src="CSSorJS/JS/RegisterInput.js"></script>这里需要注意的一点是：上面对表单进行验证的RegisterInput.JS文件需要在Angualr.JS文件后引入;否则会因为引入顺序不同造成加载时出错，会无法进行进入JS的验证；HTML的加载顺序也是平时编写是需要注意的地方
同时JS文件如下：
/**
* 验证注册信息!
*/
var app = angular.module('app',[]);
app.controller('RegisterFormInputCtrl',['$scope','$http',function($scope,$http,$timeout) {
$scope.submitForm=function(isvalid){
if(isvalid){
if($scope.inputUserPassword2==$scope.inputUserPassword1){
//密码一致提交ajax请求,Angular封装了Ajax请求
var date ={
registerUserName:$("#RegisterForm1").find("#inputUserName").val(),
registerPassWord:$("#RegisterForm1").find("#inputUserPassword1").val(),
registerUserEmail:$("#RegisterForm1").find("#inputUserEmail").val(),
registerUserRealName:$("#RegisterForm1").find("#inputUserRealName").val(),
registerUserProblem:$("#RegisterForm1").find("#inputUserProblem").val(),
registerUserAnswer:$("#RegisterForm1").find("#inputUserAnswer").val(),
}
$.ajax({
url:"Register.action",
method:'post',
datatype:'text',
data:date,
success:function(backdata){
if(backdata=="1"){
$("#alertinfo").html("注册成功,或请点击" +
"返回<a href='MainPart.jsp'><b>登录页面</b></a>进行登录!");
}
else{
$("#alertinfo").html("用户名已经存在请更换!");
}
},
error:function(backdata){
alert("错误了,请稍后重试!");
}
})
}
else{
$scope.samepassword="密码不一致,请修改!";
}
}
else{
alert("信息填写不全,请重试!");
}
}
}]);
Angular.JS，本身便有对于表单验证的控制器：我们需要ng绑定了相应的Input,
再交由控制器如：RegisterForm1.inputUserName.$error.maxlength（最大长度）；进行相应验证即可；更多的验证规则我们可以查阅相应的API文档，相等，正则表达式验证等；
我们此处RegisterInput.JS,验证了表单有效性后，有ajax向后台提交数据，进行再次审核与注册管理，其中Struts.xml配置文件如下所示；action对应ajax提交的action，同时后台指向类指明了又doregister.java进行处理
<action name="Register" class="ExecuteDo.doregister" >
<!-- 指明返回类型，同时需要注意success，可以查阅param等属性含义 -->
<!-- 此处返回Stream流数据 -->
<result name="success" type="stream">
<param name="contentType">text/html</param>
<param name="inputName">is</param>
</result>
</action>接下来让我们看一下doregister.java中又有什么方法进行实现的吧
public class doregister extends ActionSupport{
//一切注册用户都先为普通用户，初始的管理员可以决定谁是谁不是!
private short a=0;
//注册返回回struts的流数据类型
private InputStream is;
public InputStream getIs() {
return is;
}
public void setIs(InputStream is) {
this.is = is;
}
//注册时传进来的用户名
private String registerUserName;
public String getRegisterUserName() {
return registerUserName;
}
public void setRegisterUserName(String registerUserName) {
this.registerUserName = registerUserName;
}
//注册时传进来的密码
private String registerPassWord;
public String getRegisterPassWord() {
return registerPassWord;
}
public void setRegisterPassWord(String registerPassWord) {
this.registerPassWord = registerPassWord;
}
//注册时传进来的邮箱
private String registerUserEmail;
public String getRegisterUserEmail() {
return registerUserEmail;
}
public void setRegisterUserEmail(String registerUserEmail) {
this.registerUserEmail = registerUserEmail;
}
//注册时传进来的真实姓名
private String registerUserRealName;
public String getRegisterUserRealName() {
return registerUserRealName;
}
public void setRegisterUserRealName(String registerUserRealName) {
this.registerUserRealName = registerUserRealName;
}
//注册时传进来的用户选择的密保
private String registerUserProblem;
public String getRegisterUserProblem() {
return registerUserProblem;
}
public void setRegisterUserProblem(String registerUserProblem) {
this.registerUserProblem = registerUserProblem;
}
//注册时填写的用户密保答案
private String registerUserAnswer;
public String getRegisterUserAnswer() {
return registerUserAnswer;
}
public void setRegisterUserAnswer(String registerUserAnswer) {
this.registerUserAnswer = registerUserAnswer;
}
//注册用户时的执行方法
public String execute() {
registerdeal userregister = new registerdeal();
String end = userregister.judgeregister(registerUserName, registerPassWord, registerUserEmail, registerUserRealName, a,
registerUserProblem,registerUserAnswer );
StringBuffer result = new StringBuffer();
//返回流的时候和login返回json数据时一样，不要忘记了相应的get/set方法!!!
try {
if(end=="TRUE"){
result.append("1");
String string = result.toString();
is = new ByteArrayInputStream(string.getBytes("utf-8"));
System.out.println(is);
}
if(end=="FALSE"){
result.append("0");
String string = result.toString();
is = new ByteArrayInputStream(string.getBytes("utf-8"));
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
return SUCCESS;
}public class registerdeal {
public String judgeregister(String registerUserName,String registerPassWord,
String registerUserEmail,String registerUserRealName,short a, String registerUserProblem, String registerUserAnswer){
List<?> list=null;
String Name = registerUserName;
Userinfo user = new Userinfo(registerUserName,registerPassWord,
registerUserEmail, registerUserRealName,a,registerUserProblem,registerUserAnswer);
Session session = HibernateSessionFactory.getSession();
//打开事务
Transaction tx =session.beginTransaction();
try{
//判断是否已经存在该用户名!
//要注意因为在Hibernate的映射中,所以表明和关键字名是要和类的名以及类中的名字相同才行,而不是数据库中的表名和字段名!
list = session.createQuery("from Userinfo where userName ='"+Name+"'").list();
if(list.size()>0){
return "FALSE";
}
//注意此处数据库，因为主键是ID,所以增加的新用户,在数据库中,ID是间断开来的!~
else{
session.save(user);
tx.commit();
session.close();
return "TRUE";
}
}catch(Exception e){
e.printStackTrace();
}
return "FALSE";
}
}我们可以看到，我们在doregister.java中获取了注册用户名，密码，密保，邮箱等信息；再传参给registerdeal进行数据库进行操作；【需要注意的一点是：在doregister.java中，不要忘记写参数们的get,set方法】，再registerdeal.java中，我们先通过用户输入的用户名对数据库查询是否已经存在相同的用户名；使得话我们将返回一个错误标志；否则利用HQL语句，对新增用户信息进行数据库方面的保存；
我们再回到doregister.java中，我们通过返回的验证标志，对结果进行判断，并以数据流的方式返回判断结果：需要注意struts.xml中也需要配置好返回结果 type="stream" ，的流方式交还前端页面进行判断；
其他操作，详情见代码中的操作；
犯过的错误：
1、前端与后台交互时，struts的excute执行的时候，名字一定要和表单的对应属性名称一致，否则无法识别成功
2、angularJS里的表单验证 name属性和ng-model的属性名可以一样，在ng-show里判断的是name值；js里scope取的是ng-model的值；要注意区分
3、angular的时候调用外部js时候<script>yao要写在相关的body的div块内！【详情可以参照注册页面】，加载顺序的问题
第一次写博客还是写的也不流畅，分享了一下自己的总结，希望大家可以看明白；
接下来也将陆续发布登录，公告，等的实现功能