如何去实现配置化页面 - 戴向天

从上面的效果图中，我们可以看出，仅用了不到50行的代码，我们就实现了一个登录的页面，以及功能上面的实现。并且还实现了每一个部分的拆解，最终进行组装即可。这个就是配置化所能产生的效果。

洋铲配置化项目 - Demo （该项目是由于本人懒得去想项目，于是就直接仿照BuildAdmin）

项目源码地址

在了解如何去实现配置化页面的时候，我们先了解配置化页面到底能做什么，能解决什么？

1. 页面、事务处理逻辑等拆解细分，可实现高解耦。
2. 配置可以重复使用，实现高频率的调用。
3. 能够使用少量的代码来进行实现项目上的功能。
4. 可实现通过后台获取配置信息进行实现页面。
5. 在使用上熟练以后，可以去跟上低代码的发展脚步。

为了能让大家都能够以最低的学习成本，来进行参与配置化页面，进军低代码项目。【洋铲工作室】进行了研发封装了一款配置化表单的插件。它能够让你以 JSON 的方式去配置表单，并且按照你的配置信息，自动去帮你做逻辑上的处理。该插件它其实不仅仅能够去实现配置化表单，它也能够实现配置化页面。 该插件已经在 Gitee 上面进行了开源，要是感兴趣的可以点击查看。

接下来我们就开始去了解如何利用【洋铲配置化表单】去实现配置化页面

第一步：安装洋铲配置化表单

npm install yc-config-form
1

第二步：安装UI。 本文将以【Element-plus】作为案例

npm install element-plus --save
1

第三步：生成相对应的 UI 配置表单

import * as Vue from 'vue'
import ConfigForm from 'yc-config-form'

export default new ConfigForm(Vue, {
  dictionary
}).ElementPlus({
  markRaw: Vue.markRaw,
  components: {
    Transition: Vue.Transition,      // Vue的动画组件
    KeepAlive: Vue.KeepAlive,        // Vue的缓存组件
  },
  mapping: {
    componentMapping: {
      routerView: 'RouterView',      // 路由组件映射信息
      configForm: 'ConfigForm',      // 配置化表单组件映射信息
      keepAlive: 'KeepAlive',        // Vue的缓存组件映射信息
    }
  }
}).$end()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

第四步：使用依赖

import { createApp, h, markRaw } from 'vue'                           // 按需引入 Vue
import App from './App.vue'                                           // 引入挂载文件
import router from './router'                                         // 引入路由信息
import './assets/init.css'                                            // 初始化样式
import './assets/project.css'                                         // 当前项目样式
import ElementPlus from 'element-plus'                                // 引入 Element-plus 组件
import 'element-plus/dist/index.css'                                  // 引入 Element-plus 样式  
import * as ElementPlusIconsVue from '@element-plus/icons-vue'        // 引入 Element-plus 图标
import ConfigForm from './components/ConfigForm'                      // 引入 Element-plus 配置化组件

const app = createApp(App)                                            // 创建应用
app.use(ElementPlus).use(router)                                      // 注册 Element-plus 组件 - 全局使用
app.component('ConfigForm', ConfigForm)                               // 注册 Element-plus 的配置化表单 - 全局使用
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)                                       // 注册所有Element-plus图标
}
app.mount('#app')                                                     // 执行挂载，运行程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其实做完以上四步基本就可以进行实现配置化页面了，但是如果单纯的使用洋铲的基础配置方式的化，配置信息依然还是很臃肿的。

例如：

