ssm与angularjs结合的增删改查

首先看下页面效果

不得不说有一个文章帮了我很多，https://www.cnblogs.com/diligenceday/p/4750562.html，很有帮助

页面有增删改查功能，首先添加功能，添加功能很简单，因为这个div没有在angular负责的div下，所以就用正常的ssm就行啦，效果如下

直接上代码，首先点击添加，然后打开模态框

<a href="#" class="btn btn-info btn-xs" data-toggle="modal" data-target="#customerAddDialog")">添加</a>

模态框如下

<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" id="add_customer_form">
  <input type="hidden" id="edit_cust_id" name="cust_id"/>																					 
	<div class="form-group">
	   <label for="name" class="col-sm-2 control-label">用户姓名</label>
		<div class="col-sm-10">
		<input type="text" class="form-control" id="name" placeholder="姓名" name="name">
		</div>
	</div>
	<div class="form-group">
	  <label for="password" class="col-sm-2 control-label">用户密码</label>
		<div class="col-sm-10">
		<input type="text" class="form-control" id="password" placeholder="密码" name="password">
		</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" onclick="addCustomer()">保存</button>
	</div>
</div>

代码可能没粘全，但是意思就是点击添加了，打开这个模态框，然后填写了信息后点击onclick，到script中的addCustomer方法中如下

//点击添加
function addCustomer() {
	$.post("<%=basePath%>customer/add.action",$("#add_customer_form").serialize(),function(data){
		alert("客户信息更新成功！");
		window.location.reload();
		});
	}

好了现在再到controller中的去找add方法

@RequestMapping(value = "/customer/add.action")
	public @ResponseBody
	String add(User user){		
	userService.insertUserById(user);
	return "OK";
}

添加功能ok了，下面是修改，修改需要先把需要修改的内容回显，数据使用angular循环显示的方法，和查询方法都在我写的

在jsp页面从ssm框架的controller使用angularjs接收数据并使用ng-repeat显示的步骤 里面，这里只说以下修改和删除，首先点击修改需要回显，效果如下，点击对应的行里的修改按钮，弹出模态框，并显示该行的数据信息。

按钮代码如下，注意包含这个按钮的div需要绑定一个controller，<div ng-app="myApp" ng-controller="namesCtrl">

<a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#customerEditDialog" ng-click="editCustomer(x.id)">修改</a>

ng-click是angular支持的，有点区别，这些可以到菜鸟教程上学习一下：angularjs事件

现在到namesCtrl中去找editCustomer(x.id)方法，代码如下，可以看到ng-app和ng-controller的名字是对应的，

<script type="text/javascript">
angular.module('myApp', []).controller('namesCtrl', function($scope) {
		    $scope.names = ${angularUser};
		    $scope.editCustomer = function(userId) {
				ajaxModule.edit(userId);
			};
			//删除用户
			$scope.deleteCustomer = function(userId) {
				ajaxModule.deleteCustomer(userId);
			};
		});
		var ajaxModule = {
				edit : function editCustomer(id) {
					$.ajax({
						type:"GET",
						url:"<%=basePath%>customer/edit.action",
						data:{"id":id},
						success:function(data) {  											
							$("#id").val(data.id);
							$("#name").val(data.name);
							$("#password").val(data.password)
						}
					});
				},
		        //删除
		        deleteCustomer : function deleteCustomer(id) {
				if(confirm('确实要删除该客户吗?')) {
					$.post("<%=basePath%>customer/delete.action",{"id":id},function(data){
						alert("客户删除更新成功！");
						window.location.reload();
					});
				}
			}
		};
		//angularjs显示成功
		</script>

其中editCustomer(id)方法如果没有用angularjs的话直接如下就行了

//点击保存修改先到这里，从这里找到controller对应的方法
		function updateCustomer() {
			       
					$.post("<%=basePath%>customer/update.action",
					$("#edit_customer_form").serialize(),function(data){
						alert(data);
						alert("客户信息更新成功！");
						window.location.reload();
					});
				}

		//保存修改结束

但是写在angularjs的controller中得把ajax的部分写在下面的大括号里，大概内容是一样的。

var ajaxModule = {

    }

现在再去后台controller中找customer/edit.action，很简单如下就行

//修改回显
	@RequestMapping(value = "/customer/edit.action")
	public @ResponseBody	
	User edit(Integer id){
		return userService.selectUserById(id);
	}

以上只是把数据回显了，弹出的模态框代码

<!-- 修改模态框 -->
  	<!-- 客户编辑对话框 -->
	<div class="modal fade" id="customerEditDialog" 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" id="edit_customer_form">
						<input type="hidden" id="edit_cust_id" name="cust_id"/>
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">用户姓名</label>
							<div class="col-sm-10">
								<input type="text" readonly="true" class="form-control" id="id" placeholder="id" name="id" ng-model={{id}}>
							</div>
						</div>															
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">用户姓名</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="name" placeholder="姓名" name="name">
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-sm-2 control-label">用户密码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="password" placeholder="密码" name="password">
							</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" onclick="updateCustomer()">保存修改</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /#wrapper -->
 <!-- 修改模态框END -->

由于修改按钮在ng-app中，所以得用ng-click去处理事件然后把数据返回到模态框，这里保存修改的模态框在div ng-app="myApp"外，所以就用一般的方法就行了，主要看onclick的updateCustomer方法如下

 //点击保存修改先到这里，从这里找到controller对应的方法
		function updateCustomer() {
			       
					$.post("<%=basePath%>customer/update.action",
					$("#edit_customer_form").serialize(),function(data){
						alert(data);
						alert("客户信息更新成功！");
						window.location.reload();
					});
				}

		//保存修改结束

后台

//修改保存
	@RequestMapping(value = "/customer/update.action")
	public @ResponseBody
	String update(User user){		
		userService.updateUserById(user);
		return "OK";
	}

以上完成了数据修改的全过程，下面是删除，上面的angular的代码已经给出了删除的ng-click的代码，就在挺上面的地方，按钮代码

<a href="#" class="btn btn-danger btn-xs" ng-click="deleteCustomer(x.id)">删除</a>

后台

@RequestMapping(value = "/customer/delete.action")
	public @ResponseBody
	String delete(Integer id){		
		userService.deleteUserById(id);
		return "OK";
	}

这篇和上篇一起完成了ssm和angularjs结合的增删改查的功能，效果还是不错的。