ssm+bootstrap+angularjs练习

package com.frank.util;


import java.util.HashMap;
import java.util.Map;


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;
}


public Msg() {
super();
}
public Msg(int code, String result, Map<String, Object> data) {
super();
this.code = code;
this.result = result;
this.data = data;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public Map<String, Object> getData() {
return data;
}
public void setData(Map<String, Object> data) {
this.data = data;
}



}


================================================================
package com.frank.dao;


import java.util.List;


import com.bw.bean.Dept;
import com.bw.bean.Emp;


public interface EmpDaoMapper {

//添加
public void addEmp(Emp emp);
//批量删除
public void batchDel(String eids);

//根据id删除
public void deleteByEid(Integer emp_id);

//查询所有
public List<Emp> selectAllEmps();


//根据id查询员工
public Emp selectById(Integer emp_id);

//修改
public void updateEmp(Emp emp);

//查询所有部门
public List<Dept> selectAllDepts();
}
============================================================
<?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.EmpDaoMapper">


<!-- 添加员工 -->
<insert id="addEmp" parameterType="emp">
insert into t_emp(emp_name,gender,email,d_id) 
values(#{emp_name},#{gender},#{email},#{dept.dept_id})
</insert>

<!-- 修改员工 -->
<update id="updateEmp" parameterType="emp">
update t_emp set 
emp_name=#{emp_name},
gender=#{gender},
email=#{email},
d_id=#{dept.dept_id} 
where emp_id = #{emp_id}
</update>

<!-- 根据员工id删除员工 -->
<delete id="deleteByEid" parameterType="java.lang.Integer">
delete from t_emp where emp_id = #{emp_id}
</delete>

<!-- 查询所有部门 -->
<select id="selectAllDepts" resultType="dept">
select dept_id,dept_name from t_dept
</select>

<delete id="batchDel" parameterType="java.lang.String">
delete from t_emp where emp_id in (${value})
</delete>
<!-- 根据id查询员工 -->
<select id="selectById" parameterType="java.lang.Integer" 
resultMap="empMap">

select e.*,d.* from t_emp e,t_dept d 
where e.d_id = d.dept_id and e.emp_id = #{emp_id}
</select>

<!-- 查询所有员工 -->
<select id="selectAllEmps" resultMap="empMap">
select e.*,d.* from t_emp e,t_dept d 
where e.d_id = d.dept_id order by e.emp_id
</select>



<resultMap type="emp" id="empMap">
<id column="emp_id" property="emp_id"/>
<result column="emp_name" property="emp_name"/>
<result column="gender" property="gender"/>
<result column="email" property="email"/>
<association property="dept" javaType="dept">
<id column="dept_id" property="dept_id"/>
<result column="dept_name" property="dept_name"/>
</association>

</resultMap>

</mapper>
=================================


package com.frank.controller;


import java.util.List;




import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;


import com.frank.bean.Dept;
import com.frank.bean.Emp;
import com.frank.service.EmpService;
import com.frank.util.Msg;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;


@Controller
@RequestMapping("/emp")
public class EmpController {


@Autowired
private EmpService empService;


@RequestMapping("/selectPage")
@ResponseBody
public Msg selectEmpsWithJson(
@RequestParam(value="pageno",defaultValue="1")Integer pageno
,@RequestParam(value="pagesize",defaultValue="2")Integer pagesize){
//指定查询的页码和每页的条数
PageHelper.startPage(pageno, pagesize);
//查询所有的员工数据
List<Emp> empList = empService.selectAllEmps();
//将员工数据封装在pageInfo中
PageInfo pageInfo = new PageInfo(empList);
return Msg.success().add("pageInfo", pageInfo);
}



@RequestMapping(value="/selectDepts",method=RequestMethod.POST)
@ResponseBody
public Msg selectDepts(){
List<Dept> depts = empService.selectAllDepts();
for (Dept dept : depts) {
System.out.println(dept);
}
return Msg.success().add("deptList", depts);
}



@RequestMapping("/save")
@ResponseBody
public Msg saveEmp(Emp emp){
empService.addEmp(emp);
return Msg.success();
}

@RequestMapping("/update")
@ResponseBody
public Msg updateEmp(Emp emp){
empService.updateEmp(emp);
return Msg.success();
}

@RequestMapping("delEmp")
@ResponseBody
public Msg delete(String eids){
if(eids.contains(",")){
empService.batchDel(eids);
}else{
empService.deleteByEid(Integer.parseInt(eids));
}
return Msg.success();
}

@RequestMapping("/selectEmp")
@ResponseBody
public Msg selectEmp(@RequestParam(value="emp_id")Integer emp_id){
Emp emp = empService.selectById(emp_id);
return Msg.success().add("emp", emp);
}

}
==================================
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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.toPage = function(num){
//发送http请求
   $http({
       url:"emp/selectPage?pageno="+num,
       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.loadDepts=function(deptId){
$http({
method:"post",
url:"${pageContext.request.contextPath}/emp/selectDepts",
   }).success(function(data,header,config,status){
//响应成功
//console.log(data);
//下拉框对应的模型
$scope.deptList = data.data.deptList;
//设置当前部门id
$scope.currentDeptId = deptId;
});
};

//定义显示新增模态框的函数
$scope.showAddModal = function(){
//加载部门列表
$scope.loadDepts();
//打开模态框
angular.element("#addEmpModal").modal("show");
};


$scope.saveEmp=function(){
var data=angular.element("#addEmpModal form").serialize();
$http({
url:"${pageContext.request.contextPath}/emp/save",
method:"post",
data:data,
headers:{"Content-Type":"application/x-www-form-urlencoded"}
}).then(function successCallback(response) {  
    //alert("处理成功！");
    angular.element("#addEmpModal").modal("hide");
    $scope.toPage(999);
    /* 
    使用这种格式不会跳转到尾页
    $scope.toPage(pages+1);
    使用这种格式会跳转到尾页
    $scope.toPage(999);
    */
    });
};

//加载员工
$scope.loadEmp = function(empId){
$http({
url:"emp/selectEmp?emp_id="+empId,
method:'GET'
}).success(function(data,header,config,status){
//响应成功
$scope.currentEmp = data.data.emp;
});
};

//显示修改模态框
$scope.showUpdateModal = function(empId,deptId){
//表单重置
//$scope.reset("update");
//加载部门列表
$scope.loadDepts(deptId);
//查询修改当前要修改的员工
$scope.loadEmp(empId);
angular.element("#updateEmpModal").modal("show");
};


///修改员工
$scope.updateEmp = function(){
//console.log($scope.newEmpModel);
var data = angular.element("#updateEmpModal form").serialize();
$http({
url:"emp/update",
method:"POST",
data:data,
headers : {"Content-Type":"application/x-www-form-urlencoded"} // set the headers so angular passing info as form data (not request payload)
}).success(function(data,header,config,status){
//响应成功
angular.element("#updateEmpModal").modal("hide");
//跳转到最后一页
$scope.toPage(curPageNum);
});
};


//全选或全不选
$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 = "";
//准备数据eids
var checkArr = angular.element(".common:checked");
for(var i=0; i<checkArr.length;i++){
var eid =checkArr[i].value;
if(i ==0){
eids += eid;
}else{
eids += ","+eid;
}
}

//alert(eids);
//发送http请求
   $http({
       url:"${pageContext.request.contextPath}/emp/delEmp?eids="+eids,
       type:"POST",
       headers : {"Content-Type":"application/x-www-form-urlencoded"}
   }).then(function successCallback(response) {
//删除完成，关闭模态框
angular.element("#deleteEmpModal").modal("hide");
//跳转到当前页
$scope.toPage(curPageNum);
   });
};


//单个删除
$scope.showDelModal = function(){
var eids = $(".del").attr("code");
$("#btn").val(eids);
angular.element("#alertModal").modal("show");
};
$scope.delet = function(){
 $http({
       url:"${pageContext.request.contextPath}/emp/delEmp?eids="+$("#btn").val(),
       type:"POST",
       headers : {"Content-Type":"application/x-www-form-urlencoded"}
   }).then(function successCallback(response) {
//删除完成，关闭模态框
angular.element("#alertModal").modal("hide");
//跳转到当前页
$scope.toPage(curPageNum);
   });
};

}]);
</script>
  </head>
  
