PasteForm最佳CRUD實踐，實際案例PasteTemplate詳解之3000問(三)

作為“貼代碼”力推的一個CRUD實踐項目PasteTemplate,在對現(xiàn)有的3個項目進行實戰(zhàn)后效果非常舒服！下面就針對PasteForm為啥我愿稱為最佳CRUD做一些回答:

哪里可以下載這個PasteForm的項目案例

目前“貼代碼”對外使用PasteForm的項目有"貼Builder(PasteSpider)"和案例項目(PasteTemplate),其中案例項目你可以在
https://gitee.com/pastecode/paste-template 獲得

PasteForm的CRUD模式有什么特色？

搞這個的起初是因為我有一個項目要在小程序上行實現(xiàn)大量的表單，思考了下，一大堆相似的代碼，不是可以使用那個組件的方式實現(xiàn)么，那就需要傳入模型，換位思考下，那么我們經(jīng)常使用的CRUD是否也可以這么搞？
于是就有了這個利用多數(shù)據(jù)模型Dto和反射的原理實現(xiàn)的PasteForm，主要優(yōu)點如下

1.PasteForm輸出的是一個思想，就是管理端的頁面由后端控制，無論是安全性還是數(shù)據(jù)的表現(xiàn)

2.前端編寫一次后，后續(xù)都不用編寫，如果你使用的是我的案例項目，那么你前端都可以不用編寫，包括后端要新增表，修改字段等，前端都不再需要修改代碼

3.前端頁面的超簡潔性，無論你的后端是30個表還是100個表，對于前端來說都差不多大概4個頁面搞定！當然了一些特殊的需求，還是需要編寫下的！

4.無語言限制，上面說得輸出的是一個思想，本文的案例使用的是.netcore+html的形式實現(xiàn)的，你也可以使用比如java+vue的模式

5.統(tǒng)一性，比如你30個表的圖片上傳，在表單中他們的樣式都是一樣的，因為他們其實使用的是同一個管理端頁面

6.后端統(tǒng)籌所有，比如字段的顯示順序，字段是否顯示，字段的默認值等等等，都由后端對應(yīng)的Dto來限制和控制，比如同樣的新增，由于當前登陸用戶的角色不同，你可以限制某一個字段張三必填，而李四可以是選填！

看到管理端的代碼，感覺像JSP的?

整個PasteForm的原理就是后端把數(shù)據(jù)模型的屬性，字段等返回給前端，前端基于后端返回的數(shù)據(jù)再渲染到UI上，為了便于編寫所以采用了template的模式，其實不是JSP，是長得像而已！

我的項目擁有120個數(shù)據(jù)表，那是不是要編寫很多的后端文件?

PasteForm原則上只有3個頁面pasteform/index.html,pasteform/view.html,pasteform/detail.html，只是有一些特殊情況下，會添加一些頁面，這個要看你項目的實際需求，其實無論多少個表，PasteForm的頁面都只是那么幾個，比如說權(quán)限的頁面為pasteform/index.html?path=roleInfo而用戶的表為pasteform/index.html?path=userInfo,你會發(fā)覺其實他們是同一個頁面，只是參數(shù)path不一樣而已，這個path就是WebApi的Service！
其實你完全可以一個頁面都不寫，直接使用我提供的案例項目PasteTemplate中的pasteform的文件!

我看案例PasteTemplate項目是使用html,js,css編寫的，可以使用vue編寫管理端么？

上面提到的，PasteForm主要輸出的是一個思想，也就是由后端的Dto控制前端的頁面呈現(xiàn)和交互等，所以從WebApi中請求得到模板得屬性字段等信息后，你可以使用其他語言實現(xiàn)管理端得頁面得，不限原生，vue,angular等

pasteform/index.html是干嘛用？

作為對應(yīng)數(shù)據(jù)表得數(shù)據(jù)展示用，一般為表格table呈現(xiàn)，對應(yīng)模型為XXXListDto，也包括了搜索區(qū)域，搜索區(qū)域由對應(yīng)得InputQueryXXX的數(shù)據(jù)模型決定，一般只有page,size,word三個字段！當然了這個頁面也包含了新增數(shù)據(jù)，編輯，詳情，刪除等的操作交互！

pasteform/view.html是做什么用得?

新增數(shù)據(jù)，或者編輯數(shù)據(jù)的時候使用的都是這個頁面，不過他們讀取的數(shù)據(jù)模型不一樣，比如權(quán)限這個表roleInfo,則有新增的時候為pasteform/view.html?path=roleInfo，對應(yīng)的數(shù)據(jù)模型為roleInfoAddDto,而在編輯的時候為pasteform/view.html?path=roleInfo&id=3,對應(yīng)的數(shù)據(jù)模型為roleInfoUpdateDto。頁面的整體邏輯就是從WebApi中獲得對應(yīng)模型后，基于規(guī)則渲染到UI中，包括默認值，當前值等，提交的時候再從頁面中的form讀取到值提交給后端，所以說主要的控制還是在后端中！

