首页 > 其他分享 >smardaten实战丨谁说无代码不能开发出漂亮的门户首页?

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?

时间:2023-10-15 13:00:53浏览次数:36  
标签:实战 轮播 4.2 配置 smardaten 画布 首页


一、需求背景

门户首页对于一个公司或组织来说是一个极其重要的网站页面,它可以作为访问者了解和获取相关信息的入口,同时也是展示品牌形象和吸引目标受众的重要工具。

开发一个门户首页需要开发团队在向访问者展示关于公司或组织基本信息的基础上,使用多种样式设计和布局来突出展示公司或组织提供的核心产品或服务。(如采用多种技术栈构建复杂的交互功能及响应式设计,通过图片、文字、视频等多种形式来呈现,)

总之,门户首页项目开发的核心是通过清晰、简洁、吸引人的设计和动态内容来展示公司或组织的核心信息,以吸引访问者,并促使他们与公司或组织进行进一步的互动和合作。

二、门户页功能介绍

通常情况下,门户首页在设计上会要求样式美观,数据灵活动态展示,想做出一个完美的门户首页对于团队技术栈和工具的选择要求是相对较高的,因此一位粉丝在看完我之前的《smardaten开发IoT物联平台》后,在后台向我提出了这样的疑问:无代码工具虽然能大幅提高开发效率,但能不能在快速开发的基础上搭建出一个样式美观且数据灵活的门户页面呢?

今天刚好借助一个近期碰到的一个项目为案例,我来带大家使用无代码平台smardaten体验一番。

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_前端

三、搭建步骤

通过smardaten无码化配置实现这样的一个门户首页的功能主要分为三个大步骤:

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_02

四、应用构建

下面给大家详细拆解一下门户页面配置这几个步骤具体应该怎么走。

4.1应用创建

首先,大家可以看到,这个就是我们的应用构建页面。我们可以在这里进行页面和菜单的新增,并且进行绑定。

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_javascript_03

4.2页面模块化拼装

4.2.1轮播图

1.使用大屏辅助模块中画布,进行配置,画布的排列模式选择轮播,数据类型选择数据资产。

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_javascript_04

2.设置画布的宽高、轮播图最大的图片数、轮播方向、切换时间、等等细节属性。

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_html_05

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_html_06

3.设置轮播图的数据资产

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_javascript_07

4.设置轮播图中的图片字段(在关联的轮播图资产中去选择图片字段)

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_javascript_08

5.点击轮播图的跳转的实现,是在画布数据设置中选择一个轮播图数据资产中URL的字段,组件的宽高设置为跟轮播图宽高一致,字体颜色设置为透明颜色,在组件的交互设置中配置点击的跳转页面逻辑控制。

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_html_09

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_html_10

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_前端_11

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_12

6.将配置好的轮播画布,组装到应用设计页面中

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_前端_13

4.2.2卡片列表

1.使用两列布局,左右分割,整体布局

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_14

2.弹性布局,配置左右两侧列表 ,并自定义CSS样式

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_javascript_15

 3.标题栏使用画布进行配置,并实时统计数据条数

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_html_16

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_html_17

4.卡片列表,使用列表-画布列表配置实现

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_18

5.卡片实现

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_数据_19

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_数据_20

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_前端_21

6.点击查看全部的列表数据功能,使用画布,配置文本和图片样式,通过组件交互的点击实现配置逻辑控制跳转对应的列表URL。

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_22

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_23

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_数据_24

4.2.3架构资产标题

通过应用画布直接简单配置实现

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_javascript_25

4.2.4架构资产模块

使用弹性布局,内嵌四列布局,每个布局中,使用画布进行配置实现。配置好一列布局的模板样式,然后可以复制(选中组件区域 Ctrl C),粘贴(选中组件区域 Ctrl V)到其他三列中,修改相应的文本和数据。

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_javascript_26

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_数据_27

4.2.5平台能力资产标题

复制架构资产标题布局,然后修改标题文本即可

4.2.6平台能力

1.使用页签组件

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_28

2.配置组件的数据资产

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_低代码_29

4.2.7首页整体样式设置

页面设置汇总,样式配置,选择使用自定义样式

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_前端_30

4.2.8管理后台功能模块

配置管理后台列表页面,可以增删改查,给首页提供数据源

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_数据_31

 

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_数据_32

4.2.最终效果

来带大家看一下最终的效果:

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_html_33

smardaten实战丨谁说无代码不能开发出漂亮的门户首页?_数据_34

这样一个简洁漂亮又好用的门户界面就被我们用smardaten无代码平台轻松搞定了,怎么样,是不是感觉你完全低估了smardaten无代码开发的实力!

