电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

瀏覽:115日期:2023-01-30 11:14:54

vue-autoui 是一款基于vue和element擴(kuò)展的一個自動化UI控件,它主要提供兩個控件封裝分別是auto-form和auto-grid; 通過這兩個控件可以完成大多數(shù)的信息輸入和查詢輸出的需要.auto-form和auto-grid是通過json來描述展示的結(jié)構(gòu),在處理上要比寫html標(biāo)簽來得方便簡單, 但這控件的最大優(yōu)勢并不是在這里,它最重要的功能是可以結(jié)合webapi的信息來自動輸出界面,只需要調(diào)整webapi的信息結(jié)構(gòu)即可完成UI的調(diào)整。

基礎(chǔ)使用

控件可以直接在vuejs功能中使用,但需要結(jié)合json來設(shè)置具體UI展示,以下是一個簡單的例子

<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>

功能很簡單就是顯示當(dāng)前輸入并驗(yàn)證通過的數(shù)據(jù),下面用json描述信息輸入源。

data(){ return {info: { items: [] },data: { }, }; }, mounted(){ var items = []; items.push({name: ’active’, label: ’活動名稱’, rules: [ { required: true, message: ’請輸入活動名稱’, trigger: ’blur’ }, { min: 3, max: 5, message: ’長度在 3 到 5 個字符’, trigger: ’blur’ }] }); items.push({name: ’region’, label: ’活動區(qū)域’, type: ’select’,data: [{ value: ’廣州’ }, { value: ’深圳’ }, { value: ’上海’ }, { value: ’北京’ }],rules: [{ required: true, message: ’請選擇活動區(qū)域’, trigger: ’change’ }],eof: true }); items.push({ name: ’starttime’, label: ’開啟時間’, type: ’date’, rules: [{ type: ’date’, required: true, message: ’請選擇日期’, trigger: ’change’ }] }); items.push({ name: ’endtime’, label: ’-’, type: ’date’, eof: true, rules: [{ type: ’date’, required: true, message: ’請選擇日期’, trigger: ’change’ }] }); items.push({ name: ’instant’, type: ’switch’, label: ’即時配送’, eof: true }); items.push({name: ’nature’, type: ’checkbox’, label: ’活動性質(zhì)’,rules: [{ type: ’array’, required: true, message: ’請至少選擇一個活動性質(zhì)’, trigger: ’change’ }],data: [{ value: ’美食/餐廳線上活動’ }, { value: ’地推活動’ }, { value: ’線下主題活動’ }, { value: ’單純品牌暴光’ }], eof: true }); items.push({name: ’resource’, label: ’特殊資源’, type: ’radio’, rules: [{ required: true, message: ’請選擇活動資源’, trigger: ’change’ }],data: [{ value: ’線上品牌商贊助’ }, { value: ’線下場地免費(fèi)’ }], eof: true }); items.push({ name: ’remark’, label: ’活動形式’, type: ’remark’, rules: [{ required: true, message: ’請?zhí)顚懟顒有问健? trigger: ’blur’ }] }) this.info = { items: items} }

以上是使用json來描述一個輸出的界面,具體效果如下:

vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

雖然用json來描述界面會比html描述會方便一些,但總體上來說工作量還是有些大的,在調(diào)整界面的時候也不方便。接下介紹一下如何結(jié)合BeetleX.FastHttpApi來進(jìn)一步簡化這些繁瑣的操作。

Webapi動態(tài)輸出

其實(shí)在構(gòu)建vue-autoui的時候更多是考慮和BeetleX.FastHttpApi進(jìn)行一個整合,通過和后端融合可以把這些UI編寫的工作量大大節(jié)省下來,讓開發(fā)這些功能變得更簡單方便,更重要的是api變化后界面就自動適應(yīng)。使用要求:在和BeetleX.FastHttpApi整合還需要引用BeetleX.FastHttpApi.ApiDoc插件,因?yàn)檫@個插件用于給接口輸出對應(yīng)UI的JSON信息。接下來通過幾個示例來介紹整合的方便性:

登陸

登陸功能是比較常見的,接下來看一下使用auto-form如何結(jié)合webapi來完成這個功能。

<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>

以上是一個登陸功能UI的定義,是不是很簡單呢?通過指定url的webapi連接即可以自動適應(yīng)UI;這時候只需要針對登陸接口進(jìn)行一個定義即可:

