Quick development of personal insights and experiences on Web applications

Since the development of the previous company's business requires the development of other more independent business systems based on the core business, there is a basic framework based on the DAPPER,DDD concept, because the individual based on this framework has experienced the development of two systems, Also because other project teams need to do some development of other systems based on this framework, there are a few simple introduction and usage instructions for this framework.

1. Main Framework Body Introduction

Dapper,dapperextensions:dapper Framework integration.

Topever.automapper: Object Mapping extension, this project can actually be integrated into the public project Topevery.infrastructure project.

Topevery.Dapper.Oracle: The main storage entity mapping file, warehousing implementation class.

Topevery.infrastructure: A public class in the framework that is not business-agnostic.

Topever.core: The main storage entity class, the storage interface interface definition, realizes the object state (increases the deletion)

Topevery.application: Application services, business logic processing, data processing

Topevery.Web:web site, mainly using the WEBAPI provides API interface, MVC mode provides Routing and view display.

2. Rapid development, naturally need to rely on a number of code-generated tools, so here is the use of colleagues in the ABP framework used by the T4 template technology, based on the original code, a number of code modifications, to generate the corresponding code logic.

So the main task is to focus on the development of the foreground work, the other team needs to develop a system in a short period of time, it is very honored that I was transferred to the project team, responsible for two of the relatively independent simple system development, 10 modules, 19 tables, most of the single-table additions and deletions, A relatively complex point is primarily one of the two businesses that need to go through the process. Due to the need to deliver this software in about two weeks, the main one to undertake this development task, there is a front-end with static page processing, and because the customer requirements need to release a version of the first week of the weekend, the pressure is really very big, at that time, I tidied up the development of ideas, the first step to build a basic framework, Build up the company's basic framework, maintain the basic information of the personnel, roles, permissions, menu configuration and so on (the project manager builds the base database), and the second step is to build the corresponding PD file according to the database design Word document and generate the database entity. The third step, based on the previous Project T4 template project modification code, generate the underlying entity, map map, warehousing interface, warehousing implementation, business simple logic code, input and output DTO class. The fourth step is to integrate some of the extended controls used in other projects, such as file uploads, attachment display .... The fifth step, you can formally start the module development.

A brief introduction to some of the front-end development of some things, because you need to be responsible for the front-end development of the staff to introduce this thing, so here to talk about MVC and WEBAPI

APICONTROLLERS:WEBAPI provides, the main throw interface to the front-end call, here mainly refers to the service defined in the Topever.application project

APP_START:WEBAPI,MVC, routing configuration, and some other Configuration storage

Controller: Director, which is the part of the application that handles user interaction. Usually the controller is responsible for reading data from the view, controlling user input, and sending data to the model.

Views: Display page storage.

