Mendix版的电商京东首页长什么样儿?

前言

世界需要大前端。大前端需要Mendix。

近日经常有企业IT侧的朋友反应,自家需要一个神奇的内容管理平台,来快速打造随需应变的公司官网,亦或企业官微,如果能在小程序里呈现产品营销类的功能更好。首先要肯定的是,前后端分离技术发展至今,大前端概念早已深入人心,那么——

为什么需要大前端:

1、需要支持多设备环境,统一开发维护一套业务代码,节省时间资源的重复投入。

2、快速迭代升行业市场竞争力

3、跨平台良好的兼容性为用户带来一致的用户体验,打造核心产品竞争力。

4、满足未来业务市场的扩张需求

然鹅。。。大前端,为什么需要敏捷高效的手段?

1.降低成本,缩短开发周期

2.单兵作战与单人产能的增效

3.增加业务处理的敏捷度,随改随用。这样一来,业务快速发布五彩缤纷的内容来吸粉,该多快乐😄

毫无疑问的是Mendix擅长开发CX类的2B2C类的界面,所以月末的今天,我们在这里,跟大家介绍以假乱真版的京东商城的首页:https://jddemo100-sandbox.mxapps.io/,是如何开发的:

WX20231130-143752@2x.png

hmmmm,还好没做支付功能,否则小伙伴直接下单了,o(╯□╰)o

1. 整页面排版布局该如何设计

布局.png

排版能力强,是因为采用了原生既有的Mendix的layout组件、container组件,和snippets与building blocks组件。

container包含container,snippets也可以包含snippets……这样便可以形成一张网页大的版面,然后开始填充各个地方的内容。切换至design mode的所见即所得:

design-mode-layout.png

2. 图片的插入方式,都有哪些秘密

静态图片如下截图

静态图片.png

动态图片的CSS方式,如下截图

动态图片-css方式.png

动态图片的脚本方式,如下截图

动态图片-微流方式.png

3. 图文交互、跑马灯轮询组件,到底是怎么设计的

跑马灯轮询-纳米流.png

通过按钮的nanoflow,控制图片显示或隐藏即可。

4. 123——购物车右上角的数字,是怎么实现的?

CleanShot 2023-11-30 at 22.52.46.gif

5. 左侧主菜单如何触发弹出一个popup的menu?

这个也是通过page注入JavaScript来实现的。而且这个JavaScript的主要功能是注册了一个mouse over的event,到某个对应的menu item。这样menu item被鼠标hover时候,就trigger一段JavaScript,代码注入方式如下:

为了更直观,这次切换到design mode:

popup子菜单.png

show出来的过程,依然利用了css。

6. Styling的决定性作用

总结我们各种页面排版操作,发现100%都是通过Mendix原生UI元素搞定的。

Mendix配合nanoflow,可以解决更多动态交互与渲染的问题。

最后的最后,无论一张图片,一个汉字,还是一横行一纵列,宽宽窄窄,交错重叠……都是css的功劳!

关于Mendix

作为西门子Xcelerator平台的低代码引擎,Mendix正在迅速成为推动企业数字化发展的首选应用程序开发平台。Mendix让企业能够以前所未有的速度构建应用程序、促进IT团队与业务专家之间开展有意义的协作,并帮助IT团队保持对整个应用程序环境的控制。作为一直被领先的行业分析师视为“领军者和远见者”的低代码平台,Mendix是云原生的、开放的、可扩展的、敏捷的,并且经过实践验证。从人工智能和增强现实,到智能自动化和原生移动,Mendix和西门子Xcelerator已成为“数字优先”企业的中坚力量。Mendix已被46个国家的4,000多家企业采用,并建立了由30多万名开发人员组成的活跃社区,这些开发人员使用该平台创建了20多万款应用程序。

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

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

相关文章

Linux设置Docker自动创建Nginx容器脚本

