"Open source. NET" shares a lightweight content management framework that separates back and forth

There are too many facets to consider in the development framework: security, stability, performance, efficiency, expansion, cleanliness, and the test of practice, and the development of a usable framework from scratch is a time-consuming task. Many open-source frameworks on the web, why do they have to develop themselves? I am based on the following two points:

1. Did not find the right: safe, stable, simple, easy-to-use, efficient, free;
2. Want to be an architect;

So on their own hands, refer to the online open source project and learn from the user's design ideas (especially Xiangin series blog), combined with their own practice, developed a simple, easy-to-use, efficient framework, although imperfect, but also can solve the real problems. But with the insight to broaden, found not responsible for tens other projects difficult to become an architect, it is impossible to develop a perfect framework. Then open source, the back slowly maintenance and improvement.

"Open source. NET" Lightweight Content Management Framework GRISSOM.CMS (the first to share a front-end separation framework)
"Open source. NET" Lightweight Content Management framework GRISSOM.CMS (second front-end interactive data structure analysis)
"Open source. NET" Lightweight Content Management Framework GRISSOM.CMS (third parsing configuration files and data to convert to SQL)

First, the frame structure diagram

Second, layered

As seen from the framework diagram, the code structure business is divided into 5 tiers:

1. Web: Presentation layer
2. Webapi:http Reception and response
3. Service: Business logic and data processing
4. Easycore: Semi-orm (Easy.dataproxy, Easy.office, easy.sqlconfiguration)
5. Model: Entity

Project structure for the corresponding solution:

Divided into 3 layers by functional angle:

1. Light Blue: Presentation layer
2. Dark blue: HTTP receive and Response layer
3. Light Orange: business logic and data processing layer

Divided into 2 tiers by business:

1. Light Blue: Presentation layer
2. Light Orange: business logic and data processing layer

The classic 3-tier architecture, I just put the back of the business logic layer and data processing layer into 1 layers. Theoretically, the separation of business logic and data processing is very reasonable, but the reality is that data processing is often written SQL, and SQL is not simply to obtain data, many times will be coupled with a large number of business logic inside, resulting in the programmer to deal with the business, a business need to split into 2 layers to deal with, so that can not enjoy the benefits , it brings the following side effects:

1. Disruption of the cohesion of a single business;
2. Distract Programmer's attention: a very reasonable linear idea, separated to 2 projects to achieve;
3. Increase the complexity of the program: to understand the implementation of a business code, to see two layers of code at the same time;

Of course, the business and data processing layer to standardize multi-person collaboration of large projects is a good way to help decouple, reduce complexity, but there is no strict specification of layered code of the three projects (less money, less people, less time), this is not a good thing; tiering is a technical tool rather than a rule, Find a way to fit the current project and team according to the actual situation. For small and medium-sized, SQL-focused projects, it is more appropriate to place business and data processing on the same tier.

Third, technology stack

The front end uses the MVVM pattern to separate page rendering from the JS business code:

Reference Library:

1. Easyui 1.4.0: Display UI, with minor modifications to fit the frame;
2. Knockoutjs: Implementing MVVM;
3. Profoundgrid: page layout;

Tools:

1. Sass: Good cool CSS language;
2. Grunt: Front-end build tool, combined with compass dynamic compiling sass to CSS, merging and compressing CSS, JS;

The backend implements the RESTful Api:

Reference Library:

1. ASP. WEBAPI: Implementing restful APIs;
2. AUTOFAC: Dependency Injection;
3. JWT: Realize Oauth2, with token authorization, realize cross-domain;
4. Fluentdata: Support multi-database data persistence, change to adapt to the framework;
5. Log4net: Log component;

Tools:

1. . net4.5;
2. vs2015;
3. A branch of the Mariadb:mysql database;
4. T4 Template: Code generator;

Iv. Description of the project

Back end

