dotnetcore+vue+elementUI 前后端分離---支持前端、后臺業務代碼擴展的快速開發框架

框架采用dotnetcore+vue+elementUI 前后端分離，并且支持前端、后臺代碼業務動態擴展，框架內置了一套有著20多種屬性配置的代碼生成器，可靈活配置生成的代碼，代碼生成器界面配置完成即可生成單表/主從表的增、刪、改、查、匯入、匯出、上傳、審核基礎功能，只需要簡單了解即可上手開發

框架基礎功能已構建完成，可直接上手開發功能

• Vol.WebApi類別庫可獨立用于restful api服務單獨部署,用于其他系統單獨提供介面,直接上手撰寫業務代碼即可，
• Vue+Vol.WebApi 可用于現有框架前后端分離進行開發
• Vol.Web類別庫可用于傳統MVC+Razor方式進行專案開發
• Vol.Builder類別庫可作為一個獨立的代碼生成器,可生成cshtml頁面、Vue頁面、Model檔案、Service與Repository.cs業務處理代碼類
• 可作為一個獨立站點來發布靜態html網頁.
• 可直接用于H5移動App開發H5開發看這里

框架特點

• 支持前端、后臺基礎業務代碼動態擴展，可在現有框架增、刪、改、查、匯入、匯出、審核基礎業務上擴展復雜的業務代碼
• 基本業務全部由框架完成，上手即可對基礎業務以外的代碼進行擴展
• 上手簡單，需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可選) 及以上版本的開發環境
• 學習成本低，封裝了常用可擴展組件及Demo(前端基于Iview/Element-UI組件進行了二次封裝、后臺提供了大量的擴展方法)
• 開發效率高,內定制開發的代碼生成器,生成前端(Vue、后臺代碼),代碼生成器已完成90%以上的重復作業，只需要在提供的擴展型別中實作其他業務
• 前端vue頁面表單下拉/多選框完成自動系結資料源，不需要寫任何代碼,并支持擴展自定開發系結，
• 后臺已完成權限、選單、JWT等內部功能

如果你沒有做過webpack+vue工程化開發專案，可能會剛開始相當不適應，或者安裝環境總是出問題，但只要你熟悉開發流程后，你會發現采用Vue開發比Jquery爽太多了，上手專案需重點了解基礎Vue語法，特別是了解組件、路由及import的使用

開發及依賴環境

VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可選，沒有redis的在appsetting.json中不用配置，默認使用內置IMemory)、
VsCode、Vue2.0（webpack、node.js,如果沒有此環境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui

專案運行

如果你沒有前端環境，請先安裝node
前端開發使用VsCode

• 1、使用cmd命令切換至前端Vue專案.../VOL.Vue路徑下,執行npm install命令(只有從來沒執行過此命令的才執行npm install)
• 2、運行后端專案：在后端專案路徑.../VOL.WebApi/運行dev_run.bat埠設定的是9991,運行前先看appsettings.josn配置屬性說明
• 3、運行前端專案：在前端Vue專案路徑.../VOL.Vue/運行run.bat（每次啟動會進行編譯，這個時間可能會有點長）
• 4、輸入http://localhost:8080訪問

功能介紹

功能	描述	完成情況
用戶管理(登陸、密碼修改)	登陸、密碼修改	√
角色管理	角色管理	√
權限分配	用戶基礎權限分配，后臺支持多種權限控制方式,也可自行定義	√
用戶權限/選單靜態化處理	為減少Redis讀取資料傳輸量,對用戶權限/選單在本地服務器作靜態化處理,只有在用戶權限/選單變化時才重繪redis快取	√
JWT認證	采用前臺端分離JWT認證，并且支持JWT過期動態重繪	√
異步佇列批量寫日志	框架封裝了一個異步佇列寫日志,此前專案每天PV約150W左右，采用異步佇列的方式批量寫入日志非常順暢	√
Repository	Repository作為資料提供，提供了常用EF方法封裝	√
前端常用組件封裝	此框架主要圍繞表單組件進行開發，并且封裝的組件都支持擴展	√
基礎業務實作	已實作(表/主從表)的增、刪、改、查、匯入、匯出、審核基礎功能(前提建一張帶主鍵的mysql/sqlserver表),這些基礎業務不要寫任何代碼，直接用代碼生成器生成即可，并且生成的代碼支持其他業務代碼擴展	√
代碼生成器	代碼生成器為可視化配置，提供了可配置屬性的20多種，所有基礎功能只需要勾選確認，生成的代碼包括Vue/Vue擴展檔案/路由,后臺表相關的類(控制器/擴展控制器,業務介面/擴展業務介面,介面實作/擴展介面實作類)，支持單表表單、主從表單的代碼生成	√
資料源預先配置	資料源作為前端下拉框/多選框的字典項源，支持key/value配置及sql從資料源加載配置	√
表單資料源自動系結	如果一個表單帶有多個下拉框，這里只需要配置資料源編號即可自動系結	√
Redis/Memory快取	已對Redis/Memory封裝直接使用即可	√
Dapper	已對Dapper封裝直接使用即可	√
擴展方法	框架封裝了大量的擴展方法,如：通用物體校驗(框架所有實作校驗全部依賴于此擴展)擴展、string擴展、object擴展、運算式生成/決議擴展、檔案操作擴展等	√
H5開發	可支持直接開發并部署H5頁面 H5開發看這里	√
分庫分表	分庫分表操作	x
靜態頁面發布		x
訊息推送		x

