ssm+maven+angular+bootstrap练习--代码实现

最新推荐文章于 2022-05-06 23:26:32 发布

Frank_cxx

最新推荐文章于 2022-05-06 23:26:32 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Frank_cxx/article/details/76100874

本文介绍了一个基于MyBatis实现的分页查询功能，并展示了如何使用Java类来封装请求响应数据，以及如何在JSP页面上实现分页、排序、批量操作等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Msg类

public class Msg {

		private int code;//状态码：100表示成功，200表示失败
		private String result;//操作成功、操作失败
		private Map<String, Object> data = new HashMap<String, Object>();
		
		
		//返回成功结果的方法
		public static Msg success(){
			Msg msg = new Msg();
			msg.setCode(100);
			msg.setResult("操作成功");
			return msg;
		}
		//返回失败结果的方法
		public static Msg fail(){
			Msg msg = new Msg();
			msg.setCode(200);
			msg.setResult("操作失败");
			return msg;
		}
		
		//存放数据，支持链式操作
		public Msg add(String key,Object value){
			this.getData().put(key, value);
			return this;		
		}

          ------------getter,setter方法省略---------

EmailMapper接口

public interface EmailMapper {
               //
	public List<Email> selectEmails(@Param("selectorder")String selectorder,@Param("sel")Integer sel);
	
	public  void update(int id);
	
	public void delete(int id);
	
	
}

EmailMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.frank.dao.EmailMapper">

<select id="selectEmails" resultType="Email" >
	select * from t_email  
<where>
	   <if test="sel==0">
		status = 0
		</if>
	<if test="sel==1">
		status = 1
		</if>
   </where>
	 <if test="selectorder!=''">
	 <!--排序的时候,后面的参数不用加引号
	 #{}会自动补充'',${}不会
	  -->
		order by date ${selectorder}
	    </if> 
	</select>
	
	
	<delete id="delete" parameterType="int">
	delete from t_email where id =#{id};
	</delete>
	
	<update id="update" parameterType="int">
			update t_email set status =1 where id =#{id}
		
	</update>
	
</mapper>

Controller类

@RequestMapping("email")
@Controller
public class EmailController {

	@Autowired
	private EmailServiceImpl service;
	
	@RequestMapping("selectPage")
	@ResponseBody
	public Msg selectEmpsWithJson(
			@RequestParam(value="pageno",defaultValue="1")Integer pageno
			,@RequestParam(value="pagesize",defaultValue="2")Integer pagesize
			,@RequestParam(value = "selectorder")String selectorder,@RequestParam(value = "sel",defaultValue="2")int sel){

		//指定查询的页码和每页的条数
		PageHelper.startPage(pageno, pagesize);
		//查询所有的员工数据
		List<Email> list = service.selectEmails(selectorder,sel);
		//将员工数据封装在pageInfo中
		PageInfo pageInfo = new PageInfo(list);
		return Msg.success().add("pageInfo", pageInfo);
	}
	
	@RequestMapping("delete")
	public String delete(int [] id){
		for (int i : id) {
			service.delete(i);
		}
		return "index";
	};
	
	@RequestMapping("update")
	public String  batchUpdate(int [] id){
		for (int i : id) {
			service.update(i);
		}
		return "index";
	};

	
	
}

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
      <title>邮箱页面</title>
	
	<!-- 引入bootstrap的css样式 -->
	<link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
	
