Build a set of general permission management system with emphasis on UI and background. net

I. Preface

It has been several years since we started the software development industry. We did a lot of repetitive things before we sorted out this development framework. Every time you have a new project, it will always take a lot of time on the UI, permissions, and general system modules. I am so tired that the boss is still not efficient. In order to improve the development efficiency, and also get more bonuses and save more private money, I started to develop a fast development framework based on permission management. Not asking for functions to be used in all projects must at least greatly improve development efficiency.

Ii. Demand Analysis

According to the requirements of various customers on the permission module, General modules, and UI in the projects we have done together in those years, I have made clear what needs to be implemented in this system.

1. OrganizationMulti-level tree display, easy to operate at a glance

2. UsersAll permissions are finally assigned to the user. If permissions are assigned by the user, the system administrator is exhausted. The system first creates a role, assigns permissions to the role, and adds the user to the role members. Of course, some users have the same permissions. If you do not want to create too many roles in the system, you can assign permissions to users. A set of role permissions and user permissions.

3. RoleA set of permissions.

4. ModulesIt can also be called a menu. It can be a page in the system, or the page addresses of other systems can be integrated into the same permission system for maintenance.

5. Buttons

6. PermissionsPermission assignment mode: 1) grant permissions to roles, which facilitates permission allocation.

2) Flexibility in user permission allocation and permission allocation.

Permission control type: 1) module permission: the purchaser has the permission of the procurement module and the inventory View module.

2) click the button to authorize the buyer to click the Add button to add a purchase order. The purchase manager can click the review button to review the purchase order.

3) Data permissions Each clerk can only view his or her own customer information.

4) Field permission accounting can view all fields in the inventory report, and the Warehouse administrator cannot see the amount field in the report.

5) File Permission: only the general manager and members of the Sourcing Department have the permission to purchase documents from the Sourcing Department.

7. LogsLogon logs, operation logs, and system exception logs

8. Database ManagementView database information and database backup on the front-end page

9. Access Control

10. dynamic interfacesThe interface mentioned here is the communication interface with other systems or devices. It is generally provided in the form of Webservice, WCF, and Webapi. Only one interface is exposed in the system. You do not need to modify programs when you add or modify interfaces.

11. UIFront-end framework: Uses Jquery UI, which features powerful scalability and flexibility without worrying about copyright issues.

Multiple style interfaces: accordion navigation style, desktop style, and touch screen Style

12. System Parameters

13. Code GeneratorGenerate interface and background code as needed

Iii. Design implementation

2. Program Design

The program is basically implemented in Jquery + Ajax + factory mode, with nearly 0.1 million lines of code. The subsequent modules will be explained in detail.

3. User Experience UI design

UI is like a woman's face for a software. What others see first is your face. Good people, ugly faces, must always have Singles' Day. A set of program UI beautiful program class will naturally go up. No picture, no truth. The following provides some main interfaces. The detailed implementation will also be provided in the blog below.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/124022K47-0.png "style =" border: 0px; "alt =" 12093820-552b815584154a01a37caed43407987 "/>

1) system Style

A) desktop Style

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240225Y9-1.png "style =" border: 0px; "alt =" 12024310-006e51f5445544b0adce4a307f7615c "/>

B) Accordion style

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/124022C26-2.png "style =" border: 0px; "alt =" 12025826-f2d22d4c6b5e4dd9a3abb0da-4e26fa "/>

C) Touch Screen Style

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/124022EJ-3.png "style =" border: 0px; "alt =" 12030220-28e0649f7ae04d639eb9b7370e83a1c "/>

2. Employee management

Expand organizational unit on the left and manage employees on the right

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240221392-4.png "style =" border: 0px; "alt =" 12030448-1135c0334a541585824bd77211006fa "/>

3. Organization Management

Tree-based organizations with clear organizational structure

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240222500-5.png "style =" border: 0px; "alt =" 12030503-4d937f4d06934c0aaf94e273dab0649 "/>

4. Organizational Structure

The organizational structure automatically generated by the Organization

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240223J4-6.png "style =" border: 0px; "alt =" 12030513-51e6e85565f04c3a8f00c323bb661f9 "/>

5. Role permission Control

Role member: the user who owns the role.

Module permission: Which modules can this role operate on.

Button permission: Which buttons in this module can be operated by a role.

Data permission: the data to which the role has operation permissions.

File Permission: the role has the operation permission on which files.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240224N7-7.png "style =" border: 0px; "alt =" 12030523-089e35352e744ee2be7a15451c8fbf8 "/>

6. Module button Management

Drag the button to change the display position of the button in the module.

The check status button is displayed in the module.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/124022A58-8.png "style =" border: 0px; "alt =" 12030535-7d0c4d505d46493e9da73621382106 "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240222507-9.png "style =" border: 0px; "alt =" 12093046-ebc01fbbf0f646799c4cce7b4320ef8 "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240225102-10.png "style =" border: 0px; "alt =" 12093059-35e3f18625104780bb72854dc8ba524 "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131229/1240222150-11.png "style =" border: 0px; "alt =" 12093120-8ef8036f3e0b4bdbb079d2afa5f061f "/>

Of course, the picture will be posted here first! If you think you can understand the design ideas of these images and think they will be used in the future, please add them to your favorites,I recommend it!

I can only say that your aesthetic level must be improved if I want to say three words "Destroy three views" to him after reading some interfaces, IT is a trendy industry. If you are not busy, you will not be able to stand out. Opportunities will often leave you a place! What do you say?

Let's test it together.

Http: // 223.86.105.239: 801 touch screen Style

Http: // 223.86.105.239: 802 Accordion style

Http: // 223.86.105.239: 803 desktop Style

Http: // 223.86.105.239: 805 Code Generator

If you are interested, you are welcome to join the discussion group: 312677516

This article is from the "2155201" blog, please be sure to keep this source http://2165201.blog.51cto.com/2155201/1327731