框架檔案、代碼生成器、Demo看這里

1、只讀基礎表單

整個只讀的基礎表單的所有前后端代碼，全部由代碼生成器生成，代碼生成器中幾乎不需要配置，并支持并后端業務代碼擴展，直接生成代碼后，配置選單權限即可

2、自動系結下拉框資料表單

整個自動系結下拉框資料表單的所有前后端代碼，全部由代碼生成器生成，并支持并后端業務代碼擴展，在代碼生成器中只需要指定資料源編號，頁面加載時會根據編號自動加載資料源并系結

3、啟用圖片支持、審核表單

整個啟用圖片支持、審核表單的所有前后端代碼，全部由代碼生成器生成，并支持并后端業務代碼擴展，審核功能需要在選單配置權限、代碼生成器中勾選啟用圖片支持

4、高級查詢

整個表單的所有前后端代碼，全部由代碼生成器生成，并支持并后端業務代碼擴展，查詢欄位、型別(下拉框、日期、TextArea等)、所在行與列都由代碼生成器完成，不需要寫任何代碼

5、單表新建、編輯

單表新建、編輯所有前后端代碼，全部由代碼生成器生成，并支持并后端業務代碼擴展，新建、編輯欄位、型別(下拉框、日期、TextArea等)、所在行與列、欄位是否只讀、標簽顯示的長度等都由代碼生成器完成，不需要寫任何代碼

6、主從表新建、編輯

主從表新建、編輯所有前后端代碼，全部由代碼生成器生成，并支持并后端業務代碼擴展，新建、編輯從表配置、欄位、型別(下拉框、日期、TextArea等)、所在行與列、欄位是否只讀、標簽顯示的長度等都由代碼生成器完成，不需要寫任何代碼

7、單列、多列Form表單

單列、多列Form表單，已封裝成組件，并且支持組件擴展，可配置顯示的列的數量、是否只讀、列的資料型別(日期、下拉框、TextArea、列寬、自動系結資料源、圖片上傳等)， 這些只需要配置JSON格式即可使用

8、可配置的Table(自動/手動加載table資料、自動系結資料源、編輯功能)

單列、多列Form表單，已封裝成組件，并且支持組件擴展，可配置顯示的列的數量、是否只讀、列的資料型別(日期、下拉框、TextArea、列寬、自動系結資料源、圖片上傳等)， 這些只需要配置JSON格式即可使用

從后臺加載資料、自動系結資料

可編輯的table，手動系結資料、自動系結資料源

表單與table混合使用

9、excel匯入

excel匯入整個頁面都由代碼生成器生成，匯入的欄位、欄位是否必填，下載模板也由代碼生成器上配置(自己根據實際需要決定是否采用此方法)，匯入時會驗證是否為空與資料的合法性，邏輯校驗自己實作擴展方法即可

10、H5開發

H5只是做了一個簡單的Demo,如果你有H5開發經驗，請忽略，如果你沒有H5開發經驗，可看看這里

11、權限分配

目前只實作了對用戶的角色的Action進行權限分配

12、選單管理

默認8種權限，可自行定義其他權限(代碼生成器完后，直接在選單上配置url(url路徑為自動生成前端的router->path,從此處復制過過即可))

13、個人中心

個人中心目前只開發了頁面與修改密碼，其他功能自行根據需要實作

14、前端、后臺業務代碼動態擴展

框架提供了前臺后端擴展方法與屬性,只需要根據自己的業務實作擴展業務，后臺大部分都采用的委托擴展方法，這里只截了一張圖前端資料加載事件的擴展方法，前后臺完整擴展參考Demo：http://132.232.2.109/SellOrder

15、代碼生成器

代碼生成器提供了20多種可配置的屬性，可靈活配置顯示、查詢、編輯、匯入、匯出、主從關系等功能點擊看代碼生成器檔案

 

還有角色管理、日志管理、資料源管理、其他組件、后臺代碼等功能就不再介紹了,點這里看看就知道了

 

此框架由代碼生成器完成了大部分作業能極大減少代碼量,并支持前臺端代碼的擴展，如果你對前后端分離開發的方式或H5開發有興趣,那么希望此框架對能你有所幫助！ 如果你覺得框架對你有用，幫忙點個星，非常感謝! 如果有什么問題或建議，提issue或加QQ283591387   Demo地址：http://132.232.2.109 帳號：admin666密碼：123456（本地超級管理員帳號：admin密碼123456） GitHub地址：https://github.com/cq-panda/Vue.NetCore.git 博客園地址：https://www.cnblogs.com/-clouds/p/11633786.htmlt 如果你需要Quartz.Net做定時任務管理，你可以試試這個：https://github.com/cq-panda/Quartz.NetUI (站點與MySql部署在同一個1G1核1M帶寬的Centos服務器上,訪問可能會出現延遲現象) 如果打不開頁面，請使用谷歌或火狐瀏覽器，如果是360切換至極速模式或者嘗試重繪下頁面

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/108782.html

標籤：.NET Core

上一篇：向net core 3.0進擊——Swagger的改變

下一篇：[Abp vNext 原始碼分析] - 8. 審計日志