點(diǎn)擊上方“前端教程”，選擇“星標(biāo)”

每天前端開發(fā)干貨第一時(shí)間送達(dá)！

轉(zhuǎn)自：我心依舊。cnblogs.com/-clouds/p/11633786.html框架采用.NET Core + Vue前后端分離，并且支持前端、后臺(tái)代碼業(yè)務(wù)動(dòng)態(tài)擴(kuò)展，框架內(nèi)置了一套有著20多種屬性配置的代碼生成器，可靈活配置生成的代碼，代碼生成器界面配置完成即可生成單表(主表)的增、刪、改、查、導(dǎo)入、導(dǎo)出、上傳、審核基礎(chǔ)功能。只需要簡單了解即可上手開發(fā)

一、框架基礎(chǔ)功能已構(gòu)建完成，可直接上手開發(fā)功能

• Vol.WebApi類庫可獨(dú)立用于restful api服務(wù)單獨(dú)部署,用于其他系統(tǒng)單獨(dú)提供接口,直接上手編寫業(yè)務(wù)代碼即可

• Vue+Vol.WebApi 可用于現(xiàn)有框架前后端分離進(jìn)行開發(fā)

• Vol.Web類庫可用于傳統(tǒng)MVC+Razor方式進(jìn)行項(xiàng)目開發(fā)

• Vol.Builder類庫可作為一個(gè)獨(dú)立的代碼生成器,可生成cshtml頁面、Vue頁面、Model文件、Service與Repository.cs業(yè)務(wù)處理代碼類

• 可作為一個(gè)獨(dú)立站點(diǎn)來發(fā)布靜態(tài)html網(wǎng)頁

• 可直接用于H5移動(dòng)App開發(fā)H5開發(fā)：http://132.232.2.109/app/guide

二、框架特點(diǎn)

• 支持前端、后臺(tái)基礎(chǔ)業(yè)務(wù)代碼動(dòng)態(tài)擴(kuò)展，可在現(xiàn)有框架增、刪、改、查、導(dǎo)入、導(dǎo)出、審核基礎(chǔ)業(yè)務(wù)上擴(kuò)展復(fù)雜的業(yè)務(wù)代碼

• 基本業(yè)務(wù)全部由框架完成，上手即可對(duì)基礎(chǔ)業(yè)務(wù)以外的代碼進(jìn)行擴(kuò)展

• 上手簡單，需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可選) 及以上版本的開發(fā)環(huán)境

• 學(xué)習(xí)成本低，封裝了常用可擴(kuò)展組件及Demo(前端基于Iview/Element-UI組件進(jìn)行了二次封裝、后臺(tái)提供了大量的擴(kuò)展方法)

• 開發(fā)效率高,內(nèi)定制開發(fā)的代碼生成器,生成前端(Vue、后臺(tái)代碼),代碼生成器已完成90%以上的重復(fù)工作，只需要在提供的擴(kuò)展類型中實(shí)現(xiàn)其他業(yè)務(wù)

• 前端vue頁面表單下拉/多選框完成自動(dòng)綁定數(shù)據(jù)源，不需要寫任何代碼,并支持?jǐn)U展自定開發(fā)綁定。

• 后臺(tái)已完成權(quán)限、菜單、JWT等內(nèi)部功能

如果你沒有做過webpack+vue工程化開發(fā)項(xiàng)目，可能會(huì)剛開始相當(dāng)不適應(yīng)，或者安裝環(huán)境總是出問題，但只要你熟悉開發(fā)流程后，你會(huì)發(fā)現(xiàn)采用Vue開發(fā)比Jquery爽太多了。上手項(xiàng)目需重點(diǎn)了解基礎(chǔ)Vue語法，特別是了解組件、路由及import的使用

三、開發(fā)及依賴環(huán)境

VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可選，沒有redis的在appsetting.json中不用配置，默認(rèn)使用內(nèi)置IMemory)、

