});
items.push({
name: 'resource', label: '特殊资源', type: 'radio', rules: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
data: [{ value: '线上品牌商赞助' }, { value: '线下场地免费' }], eof: true
});
items.push({ name: 'remark', label: '活动形式', type: 'remark', rules: [{ required: true, message: '请填写活动形式', trigger: 'blur' }] })
this.info = { items: items}
}
以上是使用
json来描述一个输出的界面，具体效果如下:
虽然用
json来描述界面会比
html描述会方便一些，但总体上来说工作量还是有些大的，在调整界面的时候也不方便。接下介绍一下如何结合
BeetleX.FastHttpApi来进一步简化这些繁琐的操作。Webapi动态输出
其实在构建
vue-autoui的时候更多是考虑和
BeetleX.FastHttpApi进行一个整合，通过和后端融合可以把这些UI编写的工作量大大节省下来，让开发这些功能变得更简单方便，
更重要的是api变化后界面就自动适应。使用要求：在和
BeetleX.FastHttpApi整合还需要引用
BeetleX.FastHttpApi.ApiDoc插件，因为这个插件用于给接口输出对应UI的
JSON信息。接下来通过几个示例来介绍整合的方便性：登陆
登陆功能是比较常见的，接下来看一下使用
auto-form如何结合
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连接即可以自动适应UI;这时候只需要针对登陆接口进行一个定义即可:
[Input(Label = "用户名", Name = "name", Eof = true)] [Required("用户名不能为空", Name = "name")] [Input(Label = "密码", Name = "pwd", Type = "password", Eof = true)] [Required("用户密码不能为空", Name = "pwd")] [Input(Label = "保存状态", Value = true, Name = "saveStatus")] public bool Login(string name, string pwd, bool saveStatus)
