前言
本章主要是连接上一篇ssm整合开发项目实践(上)的后续章节，本文将带你实现上一篇文章留下的分页导航相关功能的开发，与及新增功能的实现。
学习本篇可以学到
- 分页导航条的相关功能实现(如实现点击相应页面编号导航到应该页面的实现等)
- bootstrap模态框的使用
- 前端数据校验
- 新增用户信息功能实现
实现分页导航相关功能
- 通过解析ajax请求返回的数据中的分布信息，构建动态构建出分页导航条
主要代码实现如下：
//构建分布条
function page_nav(data){
var pageInfo = data.reldata.pageinfo;
var nav = $("<nav></nav>").attr("aria-label","Page navigation");
var ul = $("<ul></ul>").addClass("pagination");
//首页按钮
var firstLi = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
//上一页按钮
var preLi = $("<li></li>").append($("<a></a>").attr("href","#").attr("aria-label","Previous").append($("<span></span>").attr("aria-hidden","true").append("«")));
ul.append(firstLi).append(preLi);
//遍历导航页码
$.each(pageInfo.navigatepageNums,function(index,item){
var pageLi = $("<li></li>").append($("<a></a>").attr("href","#").append(item));
ul.append(pageLi);
});
//下一页
var nextLi = $("<li></li>").append($("<a></a>").attr("href","#").attr("aria-label","Next").append($("<span></span>").attr("aria-hidden","true").append("»")));
//末页
var lastLi = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
ul.append(nextLi).append(lastLi).appendTo(nav).appendTo("#page_nav");
}
- 在构建代码基础上实现相关的逻辑，如点当处于首尾页时不显示首尾页的首尾页和上下页按钮，实现单击页码显示相应的页等。
1.要实现是否显示首页与上一页，末页与下一页按钮只需调用PageInfo的hasPreviousPage与hasNextPage进行判断，如果没有上一页或没有下一页则不显示相关的按钮。代码实现如下
//处理是否显示首页与上一页按钮
if(pageInfo.hasPreviousPage){
//把构建好的首页与上一页按按钮添加到分页导航条
ul.append(firstLi).append(preLi);
}
...
//处理是否显示下一页与末页
if(pageInfo.hasNextPage){
//把构建好的末页与下一页按按钮添加到分页导航条
ul.append(nextLi).append(lastLi);
}
2.实现单击页码显示相应的页,原理是给每个页码添加单击事件，点击相应页码时发送ajax请求到相应页的数据并显示。具体实现代码如下
//构建分布条
function page_nav(data){
//清空结点元素
$("#page_nav").empty();
var pageInfo = data.reldata.pageinfo;
var nav = $("<nav></nav>").attr("aria-label","Page navigation");
var ul = $("<ul></ul>").addClass("pagination");
//首页按钮
var firstLi = $("<li></li>").append($("<a></a>").attr("href","#").append("首页"));
//给首页按钮添加单击事件
firstLi.click(function(){
//发送ajax请求获取第一页的数据
get_emps(1);
});
//上一页按钮
var preLi = $("<li></li>").append($("<a></a>").attr("href","#").attr("aria-label","Previous").append($("<span></span>").attr("aria-hidden","true").append("«")));
//当前页减1为上一页的数据
preLi.click(function(){
get_emps(pageInfo.pageNum - 1);
});
//处理是否显示首页与上一页按钮
if(pageInfo.hasPreviousPage){
//把构建好的首页与上一页按按钮添加到分页导航条
ul.append(firstLi).append(preLi);
}
//遍历导航页码
$.each(pageInfo.navigatepageNums,function(index,item){
//构建页码
var pageLi = $("<li></li>").append($("<a></a>").attr("href","#").append(item));
//给页码添加单击事件
pageLi.click(function(){
//发送ajax请求获取相应页的数据
get_emps(item);
});
//设置当前页高亮显示
if(pageInfo.pageNum == item){
pageLi.addClass("active");
}
ul.append(pageLi);
});
//下一页
var nextLi = $("<li></li>").append($("<a></a>").attr("href","#").attr("aria-label","Next").append($("<span></span>").attr("aria-hidden","true").append("»")));
//当前页加1为下一页数据
nextLi.click(function(){
get_emps(pageInfo.pageNum + 1);
});
//末页
var lastLi = $("<li></li>").append($("<a></a>").attr("href","#").append("末页"));
//获取末页数据
lastLi.click(function(){
get_emps(pageInfo.pages);
});
//处理是否显示下一页与末页
if(pageInfo.hasNextPage){
//把构建好的末页与下一页按按钮添加到分页导航条
ul.append(nextLi).append(lastLi);
}
nav.append(ul).appendTo("#page_nav");
}
新增功能实现
- 创建新增页面，使用bootstap的模态框方式输入数据
- 数据校验
- 提交表单通过ajax请求方式发送数据到服务器并保存到数据库
新增页面使用的是bootstrap的模态框，使用模态框弹出用户信息表单，代码实现如下：
<%--新增模态框--%>
<div class="modal fade" tabindex="-1" role="dialog" id="add_user_model">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">新增用户信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="add_user_form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-8" id="username_div">
<input type="text" class="form-control" id="username" name="userName" placeholder="请输入用户名"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">姓别：</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio1" value="M" checked> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="inlineRadio2" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">email：</label>
<div class="col-sm-8" id="email_div">
<input type="text" class="form-control" id="email" name="email" placeholder="请输入email"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="utId_select">用户类型</label>
<div class="col-sm-4">
<select id="utId_select" name="utId" class="form-control"><!--此处放置用户类型option--></select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save_user">保存</button>
</div>
</div>
</div>
</div>
前端数据校验，前端数据校验指的是程序在前台进行数据校验，这种数据校验方式可以用于一些不重要的信息的校验，重要信息要进行前后端校验，因为前端校验很容易就被绕过，本项目只介绍前端数据校验。
前端校验可以在提交表单的时候对用户所有输入的数据进行校验，校验通过才提交数据到服务器进行处理。实现代码如下
//点击新增按钮弹出
$("#add_user_btn").click(function(){
//重置表单
$("#add_user_form")[0].reset();
//清除用户名状态
remove_class("#username");
remove_class("#email");
console.log("新增按钮被点");
//获取用户类型
get_usertype();
$("#add_user_model").modal({
backdrop:"static"
});
});
//消除表单中的校验状态信息
function remove_class(ele){
$(ele).parent().removeClass("has-success").removeClass("has-error");
$(ele).next("span").empty();
}
//发送ajax获取用户类型信息
function get_usertype(){
$("#utId_select").empty();
$.ajax({
url:"${APP_PATH}/utype",
type:"GET",
success:function(data){
//{"code":100,"msg":"处理成功","reldata":{"utype":[{"utypeId":1,"utypeName":"普通用户"},{"utypeId":2,"utypeName":"VIP用户"}]}}
$.each(data.reldata.utype,function(index,item){
console.log(item.utypeName);
var typeOption = $("<option></option>").attr("value",item.utypeId).append(item.utypeName);
typeOption.appendTo("#utId_select");
});
}
});
}
//提交数据时对用户名和邮箱进行认证,验证成功后提交信息到服务器
$("#save_user").click(function(){
if(!validata_username()){
return false;
}
//校验邮箱
if(!validata_email()){
return false;
}
// alert("数据校验成功");
saveuser();
});
//发送ajax请求提交数据到服务器
function saveuser(){
$.ajax({
url:"${APP_PATH}/saveuser",
type:"POST",
data:$("#add_user_form").serialize(),
success:function(rdata){
// console.log("saveuser===",rdata);
if(rdata.code == 100){
$('#add_user_model').modal('hide');
// 跳到最后一页$("#page_msg").attr("pages_total")为构建分页时添加的自定义属性用于保存分页的总页数
get_emps($("#page_msg").attr("pages_total") + 1);
}
}
});
}
//校验用户名
function validata_username(){
//校验用户名合法
var regx = /(^[a-zA-Z0-9_-]{6,16}$)/
if(!regx.test($("#username").val())){
show_validata_msg("#username","error","用户名必须为6到16位字母与数字的组合");
return false;
}else{
show_validata_msg("#username","success","用户名可用");
return true;
}
}
//判断是否重名
$("#username").change(function(){
if($("#username").val().length>=6){
validata_username_ajax();
}else{
show_validata_msg("#username","error","用户名必须为6到16位字母与数字的组合");
return false;
}
});
//发送ajax请求判断用户名是否重复
function validata_username_ajax(){
$.ajax({
url:"${APP_PATH}/checkusername",
data:"userName="+$("#username").val(),
type:"POST",
success:function(rdata){
if(rdata.code == 100){
show_validata_msg("#username","success",rdata.reldata.v_msg);
return true;
}else if(rdata.code == 200){
show_validata_msg("#username","error",rdata.reldata.v_msg);
return false;
}
}
});
}
//校验邮箱
function validata_email(){
var regx = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var email = $("#email").val();
if(!regx.test(email)){
show_validata_msg("#email","error","邮箱地址错误");
return false;
}else{
show_validata_msg("#email","success","邮箱地址可用");
return true;
}
}
/**
* 定义显示校验信息方法
* @param ele 用于jquery选择器的标签属性
* @param status 是否成功
* @param msg 提示信息
*/
function show_validata_msg(ele,status,msg){
$(ele).next("span").empty();
if(status == "success"){
$(ele).parent().removeClass("has-error").addClass("has-success");
$(ele).next("span").append(msg);
}else if(status == "error"){
$(ele).parent().removeClass("has-success").addClass("has-error");
$(ele).next("span").append(msg);
}
}
通过ajax提交表单数据到服务器，用户信息添加成功后跳到最后一页，发送ajax请求发送表单数据到服务的代码实现如下
//发送ajax请求提交数据到服务器
function saveuser(){
$.ajax({
url:"${APP_PATH}/saveuser",
type:"POST",
data:$("#add_user_form").serialize(),
success:function(rdata){
// console.log("saveuser===",rdata);
if(rdata.code == 100){
$('#add_user_model').modal('hide');
// 跳到最后一页$("#page_msg").attr("pages_total")为构建分页时添加的自定义属性用于保存分页的总页数
get_emps($("#page_msg").attr("pages_total") + 1);
}
}
});
}
保存功能的控制器方法的实现代码如下
/**
* 保存数据
* @param user
* @return
*/
@RequestMapping("/saveuser")
@ResponseBody
public Msg saveuser(User user){
if(userService.saveuser(user) == 1){
return Msg.success();
}else{
return Msg.fail();
}
}
跳到最后一页面时因为传入的值比实际页数大，因此要在applicationconfig.xml配置文件中的id 为sqlSessionFactory的bean中配置分布合理化属性。具体如下
<!-- 配置sqlSession工厂-->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--配置分页-->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<value>
reasonable = true
</value>
</property>
</bean>
</array>
</property>
<!-- 配置数据源-->
<property name="dataSource" ref="dataSource"/>
<property name="mapperLocations" value="classpath:mappers/*.xml"/>
</bean>
最终的新增页面如下
最终的新增成功页面如下
至此项目的分页与新增用户功能基本完成，下一篇也是本项目的完结篇将实现修改与单条删除与批量删除功能的实现，您可以扫描下面二维码关注我的公众号获取更多精彩内容。
关注我的公众号获取后续精彩内容
扫一扫
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