VsCode、Vue2.0(webpack、node.js,如果沒有此環(huán)境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui

四、項(xiàng)目運(yùn)行

如果你沒有前端環(huán)境，請(qǐng)先安裝node

前端開發(fā)使用VsCode

1、使用cmd命令切換至前端Vue項(xiàng)目.../VOL.Vue路徑下,執(zhí)行npm install命令(只有從來沒執(zhí)行過此命令的才執(zhí)行npm install)

2、運(yùn)行后端項(xiàng)目：在后端項(xiàng)目路徑.../VOL.WebApi/運(yùn)行builder_run.bat端口設(shè)置的是9991,運(yùn)行前先看appsettings.josn配置屬性說明

3、運(yùn)行前端項(xiàng)目：在前端Vue項(xiàng)目路徑.../VOL.Vue/運(yùn)行run.bat(每次啟動(dòng)會(huì)進(jìn)行編譯，這個(gè)時(shí)間可能會(huì)有點(diǎn)長)

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

五、功能介紹

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

Dome：http://132.232.2.109/

1、只讀基礎(chǔ)表單

整個(gè)只讀的基礎(chǔ)表單的所有前后端代碼，全部由代碼生成器生成，代碼生成器中幾乎不需要配置，并支持并后端業(yè)務(wù)代碼擴(kuò)展，直接生成代碼后，配置菜單權(quán)限即可

2、自動(dòng)綁定下拉框數(shù)據(jù)表單

整個(gè)自動(dòng)綁定下拉框數(shù)據(jù)表單的所有前后端代碼，全部由代碼生成器生成，并支持并后端業(yè)務(wù)代碼擴(kuò)展，在代碼生成器中只需要指定數(shù)據(jù)源編號(hào)，頁面加載時(shí)會(huì)根據(jù)編號(hào)自動(dòng)加載數(shù)據(jù)源并綁定

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

整個(gè)啟用圖片支持、審核表單的所有前后端代碼，全部由代碼生成器生成，并支持并后端業(yè)務(wù)代碼擴(kuò)展，審核功能需要在菜單配置權(quán)限、代碼生成器中勾選啟用圖片支持

4、高級(jí)查詢

整個(gè)表單的所有前后端代碼，全部由代碼生成器生成，并支持并后端業(yè)務(wù)代碼擴(kuò)展，查詢字段、類型(下拉框、日期、TextArea等)、所在行與列都由代碼生成器完成，不需要寫任何代碼

5、單表新建、編輯

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

6、主從表新建、編輯

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

7、單列、多列Form表單

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

8、可配置的Table(自動(dòng)/手動(dòng)加載table數(shù)據(jù)、自動(dòng)綁定數(shù)據(jù)源、編輯功能)

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

從后臺(tái)加載數(shù)據(jù)、自動(dòng)綁定數(shù)據(jù)

可編輯的table，手動(dòng)綁定數(shù)據(jù)、自動(dòng)綁定數(shù)據(jù)源

表單與table混合使用

9、excel導(dǎo)入

excel導(dǎo)入整個(gè)頁面都由代碼生成器生成，導(dǎo)入的字段、字段是否必填，下載模板也由代碼生成器上配置(自己根據(jù)實(shí)際需要決定是否采用此方法)，導(dǎo)入時(shí)會(huì)驗(yàn)證是否為空與數(shù)據(jù)的合法性，邏輯校驗(yàn)自己實(shí)現(xiàn)擴(kuò)展方法即可

10、H5開發(fā)

H5只是做了一個(gè)簡單的Demo,如果你有H5開發(fā)經(jīng)驗(yàn)，請(qǐng)忽略，如果你沒有H5開發(fā)經(jīng)驗(yàn)，http://132.232.2.109/app/guide

11、權(quán)限分配

目前只實(shí)現(xiàn)了對(duì)用戶的角色的Action進(jìn)行權(quán)限分配

12、菜單管理

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

13、個(gè)人中心

個(gè)人中心目前只開發(fā)了頁面與修改密碼，其他功能自行根據(jù)需要實(shí)現(xiàn)

14、前端、后臺(tái)業(yè)務(wù)代碼動(dòng)態(tài)擴(kuò)展

框架提供了前臺(tái)后端擴(kuò)展方法與屬性,只需要根據(jù)自己的業(yè)務(wù)實(shí)現(xiàn)擴(kuò)展業(yè)務(wù)。后臺(tái)大部分都采用的委托擴(kuò)展方法，這里只截了一張圖前端數(shù)據(jù)加載事件的擴(kuò)展方法，前后臺(tái)完整擴(kuò)展參考Demo：http://132.232.2.109/SellOrder

15、代碼生成器

代碼生成器提供了20多種可配置的屬性，可靈活配置顯示、查詢、編輯、導(dǎo)入、導(dǎo)出、主從關(guān)系等功能點(diǎn)擊看代碼生成器文檔

還有角色管理、日志管理、數(shù)據(jù)源管理、其他組件、后臺(tái)代碼等功能就不再介紹了。

七、總結(jié)

此框架由代碼生成器完成了大部分工作能極大減少代碼量,并支持前臺(tái)端代碼的擴(kuò)展。

如果你對(duì)前后端分離開發(fā)的方式或H5開發(fā)有興趣,那么希望此框架對(duì)能你有所幫助！

如果你覺得框架對(duì)你有用，幫忙點(diǎn)個(gè)星，非常感謝!

• Demo地址：http://132.232.2.109 帳號(hào)：admin666密碼：123456(本地超級(jí)管理員帳號(hào)：admin密碼123456)

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

• 如果你需要Quartz.Net做定時(shí)任務(wù)管理，你可以試試這個(gè)：https://github.com/cq-panda/Quartz.NetUI

  (站點(diǎn)與MySql部署在同一個(gè)1G1核1M帶寬的服務(wù)Centos服務(wù)上,訪問可能會(huì)出現(xiàn)延遲現(xiàn)象)

覺得本文對(duì)你有幫助？請(qǐng)分享給更多人

關(guān)注「前端教程」，一起提升前端技能！

好文章，我在看??

總結(jié)

以上是生活随笔為你收集整理的easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。