│grissom.cms│├─1-model--Entity class │├─generation--T4 template generation │├─2-services--business logic and data processing layer │││├─custom--business code is written here │││├─generation--T4 template generation │├─3-webapi--│││├─AOP-horizontal cut: Abnormal logging │││├─apis--Public API write here │││├─app_data││in Ital.sql--Database script │││├─auth-enabling cross-domain and token authorization │││├─log-log │└─sqlco Nfigs--Configuration and additions to the SQL Xml│sysrole.xml│sysuser.xml│videomain.xml│ ├─core--easycore automation additions and deletions │├─easy.dataproxy--SQL configuration resolver │││├─easy . Office--Import export Excel│││├─easy.sqlconfig--SQL configuration Model ││├─libs--DLL library │                   

The Model and service are automatically generated by the T4 template, which says service is the core project of business and data processing.

Front

├─1-content-JS, CSS system Universal file ││Comdata.js--Common library: Configuring the API Server ││config.rb--Compass profile ││gruntfile.js--grunt config file ││package. JSON--Nodejs initialization configuration file │││├─asset--resources ││├─css│││││└─js││││ │└──core│││├─icons--Easyui icons│││├─images--image │││└─
               
                node_modules--nodejs Reference library ├─
                home--Home │index.html│sys--system module │├─role--Role management │││edit.html--edit page │││
                     
                      index.html--list page │││││└─
                      viewmodel--model ││edit.js││index.js│││└─user-user management │└─video--Video module      /span> 
                          
                         

Home is the container, sys, video is the business module of the corresponding system, role, user corresponding system table: Sysrole, Sysuser. The front-end Core library is 1-content/asset/js/core the following JS, in fact, the implementation of the universal data binding and also background data interaction functions.
1-content only need to modify Comdata.js API server configuration com.apiDomain = "http://localhost:2717"; others are generic, so I use grunt to combine the common library and CSS into ALL.JS,ALL.CSS. Of course to make changes, can be installed Nodejs, grunt, reference grunt.

Five, simple application:

The actual implementation of the reference at the bottom of the demo, the process is as follows:

1) Modify the database server: There are 4 places to change, of which 3 are T4 template, 1-model/generation/modeltemplate.tt, 2-services/generation/modeltemplate.tt, 2-ser Vices/custom/modeltemplate.tt,3-webapi/web.config;
2) Re-execute the T4 code generator: After modifying or adding a new table, open the T4 template file and save it again, it will be automatically generated, there are 3 T4 template files: 1-model/generation/modeltemplate.tt, 2-services/ Generation/modeltemplate.tt, 2-services/custom/modeltemplate.tt;

3) Add API: Add the corresponding API controller under the 3-WEBAPI project;
4) Add SQL configuration: Add the SQL XML file corresponding to the table name in the Sqlconfigs folder under the 3-WEBAPI project;

5) Go to front end: Add Module folder and corresponding table folder in root directory, add index.html list page and edit.html edit page, ViewModel folder add model JS file;

6) Run WebApi, then browse the page;

Six, preview:

Vii. Summary:

The framework has 3 core points, and then a separate blog to expand the description in detail, otherwise you can not see the framework of the strong location:

1. Back-end Easycore (easy.sqlconfiguration, Easy.dataproxy, Easy.office): Directly through a concise XML file with the table for the increase and deletion function;
2. Front-end Viewmodel.common, Viewmodel.search,viewmode.edit: Combining Knockoutjs and Jeasyui to achieve MVVM;
3. Data structure of front and back end interaction: {master:{inserted:[{data:{},children:{c1:{inserted:[],updated:[],deleted:[]}}}]}} The structure can identify the single table, multi-table, master-slave table mixed batch new, modify, delete state, background analysis of the JSON format data structures, combined with SQL configuration, can realize automated database operations;

The framework is not perfect, it does not necessarily apply to you, but welcome suggestions, follow-up improvement. PS: The framework has been used in the production environment.

Viii. Source Code Https://github.com/grissomlau/Grissom.CMS

Initialize login name: admin, Password: 123

"Open source. NET" shares a lightweight content management framework that separates back and forth