<body ng-app="empApp" ng-controller="EmpAppController">




  <!-- 警告用的模态框 -->
  <div id="alertModal" 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">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">是否删除的数据?</h4>
</div>
<div class="modal-footer">
<button type="button" ng-click="delet()" class="btn btn-danger" data-dismiss="modal">确定</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">&times;</span>
</button>
<h4 class="modal-title" id="deleteModelLabel">是否确认要删除该数据?</h4>
<input type="hidden" id="btn"   />
</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="modal fade" id="addEmpModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<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">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">添加员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmpName" class="col-sm-2 control-label">员工姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmpName"
name="emp_name" placeholder="请输入员工姓名">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> <input type="radio"
name="gender" value="男" checked> 男 </label> <label
class="radio-inline"> <input type="radio" name="gender"
value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail"
name="email" placeholder="请输入员工邮箱">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select  class="form-control" name="dept.dept_id">
<option ng-repeat="d in deptList" value="{{d.dept_id}}">{{d.dept_name}}</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="saveEmpBtn" ng-click="saveEmp()" type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>

<!--修改用的模态框  -->
<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-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改员工</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmpName" class="col-sm-2 control-label">员工姓名</label>
<div class="col-sm-6">
<input type="hidden" name="emp_id" value="{{currentEmp.emp_id}}">
<input type="text" class="form-control" id="updateEmpName"
name="emp_name" placeholder="请输入员工姓名" ng-model="currentEmp.emp_name">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> 
<input type="radio" name="gender" value="男" ng-model="currentEmp.gender"> 男 </label> 
<label class="radio-inline"> 
<input type="radio" name="gender" value="女" ng-model="currentEmp.gender"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="updateInputEmail"
name="email" placeholder="请输入员工邮箱"  ng-model="currentEmp.email">
<span class="help-block"></span>
</div>
</div>


