使用EasyUI开发银行业绩统计系统[21]-菜单管理的Code Once实现
一，简介
角色管理和菜单管理的业务逻辑基本是一模一样的，无非增删改查而已，猫哥直接讲述如何利用复制-粘贴的方式完成菜单管理功能的开发。
注意：本篇采用一种意识流的开发手段，即直接一顿狂编码，最后直接测试，如果逻辑能力够强大的的话，应该直接一遍测试就通过。
在唱片界，这叫做One Take，林志炫老师很爱这个。在代码界，咱叫做Code Once！
二，大体过程
涉及到需要新建的文件：
1，menu_manage.jsp，菜单管理网页，参照role_manage.jsp修改即可
2，menu_manage.jsp.js，网页调用的js脚本，参照role_manage.jsp.js修改即可。
3，MenuServlet.java，服务端组件，参照RoleServlet.java修改即可。
4，MenuService.java，数据服务组件，参照RoleService.java修改即可哦。三，菜单管理网页
注意需要修改的地方猫哥已经添加注释。
<!-- 新建文件menu_manage.jsp -->
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>菜单管理</title><!-- 角色改为菜单 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<!--角色列表改为菜单列表;RoleServlet改为MenuServlet-->
<table id="uiGrid" title="菜单列表" class="easyui-datagrid" style="width:700px;height:350px"
url="/BankStatistics/MenuServlet?method=list"
toolbar="#uiTool" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<!-- 按照数据库中menu表的结构修改即可 -->
<th field="menu_id" width="100">菜单编号</th>
<th field="menu_name" width="100">菜单名称</th>
<th field="menu_url" width="100">菜单url</th>
</tr>
</thead>
</table>
<!-- 工具栏;方法所属对象改为menu_manage -->
<div id="uiTool">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="menu_manage.CreateOne()">新增</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="menu_manage.EditOne()">编辑</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="menu_manage.DeleteOne()">删除</a>
</div>
<!--详情对话框 -->
<div id="uiDialog" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">详细信息</div>
<form id="formInfo" method="post">
<div class="fitem">
<!-- 按照数据库中menu表的结构修改即可 -->
<label>菜单名称:</label>
<input name="menu_name" class="easyui-validatebox" required="true">
<label>菜单url:</label>
<input name="menu_url" class="easyui-validatebox" required="true">
</div>
</form>
<div id="toolInfo">
<!--方法所属对象改为menu_manage -->
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="menu_manage.SaveOne()">保存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#uiDialog').dialog('close')">取消</a>
</div>
</div>
</body>
</html>四，js脚本修改
//在script文件夹下新建menu_manage.jsp.js,并复制role_manage.jsp.js中的代码后进行修改
var menu_manage_function=function(){//将role_manage_function改为menu_manage_function
this.CreateOne=function(){
$('#uiDialog').dialog('open').dialog('setTitle','新增');
$('#formInfo').form('clear');
url = '/BankStatistics/MenuServlet?method=createOne&ran='+Math.random();//RoleServlet改为MenuServlet
};
this.EditOne=function(){
var row = $('#uiGrid').datagrid('getSelected');
if (row){
$('#uiDialog').dialog('open').dialog('setTitle','编辑');
$('#formInfo').form('load',row);
//RoleServlet改为MenuServlet;role_id改为menu_id
url = '/BankStatistics/MenuServlet?method=editOne&id='+row.menu_id+'&ran='+Math.random();
}
};
this.SaveOne=function(){
$('#formInfo').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.success===false){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#uiDialog').dialog('close');
$('#uiGrid').datagrid('reload');
}
}
});
};
this.DeleteOne=function(){
var row = $('#uiGrid').datagrid('getSelected');
if (row){
$.messager.confirm('确认','确定删除选中项?',function(r){
if (r){
//RoleServlet改为MenuServlet;role_id改为menu_id
$.post('/BankStatistics/MenuServlet?method=deleteOne&ran='+Math.random()
,{id:row.menu_id},
function(result){
if (result.success===true){
$('#uiGrid').datagrid('reload');
}
else {
$.messager.show({
title: 'Error',
msg: '删除错误'
});
}//ifelse
}//functoon
,'json'
);//post
}//if(r)
});//messager.confirm
}//if(row)
};
};
//role_manage_function改为menu_manage_function;role_manage改为menu_manage
var menu_manage=new menu_manage_function();五，Servlet和Service修改
这两个修改比较简单，自行比照上一篇文章即可。
package panda.bank.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import panda.bank.entity.Menu;
import panda.bank.service.MenuService;
import net.sf.json.JSONObject;
@WebServlet(urlPatterns="/MenuServlet")
public class MenuServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String method=request.getParameter("method");
MenuService service=new MenuService(Menu.class);
//获取列表
if(method.equals("list")){
int page,rows,offset,total;
String i_page=request.getParameter("page");
if(i_page==null)
page=1;
else
page=Integer.parseInt(i_page);
String i_rows=request.getParameter("rows");
if(i_rows==null)
rows=10;
else
rows=Integer.parseInt(i_rows);
offset=(page-1)*rows;
total=service.getTotalCount();
List<Menu> roles=service.getPage(offset, rows);
Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map
jsonMap.put("total", total);//total键 存放总记录数，必须的
jsonMap.put("rows", roles);//rows键 存放每页记录 list
String result = JSONObject.fromObject(jsonMap).toString();//格式化result 一定要是JSONObject
out.print(result);
}
else if(method.equals("createOne")){
Menu one=new Menu();
one.setMenu_name(request.getParameter("menu_name"));
one.setMenu_url(request.getParameter("menu_url"));
service.add(one);
out.print("{\"success\":true}");
}
else if(method.equals("editOne")){
String id=request.getParameter("id");
Menu one=service.getByMenuId(id);
one.setMenu_name(request.getParameter("menu_name"));
one.setMenu_url(request.getParameter("menu_url"));
service.update(one);
out.print("{\"success\":true}");
}
else if(method.equals("deleteOne")){
String id=request.getParameter("id");
service.delete(id);
out.print("{\"success\":true}");
}
out.flush();
out.close();
}
}
package panda.bank.service;
import java.util.List;
import panda.bank.entity.Menu;
public class MenuService extends Service{
public MenuService(Class entityClass) {
super(entityClass);
}
public int getTotalCount(){
return operation.selectCount();
}
public List getPage(int offset,int rows){
return operation.selectPage(offset, rows);
}
public Menu getByMenuId(String id){
return (Menu)operation.selectOne(id);
}
public int add(Menu one){
return operation.add(one);
}
public int update(Menu one){
return operation.update(one);
}
public int delete(String key){
return operation.delete(key);
}
}六，测试和总结
重新 部署、运行Tomcat，菜单的增、删、改、查、分页一切正常，Code Once实现，成就感满满！
经过这两个案例，以后针对单表操作的功能，一笔带过，毕竟很简单，演示已经很充分了。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