CodeWave智能开发平台--03--目标:应用创建--09供应商详情页面下

news2024/12/24 21:57:45

在这里插入图片描述

摘要

本文是网易数帆CodeWave智能开发平台系列的第13篇,主要介绍了基于CodeWave平台文档的新手入门进行学习,实现一个完整的应用,本文主要完成09供应商详情页面下主营产品展示及权限管理

CodeWave智能开发平台的13次接触

CodeWave参考资源

网易数帆CodeWave开发者社区课程中心

在这里插入图片描述

网易数帆CodeWave开发者社区文档中心

在这里插入图片描述

网易数帆CodeWave开发者社区考试认证

在这里插入图片描述

应用开发流程

在这里插入图片描述

经过上篇文章的初级入门,对CodeWave低代码平台有了一定的认知,在模板的范围内开发一个特点的程序还是比较容易的,但同时需要说明的是,低代码平台有很多自己的逻辑,如果都学完在操作,实在是需要较长时间,本文结合应用开发流程,进行专题学习,应用创建☀️☀️

应用开发-搭建采购管理系统

视频来源

应用开发流程-09-供应商详情页面

进入自己的CodeWave智能开发平台
https://itzhang.codewave.163.com/dashboard/product/Home

待实现效果
主营产品展示

主营产品选项下主要显示的是该供应商下的产品,之前我们也给产品实体中的供应商ID关联属性了。
在这里插入图片描述

可以直接将产品实体拖到主营产品的下方的线性布局中,选择数据网格全,只需要一个新增按钮,将按钮放在最左侧,然后调整一下按钮的文本为 新增产品信息,再加一个加号的图标。
在这里插入图片描述

选中数据网格,将网格主要属性中的网格数改为3,接着修改下网格内的展示效果。首先是供应商名称,直接拖到布局上方,下面我们要展示的是产品名称,价格,以及图片。那么我们这里引入一个新的布局方式–自由布局。
在这里插入图片描述

拖入自由布局组件,给自由布局组件拖入图片展示组件,标签组件以及文本组件,组件在自由布局内可以任意拖拽摆放,可以根据辅助线摆置,也可以选择组件,再右侧样式中设置边距,组件间的层级关系。例如我们把图片展示组件设置左右居中对齐,然后可以通过选择约束,填写距离(上70,左48)来填写图片展示组件的位置。
在这里插入图片描述

接下来,在标签李展示产品名称,把标签主题色改为警告色,尺寸改大,文本字号调整为16,通过手动拖拽的方式可以改变标签组件的大小,拉长后可以通过样式设置文本居中。文本组件也是一样,通过辅助线上以及右侧样式中的距离,即可将组件调整至合适的位置。例如将标签和文本组件根据上方约束距离调整为相同的数值。如果有组件层叠,也可以通过展示层级来控制各组件的展示各组件的展示优先级。层级越大,则组件越放置在上方。
在这里插入图片描述

调整为组件后,我们分别对这些组件进行值的绑定。
在这里插入图片描述
文本我们需要展示的是协议单价,我们可以使用一个原子项下的文本组件(文本和文本差值合并)。文本组件可直接插入内容(可以拼接多个内容),协议单价:current.item.product.name,也可以放入一些有返回值的组件。
在这里插入图片描述
再根据辅助线来对齐,这样数据网格里的内容就搭建好了,具体效果等预览后再修改。
在这里插入图片描述

再来修改新增的弹窗,需要产品名称,合作价格和产品图片,且产品名称和价格是必填,不能为空。设置验证规则filled
在这里插入图片描述然后产品图片改为文件上传组件,并且需要将文件的转换器改为字符串类型,接着文件上传组件里的值绑定input里面的ptcture。
在这里插入图片描述
在这里插入图片描述

下面我们需要再新增产品的时候,给产品指定为所属当前供应商的产品,也就是新增时,产品的supplierID为该详情页这个供应商的ID。来到立即创建的事件逻辑下,在create传到数据库之前,对输入的input中的supplierID赋值为当前这个页面输入的supplierID。这样就可以实现了,新增的产品默认属于这个供应商。
在这里插入图片描述

最后我们要对数据网格来进行数据的筛选,我们拖入近来的实体,默认查询的是所有数据,所以需要进行一个筛选,去到数据网格的数据源,再去到对应的服务端逻辑,
在这里插入图片描述
跟之前联系人信息的数据网格一样,在loadSupplierDetailGridView_2逻辑性下,创建一个输入参数supplierID,整数类型。去到数据源中,点击服务端逻辑,这时会需要传入一个新的参数supplierID=,设置为页面下的supplierID。
在这里插入图片描述