The front-end mainly uses the Bootstrap,layer framework, the use of partial view display, reduce the child page loading of some common things (child page load using the method is the AJAX request page, return to HTML and then display to the page)

  $.fn.bindaddbtn = function (url, width, height, title) {        $ (this). On ("click", Function () {            $.topevery.ajax ({type : "Get", Url:url, DataType: "HTML"}, function (data) {                Layer.open ({                    type:1,                    title:title | | "New",                    Skin: ' Layui-layer-rim ',//Add border area                    : [width + ' px ', height + ' px '],//width height                    content:data                });            } , true);        });    

The main package of additions and deletions to change the basic operation of the button code, reduce the front-end JS code writing.

(function ($) {/** * set Jgrid style */$.jgrid.defaults.styleui = "Bootstrap"; $.fn.jgridinit = function (options) {$.fn.jgridinit.defaults = {datatype: "JSON", Mtype: "P OST ", Shrinktofit:true, PostData:options.postData, autowidth:true, Height: Options.height = = null? "100%": Options.height, RowNum:options.rowNum?            Options.rownum:10, Rowlist: [Ten,], Viewrecords:true, Rownumbers:true, Repeatitems:false, Jsonreader: {root:function (obj) {return OBJ.R                Esult.rows;                }, Page:function (obj) {return obj.result.page;                }, Total:function (obj) {return obj.result.total;                }, Records:function (obj) {return obj.result.records; }, repeatitems:false}, Sortname:options.sortname?            Options.sortname: ' C_create_time ', sortorder: ' desc ', pager: ' #pager ', pginput:true, Pgbuttons:true, Gridcomplete:function () {//$ (this). Setgridheight ($ (". Content-wrappe R "). Outerheight (True)-$ (". Nav-header "). Outerheight (True)-3-$ (". Content-header "). Outerheight (True)-31-36-28-2                0);                        var Header = $ (". Content-wrapper"). Outerheight (True)-$ (". Nav-header"). Outerheight (True)-3 -$ (". Content-header"). Outerheight (True)-$ (this). Parent (). Parent (). Prev (). Find (                ". Ui-jqgrid-hbox"). Outerheight (True)-31-28-20; var Header2 = $ (". Content-wrapper"). Outerheight (TRUE)//content Height//-$ (". Nav-header"). Outerheigh T (true)//nav bar//-$ (". Nav-header"). ParenT (). Next (). Outerheight (True)//the delimiter between the navigation bar and the content//-$ (". Content-header"). Outerheight (TRUE)//content Header Search bar//-$ ("Div.ui-jqgrid-hbox"). Outerheight (True)//grid's head//-$ ("                Footer "). Outerheight (TRUE)//-$ (" #pager "). Outerheight (True)-18;            $ (this). Setgridheight (header);        }        };        var array = $.extend ({}, $.fn.jgridinit.defaults, options);    $ (this). Jqgrid (array); }/** * Bind add button * @param {} URL * @param {} width * @param {} height * @param {} title * @re            Turns {} */$.fn.bindaddbtn = function (url, width, height, title) {$ (this). On ("click", Function () {                    $.topevery.ajax ({type: "Get", Url:url, DataType: "HTML"}, function (data) {Layer.open ({ Type:1, Title:title | |                  "New", Skin: ' Layui-layer-rim ',//plus border  Area: [Width + ' px ', height + ' px '],//Width high content:data});        }, True);    }); }/** * Binding edit * @param {} URL * @param {} obj * @param {} width * @param {} height * @param {} title * @returns {} */$.fn.bindeditbtn = function (URL, obj, width, height, title, extension) {$ (            This). On ("click", Function () {var rowIndex = $ (obj). Jqgrid (' Getgridparam ', ' selrow ');                if (rowIndex! = null) {var rowdata = $ (obj). Jqgrid (' GetRowData ', rowIndex);                var extensionurl = "";                if (extension) {extensionurl = extension; }/*layer pops up an HTML page or HTML fragment */$.topevery.ajax ({type: "Get", Url:url + "?).                        Id= "+ rowdata.id + extensionurl, DataType:" HTML "}, function (data) {Layer.open ({ Type:1, Title:title | |         "Modify",               Skin: ' Layui-layer-rim ',//Add border area: [width + ' px ', height + ' px '],//Width high                Content:data});            }, True);            } else {Layer.alert ("Please select a record!");    }        }); },/** * Delete event * @param {} URL * @param {} obj * @returns {} */$.fn.binddelbtn = function (ur            L, obj) {$ (this). On ("click", Function () {var rowIndex = $ (obj). Jqgrid (' Getgridparam ', ' selrow ');                if (rowIndex) {var rowdata = $ (obj). Jqgrid (' GetRowData ', rowIndex); $.topevery.ajax ({url:url, data:JSON.stringify ({"Id": rowd                    Ata.id})}, function (data) {var message = "Delete Failed"; if (data.success) {if (data.result.success) {$ (obj). Trigger ("Reloa DGrid ");                    } message = Data.result.message;                        } layer.msg (Message, {icon:1, title:false,//Do not show caption                    Offset: ' RB ', time:3000,//10 seconds after auto-shutdown anim:2                });            });            } else {Layer.alert ("Please select a record!");    }        }); }/** * Bind validation Property and submit button * @param {} options * @returns {} */$.fn.bootstrapvalidatorandsumbit = funct                Ion (URL, options, validateform) {if (Validateform = = undefined) {validateform = function () {            return true;        }; } $ (this). Bootstrapvalidator ({message: ' entered value is invalid ', feedbackicons: {valid: ' gly Phicon Glyphicon-ok ', invalid: ' Glyphicon glyphicon-remove ', validating: ' Glyphicon Glyphico N-Refresh '}, Fields:options}). On (' Success.form.bv ', function (e) {E.preventdefau            Lt ();            var $form = $ (e.target);            var BV = $form. Data (' Bootstrapvalidator ');                    if (Validateform () && bv.isvalid ()) {$.topevery.ajax ({url:url, Data:JSON.stringify ($.topevery.serializeobject ($form))}, function (data) {var me                    Ssage = "New Failure"; if (data.success) {if (data.result.success) {$ (". Layui-layer-close"). C                            Lick ();                        $ ('. Query_btn '). Click ();                    } message = Data.result.message;                        } layer.msg (Message, {icon:1, title:false,//Do not show caption           Offset: ' RB ', time:3000,//10 seconds after auto-shutdown             Anim:2});            }                );    }        }); },}}) (JQuery);

　　

Page JS Code

$ (function () {    var getpostdataurl = "";    var deleteurl = "";    var addurl = "";    var Grid = $ ("#tblData");       Grid.jgridinit ({        url:getpostdataurl,        colnames: [],//column header        Colmodel: [            ],        postdata: {        }// Query Parameters    });    $ (". Add_btn"). BINDADDBTN (Addurl, 650);    $ (". Edit_btn"). BINDEDITBTN (Addurl, grid, and 650);    $ (". Del_btn"). BINDDELBTN (DeleteUrl, grid);    $ (". Query_btn"). On ("click", Function () {        $ ("#tblData"). Jqgrid (' Setgridparam ', {            url:getpostdataurl, page : 1, PostData: {            }        }). Trigger ("Reloadgrid");});    

Page HTML code

<Divclass= "Col-xs-12">    <Divclass= "Box-header nav-header">    </Div></Div><Divclass= "Col-xs-12"style= "Background-color: #000000; height:3px;"></Div><Divclass= "Col-xs-12">    <!--Tool Bar -    <Divclass= "Content-header form-inline row">        <Divclass= "Form-group">            <inputclass= "btn btn-success add_btn"type= "button"value= "escalation">&nbsp;            <inputclass= "btn btn-info edit_btn"type= "button"value= "Modify">&nbsp;            <inputclass= "btn btn-danger del_btn"type= "button"value= "Delete">&nbsp;            <inputclass= "btn btn-danger del_btn"type= "button"value= "Export">&nbsp;        </Div>        <Divclass= "Form-group">            <inputclass= "btn btn-success query_btn"type= "button"value= "Query">        </Div>    </Div>    <Divclass= "Box-body row">        <TableID= "Tbldata"></Table>        <DivID= "Pager"></Div>    </Div></Div><Scriptsrc= "~/views/budgetmanagement/emergencyindex.js"></Script>

Attach a page effect

Summary: This development experience is a challenge to yourself. I am happy to accept this challenge. Just the next challenge, I am more leisurely, things to do more normative.

Quick development of personal insights and experiences on Web applications