This article mainly introduces the overall functional interface of this Bootstrap framework, and introduces the knowledge points and overall interfaces used in it. I hope readers will have a more intuitive and realistic understanding of the framework. Interface design and related ideas can be learned from and improved, and they can also discuss related contents to improve together.
1. Technical features of "Bootstrap Development Framework Based on Metronic"
1) Adopt the latest and most dazzling Bootstrap responsive framework technology
The entire Metronic-based Bootstrap development framework uses the newer Bootstrap technology in the interface part, adopts the current latest Bootstrap 3.x, and integrates many powerful Bootstrap controls.
Bootstrap is a front-end technical framework that can be adopted by many platforms. JAVA/PHP/.NET can be used to make front-end interfaces. Integrating JQuery can achieve very rich interface effects. Currently, there are many Bootstrap plug-ins that can be provided for everyone to use. This framework brings together many of the most excellent plug-ins, which can improve our web user experience to an unprecedented level.
Metronic is a foreign Bootstrap development framework based on HTML, JS and other technologies, integrating many Bootstrap front-end technologies and plug-ins. It is a very good technical framework. Based on this framework, combined with my research on MVC's web framework, this framework integrates the Bootstrap development framework based on MVC to enable it to meet the structural needs of actual projects.
The framework backend uses C#-based MVC technology, which is currently the most mature and popular technology developed by .NET. The framework backend database supports regular databases such as Oracle, SqlServer, MySql, Sqlite, Access, etc., and can be switched freely through configuration. Use the Enterprise Library module to control data access, making data access more convenient and easy.
The overall framework development uses Visual Studio 2013 and the page editing tool Sublime Text combined with development, page and background code, and uses the code generation tool Database2Sharp to quickly develop to achieve maximum efficiency improvement in overall development.
The overall structure of the framework is as follows:
This enables the controller to obtain good inheritance relationships and can achieve the development of web projects with less code and more efficient development efficiency. The design idea of the entire controller is as follows.
Permission control: Good controller design rules can provide good user access control and permission control for the Web development framework itself, so that the user interface presents menus, buttons and contents of the Web interface, and the submission control of Action can all be under the overall permission function allocation and control.
Quick code generation: A good architecture enables unified code logic to be provided in the business logic layer, the controller layer, and the UI layer of the web interface. These codes can be generated through the code generation tool Database2Sharp. Web interface code can make full use of the metadata information of the code generation tool Database2Sharp to achieve rapid generation of the web interface. Effectively reduce the chance of errors, improve the development efficiency and fun of web interface coding, and also enable efficient unification of the coding mode within the enterprise.
Enterprise Library code generation can quickly generate holistic framework code except for the interface. Bootstrap's web interface code generation can quickly generate front-end interface code and background controller code of Metronic-based Bootstrap. The interface part includes basic functional interfaces such as query, paging, data display, data import and export, new, editing, viewing, and deletion. After generation, we can make simple and fast modifications based on this basis to meet actual needs, greatly improving the development efficiency of our web interface.
Frame layout: The following is the overall rendering of my overall project.
The content of the [System Menu Bar] is a menu obtained dynamically from the database; the [System Top Bar] places some information display and provides users with quick processing of personal data, such as viewing personal information, canceling, locking the screen and other operation content; the content area generally includes [Tree List Area], [Condition Query Area] and [List Data and Pagination] content area is mainly visually displayed data, which can be displayed through tree list controls and table controls. Generally, the data also needs to be added, deleted, modified, and paging, so various functions need to be integrated. In addition to query and displaying the user's data, it also requires import and export related operations, which are routine data processing functions.
Menu processing and display: Generally, for the convenience of management, menus are divided into three levels. The selected menus are different from other menu styles. The menus can be folded and minimized. The effect is as follows.
2. Introduction to the module interface of "Bootstrap Development Framework Based on Metronic"
2.1 Home Chart Module Interface
2.2 System top bar function
2.3 Industry dynamic functions (policies and regulations, notices and announcements, dynamic information)
Policies, Regulations, Notices and Announcements/Dynamic Information List Interface
The editing interface is as follows:
The viewing content interface is as follows:
2.4 Customer Information Management
The customer list interface is as follows:
Customer information editing interface:
Customer information import interface:
2.5 Customer Contact Management
Customer contact addition/edit interface
Customer contact viewing interface
Attachment information interface
2.6 Address Book Management
Contacts List
The address book editing interface is shown below.
2.7 Permission Management
1) System user list interface
System user import interface
System user editing interface
Upload and edit portraits of system users
System user delete confirmation dialog box.
The RDLC report interface of the system user.
2) Organization management interface
The organization contains user editing interface
3) User role management
Showcase of role operational function collection
Role access to data permission control:
Roles include organizational 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) Picture album management
The editing image interface is as follows:
Image viewing interface
The above is the relevant content introduced by the editor to you by the experience summary of the framework based on BootStrap Metronic development framework [8]. I hope it will be helpful to everyone!