[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'; }

vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

注冊

接下來定義一個信息多些的注冊界面

<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()'> 注冊 </el-button></div>

在UI定義上基于沒什么變化,只是調(diào)整一下對應(yīng)的url地址,在這里多了一下completed事件,這個事件主要是通過接口加載UI信息才會觸發(fā)的。對應(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)密碼的對比驗(yàn)證,接下來看一下后臺注冊對應(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個字符', 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)行效果如下:

vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

數(shù)據(jù)列表

有應(yīng)用中除了數(shù)據(jù)輸出外更多的數(shù)據(jù)列表,auto-grid即是專門用于處理列表的一個控件,這個控件提供分頁,選擇,編輯和刪除的功能;接下來做一個簡單的雇員列表示例:

<auto-grid url='/employees' @completed='employees.get()' @itemchange='onItemChange' @itemdelete='onItemDelete' @command='onCommand' :data='employees.result' size='mini' edit='true' delete='true'></auto-grid>

這個列表提供編輯和刪除功能,相關(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(’是否要刪除’ + 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; }

vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

動態(tài)查詢

實(shí)際應(yīng)用中需要提供查詢條件輸入,這個時候就可以把a(bǔ)uto-form和auto-grid整合起來,以下通過一個簡單的訂單查詢來展示這兩個控件結(jié)合使用

<auto-form url='/orders' v-model='orders.data' @completed='orders.get()' size='mini' @fieldchange='orders.get()'> </auto-form> <auto-grid url='/orders' :data='orders.result.items' :pages='orders.result.pages' :currentpage='orders.result.index' @pagechange='onPageChange' size='mini'> </auto-grid>

可以在auto-form的fieldchange事件中自動執(zhí)行查詢,對應(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ù)端代碼,由于方法需要描述輸入和列表所以對應(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(){ }

vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

插件詳細(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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) | 冷油器,取样冷却器,热力除氧器-连云港振辉机械设备有限公司 | 软文发布-新闻发布推广平台-代写文章-网络广告营销-自助发稿公司媒介星 | 日本SMC气缸接头-速度控制阀-日本三菱伺服电机-苏州禾力自动化科技有限公司 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 安驭邦官网-双向万能直角铣头,加工中心侧铣头,角度头[厂家直销] 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 聚丙烯酰胺_阴离子_阳离子「用量少」巩义亿腾厂家直销,售后无忧 聚合甘油__盐城市飞龙油脂有限公司 | 液晶拼接屏厂家_拼接屏品牌_拼接屏价格_监控大屏—北京维康 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 100国际学校招生 - 专业国际学校择校升学规划| 定制防伪标签_防伪标签印刷_防伪标签厂家-510品保防伪网 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 众品家具网-家具品牌招商_家具代理加盟_家具门户的首选网络媒体。 | 淘趣英语网 - 在线英语学习,零基础英语学习网站 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 食品机械专用传感器-落料放大器-低价接近开关-菲德自控技术(天津)有限公司 | 2025福建平潭岛旅游攻略|蓝眼泪,景点,住宿攻略-趣平潭网 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 药品仓库用除湿机-变电站用防爆空调-油漆房用防爆空调-杭州特奥环保科技有限公司 | 小型手持气象站-空气负氧离子监测站-多要素微气象传感器-山东天合环境科技有限公司 | Pos机办理_个人商户免费POS机申请-拉卡拉办理网 | 工业风机_环保空调_冷风机_工厂车间厂房通风降温设备旺成服务平台 | 臻知网大型互动问答社区-你的问题将在这里得到解答!-无锡据风网络科技有限公司 | 交通信号灯生产厂家_红绿灯厂家_电子警察监控杆_标志杆厂家-沃霖电子科技 | SPC工作站-连杆综合检具-表盘气动量仪-内孔缺陷检测仪-杭州朗多检测仪器有限公司 | 轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电 | 超声波_清洗机_超声波清洗机专业生产厂家-深圳市好顺超声设备有限公司 | elisa试剂盒-PCR试剂盒「上海谷研实业有限公司」 | 北京三友信电子科技有限公司-ETC高速自动栏杆机|ETC机柜|激光车辆轮廓测量仪|嵌入式车道控制器 | 深圳货架厂_仓库货架公司_重型仓储货架_线棒货架批发-深圳市诺普泰仓储设备有限公司 | 杰恒蠕动泵-蠕动泵专业厂家-19年专注蠕动泵| 淘剧影院_海量最新电视剧,免费高清电影随心观看 | 全自动在线分板机_铣刀式在线分板机_曲线分板机_PCB分板机-东莞市亿协自动化设备有限公司 | 闪蒸干燥机-喷雾干燥机-带式干燥机-桨叶干燥机-[常州佳一干燥设备] | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | hc22_hc22价格_hc22哈氏合金—东锜特殊钢 | 废气处理_废气处理设备_工业废气处理_江苏龙泰环保设备制造有限公司 | 智慧农业|农业物联网|现代农业物联网-托普云农物联网官方网站 | 污水处理设备,一体化泵站,一体化净水设备-「梦之洁环保设备厂家」 | 工控机-工业平板电脑-研华工控机-研越无风扇嵌入式box工控机 |