Vue+ElementUI+.netcore先後端分離框架開發項目實戰

原文：https://blog.csdn.net/vM199zkg3Y7150u5/article/details/102550228

框架採用.NET Core + Vue先後端分離，而且支持前端、後臺代碼業務動態擴展，框架內置了一套有着20多種屬性配置的代碼生成器，可靈活配置生成的代碼，代碼生成器界面配置完成便可生成單表(主表)的增、刪、改、查、導入、導出、上傳、審覈基礎功能。只須要簡單瞭解便可上手開發

 

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

 

• Vol.WebApi類庫可獨立用於restful api服務單獨部署,用於其餘系統單獨提供接口,直接上手編寫業務代碼便可

   

• Vue+Vol.WebApi 可用於現有框架先後端分離進行開發

   

• Vol.Web類庫可用於傳統MVC+Razor方式進行項目開發

   

• Vol.Builder類庫可做爲一個獨立的代碼生成器,可生成cshtml頁面、Vue頁面、Model文件、Service與Repository.cs業務處理代碼類

   

• 可做爲一個獨立站點來發布靜態html網頁

   

• 可直接用於H5移動App開發H5開發：http://132.232.2.109/app/guide

 

2、框架特色

 

• 支持前端、後臺基礎業務代碼動態擴展，可在現有框架增、刪、改、查、導入、導出、審覈基礎業務上擴展複雜的業務代碼

   

• 基本業務所有由框架完成，上手便可對基礎業務之外的代碼進行擴展

   

• 上手簡單，須要.net core2.一、VsCode mysql/sqlservcer 20十二、redis(可選) 及以上版本的開發環境

   

• 學習成本低，封裝了經常使用可擴展組件及Demo(前端基於Iview/Element-UI組件進行了二次封裝、後臺提供了大量的擴展方法)

   

• 開發效率高,內定製開發的代碼生成器,生成前端(Vue、後臺代碼),代碼生成器已完成90%以上的重複工做，只須要在提供的擴展類型中實現其餘業務

   

• 前端vue頁面表單下拉/多選框完成自動綁定數據源，不須要寫任何代碼,並支持擴展自定開發綁定。

   

• 後臺已完成權限、菜單、JWT等內部功能

 

若是你沒有作過webpack+vue工程化開發項目，可能會剛開始至關不適應，或者安裝環境老是出問題，但只要你熟悉開發流程後，你會發現採用Vue開發比Jquery爽太多了。上手項目需重點了解基礎Vue語法，特別是瞭解組件、路由及import的使用

 

3、開發及依賴環境

 

VS2017 、.NetCore2.1 、EFCore2.一、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

 

4、項目運行

 

若是你沒有前端環境，請先安裝node

 

前端開發使用VsCode

 

一、使用cmd命令切換至前端Vue項目.../VOL.Vue路徑下,執行npm install命令(只有歷來沒執行過此命令的才執行npm install)

 

二、運行後端項目：在後端項目路徑.../VOL.WebApi/運行builder_run.bat端口設置的是9991,運行前先看appsettings.josn配置屬性說明

 

三、運行前端項目：在前端Vue項目路徑.../VOL.Vue/運行run.bat（每次啓動會進行編譯，這個時間可能會有點長）

 

四、輸入http://localhost:8080訪問

 

5、功能介紹

 

 

6、框架文檔、代碼生成器

 

Dome：http://132.232.2.109/

 

 

一、只讀基礎表單

 

整個只讀的基礎表單的全部先後端代碼，所有由代碼生成器生成，代碼生成器中幾乎不須要配置，並支持並後端業務代碼擴展，直接生成代碼後，配置菜單權限便可

 

 

二、自動綁定下拉框數據表單

 

整個自動綁定下拉框數據表單的全部先後端代碼，所有由代碼生成器生成，並支持並後端業務代碼擴展，在代碼生成器中只須要指定數據源編號，頁面加載時會根據編號自動加載數據源並綁定

 

 

三、啓用圖片支持、審覈表單

 

