7.3 client key business and code implementation
7.3.1 list page modification button event handling
- Business description and design implementation
Register the event on the role modification button. When you click the page modification button, you will send an asynchronous request to the server based on the role id to obtain the role related data, and then load the modification page.
- Key code design and Implementation
Step 1: after the page is loaded, register the Modify button event. The key codes are as follows:
$(function(){
//In case of modification
$(".input-group-btn")
.on("click","btn-update",doLoadEditUI);
});
Step 2: modify the button event handler function definition or modification. The key codes are as follows:
function doLoadEditUI(){
//Define the page title (the content may be adding or modifying roles)
var title;
//Determine the operation to be performed (add or modify)
if($(this).hasClass("btn-add")){
title="Add role";
doLoadPageUI(title);
}else{
title="Modify role";
//Gets the id value of the current row
var id=$(this).parents("tr").data("id");
//Find the record according to the id and determine whether the record exists
var url="role/doFindObjectById";
var data={"id":id};
$.getJSON(url,data,function(result){
if(result.state==1){
$("#mainContentId").data("data",result.data)
loadPageUI(title);
}else{
alert(result.message);
}
});
}
}
Step 3: define or modify the method of loading the editing page. The key codes are as follows:
function doLoadPageUI(title){
$("#mainContentId")
.load("role/role_edit",function(){
$(".box-title").html(title);
});
}
7.3.2 edit page menu data presentation
- Business description and design implementation
After the page is loaded, obtain and edit the page data, and then present the data at the specified position of the page.
- Key code design and Implementation
Step 1: in the role editing page, after the menu data is loaded, obtain the form data required in the role editing page, and then initialize the page data. The key codes are as follows:
function doLoadSysMenus(){
var url="menu/doFindZTreeNodes"
$.getJSON(url,function(result){
if(result.state==1){
zTree=$.fn.zTree.init(
$("#menuTree"),setting,result.data);
var data=$("#mainContentId").data("data");
if(data){
doInitEditFormData(data);
}
}else{
alert(result.message);
}
})
}
Step 3: define the initialization method for editing page data. The key codes are as follows:
function doInitEditFormData(data){
$("#nameId").val(data.name);
$("#noteId").val(data.note);
//Expand all nodes
zTree.expandAll(true);
//Check the menu owned by the role
var menuIds = data.menuIds;
for(var i=0; i<menuIds.length; i++) {
//Get the node with key id and menuIds[i]
var node = zTree.getNodeByParam("id",menuIds[i]);
//Select the current node
zTree.checkNode(node,true,false);
}
}
Role data update implementation
Business timing analysis
Click the update button on the role editing page to analyze the time sequence, as shown in figure-16:
Figure-16
Key business and code implementation of server
DAO interface implementation
Business description and design implementation
Get the role editing page data, and then submit it to the server asynchronously to update the role information and the menu relationship data corresponding to the role to the database.
Key code design and Implementation
Add the data update method in the SysRoleDao interface. The key codes are as follows:
int updateObject(SysRole entity);
Mapper file definition
Business description and design implementation
Based on the definition of updateObject method in SysRoleDao, write SQL elements for role update.
Key code design and Implementation
Add the updateObject element in SysRoleMapper.xml to update the menu information. The key codes are as follows:
<update id="updateObject"
parameterType="com.cy.pj.sys.entity.SysRole">
update sys_roles
set
name=#{name},
note=#{note},
modifiedUser=#{modifiedUser},
modifiedTime=now()
where id=#{id}
</update>
Service interface and Implementation
Business description and design implementation
Based on the request of the control layer, verify the data and call the data layer object to update the role information and role menu relationship data to the database.
Key code design and Implementation
Step 1: in the SysRoleService interface, add a method to update the role object. The key codes are as follows:
int updateObject(SysRole entity,Integer[] menuIds)
Step 2: update role in SysRoleServiceImpl class. The key codes are as follows:
@Override
public int updateObject(SysRole entity,Integer[] menuIds) {
//1. Legitimacy verification
if(entity==null)
throw new IllegalArgumentException("The updated object cannot be empty");
if(entity.getId()==null)
throw new IllegalArgumentException("id The value of cannot be empty");
if(StringUtils.isEmpty(entity.getName()))
throw new IllegalArgumentException("Role name cannot be empty");
if(menuIds==null||menuIds.length==0)
throw new IllegalArgumentException("You must specify a permission for the role");
//2. Update data
int rows=sysRoleDao.updateObject(entity);
if(rows==0)
throw new ServiceException("The object may no longer exist");
sysRoleMenuDao.deleteObjectsByRoleId(entity.getId());
sysRoleMenuDao.insertObject(entity.getId(),menuIds);
//3. Return results
return rows;
}
Controller class definition
Business description and design implementation
First, it receives the role data submitted by the client and encapsulates it, then calls the business layer object to update the role information more frequently, and finally responds to the client by processing the result of the business layer.
Key code design and Implementation
Define methods to update roles in the SysRoleController class. The key codes are as follows:
@RequestMapping("doUpdateObject")
public JsonResult doUpdateObject(SysRole entity,
String menuIds){
sysRoleService.updateObject(entity,menuIds);
return new JsonResult("update ok");
Client key business and code implementation
Edit page update button event handling
Business description and design implementation
Click the save button on the page to submit the role editing information entered on the page to the server.
Key code design and Implementation
Step 1: define the function to obtain the form data of the role editing page in the role editing page. The key codes are as follows:
function doSaveOrUpdate(){
//1. Get form data
var params=doGetEditFormData();
var rowData=$("#mainContentId").data("rowData");
//2. Define url
var insertUrl="menu/doSaveObject";
var updateUrl="menu/doUpdateObject";
var url=rowData?updateUrl:insertUrl;
if(rowData)params.id=rowData.id;
//3. Submit data asynchronously
$.post(url,params,function(result){
if(result.state==1){
alert(result.message);
doCancel();
}else{
alert(result.message);
}
});
}
Step 2: define or modify the method of submitting and editing page form data. The key codes are as follows:
//This method is executed when the Save button is clicked
function doSaveOrUpdate(){//insert/update
//Get form data
var params=doGetEditFormData();
//If a value is bound to the. Container fluid object of the current page, it indicates that it is modified
var data=$("#mainContentId").data("data");
if(data){
params.id=data.id;//id needs to be added to the form data when modifying
}
//The url is defined according to whether the value is bound on the current page
var insertUrl="role/doSaveObject";
var updateUrl="role/doUpdateObject";
var url=data?updateUrl:insertUrl;
//Submit data asynchronously
$.post(url,params,function(result){
if(result.state==1){
alert(result.message);
doCancel();
}else{
alert(result.message);
}
})
}
summary
Analysis of key and difficult points
Delete role data? (deletion of relationship data)
One to many data storage? (save the relationship data between the role and the menu while saving the role)
One to many data query mapping? (query the role information based on the role id and the corresponding menu information)
FAQ analysis
What is the relationship between roles and menus?
Describe the implementation of role deletion business?
Describe the implementation of role addition business?
Describe the implementation of role update business?
BUG analysis
The view resolution problem is shown in figure-17:
Figure-17
Problem analysis:
Check whether the @ ResponseBody annotation is added to the corresponding method.
Check whether the mapping path configuration of the control layer object method is correct.