Mvc4+easyui-based Web development framework--an introduction to the framework's overall interface

In the previous article about the latest Mvc4+easyui-based Web development framework articles, although the Web development Framework related technical articles will be written along with the technology, but this series of articles, to do a summary here, to show the overall Mvc4+easyui-based interface effect, Let everyone to this web development framework has an image of understanding, interface design and related ideas can be used for reference to improve, can also be related to the content of mutual discussion and common improvement.

Technical Features: the entire Web development framework, the interface part of the use of newer technologies, including MVC4, the latest version of the Easyui, as well as Ztree tree control, uploadify file upload components and other modules, combined with the Print module LODOP for page printing, File Word or Excel export operations, data support Oracle, SQL Server, MYSQL, Sqlite, access and other general databases, can be configured to switch freely, using Enterprise Library module for data access control, Make data access easier and more convenient.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28171147- Fd8a607732884a77b2320203ecbce8e3.png "style=" border:0px; "/>

Controller design: The Web development framework has used many of the architectural design ideas and features of my WinForm development framework to encapsulate the controller. So that the controller can obtain a good inheritance relationship, and can be less code, more efficient development efficiency, the implementation of Web project development work, the entire controller design ideas are as follows.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201308/ 27120607-6ad84bc6809c4e0fa5d46150569ce385.png "style=" border:0px; "/>

privilege Control: Good controller design rules, can provide good user access control and permission control for Web development framework itself, make user interface render menu, Web Interface button and content, action commit control, all can be under the overall permission function distribution and control.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28171855- F17559dd1859459687308c6e34ad04e3.png "style=" border:0px; "/>

Fast code generation: A good architecture makes it possible to provide uniform code logic, both at the business logic layer, the controller layer, and the UI layer of the Web interface, which can be generated through the Code generation tool DATABASE2SHARP. The Web interface code can make full use of the metadata information of the Code generation tool Database2sharp to realize the fast generation of the Web interface. Effectively reduce the probability of error, improve the development of web interface coding efficiency and fun, but also can make the enterprise internal coding mode for efficient unification.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28164548-6edb8718556b498c9a85816a54de549c.png "style=" border:0px; "/>

First, landing and main interface 1, login interface

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28105047- E3a4eb3896ba4d8b969a510464b71bcb.png "width=" 485 "height=" 328 "style=" border:0px; "/>

2. Frame Main interface

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28105734-685e08491e90416aa4c69da7b8697e09.png "style=" border:0px; "/>

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28110319-8249447feea14483bafc2dd4a40a00dc.png "style=" border:0px; "/>

Icon Style Generation Management

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130936315225958.png "style=" border:0px; "/ >

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/130933576942730.png "style=" border:0px; "/ >

Second, the industry dynamic management1. Policy/Regulation/notice announcement/Dynamic Information List interface

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28110610- D5934d82d20c4212a2b65e289d41ccef.png "style=" border:0px; "/>

2. Modify the Content interface

The content editing interface of the notification announcement is as follows.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28110930-693a28fb94424280b1aecf75e0e146be.png "style=" border:0px; "/>

3. View more information

The View details interface for the notification announcement is shown below.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28111510- F95fd947b6094e8bb08b9314227cccab.png "style=" border:0px; "/>

4. Print interface

The print preview interface of the notification announcement is shown below, and the module inherits the print control, so the preview works beautifully.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28111518-03656b71f44f4faca2b79fb0fe20bf18.png "style=" border:0px; "/>

5. File export to Word or Excel operation

Notification announcements can export Excel or Word files, using Aspose.word and Aspose.excel controls on the MVC controller side, making the exported content more aesthetically pleasing.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28111849- Ac1fb0a9ccf2429da5ade340fe29bb01.png "style=" border:0px; "/>

Second, System Management 1, user management

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190931461685115.png "style=" border:0px; "/>

User classification, can be divided according to the organization structure, can also be divided according to the role, easy to find.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190933441991675.png "style=" border:0px; "/>

The user information editing interface, which includes user-based information and user-operable features, can view the basic information of the editing user or see what the user has.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190937539968188.png "style=" border:0px; "/>

Viewing user-actionable features is a collection of all the features that the user's include role has, which can be viewed only, and can be assigned in the Role management module if you need to adjust user-actionable features.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190938353098575.png "style=" border:0px; "/>