pasteform/detail.html是做什么用得?

有些時候我們的數(shù)據(jù)沒辦法在pasteform/index.html頁面中顯示完成，比如文章列表，主要是一些字段過長的，這個時候我們希望有一個頁面顯示詳細內(nèi)容，所以detail就是干這個用的，對應(yīng)的數(shù)據(jù)模型為XXXDto！

我不會.netcore可以用其他語言寫pasteform么

PasteForm輸出的是一個思想，所以使用其他語言也是可以的，不過你得對著寫一整套的就是了，比如你可以使用vue+java的模式搞一套！后端核心代碼案例

        /// 

        /// 讀取AddDto的數(shù)據(jù)模型
        /// 
        /// 
        [HttpGet]
        [TypeFilter(typeof(RoleAttribute), Arguments = new object[] { "root", "root" })]
        public PasteBuilderHelper.VoloModelInfo ReadAddModel()
        {
            var _model = PasteBuilderHelper.ReadModelProperty(new RoleInfoAddDto());
            return _model;
        }

        /// 

        /// 讀取UpdateDto的數(shù)據(jù)模型
        /// 
        /// 
        [HttpGet]
        [TypeFilter(typeof(RoleAttribute), Arguments = new object[] { "root", "root" })]
        public async Task ReadUpdateModel(int id)
        {

            var _query = from a in _dbContext.RoleInfo
                         join b in _dbContext.RoleInfo on a.FatherId equals b.Id into c
                         from rol in c.DefaultIfEmpty()
                         select new RoleInfoUpdateDto
                         {
                             Id = a.Id,
                             Desc = a.Desc,
                             FatherId = a.FatherId,
                             Icon = a.Icon,
                             IsEnable = a.IsEnable,
                             Model = a.Model,
                             Name = a.Name,
                             Path = a.Path,
                             Role = a.Role,
                             RoleType = a.RoleType,
                             Sort = a.Sort,
                             ExtendRole = rol != null ? new RoleShortModel
                             {
                                 Id = rol.Id,
                                 Model = rol.Model,
                                 Name = rol.Name,
                                 Path = rol.Path,
                                 Role = rol.Role,
                                 RoleType = rol.RoleType
                             } : null
                         };

            var _info = await _query.Where(x => x.Id == id).AsNoTracking().FirstOrDefaultAsync();
            if (_info == null || _info == default)
            {
                throw new PasteCodeException("查詢的信息不存在，無法執(zhí)行編輯操作！");
            }
            var _dataModel = PasteBuilderHelper.ReadModelProperty(_info);
            return _dataModel;
        }

        /// 

        /// 讀取UpdateDto的數(shù)據(jù)模型
        /// 
        /// 
        [HttpGet]
        [TypeFilter(typeof(RoleAttribute), Arguments = new object[] { "root", "root" })]
        public async Task ReadDetailModel(int id)
        {

            var _query = from a in _dbContext.RoleInfo
                         join b in _dbContext.RoleInfo on a.FatherId equals b.Id into c
                         from rol in c.DefaultIfEmpty()
                         select new RoleInfoDto
                         {
                             Id = a.Id,
                             Desc = a.Desc,
                             FatherId = a.FatherId,
                             Icon = a.Icon,
                             IsEnable = a.IsEnable,
                             Model = a.Model,
                             Name = a.Name,
                             Path = a.Path,
                             Role = a.Role,
                             RoleType = a.RoleType,
                             SortStr = a.SortStr,
                             FatherStr = a.FatherStr,
                             Level = a.Level,
                             RootId = a.RootId,
                             Sort = a.Sort,
                             ExtendRole = rol != null ? new RoleShortModel
                             {
                                 Id = rol.Id,
                                 Model = rol.Model,
                                 Name = rol.Name,
                                 Path = rol.Path,
                                 Role = rol.Role,
                                 RoleType = rol.RoleType
                             } : null
                         };

            var _info = await _query.Where(x => x.Id == id).AsNoTracking().FirstOrDefaultAsync();
            if (_info == null || _info == default)
            {
                throw new PasteCodeException("查詢的信息不存在，無法執(zhí)行編輯操作！");
            }
            var _dataModel = PasteBuilderHelper.ReadModelProperty(_info);
            return _dataModel;
        }

        /// 

        /// 讀取ListDto的數(shù)據(jù)模型
        /// 
        /// 
        [HttpGet]
        [TypeFilter(typeof(RoleAttribute), Arguments = new object[] { "root", "root" })]
        public PasteBuilderHelper.VoloModelInfo ReadListModel()
        {
            var _model = PasteBuilderHelper.ReadModelProperty(new RoleInfoListDto());
            var _query_model = PasteBuilderHelper.ReadModelProperty(new InputQueryRoleInfo());
            if (_query_model != null)
            {
                _model.QueryProperties = _query_model.Properties;
            }
            return _model;
        }

