vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)
vue-autoui 是一款基于vue
和element
擴(kuò)展的一個(gè)自動(dòng)化UI控件,它主要提供兩個(gè)控件封裝分別是auto-form
和auto-grid
; 通過這兩個(gè)控件可以完成大多數(shù)的信息輸入和查詢輸出的需要.auto-form
和auto-grid
是通過json
來描述展示的結(jié)構(gòu),在處理上要比寫html
標(biāo)簽來得方便簡(jiǎn)單, 但這控件的最大優(yōu)勢(shì)并不是在這里,它最重要的功能是可以結(jié)合webapi
的信息來自動(dòng)輸出界面,只需要調(diào)整webapi
的信息結(jié)構(gòu)即可完成UI的調(diào)整。
基礎(chǔ)使用
控件可以直接在vuejs功能中使用,但需要結(jié)合json
來設(shè)置具體UI展示,以下是一個(gè)簡(jiǎn)單的例子
<auto-form ref="form" v-model="data" size="mini" :info="info"> </auto-form> <el-button @click="if($refs.form.success()){alert(JSON.stringify(data))}">確定</el-button>
功能很簡(jiǎn)單就是顯示當(dāng)前輸入并驗(yàn)證通過的數(shù)據(jù),下面用json描述信息輸入源。
data(){ return { info: { items: [] }, data: { }, }; }, mounted(){ var items = []; items.push({ name: 'active', label: '活動(dòng)名稱', rules: [ { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' } ] }); items.push({ name: 'region', label: '活動(dòng)區(qū)域', type: 'select', data: [{ value: '廣州' }, { value: '深圳' }, { value: '上海' }, { value: '北京' }], rules: [{ required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }], eof: true }); items.push({ name: 'starttime', label: '開啟時(shí)間', type: 'date', rules: [{ type: 'date', required: true, message: '請(qǐng)選擇日期', trigger: 'change' }] }); items.push({ name: 'endtime', label: '-', type: 'date', eof: true, rules: [{ type: 'date', required: true, message: '請(qǐng)選擇日期', trigger: 'change' }] }); items.push({ name: 'instant', type: 'switch', label: '即時(shí)配送', eof: true }); items.push({ name: 'nature', type: 'checkbox', label: '活動(dòng)性質(zhì)', rules: [{ type: 'array', required: true, message: '請(qǐng)至少選擇一個(gè)活動(dòng)性質(zhì)', trigger: 'change' }], data: [{ value: '美食/餐廳線上活動(dòng)' }, { value: '地推活動(dòng)' }, { value: '線下主題活動(dòng)' }, { value: '單純品牌暴光' }], eof: true }); items.push({ name: 'resource', label: '特殊資源', type: 'radio', rules: [{ required: true, message: '請(qǐng)選擇活動(dòng)資源', trigger: 'change' }], data: [{ value: '線上品牌商贊助' }, { value: '線下場(chǎng)地免費(fèi)' }], eof: true }); items.push({ name: 'remark', label: '活動(dòng)形式', type: 'remark', rules: [{ required: true, message: '請(qǐng)?zhí)顚懟顒?dòng)形式', trigger: 'blur' }] }) this.info = { items: items} }
以上是使用json
來描述一個(gè)輸出的界面,具體效果如下:
雖然用json
來描述界面會(huì)比html
描述會(huì)方便一些,但總體上來說工作量還是有些大的,在調(diào)整界面的時(shí)候也不方便。接下介紹一下如何結(jié)合BeetleX.FastHttpApi
來進(jìn)一步簡(jiǎn)化這些繁瑣的操作。
Webapi動(dòng)態(tài)輸出
其實(shí)在構(gòu)建vue-autoui
的時(shí)候更多是考慮和BeetleX.FastHttpApi
進(jìn)行一個(gè)整合,通過和后端融合可以把這些UI編寫的工作量大大節(jié)省下來,讓開發(fā)這些功能變得更簡(jiǎn)單方便,更重要的是api變化后界面就自動(dòng)適應(yīng)
。使用要求:在和BeetleX.FastHttpApi
整合還需要引用BeetleX.FastHttpApi.ApiDoc
插件,因?yàn)檫@個(gè)插件用于給接口輸出對(duì)應(yīng)UI的JSON
信息。接下來通過幾個(gè)示例來介紹整合的方便性:
登陸
登陸功能是比較常見的,接下來看一下使用auto-form
如何結(jié)合webapi
來完成這個(gè)功能。
<div> <auto-form ref="login" url="/login" v-model="login.data" size="mini"> </auto-form> <el-button size="mini" @click="if($refs.login.success())login.post()"> 登陸 </el-button> </div>
以上是一個(gè)登陸功能UI的定義,是不是很簡(jiǎn)單呢?通過指定url
的webapi連接即可以自動(dòng)適應(yīng)UI;這時(shí)候只需要針對(duì)登陸接口進(jìn)行一個(gè)定義即可:
[Input(Label = "用戶名", Name = "name", Eof = true)] [Required("用戶名不能為空", Name = "name")] [Input(Label = "密碼", Name = "pwd", Type = "password", Eof = true)] [Required("用戶密碼不能為空", Name = "pwd")] [Input(Label = "保存狀態(tài)", Value = true, Name = "saveStatus")] public bool Login(string name, string pwd, bool saveStatus) { Console.WriteLine($"name:{name} pwd:{pwd} saveStatus:{saveStatus}"); return name == "admin"; }
注冊(cè)
接下來定義一個(gè)信息多些的注冊(cè)界面
<div> <auto-form ref="login" url="/register" v-model="register.data" size="mini" @completed="onCompleted"> </auto-form> <el-button size="mini" @click="if($refs.login.success())register.post()"> 注冊(cè) </el-button> </div>
在UI定義上基于沒什么變化,只是調(diào)整一下對(duì)應(yīng)的url
地址,在這里多了一下completed
事件,這個(gè)事件主要是通過接口加載UI信息才會(huì)觸發(fā)的。對(duì)應(yīng)功能的javascript
代碼
data(){ return { register: new beetlexAction('/register', {}), checkConfirmPassword: (rule, value, callback) => { var password = this.$refs.login.getField('Password'); var cpassword = this.$refs.login.getField('ConfirmPassword'); if (password.value != cpassword.value) callback(new Error('確認(rèn)密碼不正確!')); else callback(); }, } }, methods: { onCompleted(){ this.$refs.login.getField('ConfirmPassword').rules.push({ validator: this.checkConfirmPassword, trigger: 'blur' }); }, }, mounted() { this.register.requested = (r) => { alert(JSON.stringify(r)); }; }
代碼主要是定密碼和確認(rèn)密碼的對(duì)比驗(yàn)證,接下來看一下后臺(tái)注冊(cè)對(duì)應(yīng)的接口
[Post] public RegisterDto Register(RegisterDto register) { Console.WriteLine(Newtonsoft.Json.JsonConvert.SerializeObject(register)); return register; } public class RegisterDto { [Input(Label = "用戶名", Eof = true)] [Required("用戶名不能為空")] [DataRange("用戶名的必須大于3個(gè)字符", Min = 3)] public string Name { get; set; } [Input(Label = "郵箱地址", Eof = true)] [Required("郵件地址無效", Type = "email")] public string Email { get; set; } [Input(Label = "密碼", Eof = true, Type = "password")] [Required("輸入密碼")] public string Password { get; set; } [Input(Label = "確認(rèn)密碼", Eof = true, Type = "password")] [Required("輸入確認(rèn)密碼")] public string ConfirmPassword { get; set; } [GenderInput(Label = "性別", Value = "男", Eof = true)] public string Gender { get; set; } [Required("選擇所在城市")] [CityInput(Label = "城市", Eof = true)] public string City { get; set; } [HobbyInput(Label = "愛好")] [Required("選擇愛好", Type = "array", Trigger = "change")] public string[] Hobby { get; set; } }
服務(wù)代碼也沒太多的變化,只是通過一些標(biāo)簽來標(biāo)記一下相關(guān)屬性的數(shù)據(jù)源和輸入要求.具體運(yùn)行效果如下:
數(shù)據(jù)列表
有應(yīng)用中除了數(shù)據(jù)輸出外更多的數(shù)據(jù)列表,auto-grid
即是專門用于處理列表的一個(gè)控件,這個(gè)控件提供分頁,選擇,編輯和刪除的功能;接下來做一個(gè)簡(jiǎn)單的雇員列表示例:
<auto-grid url="/employees" @completed="employees.get()" @itemchange="onItemChange" @itemdelete="onItemDelete" @command="onCommand" :data="employees.result" size="mini" height="100%" edit="true" delete="true"> </auto-grid>
這個(gè)列表提供編輯和刪除功能,相關(guān)腳本代碼如下:
data(){ return { employees: new beetlexAction('/employees', {}, []) } }, methods: { onCommand(e){ this.$open('models-employee', e.data); }, onItemChange(item){ if (confirm('是否要修改' + item.data.FirstName + '?')) { item.success(); } }, onItemDelete(item){ if (confirm('是否要?jiǎng)h除' + item.data.FirstName + '?')) { item.success(); } }, }, mounted() { }
接下來的工作就是在服務(wù)端定義api
來輸出結(jié)果
[Column("FirstName", Type = "link")] [Column("LastName", Read = true)] [Column("Title")] [Column("HomePhone")] [Column("City")] [Column("Address")] public object Employees() { return DataHelper.Defalut.Employees; }
動(dòng)態(tài)查詢
實(shí)際應(yīng)用中需要提供查詢條件輸入,這個(gè)時(shí)候就可以把auto-form
和auto-grid
整合起來,以下通過一個(gè)簡(jiǎn)單的訂單查詢來展示這兩個(gè)控件結(jié)合使用
<auto-form url="/orders" v-model="orders.data" @completed="orders.get()" size="mini" @fieldchange="orders.get()"> </auto-form> <auto-grid url="/orders" height="300" :data="orders.result.items" :pages="orders.result.pages" :currentpage="orders.result.index" @pagechange="onPageChange" size="mini"> </auto-grid>
可以在auto-form
的fieldchange
事件中自動(dòng)執(zhí)行查詢,對(duì)應(yīng)的腳本代碼如下:
data(){ return { orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] }) }; }, methods: { onPageChange(page){ this.orders.data.index = page; this.orders.get(); }, }, mounted(){ }
接下來需要實(shí)現(xiàn)服務(wù)端代碼,由于方法需要描述輸入和列表所以對(duì)應(yīng)的標(biāo)簽比較多
data(){ return { orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] }) }; }, methods: { onPageChange(page){ this.orders.data.index = page; this.orders.get(); }, }, mounted(){ }
插件詳細(xì)代碼https://github.com/IKende/BeetleX-Samples/tree/master/Web.AutoUI
https://github.com/IKende/vue-autoui
到此這篇關(guān)于vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue-autoui自匹配webapi的UI控件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue PC端實(shí)現(xiàn)掃碼登錄功能示例代碼
目前大多數(shù)PC端應(yīng)用都有配套的移動(dòng)端APP,如微信,淘寶等,通過使用手機(jī)APP上的掃一掃功能去掃頁面二維碼圖片進(jìn)行登錄,使得用戶登錄操作更方便,安全,快捷,這篇文章主要介紹了Vue PC端如何實(shí)現(xiàn)掃碼登錄功能,需要的朋友可以參考下2023-01-01vue3 Vite 進(jìn)階rollup命令行使用詳解
這篇文章主要介紹了vue3 Vite 進(jìn)階rollup命令行使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Element Plus實(shí)現(xiàn)Affix 固釘
本文主要介紹了Element Plus實(shí)現(xiàn)Affix 固釘,Affix組件用于將頁面元素固定在特定可視區(qū)域,文中通過示例代碼介紹的非常詳細(xì),感興趣的小伙伴們可以參考一下2021-07-07vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面
這篇文章主要介紹了vue-router(this.$router)如何在新窗口打開路由跳轉(zhuǎn)頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12Vue+Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Echarts實(shí)現(xiàn)繪制多設(shè)備狀態(tài)甘特圖,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03