	<!-- 引入jquery -->
	<script type="text/javascript" src="static/js/jquery-3.2.1.js"></script>
	<!-- 引入bootstrap的js-->
	<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	
		<!-- 引入angularJS -->
	<script type="text/javascript" src="static/angular/angular.min.js"></script>
	<script type="text/javascript">
		//创建模块
		var empApp = angular.module("empApp",[]);
		    var total = 0;//总条数
            var curPageNum = 1;//当前页
		//创建控制器
		 empApp.controller("EmpAppController",["$scope","$http",function($scope,$http){
			$scope.selectorder = "";
				$scope.sel = 2;
			//跳转到指定页码
			$scope.toPage = function(num){
				//发送http请求
			    $http({
			        url:"email/selectPage.do?pageno="+num+ "&selectorder="
						+ $scope.selectorder + "&sel="
						+ $scope.sel,
			        method:"GET"
			    }).then(function successCallback(response) {
			          // console.log(response.data);
			          $scope.pageInfo = response.data.data.pageInfo;
			          //定义员工数据列表模型
			          $scope.empList = $scope.pageInfo.list;
			          //总条数
				total = response.data.data.pageInfo.total;
				//当前页
				curPageNum = response.data.data.pageInfo.pageNum;
				
			    }, function errorCallback(response) {
			            // 请求失败执行代码
			    });
			};
			//默认跳转到第1页
			$scope.toPage(1);
	//全选或全不选
	$scope.itemCheckedFlag =false;
	$scope.checkAll = function(){
		$scope.itemCheckedFlag = !$scope.itemCheckedFlag;	
		angular.element(".common").prop("checked",$scope.itemCheckedFlag);	
	};
	
	$scope.validate=function(){
	//普通复选框的个数
	var num=angular.element(".common").length;
	//普通复选框被选中的个数
	 var checkNum=angular.element(".common:checked").length;
	 //通过判断复选框的个数是否与被选中的个数一致来决定全选框的状态		
	 $scope.itemCheckedFlag=(num==checkNum);
	};
	
	
	   //展示模态框
		$scope.showDeleteModal = function(){
				angular.element("#deleteEmpModal").modal("show");
			};
			//执行批量删除
			$scope.doBatchDel = function(){
				var eids =new Array();
				//准备数据eids
				$(".common:checked").each(function(){
				eids.push($(this).val());
				});
				window.location.href = "${pageContext.request.contextPath}/email/delete.do?id="+eids;
			};
//修改的模态框
	$scope.showUpdateModal = function(){
				angular.element("#updateEmpModal").modal("show");
			};
			//执行批量修改
			$scope.doBatchUpd = function(){
			var eidss = [];
				//准备数据eids
				$(".common:checked").each(function(){
				eidss.push($(this).val());
				});
				window.location.href = "${pageContext.request.contextPath}/email/update.do?id="+eidss;
			    };
			    

		  $("#sele").change(function(){
				$scope.sel = $("#sele :selected").val();
				$scope.toPage(1);
								});  
		$scope.OrderBy=function(){
		$scope.selectorder ='asc';
		$scope.toPage(curPageNum);
		};
		    	    
		$scope.OrderBydesc=function(){
		$scope.selectorder ='desc';
		$scope.toPage(curPageNum);
		};
		    	    
			
		}]);
	</script>
  </head>
  
<body ng-app="empApp" ng-controller="EmpAppController">

<!--修改的模态框 -->
<div class="modal fade" id="updateEmpModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-body">
				<h4>是否进行修改?</h4>
					<form id="myform" class="form-horizontal" action="batchUpdate">
						<div class="form-group">
							
							<div class="col-sm-6">
								<input type="hidden" class="form-control"
									name="eids" id="eids">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button ng-click="doBatchUpd()"  type="button" class="btn btn-primary">修改</button>
				</div>
			</div>
		</div>
	</div>
<!-- 删除用的模态框 -->
  	<div id="deleteEmpModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
	  <div class="modal-dialog modal-sm" 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" id="deleteModelLabel">是否确认要删除该数据?</h4>
				
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button ng-click="doBatchDel()" type="button" class="btn btn-danger">确定</button>
				</div>
	    </div>
	  </div>
	</div>
  	<div class="container">
  		<div class="row">
  			<div class="col-md-6 col-md-offset-3">
  				<h1>我的邮箱页面</h1>
  			</div>
  		</div> 
  		<div class="row">
  			<select  class="form-control" style="width: 200px" id="sele">
					<option value="2">全部邮件</option>
					<option value="0">未读邮件</option>
					<option value="1">已读邮件</option>
				</select>
  		</div> 
  		