再回到服务端逻辑中,数据查询中添加筛选条件。这里的筛选条件是在生成查询表单中使用到的,我们不用查询表达,可以直接删除,
在这里插入图片描述
接着拖入等于关系,产品的供应商ID等于输入的供应商ID,
在这里插入图片描述

预览查效果,新增产品,所属供应商,产品名称,价格,
在这里插入图片描述
在这里插入图片描述

图片布局和组件样式还需要我们来调整一下

应用的页面会根据终端设备大小展示有所区别,可以去到跟多设置里的自定义主题样式中,来到画布尺寸及缩放,在这里左侧可以自定义画布尺寸,1440px,下方开启等比缩放,页面组件。字体等的大小就会跟随画布尺寸等比放大或缩小。
在这里插入图片描述

最后我们还需要来完善一下系统信息的部分。现在信息系统中,关于创建者的信息是缺少的,那么创建者与我们所创建的应用权限是相关的,当前我们的应用在发布后,不需要登陆就可以直接访问,所以应用就无法拿到登陆者的信息。我们是可以手动开启权限控制的。平台内置了一个权限管理模块,在权限管理上,还有许多深层的逻辑,这里仅仅是开启一下权限管理流程。选中采购管理系统父页面,然后再右侧属性中,开启权限,父页面的权限打开后,所有子页面都会默认打开权限。也就是说需要登陆才能访问,而登陆的用户就是供应商数据的创建者,也就是我们需要展示出来的负责人,除了createby属性外,我们要给别的属性赋值为当前应用登陆名称时,可以使用亚达

权限设置

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

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

相关文章

使用ffmpeg实现音频静音修剪

1 silenceremove介绍 本文主要介绍在 FFmpeg 命令中使用 silenceremove filter 进行音频静音的修剪。 1.1 start_x参数 参数名说明取值范围默认值start_periods设置是否应在音频开头修剪音频。0 表示不应从一开始就修剪静音。当指定一个非 0 值时,它会修剪音频直…

搜索与图论第二期 BFS

前言 BFS跟DFS同样重要,也一定要熟练的掌握!!! 一、BFS的基本内容 BFS是从根节点开始,沿着树(图)的宽度遍历树(图)的节点。 如果所有节点均被访问,则算法中止。 BFS同样属于盲目搜索。 一般用队列数据结…

2. Presto应用

该笔记来源于网络,仅用于搜索学习,不保证所有内容正确。文章目录 1、Presto安装使用2、事件分析3、漏斗分析4、漏斗分析UDAF开发开发UDF插件开发UDAF插件 5、漏斗测试 1、Presto安装使用 参考官方文档:https://prestodb.io/docs/current/ P…

Hugging Face Datasets文本质量分析,识别低质量内容、垃圾数据、偏见内容、识别毒性内容、检测重复文档、识别测试集污染数据、识别过短的内容

Hugging Face Datasets文本质量分析,识别低质量内容、垃圾数据、偏见内容、识别毒性内容、检测重复文档、识别测试集污染数据、识别过短的内容。 在机器学习和自然语言处理的世界中,数据的质量至关重要。Hugging Face提供了大量的文本数据集,但是如何评估这些数据集的质量呢…

提升办公效率用微服务快速开发平台怎么样?

如果想实现高效率的办公,采用专业的微服务快速开发平台可以达到事半功倍的效果。什么是微服务快速开发平台?又有哪些优势和特点?可以用在哪些领域?流辰信息是专业的低代码技术平台服务商,具有丰富的研发经验&#xff0…

HTML--文本

文本一般存在于 body下 段落标签&#xff1a;<p> </p> 换行标签&#xff1a;<br/> 放在一句话里可以换行 <p>这是一段话<br/>这是另一段话</p>文本标签分以下几种&#xff1a; 粗体标签&#xff1a;strong&#xff0c;b 斜体标签&#xf…

React18-树形菜单-递归

文章目录 案例分析技巧通信展示效果实现代码技巧点技巧点 Refer to 案例分析 https://github.com/dL-hx/manager-fe/commit/85faf3b1ae9a925513583feb02b9a1c87fb462f7 从接口获取城市数据,渲染出一个树形菜单 要求: 可以展开和收起 技巧 学会递归渲染出一个树形菜单, 并点击后…

