Summary on the experience of Bootstrap Metronic Development Framework Overview of "Eight" framework function overall interface Introduction _JAVASCRIPT skills

This paper mainly introduces the general function interface of the bootstrap framework, and introduces the knowledge points and the integral interface. Hope that the reader has a more intuitive and realistic understanding of the framework, interface design and related ideas can be used for reference, can also be related to the content of mutual discussion and improve together.

1, "Based on Metronic Bootstrap development Framework" technical features

1 using the latest and most dazzling bootstrap response framework technology

The whole bootstrap development framework based on Metronic, the interface part adopts the newer bootstrap technology, uses the current newest bootstrap3.x, integrates many powerful bootstrap controls.

Bootstrap is a front-end technical framework, many platforms can be used, java/php/. NET can be used to do the front-end interface, integrated jquery can achieve a very rich interface effect, there are many bootstrap plug-ins can be provided for everyone to use, this framework brings together many of the most excellent plug-ins, to our Web user experience to upgrade to an unprecedented level.

Metronic is a foreign based on HTML, JS and other technology bootstrap development framework integration, the integration of a lot of bootstrap front-end technology and plug-in use, is a very good technical framework. This framework, combined with my research on MVC's web framework, integrates the bootstrap development framework based on MVC to meet the structural needs of the actual project.

The framework uses the MVC technique based on C #, which is currently. NET development of the most mature and popular technology, framework background database support Oracle, SQL Server, MYSQL, Sqlite, access and other conventional databases, can be configured for free switching, using the Enterprise Library module for data access control, Make data access more convenient and easy.

Overall framework development using visual Studuio 2013 as well as page editing tools sublime text development, page and background code, through the Code generation tool DATABASE2SHARP rapid development to achieve the overall development of the maximum efficiency.

The overall structure of the framework is shown below:

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 as shown below.

Permission control: Good controller design rules, can provide a good user access control and access control for the Web development framework, making the user interface rendering menu, Web Interface button and content, action submission control, can be under the overall authority function distribution and control.

Rapid code generation: A good architecture makes it possible to provide unified code logic, both at the business logic level, 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 DATABASE2SHARP information of the Code generation tool to realize the rapid generation of the Web interface. Effectively reduce the chance of error, improve the development of web interface coding efficiency and fun, but also make the enterprise internal coding mode for efficient unification.

Enterprise library code generation, can quickly generate in addition to the interface of the overall framework code, bootstrap web interface code generation, can quickly generate metronic based bootstrap front-end interface code and background controller code, Interface part includes query, paging, data display, data import and export, add, edit, view, delete and other basic function interface, after generation we can based on this on the basis of simple, rapid changes can meet the actual needs, greatly improve the development of our web interface efficiency.

Frame layout: The following is the total effect of my overall project.

The contents of the System menu bar are the menus that are obtained dynamically from the database. System Top Column "Put some information display, and provide users of personal data processing, such as viewing personal information, cancellation, lock screen and other operational content; Content areas generally include the tree list area, conditional Chahi, and list data and paging content. The content area is primarily a visual display of data that can be displayed through tree list controls, table controls, general data, as well as the need for additional deletions and paging, and therefore the need to integrate the processing of various functions. In addition, the user's data, in addition to the query display, but also need to import, export and other related operations, these are the conventional data processing functions.

Menu processing and display: generally in order to manage conveniently, the menu is divided into three levels, the selected menu and other menu styles are differentiated, the menu can be folded minimized, the effect is as follows.

2. Introduction to the module interface of "Bootstrap development framework based on Metronic"

2.1 First page Chart module interface

2.2 System Top Bar function

2.3 Industry dynamic function (policy regulation, Notice bulletin, dynamic information)

Policy regulations/Notification bulletin/dynamic Information list interface

The editing interface looks like this:

The view content interface looks like this:

2.4 Customer Information Management

The customer list interface looks like this:

Customer Information Editing Interface:

Customer Information Import Interface:

2.5 Customer Contact Management

Customer contact Add/Edit interface

Customer Contact View Interface

Attachment Information Interface

2.6 Address Book Management

Address List

The Address book editing interface is shown below.

2.7 Rights Management

1 System User List interface

System User Import Interface

System User Editing interface

Portrait uploading and editing for system users

The system user deletes the confirmation dialog box.

System user's RDLC report interface.

2) Organization Management interface

Organization includes user editing interface

3 User Role Management

Role-operable Feature collection display

The role has access to data rights control:

Role includes institution management:

4) system function management

5) System Menu Management

Edit menu Information Interface:

Select Menu Icon Interface:

6) System login log Management

7) General dictionary Management

8) Menu Icon Management

9 Photo Album Management

The edit picture interface looks like this:

Picture viewing interface

The above is a small set to introduce the Bootstrap Metronic development framework based on experience summary of the "Eight" framework of the overall interface of the relevant content, I hope to help!