  		<div class="row">
    		<div class="col-md-10 col-md-offset-1">
		    	<table id="empTable" class="table  table-hover"><tr>
				<td>
					<button type="button"
						class="btn btn-default glyphicon glyphicon-user"></button>
				</td>
				<td>
					<button type="button" ng-click="showUpdateModal()" class="btn btn-success" >批量设为已读</button>
				</td>
				<td>
					<button type="button" ng-click="showDeleteModal()" class="btn btn-danger">批量删除</button>
				</td>
				<td>
				<button type="button" ng-click="OrderBy()" class="btn btn-primary">按时间升序排列</button>
				</td>
				<td>
					<button type="button"  ng-click="OrderBydesc()"  class="btn btn-info">按时间降序排列</button>
				</td>
			</tr>
		    		<tr class="danger">
		    		<td><input type="checkbox" ng-checked="itemCheckedFlag" ng-click="checkAll()" /></td>
		    			<td style="display:none">id</td>
		    			<td>发件人</td>
		    			<td>状态</td>
		    			<td>标题</td>
		    			<td>时间</td>
		    		</tr>
		    	<tr ng-repeat="emp in empList" class="success">
		     <td><input type="checkbox" ng-click="validate()" class="common" value="{{ emp.id }}" /></td>
		    			<td style="display:none">{{emp.id }}</td>
		    			<td>{{emp.name}}</td>
		    			<td ><div  ng-if="emp.status==1"><span class="glyphicon glyphicon-ok"  style="color: rgb(255, 140, 60);" /></div>
		    	<div  ng-if="emp.status==0"><span class="glyphicon glyphicon-envelope"  style="color: rgb(255, 140, 60); font-size: 33px;"></span>
		    			</div>
		    			</td>
		    			<td>{{emp.title}}</td>
		    			<td><span ng-bind="emp.date|date:'yyyy-MM-dd HH-mm-ss'"></span></td>	
		    		</tr>
		    	</table>
    		</div>
    	</div>
    	
    	<!-- 分页条 -->
    	<div class="row">
    		<div class="col-md-6">共有{{pageInfo.total}}条数据,共有{{pageInfo.pages}}页</div>
   			<nav aria-label="Page navigation">
			  <ul class="pagination">
			  	<li ng-show="pageInfo.hasPreviousPage"><a href="javascript:void(0)" ng-click="toPage(1)">首页</a></li>
			  	<li ng-hide="pageInfo.hasPreviousPage" class="disabled"><a href="javascript:void(0)" >首页</a></li>
			    <li ng-show="pageInfo.hasPreviousPage">
			      <a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
			        <span aria-hidden="true">«</span>
			      </a>
			    </li>
			    <li ng-hide="pageInfo.hasPreviousPage" class="disabled">
			      <a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum-1)" aria-label="Previous">
			        <span aria-hidden="true">«</span>
			      </a>
			    </li>
			    <li ng-repeat="num in pageInfo.navigatepageNums" ng-class="num==pageInfo.pageNum?'active':''"><a href="#" ng-click="toPage(num)">{{num}}</a></li>
			    <li ng-hide="pageInfo.hasNextPage" class="disabled">
			      <a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
			        <span aria-hidden="true">»</span>
			      </a>
			    </li>
			     <li ng-show="pageInfo.hasNextPage" >
			      <a href="javascript:void(0)" ng-click="toPage(pageInfo.pageNum+1)" aria-label="Next">
			        <span aria-hidden="true">»</span>
			      </a>
			    </li>
			    跳转至：<input type="text" size="2" name="pageno" />页  
				<button class="btn btn-xs go">GO</button>
			    <li  ng-show="pageInfo.hasNextPage" ><a href="javascript:void(0)" ng-click="toPage(pageInfo.pages)">尾页</a></li>
			    <li  ng-hide="pageInfo.hasNextPage" class="disabled"><a href="javascript:void(0)" ng-click="toPage(pageInfo.pages)">尾页</a></li>
			  </ul>
			</nav>
    	</div>
    	</div>
    	
  </body>
</html>