8. Ant Design PC 员工登录框UI组件搭建实战 快速上手教程

教程目标

掌握员工登录框组件UI的搭建

demo预览地址 https://pre.d8dcloud.com/play/632

组件清单如下图

 

教程步骤

在前台下添加

UI分组容器

        一行一列作为登录表单控件定位容器，让其实现水平居中，垂直居中的效果

        间距组件，让登录表单控件按竖向等间距排列

        文本组件，站点标题文本

        输入框组件，手机号

        输入框组件，密码

        按钮，登录按钮

内部方法分组

        JS函数，点击登录事件处理函数

自定义事件分组

        模块事件组件，向组件外抛出登录成功事件

公共数据分组

        状态变量，站点标题，用于从组件外部传入站点标题值

行 配置

 列 配置

 间距配置

 站点标题文本 配置

//用_F函数的callMethod方法的get参数，取 公共数据 -> 站点标题 变量值
_F('variable_PwhWEnHpBa').callMethod('get')

 手机号  输入框  配置

 密码 输入框 配置

 登录按钮  配置

 登录按钮 点击事件 处理方法 配置，绑定了 点击登录事件处理函数

 点击登录事件处理函数 代码

let loginForm = {
  //用_F函数的callMethod方法的getValue参数，取 手机号 输入框 值
  "手机号":_F('input_WKyYMWfhB4').callMethod('getValue'),
  //用_F函数的callMethod方法的getValue参数，取 密码 输入框 值
  "密码":_F('input_6nP5eH7X26').callMethod('getValue')
};

//在控制台打印 表单对象 值
console.log('提交表单结果',loginForm);

//调用自定义事件 登录成功，同时传出 登录成功后接口返回 的 用户信息对象
_F('fEvent_JmCbfyaDdj').call({
  用户信息:{
    _id:123,
    用户名:"XXXXXXXXX",
    手机号:"XXXXXXXXXXXX"
  }
});

 登录成功 自定义事件 配置，事件参数 用户信息

 站点标题，默认配置 为  多八多管理后台

 保存，预览，https://pre.d8dcloud.com/play/632

 输入手机号/用户名

输入密码

点击登录按钮

控制台 输出 表单对象

同时触发 登录成功 自定义事件

完成 

组件DEMO下载地址 https://www.d8dcloud.com/#/app

 

 

 多八多在线IDE介绍

多八多在线IDE是一个基于Web自带可视化IDE+编译器的开发平台，它为用户提供了一个可视化UI布局来实现前后业务逻辑的开发。多八多在线IDE使用了Node驱动的编译器和一个强大的组件化系统来支持多层组件嵌套。

UI组件库

多八多在线IDE支持Antd UI组件库和移动端的Nut UI组件库，从而可以满足不同设备和平台的需求。

在线CSS编辑器

多八多在线IDE支持组件CSS的在线编辑，让开发者能更方便快捷地实现样式的修改。

状态管理

全站的store状态管理让各组件之间的数据交互更加方便，从而让开发者能更好地控制应用程序的行为。

主题和多语言配置

多八多在线IDE支持全站主题和多语言配置，从而使得不同用户在使用平台时能更方便地切换应用程序的界面风格和语言。

免费注册

多八多在线IDE提供了免费的注册和开发平台，不限制应用数量和使用人数。此外，平台还提供免费下载前后台基础框架，让开发者可以快速上手开发。

应用导出和私有部署

应用程序的免费导出和私有部署让用户可以更好地对应用程序的使用和安全性进行控制。

微服务容器化部署和内网开发

多八多在线IDE支持微服务容器化部署，并且支持内网开发。这使得开发者能够更好地掌控整个应用程序的部署和安全性。

全场景应用支持

多八多在线IDE支持全场景应用开发，可以开发各种应用程序、小程序、APP等。移动端 H5、原生小程序、APP 可以使用同一套代码开发，从而减少重复的工作量和运营成本。

应用组件市场

多八多在线IDE还提供了应用组件市场，开发者可以在市场中寻找和选用已经实现的应用组件和代码，快速实现应用程序的开发。

多八多IDE注册使用地址 

https://www.d8dcloud.com