const formConfig = [
    { 
        type: 'input',
        prop: 'userName', 
        label: '用户名称',
        required: true
    },
    {
        type: 'input',
        prop: 'password',
        label: '密码',
        required: true, 
        bind: {type: 'password'}
    },
    {
        type: 'checkbox',
        nodes: '记住密码'
    },
    {
        type: 'button',
        nodes: '登录',
        events: [
            name: 'click',
            handler({form}){
                form.getFormData(true).then(data=>{
                    console.log('结果=>', data)
                }).catch((error)=>{
                    console.error(error)
                })
            }
        ]
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

但是我们可以进行封装一下配置信息，然后通过函数化进行获取配置信息的话，那我们就可以用极少的代码进行实现配置信息。

例如：

const usreName = Pr.Input('userName','用户名称').setNotFormItem(false) .setRequired(true).$end();
    
const password = Pr.Input('password', '密码',{type: 'password'}).setNotFormItem(false)
.setRequired(true).$end()

const button = Pr.Button('登录').click(({form})=>{
     form.getFormData(true).then(data=>{
         console.log('结果=>', data)
     }).catch((error)=>{
        console.error(error)
     })
})

const formConfig = [usreName,password,button]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

接下来将会有具体的工具代码详情，你也可以进行查看项目源码地址进行了解。

接下来是我个人封装内容。先进行简单的目录结果展示

基础信息配置生成处理：utils/element-plus/lib/Entity/BaseEntity.ts

该文件主要是用来处理配置信息并进行生成。可以进行链式调用，能够让你的配置信息进行指定字段配置，直到调用 $end 方法进行告知配置结束。

例如：

const src = 'http://www.yangchan.work/assets/images/logo/yc-logo-sunny.png'
const img = new BaseEntity('img').setBind({ scr }).$end()
const div = new BaseEntity('div').setClass('container').setNodes(img).$end()
1
2
3

配置信息绑定事件处理：utils/element-plus/lib/Entity/EventEntity.ts

该文件组要是用来生成事件信息，让你能快速绑定指定的方法。

例如：

const button = Pr.Button('保存').click(({form})=>{
    form.getFormData(true).then(res=>{
        console.log('结果=>',res)
    }).catch(()=>{
        console.log('请输入必填项信息')
    })
})
1
2
3
4
5
6
7

配置信息辅助性工具 ：utils/element-plus/lib/Entity/UtilEntity.ts

该文件主要是做配置项自定义拦截处理，目前只是处理了 bind & class

例如：

// 封装一个只能选择日期范围的控件
const DateRange = (props, bind) => {
      const prop = 'date_range_' + Math.ceil(Math.random() * 999999;
      const intercept = (config)=>util.bindHandler(config, { type: 'daterange' })
      return  Pr.Date(prop, bind).setProps(props).setIntercept(intercept)
}
// 使用方式
const dateRange = DateRange(['startDate','endDate']).$end()
1
2
3
4
5
6
7
8

封装组件函数：utils/element-plus/lib/index.ts

该文件所提供的就是对Element-plus组件通过 BaseEntity 工具进行函数化处理，然后利用函数进行生成相对应的配置信息。

例如：

const userName = Yc.Input('userName').$end()
const password = Yc.Input('userName').setBind({type: 'password'}).$end()
1
2

二次封装用户，让其更加贴合自身项目：utils/project/utils

例如：

// 封装一个含有主要用于表单的输入框
function formInput (label, prop, bind) => {
    return Yc.Input(prop, bind).setLabel(label).setNotFormItem(false)
}

// 使用方法
const userName = formInput('用户名称','userName').setRequired(true).$end();   // 必填的用户名称
const password = formInput('密码','password',{type: 'password'})
                 .setBind({type: 'password'})  // 设置为密码输入框
                 .setRequired(true)    // 设置必填项
                 .$end()
1
2
3
4
5
6
7
8
9
10
11

实现登录页面

接下来就是实现一个登录的界面的配置项啦。

import { ElNotification } from "element-plus";
import Pr from "../utils/project/utils";
import { IEvent } from "../utils/element-plus/lib/util-interface";

// 登录框头部
const loginBoxTop = Pr.Image('https://demo.buildadmin.com/assets/login-header.2b702f97.png').setClass('login-box-cover').$end()

// 头像
const avatar = Pr.Avatar('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', { size: 100 }).setStyle({ marginTop: '-50px', position: 'relative' }).$end()

//登录按钮的事件处理
const loginHandler: IEvent = ({ form }) => {
  form.getFormData(true).then((res: any) => {
    ElNotification.success({ message: `欢迎登录 ` + res.userName })
    form.$router.push('/admin/dashboard')
  }).catch(() => {
    ElNotification.warning({ message: '请输入账号和密码信息' })
  })
}

// 登录按钮
const loginButton = Pr.Button('登录', { size: 'large', type: 'primary' }).setClass('login-button').click(loginHandler).$end()

// 账号
const userName = Pr.Input('userName', { prefixIcon: Pr.Icon('user').$end() }).setLabel('账号').setRequired(true).setNotFormItem(false).$end()

// 密码
const password = Pr.Input('password', { prefixIcon: Pr.Icon('lock').$end(), type: 'password' }).setLabel('密码').setRequired(true).setNotFormItem(false).$end()

// 是否记住密码
const checkbox = Pr.Checkbox('remember').setNodes('记住密码').setNotFormItem(false).$end()

// 表单信息
const formInfo = Pr.ConfigForm({ labelPosition: 'top', class: 'w-80' }, [userName, password, checkbox, loginButton]).$end()

// 登录内容
const loginContent = Pr.Custom('div').setNodes([avatar, formInfo]).setClass('layout-flex-x-center').$end()

// 登录框
const loginBox = Pr.Custom('div').setNodes([loginBoxTop, loginContent]).setClass('login-box').$end()

// 导出页面
export default Pr.Page('Login', {
  style: {
    height: '100vh',
    background: 'linear-gradient(45deg, rgba(254, 172, 94, 0.5), rgba(199, 121, 208, 0.5), rgba(75, 192, 200, 0.5))'
  }
}, [Pr.Custom('div').setClass('layout-flex-full-center').setNodes([loginBox]).$end()])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

最后留言

洋铲配置化表单目前还没有正式发布1.0版本

你要是想更深层次的了解，欢迎加入企鹅群：602504799 进行咨询

作者

戴向天（洋铲工作室 - 前端工程师）