尚筹网：角色维护之新增角色

￡神魔★判官ぃ 2023-06-28 04:51 34阅读 0赞

# 步骤 #

*  给“新增”按钮绑定单击响应函数
 *  打开模态框
 *  给“保存”按钮绑定单击响应函数
    
     *  收集文本框内容
     *  发送请求
    
     *  请求处理完成关闭模态框、重新分页、清理表单

# 给"新增"按钮绑定单击响应函数 #

## 标记"新增按钮" ##

将/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp中的

替换为

## 绑定单击响应函数 ##

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp

$("#addBtn").click(function(){
        
    			
    			alert("aaa...");
    			
    		});

# 打开模态框 #

## 准备模态框 ##

1、创建/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-role-add.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <div id="addModal" class="modal fade" tabindex="-1" role="dialog">
    	<div class="modal-dialog" role="document">
    		<div class="modal-content">
    			<form role="form">
    				<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">
    					<input type="text" id="roleNameInput" class="form-control" placeholder="请输入角色名称" />
    				</div>
    				<div class="modal-footer">
    					<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-plus"></i> 保存</button>
    					<button type="reset" class="btn btn-primary"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
    				</div>
    			</form>
    		</div>
    	</div>
    </div>

2、将include-modal-role-add.jsp包含到role-page.jsp

<%@ include file="/WEB-INF/include-modal-role-add.jsp" %>
    </body>

## 打开模态框 ##

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp

$("#addBtn").click(function(){
        
    			$("#addModal").modal("show");
    		});

# 给“保存”按钮绑定单击响应函数 #

## 前端 ##

### 标记"保存"按钮： id=“addModalBtn” ###

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-role-add.jsp：  
![在这里插入图片描述][20200107142538310.png]

### 绑定单击响应函数 ###

$("#addModalBtn").click(function(){
        
    	
    	// 1.收集文本框内容
    	var roleName = $.trim($("#roleNameInput").val());
    	
    	if(roleName == null || roleName == "") {
        
    		layer.msg("请输入有效角色名称！");
    		return ;
    	}
    	
    	// 2.发送请求
    	$.ajax({
        
    		"url":"role/save/role.json",
    		"type":"post",
    		"data":{
        
    			"roleName":roleName
    		},
    		"dataType":"json",
    		"success":function(response){
        
    			
    			var result = response.result;
    			
    			if(result == "SUCCESS") {
        
    				layer.msg("操作成功！");
    				
    				// 3.操作成功重新分页
    				// 前往最后一页
    				window.pageNum = 999999;
    				showPage();
    			}
    			
    			if(result == "FAILED") {
        
    				layer.msg(response.message);
    			}
    			
    			// 4.不管成功还是失败，关闭模态框
    			$("#addModal").modal("hide");
    			
    			// 5.清理本次在文本框填写的数据
    			$("#roleNameInput").val("");
    			
    		},
    		"error":function(response){
        
    			layer.msg(response.message);
    		}
    	});
    	
    });

## 后端 ##

### 控制 ###

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/handler/RoleHandler.java：

@ResponseBody
    	@RequestMapping("/role/save/role")
    	public ResultEntity<String> saveRole(@RequestParam("roleName") String roleName) {
        
    		
    		roleService.saveRole(roleName);
    		
    		return ResultEntity.successWithoutData();
    	}

### 服务 ###

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/service/impl/RoleServiceImpl.java

@Override
    	public void saveRole(String roleName) {
        
    		roleMapper.insert(new Role(null, roleName));
    	}

[20200107142538310.png]: https://img-blog.csdnimg.cn/20200107142538310.png