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

电玩女神 2023-10-14 20:16 43阅读 0赞

## **一、需求背景** ##

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

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

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

## **二、门户页功能介绍** ##

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

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

![9952027413904566bc067ddd1c37be2e.png][]

## **三、搭建步骤** ##

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

![8c7969dcba3542a1b3f1e2cd4ea46c87.png][]

## **四、应用构建** ##

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

**4.1应用创建**

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

![97dfc7e7a4854bf9b405235bbdbb75ac.png][]

**4.2页面模块化拼装**

**4.2.1轮播图**

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

![75470e0b28ff40a39ce3aa6f9d3b2620.png][]

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

![8b0d593f4992490aadcf727396b1b03a.png][]

![e325f505c0184624a3b5321926b4afad.png][]

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

![0c0ae04aec2f46b5a214a30d0a2baefa.png][]

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

![241ddc00272c406eb44066006eb028c2.png][]

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

![aaec76095e2e46dbb989291149cbd711.png][]

![c186a5134d094dc09abb421104ed8327.png][]

![e5fa07f67ada42e1a7d6e956073d8d48.png][]

![a43e2c24fc314459a9e9da9e9f4a1981.png][]

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

![66000d35c07d4953a77e8e8f6a02da2f.png][]

**4.2.2****卡片列表**

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

![025c48a10f2246c4b5cee59301d425af.png][]

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

![e59015450f1e4665927ba281d9466778.png][]

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

![05c5f8d8ce1a4aef901866a3d76d4e60.png][]

![742165a1fc8d4dfeb80ce498e1068e34.png][]

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

![bc9cb86e838d42fba4117a4a1458a411.png][]

5.卡片实现

![78c0b6831a0a4af4a0a9674dba7a7c56.png][]

![dd8174ad9b5340c6999f9aeba37ea0f5.png][]

![b5f73c138cd64c80a31657492cbb030a.png][]

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

![7bfdac5610d94b18bc4938fa847b94f5.png][]

![a08d5fc26e6b44f9b15789221473fb20.png][]

![c8f3e7c0b0324c80a161ff4917c576ba.png][]

**4.2.3****架构资产标题**

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

![76395f4b339249f586b0f6b3dfa14e05.png][]

**4.2.4****架构资产模块**

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

![262d12fa275f4fb69861a6084cd54b29.png][]

![b9360f09ff014df28588635f6f60d7c0.png][]

**4.2.5****平台能力资产标题**

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

**4.2.6****平台能力**

1.使用页签组件

![3bba39a04dca4f2682aee70b4b011fc4.png][]

2.配置组件的数据资产

![b092fea3b8484588bd01136e4786c9d1.png][]

**4.2.7首页整体样式设置**

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

![b730cce7a6a94647a5b00a094896a00b.png][]

**4.2.8****管理后台功能模块**

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

![c55f3be58483401ab219047734e0fe24.png][]

![a59884e2e2be4449ab5b06b1230fe5bf.png][]

**4.2.最终效果**

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

![ab9dc3e160b8485e9f57bf549dab16ab.png][]

![dead2831da444206b0d9678f0af3dafe.png][]

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

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

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

##  ##