整个体验下来,不仅开发上手门槛低,效率快,而且完全不会降低开发质量,这就是smardaten无代码平台的强悍所在。

不知道看到这里的你想不想自己亲手试试呢?作为开发者的角度,永远是动手>理解的,所以说,墙裂建议大家去大胆尝试一下,这里附上体验入口:https://s3.smardaten.com/

标签:实战,轮播,4.2,配置,smardaten,画布,首页
From: https://blog.51cto.com/u_15011668/7871441

相关文章

  • springboot结合shiro实战-身份认证
     目录环境搭建配置shiro环境总结hello,大家好,我们写任何企业级项目基本都会需要做权限,权限包含身份认证和授权。所谓身份认证,就是证明你是你。所谓授权就是明白你登录之后能干什么。现在,让我们用springboot项目入手,结合shiro框架来完成这一切。环境搭建基本信息:springboot版本:初始......
  • java——redis随笔——实战——商户查询缓存
                      把key做了下代码优化: /***根据id查询商铺信息*@paramid商铺id*@return商铺详情数据*/@OverridepublicResultqueryById(Longid){//key要唯......
  • 首页
    这个问题提得好呀,让我想起来那个笑话——两个销售员分别被派到一个小岛上推销鞋,但是这个小岛上的原住民不穿鞋。第一个销售员给总部打电报:这个岛上没人穿鞋,我会乘坐下一班船返回。第二个销售员给总部打电话:太好了,这个岛上没人穿鞋,我会尝试此地推销我司产品。所以,满街都是大学......
  • Go泛型解密:从基础到实战的全方位解析
    本篇文章深入探讨了Go语言的泛型特性,从其基础概念到高级用法,并通过实战示例展示了其在实际项目中的应用。关注【TechLeadCloud】,分享互联网架构、云服务技术的全维度知识。作者拥有10+年互联网服务架构、AI产品研发经验、团队管理经验,同济本复旦硕,复旦机器人智能实验室成员,阿里......
  • Pyinstaller打包PyQt5和PaddleOCR项目实战经验分享
    简介先前做了一个PyQt5和PaddleOCR结合的项目,但在使用Pyinstaller打包时却踩了很多坑,因此分享一下,以便后人乘凉。(Pycharm)1.项目涉及图片或者文件等依赖(1)图片依赖 第一步:创建一个resources.qrc文件;第二步:将resources.qrc文件转换为.py文件,具体转换过程不赘述;第三步:在使用到......
  • docker入门加实战—Docker镜像和Dockerfile语法
    docker入门加实战—Docker镜像和Dockerfile语法镜像镜像就是包含了应用程序、程序运行的系统函数库、运行配置等文件的文件包。构建镜像的过程其实就是把上述文件打包的过程。镜像结构我们要从0部署一个Java应用,大概流程是这样:准备Linux运行环境(java项目并不需要完整的操作......
  • 【matplotlib 实战】--饼图
    饼图,或称饼状图,是一个划分为几个扇形的圆形统计图表。在饼图中,每个扇形的弧长(以及圆心角和面积)大小,表示该种类占总体的比例,且这些扇形合在一起刚好是一个完全的圆形。饼图最显著的功能在于表现“占比”。习惯上,人们通过比较饼图扇形的大小来获得对数据的认知。使用饼图时,须确认......
  • 数据库SQL实战|牛客网
    查找最晚入职员工的所有信息.描述有一个员工employees表简况如下: 请你查找employees里最晚入职员工的所有信息,以上例子输出如下: 输入:droptableifexists`employees`;CREATETABLE`employees`(`emp_no`int(11)NOTNULL,`birth_date`dateNOTNULL,`first_na......
  • 嵌入式系统入门实战:探索基本概念和应用领域
    嵌入式系统是一种专用的计算机系统,它是为了满足特定任务而设计的。这些系统通常具有较低的硬件资源(如处理器速度、内存容量和存储容量),但具有较高的可靠性和实时性。嵌入式系统广泛应用于各种领域,如家用电器、汽车、工业控制、医疗设备等。嵌入式系统的基本概念微控制器:微控制器是嵌......
  • hadoop集群 大数据项目实战_电信用户行为分析_day01
    上图是相关配置的要求,主要创建了四个虚拟系统,有三台虚拟机搭建hadoop集群,一台作为业务系统。涉及到相关的Linux指令有::setnu[显示行号] :6[到第6行 shift+G跳到最后一行 进入vi指令后查找相关东西/(你需要查找的东西)1.配置环境、第一步设置网络参数,设置静态网络目录......