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

2023-11-16

一、需求背景

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

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

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

二、门户页功能介绍

通常情况下,门户首页在设计上会要求样式美观,数据灵活动态展示,想做出一个完美的门户首页对于团队技术栈和工具的选择要求是相对较高的,因此一位粉丝在看完我之前的《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/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • 获取和分析Dump的几种工具简介

    最近在进一步学习support技能的时候 了解到分析Dump的重要性 经过学习 做一些笔记 一 什么是Dump文件 Dump文件时进程的内存镜像 可以把程序的执行状态保存到Dump文件中 Dump文件分为内核模式Dump和用户模式Dump
  • SQL-labs的第26a关——空格和注释被过滤 延时盲注(Get)

    注意该关的or和and也被过滤了 1 判断闭合方式 输入语句 id 1 返回页面如下 我们猜测闭合符号是 再进行验证 输入语句 id 1 00 返回页面如下 依然报错 说明闭合符号除了 之外还有其他的符号 我们输入 id 1 00 返回页面
  • pgsql:远程连接时出现报错“发生致命错误:没有用于主机“…”,用户“…”,数据库“…”,SSL关闭的pg_hba.conf记录“,或者英文乱码

    问题 在用Navicat Premium远程连接pgsql时出现报错 发生致命错误 没有用于主机 用户 数据库 SSL关闭的pg hba conf记录 或者英文乱码 其实是与上述是同一个意思 解决方案 按提示找到pg安装目录下的 data
  • springboot 整合 redis

    springboot 整合 redis 1 导入依赖
  • {CTFshow} 萌新web1 详解

    练习ctf当然不止一个平台啦 所以我打算也写一写ctfshow的题目 好家伙 直接明了 就是让我审计代码 看完发现 我们要用get方式提交 flag在id 1000 但是直接提交id 1000会返回错误 所以我们需要再添加一个id用来防止被
  • springboot 访问远程服务器文件,springboot使用JSch远程读取sshd服务器上的文件

    JSch 是SSH2的一个纯Java实现 它允许你连接到一个sshd 服务器 使用端口转发 X11转发 文件传输等等 你可以将它的功能集成到你自己的 程序中 同时该项目也提供一个J2ME版本用来在手机上直连SSHD服务器 实现一个java工
  • 前后端分离ajax接收文件流的实践

    一般ajax post请求不能实现的原因 开始的想法 在页面上用jQuery的 post方法发送一个请求给服务器 然后服务器根据这个参数再生成相应的一个文件流返回给客户端 但是 在 post方法的回调函数中 只能处理xml json scr
  • 手机android端安装配置cpolar内网穿透

    cpolar作为一款强大的内网穿透工具 能够在不同操作系统平台中得到应用 真正打通了不同操作系统之间的围墙 让我们能方便的从一个操作平台中 读取到另一个操作平台中的数据 甚至对另一操作平台中运行的程序进行调试 今天 我们就为大家介绍 如何在
  • .Net Core缓存及问题规避

    目录 一 什么是缓存 二 客户端响应缓存 三 服务器端响应缓存 四 内存缓存 五 缓存穿透问题的规避 六 缓存雪崩问题的规避 七 缓存数据混乱的规避 八 分布式缓存 九 缓存方式的选择 一 什么是缓存 缓存是系统优化中简单又以有效的工具 只
  • 【C语言】小知识点

    Hello 各位小伙伴们 大家好啊 又和大家见面了 本期我会讲一点C语言的一些小知识点 希望大家可以学到有用的知识点哦 文章目录 Hello 各位小伙伴们 大家好啊 又和大家见面了 本期我会讲一点C语言的一些小知识点 希望大家可以学到有用的
  • "VT-x is disabled in BIOS"的解决办法

    当创建模拟器的时候发生了如下图的问题 解决办法 1 重启电脑 2 按F2进入BIOS 3 找到 Intel Virtual Technology 他这时会显示disable 按Enter把他改成enable即可 当时我在网页上寻找帮助时 好
  • 【华为OD机试真题】最左侧冗余覆盖子串(C++&java&python)100%通过率 超详细代码注释 代码优化

    华为OD机试真题 2022 2023 真题目录 点这里 华为OD机试真题 信号发射和接收 试读 点这里 华为OD机试真题 租车骑绿道 试读 点这里 最左侧冗余覆盖子串 知识点滑窗 时间限制 1s 空间限制 256MB 限定语言 不限 题目描
  • TinyML构建卷积神经网络(CNN)模型声控Arduino机器车

    本教程介绍了如何将机器学习与 Arduino 结合使用 在微控制器上运行由TinyML构建的机器学习语音识别模型 控制Arduino机器车运行 要构建这个项目 至少有两个步骤 训练一个新的机器学习模型并使其适应在 Arduino 上运行 使
  • visio连接线和框图不好控制总跑跳问题

    方法1 视图点右下角小箭头 点开后在常规一栏把对齐和粘附的勾去掉就可以了 方法2 点开始 在连接线旁边有个 X 号 点击X号后按ctrl就可以用鼠标在任意地方设置连接点
  • replace()和replaceAll()的区别

    replace char oldChar char newChar 返回一个新的字符串 它是通过用 newChar 替换此字符串中出现的所有 oldChar 而生成的 参数是字符串也成立 eg str replace 20 用 20 替换空
  • 狂神说SpringMVC 最全学习笔记

    SpringMVC 1 回顾MVC 1 1 什么是MVC MVC是模型 Model 视图 Views 控制器 Controller 得缩写 是一种软件设计规范 是将业务逻辑 数据 显示分离得方法组织代码 MVC主要作用是降低了视图与业务逻辑
  • npm run dev,npm run serve 运行到一半卡死

    Vue npm run dev npm run serve 运行到一半卡死 有两个原因会造成这个结果 modules中缺少依赖 使用npm install 命令重新加载依赖 Vue规定每个template中必须有一个根div 如果有两个di
  • 【雕爷学编程】Arduino 手册之比较运算符的成员运算符和非成员运算符

    什么是Arduino Arduino 是一款开源的电子原型平台 它可以让你用简单的硬件和软件来创建各种创意的项目 无论你是初学者还是专家 Arduino 都能为你提供无限的可能性 你可以用 Arduino 来控制传感器 灯光 马达 机器人
  • Qt学习11:Dialog对话框操作总结

    文章首发于我的个人博客 欢迎大佬们来逛逛 完整Qt学习项目地址 源码地址 文章目录 QDialog QDialogButtonBox QMessageBox QFileDialog QFontDialog QColorDialog QInp
  • smardaten实战丨谁说无代码不能开发出漂亮的门户首页?

    一 需求背景 门户首页对于一个公司或组织来说是一个极其重要的网站页面 它可以作为访问者了解和获取相关信息的入口 同时也是展示品牌形象和吸引目标受众的重要工具 开发一个门户首页需要开发团队在向访问者展示关于公司或组织基本信息的基础上 使用多种