The Modify user password interface is as follows:

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28115132-0a87c68f9c4d4ee08983c0680fd3f495.png "style=" border:0px; "/>

2. Organizational Structure Management

In order to facilitate management, organizations are presented in a tree-structured manner, and organizations are divided at the company level to achieve hierarchical management of organizational structures, and each company's administrators can only manage organizational relationships within their own company.

Double-click any of the organization nodes to expand the details of the organization, as well as information about the organization: contains the user and the owning role. This can be assigned to the corresponding user of the organization, with a specific role, including the person will quickly have the corresponding role of all rights.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190942337629624.png "style=" border:0px; "/>

3. Role Management

Roles are also hierarchically managed according to the company hierarchy, and within a company, role names cannot be duplicated. Role management, including the basic information of the management role, the role of the operational functions (functional permissions) and access to data (data rights), and through the development of user or institutional way, ultimately realize the control of user rights.

The permissions of the role are hierarchical, the Super administrator manages all the role functions, has the largest set of permissions, can assign a collection of administrator rights for different companies, and the administrators who belong to the company have only the privileges assigned by the Super Administrator.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190949042628857.png "style=" border:0px; "/>

A role's operational capabilities (feature permissions) that allow you to assign feature permissions on all the permissions that the role has.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190949160432624.png "style=" border:0px; "/>

Accessible data (data permissions), through binding roles and organizational relationships, so as to achieve the control of role data permissions, business systems in the development process of integration can effectively control the user's data rights.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190949286686048.png "style=" border:0px; "/>

4. Function Management

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190958014189829.png "style=" border:0px; "/>

In order to make it easy to add multiple functional units at once, bulk additions can be made through the bulk add operation, and the bulk add interface is shown below.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/191023309815951.png "style=" border:0px; "/>

5. Menu Management

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/190959594961403.png "style=" border:0px; "/>

The Add menu interface is shown below.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/191000595439747.png "style=" border:0px; "/>

The View menu Details screen is shown below.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28120958-4053f44a4b2341b8bed2312d5eda2202.png "style=" border:0px; "/>

6. Login Log

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/191005461371103.png "style=" border:0px; "/>

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28121253-01e3bc3615aa442aadef89d6a047c37c.png "style=" border:0px; "/>

7. Dictionary Management

Dictionary management includes the management of the dictionary category and the management of the dictionary data, by integrating the tree control in the interface, clicking on any node, the category dictionary data can be refreshed, and then displayed on the right, the interface is as follows.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28121429- Ca5e2b44f67a4c12856fbe38a2540869.png "style=" border:0px; "/>

Add in the dictionary category, pop up a dialog box, and use the current dictionary class as the parent node, as shown in the interface below.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28121509-5d7270138f234221975913521149e3e9.png "style=" border:0px; "/>

The interface for modifying the dictionary data is shown below.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/28121723- A72f7e81a08e433f9e7b301f5dead9e5.png "style=" border:0px; "/>

The interface for viewing the dictionary data is shown below.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28121818-25037a2adc1f4020b601dda1d0ce455a.png "style=" border:0px; "/>

In addition to individual dictionary data additions, it is sometimes convenient and important to add dictionary data in bulk, so a bulk dictionary data entry interface is provided, as shown below.

650) this.width=650; "Src=" http://images.cnitblog.com/blog/8867/201309/ 28121734-10af85019054499693829fb44081898e.png "style=" border:0px; "/>

City Province Management

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/131037550532697.png "style=" border:0px; "/ >

650) this.width=650; "src=" Http://images.cnitblog.com/blog/8867/201411/131038140693441.png "style=" border:0px; "/ >

8. Chart Management

Statistical charts are a feature that many applications need to have, and in order to better illustrate the use of charts, the framework provides a variety of graphical demonstrations of styles.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/191006488404393.png "style=" border:0px; "/>

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201405/191007159964556.png "style=" border:0px; "/>

The above is the entire web framework part of the interface, in the Web development process, often encounter a lot of details of the problem, need to search a lot of relevant articles to solve, the interface aesthetics has also been a special improvement, and strive to be able to directly use in specific project projects, and do not need to deal with too much.

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1828912

Mvc4+easyui-based Web development framework--an introduction to the framework's overall interface