PasteForm使用到的各個模型是干嘛用的，Dto

我最早接觸Dto的時候是ABPvNext,說到這個Dto不得不說ObjectMapper,比如說權(quán)限表RoleInfo,則對應(yīng)的有RoleInfoAddDto,RoleInfoUpdateDto,RoleInfoDto和RoleInfoListDto，當前實際開發(fā)中你可能還會引申出更多的Dto,比如我常用的RoleMenuDto,RoleAuthDto等，PasteForm中主要用到前面的4個，一般還會附帶一個InputQueryRoleInfo!比如說新增的時候，用戶提交的數(shù)據(jù)模型是RoleInfoAddDto,提交給API后，API處數(shù)據(jù)校驗合法后再使用AutoMapper把RoleInfoAddDto轉(zhuǎn)化成RoleInfo，然后寫入到數(shù)據(jù)庫！
XXXAddDto:用于新增的時候的數(shù)據(jù)模型，對應(yīng)的是pasteform/view.html頁面使用
XXXUpdateDto:用于數(shù)據(jù)編輯修改的數(shù)據(jù)模型，對應(yīng)的是pasteform/view.html頁面使用
XXXDto:這里我一般用于顯示詳情的時候的數(shù)據(jù)模型，也就是pasteform/detail.html的頁面使用
XXXListDto:這里一般使用于數(shù)據(jù)表格展示的時候的數(shù)據(jù)模型，也就是pasteform/index.html的頁面使用
InputQueryXXX:這里一般用于表格上方的搜索項的數(shù)據(jù)模型，也就是pasteform/index.html的搜索區(qū)域使用

如何上傳圖片?

圖片分新增編輯和展示，展示的話這里就是pasteform/index.html和pasteform/detail.html頁面中了，其實在編輯的時候pasteform/view.html頁面上也有展示，只要給對應(yīng)字段添加屬性[ColumnDataTypeAttribute("image","1","image","60*60")]即可

        /// 

        /// 多圖 回傳的值是多個的，使用,隔開
        /// 
        [ColumnDataType("image", "3", "img", "60*60")]
        public string Img2 { get; set; }

        /// 

        /// 圖片 回傳的使用string[]的模式
        /// 
        [ColumnDataType("image", "3", "img", "60*60")]
        public string[] Img3 { get; set; }

表格中如何讓數(shù)據(jù)左靠

        ///

        ///文本區(qū)域 模擬文本區(qū)域的輸入
        ///
        [ColumnDataType("class","fleft")]
        public string Desc { get; set; }

表格中如何自定義顯示

        ///

        ///單選 一般表示狀態(tài)，內(nèi)定的，有點像Enum,關(guān)于Enum后續(xù)會支持
        ///
        [ColumnDataType("html", "
{{:=item.dateType}}-{{:=item.gradeId}}
")]
        public int DateType { get; set; }

表格中如何顯示按鈕

        /// 

        /// 普通菜單
        /// 
        [ColumnDataType("menu", "菜單一", "open_window('查閱用戶帶參','./index.html?path=userInfo&xxid={{:=item.id}}');", "Hui-iconfont-menu")]
        public string Menu2 { get; set; }

表格中如何顯示條件按鈕

有些時候我們需要基于當前行數(shù)據(jù)進行判斷，是否顯示某一個按鈕，則有

        /// 

        /// 普通條件菜單
        /// 
        [ColumnDataType("ifmenu", "item.age==7", "條件1", "")]
        public string Menu3 { get; set; }

按鈕太多，如何使用按鈕盒子

        /// 

        /// 菜單盒子菜單
        /// 
        [ColumnDataType("menu", "菜單二", "open_window('查閱用戶帶參','./index.html?path=userInfo&xxid={{:=item.id}}');", "Hui-iconfont-menu", "box")]
        public string Menu5 { get; set; }

        /// 

        /// 菜單盒子中的條件菜單
        /// 
        [ColumnDataType("ifmenu", "item.age==8", "條件2", "box")]
        public string Menu4 { get; set; }

按照排序查下，某些字段支持升序降序

前端只是基于這個屬性，在查下的時候會回傳orderby字段給后端，后續(xù)需要基于回傳的這個字段進行orderby查詢

        ///

        ///排序
        ///
        [ColumnDataType("orderby", "Sort","Sort desc")]
        public int Sort { get; set; }

--- 未完待續(xù)，下期繼續(xù) ---