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

一、需求背景

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

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

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

二、门户页功能介绍

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

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

三、搭建步骤

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

 

四、应用构建

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

4.1应用创建

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

 

4.2页面模块化拼装

4.2.1轮播图

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

 

 

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

 

 

 

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

 

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

 

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

 

 

 

 

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

 

4.2.2卡片列表

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

 

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

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

 

 

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

 

5.卡片实现

 

 

 

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

 

 

 

4.2.3架构资产标题

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

 

4.2.4架构资产模块

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

 

 

4.2.5平台能力资产标题

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

4.2.6平台能力

1.使用页签组件

 

2.配置组件的数据资产

 

4.2.7首页整体样式设置

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

 

4.2.8管理后台功能模块

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

 

 

4.2.最终效果

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

 

 

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

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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/75187.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用Edge和chrom扩展工具(GoFullPage)实现整页面截图或生成PDF文件

插件GoFullPage下载:点击免费下载 如果在浏览网页时,有需要整个页面截图或导出PDF文件的需求,这里分享一个Edge浏览器的扩展插件:GoFullPage。 这个工具可以一键实现页面从上到下滚动并截取。 一、打开“管理扩展”(…

Linux下在qtcreator中创建qt程序

目录 1、新建项目 2、单工程项目创建 3、多工程项目创建 4、添加子工程(基于多工程目录结构) 5、 .pro文件 1、新建项目 切换到“编辑”界面,点击菜单栏中的“文件”-“新建文件或项目” 2、单工程项目创建 只有一个工程的项目&#…

中间件(二)dubbo负载均衡介绍

一、负载均衡概述 支持轮询、随机、一致性hash和最小活跃数等。 1、轮询 ① sequences:内部的序列计数器 ② 服务器接口方法权重一样:(sequences1)%服务器的数量(决定调用)哪个服务器的服务。 ③ 服务器…

MAUI+Blazor:windows 打包踩坑

文章目录 前言MSIX安装文件如何发布选择Windows平台旁加载自定义签名版本号安装 总结 前言 最近打算研究一下MAUIBlazor,争取在今年年底之前彻底搞懂MAUIBlazor的安装模式, MSIX安装文件 Windows 4种安装程序格式MSI,EXE、AppX和MSIX优缺点…

Unity zSpace 开发

文章目录 1.下载 zSpace 开发环境1.1 zCore Unity Package1.2 zView Unity Package 2. 导入工程3. 发布设置4.功能实现4.1 用触控笔来实现对模型的拖拽: 5. 后续更新 1.下载 zSpace 开发环境 官网地址 1.1 zCore Unity Package zSpace 开发核心必须 1.2 zView …

4.文件操作和IO

文章目录 1.认识文件1.1树型结构组织 和 目录1.2文件路径(Path)1.3其他知识 2.Java 中操作文件2.1File 概述2.1.1属性2.1.2构造方法2.1.3方法 2.2代码示例2.2.1示例1-get 系列的特点和差异2.2.2示例2-普通文件的创建、删除2.2.3示例3-普通文件的删除2.2.…

Jenkins-CICD-python/Java包升级与回退

Jenkins- CICD流水线 python/Java代码升级与回退 1、执行思路 1.1、代码升级 jenkins上点击 upgrade和 代码版本号 --${tag} jenkins 推送 代码 和 执行脚本 到目标服务器/opt目录下 执行命令 sh run.sh 代码名称 版本号 upgrade 版本号 来自jenkins的 构建参数中的 标签…

【LNMP(分布式)】

目录 一、LNMP是什么 二、实际步骤 1.启用虚拟机 1.1 启动三台虚拟机分别命名为nginx,mysql,php 1.2 分别配置基础环境 1.3 测试外网连通性 2.更新源 3.安装nginx并配置 3.1 下载nginx源码包并安装 3.2 配置nginx 4.安装mysql并配置 4.1 安装…

MySQL中事务特性以及隔离机制

目录 一、什么是事务 二、事务特性——即ACID特性 三、事务的隔离级别 1、脏读 2、不可重复读 3、幻读 Read uncommitted: Read committed: Repeatable read: Serializable: 一、什么是事务 事务(Transaction)——一个最…

Maven 基础之依赖管理、范围、传递、冲突

文章目录 关于依赖管理坐标和 mvnrepository 网站pom.xml 中"引"包 依赖范围依赖传递依赖冲突 关于依赖管理 坐标和 mvnrepository 网站 在 maven 中通过『坐标』概念来确定一个唯一确定的 jar 包。坐标的组成部分有&#xff1a; 元素说明<groupId>定义当前…

Nacos权限认证

写在前面&#xff1a;各位看到此博客的小伙伴&#xff0c;如有不对的地方请及时通过私信我或者评论此博客的方式指出&#xff0c;以免误人子弟。多谢&#xff01;如果我的博客对你有帮助&#xff0c;欢迎进行评论✏️✏️、点赞&#x1f44d;&#x1f44d;、收藏⭐️⭐️&#…

Uniapp当中使用腾讯位置路线规划插件保姆教学

首先我们在使用腾讯地图插件之前我们需要先做几点准备 1&#xff1a;我们需要在腾讯地图位置服务当中注册账号以及在控制台当中创建应用和创建key 这里在创建应用当中应用类型一定要选出行类型&#xff0c;否则后期可能会出现问题。 我们创建完应用之后&#xff0c;点击创建…

NPCon:AI模型技术与应用峰会北京站 (参会感受)

8月12日&#xff0c;我有幸参加了在北京皇家格兰云天大酒店举行的“AI模型技术与应用峰会”。 这次会议邀请了很多技术大咖&#xff0c;他们围绕&#xff1a; 六大论点 大模型涌现&#xff0c;如何部署训练架构与算力芯片 LLM 应用技术栈与Agent全景解析 视觉GPU推理服务部署 …

python命令行参数argparse的简单使用

1、终端中执行脚本程序 pycharm的终端中执行 python xxx.py命令行中执行程序 2、获取命令行输入的参数 import sysprint(sys.argv) 3.专门处理命令行的library&#xff1a;argparse 添加optional arguments参数&#xff1a;默认是可选的&#xff0c;意味着可以不用填写 p…

VR时代真的到来了?

业界对苹果的期待是&#xff0c;打造一台真正颠覆性的&#xff0c;给头显设备奠定发展逻辑底座的产品&#xff0c;而实际上&#xff0c;苹果只是发布了一台更强大的头显。 大众希望苹果回答的问题是“我为什么需要一台AR或者VR产品&#xff1f;”&#xff0c;但苹果回答的是“…

history记录日期时间和日志记录操作

history命令能查看到操作日期和时间的配置方法&#xff1a; 1&#xff09;在/etc/profile文件中添加一行&#xff1a; export HISTTIMEFORMAT"%F %T whoami " 2&#xff09;保存后&#xff0c;执行加载命令&#xff1a; source /etc/profile 3&#xff09;然后检…

Linux MQTT智能家居项目(智能家居界面布局)

文章目录 前言一、创建工程项目二、界面布局准备工作三、正式界面布局总结 前言 一、创建工程项目 1.选择工程名称和项目保存路径 2.选择QWidget 3.添加保存图片的资源文件&#xff1a; 在工程目录下添加Icon文件夹保存图片&#xff1a; 将文件放入目录中&#xff1a; …

对任意类型数都可以排序的函数:qsort函数

之前我们学习过冒泡排序&#xff1a; int main() {int arr[] { 9,7,8,6,5,4,3,2,1,0 };int sz sizeof(arr)/sizeof(arr[0]);int i 0;for (i 0; i < sz-1; i) {int j 0;for (j 0; j < sz-1-i; j) {if (arr[j] > arr[j 1]){int temp 0;temp arr[j];arr[j] ar…

前后端分离------后端创建笔记(04)前后端对接

本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论&#xff0c;如有侵权请联系 源码&#xff1a;https://gitee.com/green_vegetables/x-admin-project.git 素材&#xff1a;https://pan.baidu.com/s/…

【HarmonyOS】API9沉浸式状态栏

对于沉浸式状态栏&#xff0c;在之前API8 FA模型开发中可以通过在config.json配置主题的方式实现应用的沉浸式体验&#xff0c;在最新的API9 Stage模型中系统提供了沉浸式窗口的示例&#xff08;管理应用窗口&#xff08;Stage模型&#xff09;-窗口管理-开发-HarmonyOS应用开发…