Windows开机后,Docker失败:Commoncauses include access rights issues

这种错误看似已经跟你说很清楚了&#xff0c;但是看国外docker社区也提到这个问题&#xff0c;一大堆回答解决了别人的问题&#xff0c;但未必解决你的。我写自己的方案&#xff0c;可能也未必适合你&#xff0c;如果要说Root Cause根源就是windows的虚拟化功能开启的问题。 An…

(vue)el-table表格最小/自动高度设置

(vue)el-table表格最小/自动高度设置 <el-table:data"tableData"size"mini"borderstyle"min-height:100px" //重点 ><el-table-column align"center" label"参数名称" prop"parametersName" />... &l…

web网页首页布局

效果展示&#xff1a; html代码&#xff1a; <!doctype html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"> <meta name"viewport" content&qu…

Linux:centos yum安装指令指南

如果我们在Linux中输入命令发现该命令没有的时候&#xff0c;我们就可以通过yum来安装这个命令 具体分为两步&#xff1a;搜索&#xff0c;安装 搜索 首先搜索centos yum 安装 指令 以zip指令为例&#xff0c;在搜索框中输入centos yum 安装zip 安装 复制安装命令到shell…

Vue2x的自定义指令和render函数使用自定义指令

在某些情况下&#xff0c;我们需要对底层DOM进行操作&#xff0c;而内置的指令不能满足需求&#xff0c;就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义&#xff0c;钩子函数会接收到指令所绑定的元素作为参数。 定义指令 常用两种方式进行…

前端开发Docker了解

1&#xff0c;docker简介 docker主要解决了最初软件开发环境配置的困难&#xff0c;完善了虚拟机部署的资源占用多&#xff0c;启动慢等缺点&#xff0c;保证了一致的运行环境&#xff0c;可以更轻松的维护和扩展。docker在linux容器的基础上进行了进一步的封装&#xff0c;提…

几款优秀科学开源计算软件介绍

有一些比较优秀的软件&#xff0c;它们在科学计算、数据处理和分析方面具有广泛的应用和功能。以下是一些比较知名的软件&#xff1a; SciPy&#xff1a;SciPy是一个非常流行的科学计算库&#xff0c;提供了大量的数学函数和算法&#xff0c;用于解决各种科学问题。它支持多种操…

商城小程序(8.购物车页面)

目录 一、商品列表区域1、渲染购物车商品列表的标题区域2、渲染商品列表区域的基本结构3、为my-goods组件封装radio勾选状态4、为my-goods组件封装radio-change事件5、修改购物车中商品的选择状态6、为my-goods组件封装NumberBox7、为my-goods封装num-change事件8、修改购物车商…

Sqlmap注入参数

Sqlmap注入参数 &#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;❤️❤️❤️❤️❤️❤️❤️&#x1f968;&#x1f968;&…

题目:七段码(蓝桥OJ 595)

问题描述&#xff1a; 解题思路&#xff1a; 枚举每一种可能组合&#xff08;可以使用二进制数表示&#xff0c;每一个二进制就是一种组合&#xff09;&#xff0c;在判断是否符合题目要求的每一个发光灯管相邻&#xff08;使用并查集方法确定&#xff0c;当每一个发光…

NumPy 数据操作实用指南:从基础到高效(下)

文章接上篇&#xff1a; In [53]: from PIL import Image In [60]: dog Image.open(./dog.jpg) dog . . . In [61]: dog_datanp.array(dog) # 图片数据是ndarray # 彩色照片三维&#xff1a;高度&#xff0c;宽度&#xff0c;像素&#xff08;表示不同颜色&#xff09;&…

小程序基础库与Android之间通信优化的可能

最近在学习graalvm&#xff0c;发现有一个graaljs项目&#xff0c;项目中介绍可以让java与JavaScript做数据转换&#xff0c;比如JavaScript中可以使用java的数据类型与结构。突然想到之前遇到的一个问题&#xff0c;小程序中开发的代码和基础库的部分代码都是j2v8来执行的&…

易安联参与制定的《面向云计算的零信任体系》行业标准即将实施

中华人民共和国工业和信息化部公告2023年第38号文件正式发布行业标准&#xff1a;YD/T 4598.2-2023《面向云计算的零信任体系 第2部分&#xff1a;关键能力要求》及YD/T 4598.3-2023《面向云计算的零信任体系 第3部分&#xff1a;安全访问服务边缘能力要求》&#xff0c;并于20…