整個啓用圖片支持、審覈表單的全部先後端代碼，所有由代碼生成器生成，並支持並後端業務代碼擴展，審覈功能須要在菜單配置權限、代碼生成器中勾選啓用圖片支持

 

 

四、高級查詢

 

整個表單的全部先後端代碼，所有由代碼生成器生成，並支持並後端業務代碼擴展，查詢字段、類型(下拉框、日期、TextArea等)、所在行與列都由代碼生成器完成，不須要寫任何代碼

 

 

五、單表新建、編輯

 

單表新建、編輯全部先後端代碼，所有由代碼生成器生成，並支持並後端業務代碼擴展，新建、編輯字段、類型(下拉框、日期、TextArea等)、所在行與列、字段是否只讀、標籤顯示的長度等都由代碼生成器完成，不須要寫任何代碼

 

 

六、主從表新建、編輯

 

主從表新建、編輯全部先後端代碼，所有由代碼生成器生成，並支持並後端業務代碼擴展，新建、編輯從表配置、字段、類型(下拉框、日期、TextArea等)、所在行與列、字段是否只讀、標籤顯示的長度等都由代碼生成器完成，不須要寫任何代碼

 

 

七、單列、多列Form表單

 

單列、多列Form表單，已封裝成組件，而且支持組件擴展。可配置顯示的列的數量、是否只讀、列的數據類型(日期、下拉框、TextArea、列寬、自動綁定數據源、圖片上傳等)， 這些只須要配置JSON格式便可使用

 

 

八、可配置的Table(自動/手動加載table數據、自動綁定數據源、編輯功能)

 

單列、多列Form表單，已封裝成組件，而且支持組件擴展。可配置顯示的列的數量、是否只讀、列的數據類型(日期、下拉框、TextArea、列寬、自動綁定數據源、圖片上傳等)， 這些只須要配置JSON格式便可使用

 

從後臺加載數據、自動綁定數據

 

 

可編輯的table，手動綁定數據、自動綁定數據源

 

 

表單與table混合使用

 

 

九、excel導入

 

excel導入整個頁面都由代碼生成器生成，導入的字段、字段是否必填，下載模板也由代碼生成器上配置(本身根據實際須要決定是否採用此方法)，導入時會驗證是否爲空與數據的合法性，邏輯校驗本身實現擴展方法便可

 

 

十、H5開發

 

H5只是作了一個簡單的Demo,若是你有H5開發經驗，請忽略，若是你沒有H5開發經驗，http://132.232.2.109/app/guide

 

 

十一、權限分配

 

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

 

 

十二、菜單管理

 

 

默認8種權限，可自行定義其餘權限(代碼生成器完後，直接在菜單上配置url(url路徑爲自動生成前端的router->path,今後處複製過過便可))

 

 

1三、我的中心

 

我的中心目前只開發了頁面與修改密碼，其餘功能自行根據須要實現

 

 

1四、前端、後臺業務代碼動態擴展

 

框架提供了前臺後端擴展方法與屬性,只須要根據本身的業務實現擴展業務。後臺大部分都採用的委託擴展方法，這裏只截了一張圖前端數據加載事件的擴展方法，先後臺完整擴展參考Demo：http://132.232.2.109/SellOrder

 

 

1五、代碼生成器

 

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

 

 

 

還有角色管理、日誌管理、數據源管理、其餘組件、後臺代碼等功能就再也不介紹了。

 

7、總結

 

此框架由代碼生成器完成了大部分工做能極大減小代碼量,並支持前臺端代碼的擴展。

 

若是你對先後端分離開發的方式或H5開發有興趣,那麼但願此框架對能你有所幫助！

 

若是你以爲框架對你有用，幫忙點個星，很是感謝!

 

• Demo地址：http://132.232.2.109 賬號：admin666密碼：123456（本地超級管理員賬號：admin密碼123456）

   

• GitHub地址：https://github.com/cq-panda/Vue.NetCore.git

   

• 若是你須要Quartz.Net作定時任務管理，你能夠試試這個：https://github.com/cq-panda/Quartz.NetUI

  (站點與MySql部署在同一個1G1核1M帶寬的服務Centos服務上,訪問可能會出現延遲現象)