<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select class="form-control" name="dept.dept_id" ng-model="currentEmp.dept.dept_id">
<option ng-repeat="d in deptList" value="{{d.dept_id}}" 
ng-selected="d.dept_id == currentEmp.dept.dept_id">
{{d.dept_name}}
</option>
</select>
</div>
</div>


</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="updateEmpBtn" type="button" class="btn btn-primary" ng-click="updateEmp()">保存</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">
  <div class="col-md-2 col-md-offset-8">
  <!-- 禁用按钮：disabled="disabled" -->
  <button id="addEmpBtn"  ng-click="showAddModal()"  class="btn btn-success btn-lg" >
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
  新增
  </button>
 
  <button id="toBatchDelEmpBtn"  ng-click="showDeleteModal()"  class="btn btn-danger btn-lg" >
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  批量删除
  </button>
  </div></div>
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
    <table id="empTable" class="table  table-hover">
    <tr>
    <td><input type="checkbox" ng-checked="itemCheckedFlag" ng-click="checkAll()" /></td>
    <td>id</td>
    <td>员工姓名</td>
    <td>性别</td>
    <td>邮箱</td>
    <td>所属部门</td>
    <td>操作</td>
    </tr>
    <tr ng-repeat="emp in empList">
   <td><input type="checkbox" ng-click="validate()" class="common" value="{{ emp.emp_id }}" /></td>
    <td>{{emp.emp_id }}</td>
    <td>{{emp.emp_name}}</td>
    <td>{{emp.gender}}</td>
    <td>{{emp.email}}</td>
    <td>{{emp.dept.dept_name}}</td>
    <td> 
    <button  ng-click="showUpdateModal(emp.emp_id,emp.dept.dept_id)"  class="btn btn-primary editEmpBtn">
    <span class="glyphicon glyphicon-pencil"   aria-hidden="true"></span>
    修改
    </button>


    <button  ng-click="showDelModal()" code="{{emp.emp_id }}" class="btn btn-danger del" >
    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    删除
    </button>
    </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">&laquo;</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">&laquo;</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">&raquo;</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">&raquo;</span>
     </a>
   </li>
   <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>