[9952027413904566bc067ddd1c37be2e.png]: https://img-blog.csdnimg.cn/9952027413904566bc067ddd1c37be2e.png
[8c7969dcba3542a1b3f1e2cd4ea46c87.png]: https://img-blog.csdnimg.cn/8c7969dcba3542a1b3f1e2cd4ea46c87.png
[97dfc7e7a4854bf9b405235bbdbb75ac.png]: https://img-blog.csdnimg.cn/97dfc7e7a4854bf9b405235bbdbb75ac.png
[75470e0b28ff40a39ce3aa6f9d3b2620.png]: https://img-blog.csdnimg.cn/75470e0b28ff40a39ce3aa6f9d3b2620.png
[8b0d593f4992490aadcf727396b1b03a.png]: https://img-blog.csdnimg.cn/8b0d593f4992490aadcf727396b1b03a.png
[e325f505c0184624a3b5321926b4afad.png]: https://img-blog.csdnimg.cn/e325f505c0184624a3b5321926b4afad.png
[0c0ae04aec2f46b5a214a30d0a2baefa.png]: https://img-blog.csdnimg.cn/0c0ae04aec2f46b5a214a30d0a2baefa.png
[241ddc00272c406eb44066006eb028c2.png]: https://img-blog.csdnimg.cn/241ddc00272c406eb44066006eb028c2.png
[aaec76095e2e46dbb989291149cbd711.png]: https://img-blog.csdnimg.cn/aaec76095e2e46dbb989291149cbd711.png
[c186a5134d094dc09abb421104ed8327.png]: https://img-blog.csdnimg.cn/c186a5134d094dc09abb421104ed8327.png
[e5fa07f67ada42e1a7d6e956073d8d48.png]: https://img-blog.csdnimg.cn/e5fa07f67ada42e1a7d6e956073d8d48.png
[a43e2c24fc314459a9e9da9e9f4a1981.png]: https://img-blog.csdnimg.cn/a43e2c24fc314459a9e9da9e9f4a1981.png
[66000d35c07d4953a77e8e8f6a02da2f.png]: https://img-blog.csdnimg.cn/66000d35c07d4953a77e8e8f6a02da2f.png
[025c48a10f2246c4b5cee59301d425af.png]: https://img-blog.csdnimg.cn/025c48a10f2246c4b5cee59301d425af.png
[e59015450f1e4665927ba281d9466778.png]: https://img-blog.csdnimg.cn/e59015450f1e4665927ba281d9466778.png
[05c5f8d8ce1a4aef901866a3d76d4e60.png]: https://img-blog.csdnimg.cn/05c5f8d8ce1a4aef901866a3d76d4e60.png
[742165a1fc8d4dfeb80ce498e1068e34.png]: https://img-blog.csdnimg.cn/742165a1fc8d4dfeb80ce498e1068e34.png
[bc9cb86e838d42fba4117a4a1458a411.png]: https://img-blog.csdnimg.cn/bc9cb86e838d42fba4117a4a1458a411.png
[78c0b6831a0a4af4a0a9674dba7a7c56.png]: https://img-blog.csdnimg.cn/78c0b6831a0a4af4a0a9674dba7a7c56.png
[dd8174ad9b5340c6999f9aeba37ea0f5.png]: https://img-blog.csdnimg.cn/dd8174ad9b5340c6999f9aeba37ea0f5.png
[b5f73c138cd64c80a31657492cbb030a.png]: https://img-blog.csdnimg.cn/b5f73c138cd64c80a31657492cbb030a.png
[7bfdac5610d94b18bc4938fa847b94f5.png]: https://img-blog.csdnimg.cn/7bfdac5610d94b18bc4938fa847b94f5.png
[a08d5fc26e6b44f9b15789221473fb20.png]: https://img-blog.csdnimg.cn/a08d5fc26e6b44f9b15789221473fb20.png
[c8f3e7c0b0324c80a161ff4917c576ba.png]: https://img-blog.csdnimg.cn/c8f3e7c0b0324c80a161ff4917c576ba.png
[76395f4b339249f586b0f6b3dfa14e05.png]: https://img-blog.csdnimg.cn/76395f4b339249f586b0f6b3dfa14e05.png
[262d12fa275f4fb69861a6084cd54b29.png]: https://img-blog.csdnimg.cn/262d12fa275f4fb69861a6084cd54b29.png
[b9360f09ff014df28588635f6f60d7c0.png]: https://img-blog.csdnimg.cn/b9360f09ff014df28588635f6f60d7c0.png
[3bba39a04dca4f2682aee70b4b011fc4.png]: https://img-blog.csdnimg.cn/3bba39a04dca4f2682aee70b4b011fc4.png
[b092fea3b8484588bd01136e4786c9d1.png]: https://img-blog.csdnimg.cn/b092fea3b8484588bd01136e4786c9d1.png
[b730cce7a6a94647a5b00a094896a00b.png]: https://img-blog.csdnimg.cn/b730cce7a6a94647a5b00a094896a00b.png
[c55f3be58483401ab219047734e0fe24.png]: https://img-blog.csdnimg.cn/c55f3be58483401ab219047734e0fe24.png
[a59884e2e2be4449ab5b06b1230fe5bf.png]: https://img-blog.csdnimg.cn/a59884e2e2be4449ab5b06b1230fe5bf.png
[ab9dc3e160b8485e9f57bf549dab16ab.png]: https://img-blog.csdnimg.cn/ab9dc3e160b8485e9f57bf549dab16ab.png
[dead2831da444206b0d9678f0af3dafe.png]: https://img-blog.csdnimg.cn/dead2831da444206b0d9678f0af3dafe.png
[https_s3.smardaten.com]: https://s3.smardaten.com/