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/

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt自定义对话框

介绍 自定义框主要通过对现有对话框QDialog类的派生,根据需求编写成员函数、重载信号函数、槽函数,进而实现在主QWidget中点击某个按钮后,一个对话框的弹出 流程 简化创建派生类 最后点击完成即可。 自定义ui界面,编写成员函数…

Netty:用ByteBufUtil的函数将字节数组、或者ByteBuf的内容转换为十六进制表示的字符串

用ByteBufUtil的hexDump(byte[] array)函数将字节数组的内容转换为十六进制表示的字符串 package com.thb;import io.netty.buffer.ByteBufUtil;public class Demo {public static void main(String[] args) {byte[] b new byte[] {0x68, 0x16, 0x03, 0x04, (byte)0xae};Stri…

ASR 语音识别接口封装和分析

这个文档主要是介绍一下我自己封装了 6 家厂商的短语音识别和实时流语音识别接口的一个包,以及对这些接口的一个对比。分别是,阿里,快商通,百度,腾讯,科大,字节。 zxmfke/asrfactory (github.c…

前后端分离------后端创建笔记(07)表单验证

1、我输入数据,然后关闭,重新打开会发现残存的数据仍然保留着 2、点了这个x号,数据就全部被清理了 3、点这三个地方,数据全部都清理掉 4、这里先写一个方法 4.1 定义一个方法 4.2 这里表单的数据在哪里,就是这个 4.3 …

Qt扫盲-QWidget理论使用总结

QWidget理论使用总结 一、概述二、顶层 控件 和子 控件三、复合控件四、自定义控件和绘制五、大小提示和大小策略六、事件七、一组函数和属性八、QWidget样式表九、透明度和双缓冲十、创建半透明窗口 一、概述 widget 是用户界面的最小单位:它从window系统接收鼠标…

Unity游戏源码分享-精品即时战略游戏_官网60美刀素材

Unity游戏源码分享-精品即时战略游戏_官网60美刀素材 下载地址:https://download.csdn.net/download/Highning0007/88204017

Jmeter-压测时接口按照顺序执行-临界部分控制器

文章目录 临界部分控制器存在问题 临界部分控制器 在进行压力测试时,需要按照顺序进行压测,比如按照接口1、接口2、接口3、接口4 进行执行 查询结果是很混乱的,如果请求次数少,可能会按照顺序执行,但是随着次数增加&a…

《零基础实践深度学习》(第2版)学习笔记,(二)机器学习和深度学习综述

文章目录 1. 人工智能、机器学习、深度学习的关系2. 机器学习2.1 实现原理2.2 如何实施 3. 深度学习神经网络核心概念 1. 人工智能、机器学习、深度学习的关系 **人工智能(Artificial Intelligence,AI)**是研发用于模拟、延伸和扩展人的智能…

helm安装harbor + nerdctl 制作push 镜像

参考 文章:Helm部署Harbor_helm harbor_风向决定发型丶的博客-CSDN博客 安装好后使用 nerd containerd对接harbor_containerd 容器 insecure-registries 配置_柠是柠檬的檬的博客-CSDN博客 推送镜像 Containerd 对接私有镜像仓库 Harbor - 知乎 接下来我们来…

“一日之际在于晨”,欢迎莅临WAVE SUMMIT上午场:Arm 虚拟硬件早餐交流会

8月16日,盛夏的北京将迎来第九届WAVE SUMMIT深度学习开发者大会。在峰会主论坛正式开启前,让我们先用一份精美的元气早餐,和一场“Arm虚拟硬件交流会”,唤醒各位开发小伙伴的开发魂! 8月16日,WAVE SUMMIT大…

【注解使用】使用@Autowired后提示:Field injection is not recommended(Spring团队不推荐使用Field注入)

问题发生场景: 在使用 IDEA 开发 SpringBoot 项目时,在 Controller 类中使用注解 Autowired 注入一个依赖出现了警告提示,查看其他使用该注解的地方同样出现了警告提示。这是怎么回事?由于先去使用了SpringBoot并没有对Spring进行…

三、性能测试场景设计

性能测试场景设计 一、引言:如果公司要求你去做性能测试,遇到这些场景,我们要如何设计?二、6种常见设计方法1、普通性能场景设计2、负载测试性能场景3、压力测试场景4、面向目标性能场景 一、引言:如果公司要求你去做性…

W6100-EVB-PICO 做UDP Server进行数据回环测试(七)

前言 前面我们用W6100-EVB-PICO 开发板在TCP Client和TCP Server模式下,分别进行数据回环测试,本章我们将用开发板在UDP Server模式下进行数据回环测试。 UDP是什么?什么是UDP Server?能干什么? UDP (User Dataqram P…

海量数据迁移,亚马逊云科技云数据库服务为大库治理提供新思路

1.背景 目前,文档型数据库由于灵活的schema和接近关系型数据库的访问特点,被广泛应用,尤其是游戏、互联网金融等行业的客户使用MongoDB构建了大量应用程序,比如游戏客户用来处理玩家的属性信息;又如股票APP用来存储与时…

Jmeter常用功能-参数化介绍

JMeter也有像LR中的参数化,本篇就来介绍下JMeter的参数化如何去实现。 参数化:录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统。 这个时…

RabbitMQ简单使用

RabbitMq是一个消息中间件:它接收消息、转发消息。你可以把它理解为一个邮局:当你向邮箱里寄出一封信后,邮递员们就能最终将信送到收信人手中。 RabbitMq、消息相关术语如下: 生产者:生产者只发送消息,发…

React(5)

1.受控组件案例 1.1之前的影院案例改写 import React, { Component } from react import axios from axios import BetterScroll from better-scroll import ./css/02_tab.cssexport default class Cinema extends Component {constructor() {super();this.state {cinemaLis…

Jmeter进阶使用:BeanShell实现接口前置和后置操作

一、背景 我们使用Jmeter做压力测试或者接口测试时,除了最简单的直接对接口发起请求,很多时候需要对接口进行一些前置操作:比如提前生成测试数据,以及一些后置操作:比如提取接口响应内容中的某个字段的值。举个最常用…

只需要自动售货机,商业模式立马大变样!

随着互联网、大数据和人工智能的蓬勃发展,商业模式正以前所未有的方式融合,其中自动售货机作为新零售模式的一颗璀璨明珠,正引领着购物体验的革命。这个巧妙的结合将消费者的便利、数据的智能分析以及科技的创新融为一体,重新定义…

Mysql:Access denied for user ‘root‘@‘localhost‘ (using password:YES)解决方案

最近在配置Maven以及Mybatis时,连接localhost数据库时出现无法连接,用cmd测试时报错:Access denied for user ‘ODBC’‘localhost’ (using password: NO),这个意思就是不允许远程访问,一开始笔者进入mysql试了一下是…