文章目录 前言一、本地新建脚本二、复制本地脚本到服务器三、执行服务器脚本总结如有启发,可点赞收藏哟~ 前言 一、本地新建脚本 在本地新建nginx-generator.sh脚本文件,并保存以下内容 主要动态定义两个变量(容器名称/服务器本地文件名、端…

Spring Cache【娓娓道来】

目录​​​​​​​ 1.自我介好😳😳😳 2.常用注解 💕💕💕 3.EnableCaching🤦‍♂️🤦‍♂️🤦‍♂️ 4.CachePut🤷‍♀️🤷‍♀️&#x1f93…

php第三方skd自动加载

把mugou-sdk复制到项目下在composer.josn找到classmap加入sdk "autoload": {"classmap": ["mugou-sdk"] },在composer.josn找到files加入sdk "autoload": {"files":[mugou-sdk] },项目目录下运行 composer dump-autoload…

Python 从入门到精通 学习笔记 Day01

Python 从入门到精通 第一天 今日目标 计算机组成原理、编程语言、Python环境安装 第一个Python程序、PyCharm的安装与使用 Python的基础语法、Python的基本数据类型 一、计算机组成原理 计算机的组成 计算机硬件通常由以下几个部分组成: 1.中央处理器(CPU):负责执行计算机…

高防CDN:企业网络安全的坚实屏障

在当今数字化时代,企业网络面临着不断增长的网络威胁和攻击。为了维护企业在线业务的正常运行,高防CDN(Content Delivery Network)作为网络安全的坚实屏障,扮演着至关重要的角色。本文将从一家企业公司的角度出发&…

windows建立软链 报 无法将“mklink”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

当我执行网上提供的mklink 的时候,出现 mklink : 无法将“mklink”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。怎么回事,原来,要在执行的签名加 cmd /c 当我执行建立软链接时,提示 没有足够的权限,要用管理…

SE考研真题总结(一)

本帖开始分享考研真题中设计【软件工程】的部分,预计会出5期左右,敬请期待~ 一.单选题 1.程序编写不是软件质量保障过程~ 静态代码扫描是今年来多数被人提及的软件应用安全解决方案之一,指程序员在编写好代码后无需进行编译,直接…

【数据结构】—红黑树(C++实现)

🎬慕斯主页:修仙—别有洞天 💜本文前置知识: AVL树 ♈️今日夜电波:Letter Song—ヲタみん 1:36━━━━━━️💟──────── 5:35 …

深度学习毕设思路--yolov5的使用方法

1. 安装依赖项 确保你已经安装了以下依赖项: pip install -U -r requirements.txt 2. 数据准备 确保你有一个包含训练图像和相应标签的数据集。YOLOv5要求标签文件的格式为 YOLO 格式。 3. 训练模型 使用以下命令进行模型训练: python train.py --i…

WPS开发文档

WPS官网的WPS开放平台开发文档,摘抄一些以记录及作为文档的入口记录,以后对WPS表格的操作编程再也不是从网上搜索到的只字片语了^_^。 Workbook.SaveAs 在另一不同文件中保存对工作簿所做的更改。 语法 express.SaveAs(Filename, FileFormat, Passwo…

基于SpringBoot的大学活动平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取项目下载方式🍅 一、项目背景介绍: 随着互联网技术的不断…

【C++】时间time库

time 文章目录 timetime_tstruct tm示例 linux下存储时间常见的有两种存储方式,一个是从1970年到现在经过了多少秒,一个是用一个结构来分别存储年月日时分秒的。 time_t 这种类型就是用来存储从1970年到现在经过了多少秒,要想更精确一点&…

天池SQL训练营(二)-SQL基础查询与排序

-天池龙珠计划SQL训练营 Task02:SQL基础查询与排序 SQL训练营页面地址:https://tianchi.aliyun.com/specials/promotion/aicampsql 一、SELECT语句基础 1.1 从表中选取数据 SELECT语句 从表中选取数据时需要使用SELECT语句,也就是只从表…

扩散模型diffusion model用于图像恢复任务详细原理 (去雨,去雾等皆可),附实现代码

文章目录 1. 去噪扩散概率模型2. 前向扩散3. 反向采样3. 图像条件扩散模型4. 可以考虑改进的点5. 实现代码 话不多说,先上代码: 扩散模型diffusion model用于图像恢复完整可运行代码,附详细实验操作流程 令外一篇简化超分扩散模型SR3来实现图…

红队系列-内网横向

内网横向 渗透测试-内网横向MS-17010利用方法总结原理介绍漏洞利用MSFLadon 渗透测试-从公有云到内网漫游RCE-反序列化-frp0x01 前言0x02 前期打点0x03 想办法打内网0x04对上面的IP进行渗透0x05 愉快的内网漫游 windows凭据窃取MimikatzProcdumpGet-PassHashes.ps1 Windows远程…

75 内建函数对象-关系仿函数

#include <iostream> #include <string> #include <functional> #include <vector> #include <algorithm>using namespace std;//内建仿函数-关系仿函数 // 使用内建函数对象的时候&#xff0c;需要引入头文件 functionalvoid printVector(vecto…

08-中介者模式-C语言实现

中介者模式&#xff1a; Define an object that encapsulates how a set of objects interact.Mediator promotes loose coupling by keeping objects from referring to each other explicitly,and it lets you vary their interaction independently.&#xff08;用一个中介对…

04 ECharts基础入门

文章目录 一、ECharts介绍1. 简介2. 相关网站3. HTML引入方式4. 基本概念 二、常见图表1. 柱状图2. 折线图3. 饼图4. 雷达图5. 地图 三、应用1. 动画2. 交互 一、ECharts介绍 1. 简介 ECharts是一个使用JavaScript实现的开源可视化库&#xff0c;用于生成各种图表和图形。 EC…

Mysql多表查询 思路 ——示例——sql顺序

参考练习题&#xff1a;https://blog.csdn.net/weixin_49627122/article/details/126380916 SQL顺序 在 SQL 查询中&#xff0c;SELECT 语句的执行顺序不是按照查询语句的书写顺序执行的&#xff0c;而是按照逻辑执行阶段来进行。一般来说&#xff0c;SQL 查询的执行顺序可以…

北斗网格二维编码

东经为 E —— east:东方 西经为 W —— west:西方 南纬为 S —— south:南方 北纬为 N —— north 将计算好的编码添加到列表中 my_list [1, 2, 3] my_list.append(4) 参考文献 一级北斗网格计算 高等地图学作业_已知经纬度求图幅编号_.Vector的博客-CSDN博客 其他级别…