开发者学堂课程【低代码开发师认证课程：项目评选系统需求分析及布局设计】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1046/detail/15212
项目评选系统需求分析及布局设计
内容介绍
四．第三节——项目评选系统的需求与分析
五．第四节——项目评选页面布局设计
四．第三节——项目评选系统的需求与分析
1.项目评选系统的背景与诉求
首先来看一下项目评选系统的背景与诉求。一年一度的项目评选大赛开始了，管理员想要将本年度提交上来的项目进行评选，选出最优秀的前三名颁发年度奖励。基于这点，管理员想要开发一款项目评选系统，有以下几点诉求：
（1）页面设计要美观大方。
（2）要求公平公正，每人只能给心仪的项目投出一票。
（3）可以分享给组织内的人员进行投票。
根据这些诉求，我们来看一下它的流程分析。首先我们要创建一个表单，用于收集项目，它是项目信息的在线录入和查询，可以实现项目信息共享，所有人员都可以在这个收集项目的表单内去填写项目的信息。项目展示是搭建一个自定义页面，在自定义页面中展示项目的数据，在这个项目展示的页面也可以设计页面版头，去呼应本次活动的内容。
项目展示配置完成后，我们去进行项目评选的配置，也就是项目评选系统要实现的点赞、搜索、分享这些功能。流程分析完成后来看一下整体的实现流程图。
2.项目评选系统的流程分析
我们会创建三个页面，分别是项目表单、项目展示页面和投票中间表，其中项目表单和投票中间表为表单页面，项目展示页面是自定义页面。我们先在项目展示的自定义页面中配置 JSX 、容器等页面的样式。配置完成后，在自定义页面获取项目表单中的项目数据，获取数据后进行数据处理，并循环渲染这些数据，再继续去配置项目的查询功能，设置分享、访问的功能，设置点赞的功能。这里的点赞功能需要在投票中间表中去查询数据，并返回查询结果，如果他（登录人）有投票，那么就在页面中进行弹窗提醒；如果没有，就记录投票的人员，并更新项目表单中的项目数据。本小节我们了解了项目评选系统的需求诉求和流程分析，下一小节，我们将学习项目评选页面布局设计。
五．第四节——项目评选页面布局设计
1.自定义页面展示概览
首先我们来看一下整体的实现后的最终效果。
这是自定义页面展示的概览， PC 端的展示样式如左边的图片所示，移动端的展示样式如右图所示。下面我们来看一下自定义页面用到了哪些组件。
2.页面所需组件介绍
常用的组件有 JSX 组件、 HTML 组件，将 JSX 组件和 HTML 组件结合使用，引入了一个外部的轮播图进行渲染。还有容器组件、图标组件、文本组件，这里可以将它们三个组件结合在一起去使用，去进行页面的布局，包括循环渲染等样式。查询组件，在数据过多的情况下，我们就需要进行搜索，就可以使用查询组件对数据进行模糊搜索展示。对话框组件，进行确认操作，如果想要给用户一个提示或者用户处理事务，又不希望跳转页面以致打断工作流程时，就可以使用对话框组件，在这里面，我们用弹窗展示需要复制的链接，用于分享功能。介绍完页面所需组件后，我们来看一下组件样式。
3.组件样式设计器
组件样式设计器中可以配置源码编辑，状态，显示， Margin 及 Padding ，文字，背景，边框，阴影，不透明度和鼠标手势属性。组件样式配置路径：在画布中选择组件>>>右侧属性面板中选择样式>>>在样式设计中去配置所需要的样式。下面以容器组件为案例，看一下这里的样式设计具体有哪些。
4.组件样式配置
（1）源码编辑：即以 CSS 源代码方式进行样式编辑。当大部分的 CSS样式在我们的样式设计器中无法满足需求的时候，就可以通过源码编辑去编写 CSS 样式的代码来自定义样式。
（2）状态：以传统 PC 端组件状态进行分组设置。
默认：正常状态
hover: 鼠标划过的状态。鼠标浮动在组件热区，且未产生点击行为。
Focus： 聚焦的状态。页面原色处于光标焦点位置。
active： 被激活的状态。页面元素处于选中激活状态。
（3）显示。这里的显示是对应的 CSS 中的 display 模式，它包含：
block: 盒子模型
Inline-block: 行内盒子模型
Inline： 行内模型
Flex: 弹性布局模型
在我们项目展示页面中，大多数使用的是 black 弹性布局模型。
（4）Margin 及 Padding
Margin: 指盒子模型中的，距离其他节点元素的距离，也就是外边距。
Padding: 指盒子模型中的，距离内部元素的留白距离，也就是内边距。
（5）文字
设置文字之后，影响分组里面的组建标题，可以自定义，也可以直接选择文字标题进行设置。
（6）背景
可以自主选择系统自带的颜色，也可以选择图片进行背景上传。
（7）边框
边框只设置布局容器图片的边框效果。同时支持设置圆角大小，圆角是指组件的四个角的弧度。如果想要将边框设置成圆形，就可以设置它的圆角大小，来控制它边框为圆形。
（8）阴影
设置组件的阴影投影，通过 x\y 设置方向，通过 blur 和 spread设置阴影。
（9）不透明度
设置区块的整体透明的效果范围是0~100，默认为100，0为完全透明。
（10）鼠标手势
这里可以选择两种鼠标手势，分别是小手的鼠标手势和箭头的鼠标手势。
选择 pointer ，则当鼠标浮动在区块上方时，会出现小手标志；
选择 default ，则当鼠标浮动在区块上方时，会出现箭头标志。
了解了组件样式配置后，下面我们来进行实操演练。
5.实操演练
下面来进行项目评选页面布局。首先我们创建一个自定义页面，这里选择从空白创建，所以点击跳过，更改它的页面名称为项目展示。我们想要给门户展示页面放置一个轮播图用作展示，可以选择在自定义页面中的高级组件轮播，在这里去配置它的轮播项。这里面可以书写它的图片、标题、地址、链接等，但是本次实践我们要来学习如何引入 web 的轮播图，展示在宜搭自定义页面当中，所以我们需要引入web 的 CSS 样式和 JS 。
这里面我们学习使用组件库当中的 HTML 组件，引入 web 的 CSS 链接， JSX 组件显示内容，所以从组件库当中拖动一个 HTML 组件和一个 JSX 组件到页面中。拖动完成后，我们需要在动作面板中引入 web 资源，这里可以参考文档中的 JS 动作面板，在这里的4.3当中有如何引入 web 的 JS 资源，我们将它的代码复制过来，粘贴在动词面板中，这里面需要先将 this 去掉，现在我们需要更改的就是里面的链接。
这里的链接，我们可以到 Swiper 网址中找到，找到我们的获取 Swiper CDN 地址。
在这里，我们可以获取到它的 CSS 样式和它的 JS 。 我们将它复制过来（<link rel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swi
per.css”>），更改它的 HTML ，里面的内容更改为引入 web 的 CSS 样式，这里我们统一更改成3.4.2的版本。引入完成之后，我们引入第二个( <link rel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swi
per.min.css”>)，更改为3.4.2。
现在我们引入了 web 的 CSS 和 JS ，那么应该如何去启用这个轮播图呢？我们打开 Swiper 网址中的中文教程，找到 Swiper3 的使用方法，我们的第一步已经配置完成。
接下来我们来配置第二步骤，也就是 HTML 的内容，将它复制过来粘贴到的 JSX 组件当中，放入到return 当中，将注释去除掉，这里面轮播的内容展示的是文字，我们想要将它换成长图片的格式，这里面我已经提前准备好了图片，将它复制粘贴过来，这样它就是一个输出的图片的格式了（如下图所示）。
接下来我们来看第三步。第三步是给 Swiper 定义一个大小，我们将代码复制过来，这里定义大小（ JSX ），我们要在样式中找到原码编辑，在这里面去书写自定义的代码，这里给 Swiper 的大小控制成宽度为600 PX ，我们更改成百分百。由于内容增加了图片，所以我们要给图片定义宽高，还有图片的大小，所以我们在属性当中找到 class 名，找到下面的图片，在这里面定义它的宽度百分百，高度300，它的大小也定义为百分百（如下图所示），现在它的样式已经配置完成了。
我们继续看第四步，第四步是初始化 Swiper ，我们将它复制过来（如下图所示），
在动作面板中去进行初始化。这里面我们需要在回调当中去进行书写，书写完成之后，我们要在一开始，也就是页面加载时去调用这个方法。调用完成之后，我们回到页面属性中，去查看我们的页面加载完成时是否绑定了初始化的动作。
确定绑定后保存、预览，新开一个窗口，在这里可以看到实现的效果。但是这里配置的轮播图不能进行轮播的展示，它需要点击才可以跳转到下一张图片，那么如何去配置自动展示呢？我们需要返回网址当中，在这里有 API 文档，找到它的一般选项，这里面可以去配置它的 autoplay ，也就是自动切换的这个属性，可以将它复制粘贴过来（ autoplay:5000 ），这里定义的是五秒，我在这里改为两秒（ autoplay:2000 ），保存、预览，就可以实现自动切换的效果了。如果想要去更改其他的属性、方向等，也可以在 API 文档中查找配置，在我们的动作面板当中进行书写。
接下来我们来配置查询组件。在组件库中找到查询，我们将它配置成两列，然后将里面的输入框去掉，这里我们需要搜索的是项目的分类和项目名称。所以我们需要一个输入框，起名为项目名称，再在组件库当中拖动一个下拉单选，起名为分类，我们需要去配置分类的选项，设置它的显示值和选项值，这样我们的查询组件就配置完成了。 接下来，我们来配置项目展示的布局，我希望项目数据可以自适应页面，进行展示，适配 PC 端和移动端。下面来进行设置容器组件的弹性布局样式，在样式中我们设置它的显示为 black 布局，它的水平方向在左端，也就是配置它的 direction 的职位 role ，然后设置它的间距自适应。在一行排列不下的情况下，我们应该去进行 flex/web 的属性，这样它就可以有换行的操作。
在样式设置当中没有这个属性，所以我们点开源码编辑，在这里配置它为 y ，这样它就可以进行换行的操作了。这里面的项目数据是循环展示的，所以我们还需要一个容器组件用作展示，我们再次拖动一个容器到这个容器当中。在这个容器里面，我们需要展示的内容有图片、项目名称、项目描述信息， formInstId ，还有最重要的分享、访问和点赞。我们依次来配置一下，首先是图片组件：拖动图片到容器中，配置图片的样式为固定的宽度，宽度设置成350，高度设置成255，这样也是为了防止，如果上传的图片格式不一样，可以控制图片的大小。
然后我们来配置用作展示项目名称的文本组件，我们先在文本组件外面套一个容器组件，在这里我们可以选择打开大纲数，我们的容器，要在大的容器内，所以我们可以拖动大纲数来进行解决。然后我们将文本组件放置在里面，配置外层的容器，可以点击配置外层的容器的样式，可以去配置它的内边距，也就是 Padding 值可以设置成8 PX ，这样容器的内边距就配置完成了。接下来，我们来配置它的高度，设置成31 PX ，这样也是防止在页面没有数据的情况下，不会进行串行的操作。我们来复制一下这个容器，我们给复制的容器组件增加下边框，在样式当中，找到边框，下边框设置为实线，宽度为1，颜色设置为灰色。下边框配置完成之后，我们来看一下这里的文本，这里的文本是要展示项目的描述信息，描述信息内容可能过长，所以我们来配置文本的溢出隐藏。这里的溢出隐藏，我们找到文本，样式，在原码编辑当中去进行设置。
首先是定义它的宽度，这里定义它的宽度为300 pX（width:300px） ，然后我们来定义它的溢出隐藏（ overflow：hidden text-overflow:ellipsis; white-space:nowrap ），这样我们就配置完成了。接下来再复制一个文本组件，我们复制上方的，并将它放置在下方。
在大纲树中，拖动到容器当中（如图所示），我们将它的默认状态设置为隐藏，这里放置 formInstId ，用作后续访问地址的拼接，接下来我们要配置分享访问和点赞的容器。这里新增三个容器，分别放置三个功能，每一个容器里面配置一个文本和一个图标，我们拖动容器，同样的将它拖动在下方。
在这个容器里面，我们加一个文本和一个图标，这里面我们来配置分享和分享图标。首先是图标，我们可以使用自定义的图标，下面来进行项目评选，在基础组件的图标中找到自定义的分享图标，将它复制过来，就变成了分享的样式，然后我们配置文本为分享。
下面来进行项目评选页面布局，现在默认容器显示为 block 块元素，我们将它更改为 flex 布局，配置主轴为水平方向，起点在左端的direction role ，这是分享的容器，访问的容器也是同样的配置，点赞也是一样的。我们来更改里面的图标，首先是点赞的，然后来配置访问的，我们将点赞设置成默认为零。我们将点赞的容器、样式、 flex 布局更改成主轴方向向右的，然后我们需要在分享、访问、点赞外面套一层外层容器去配置弹性布局，让三个小容器的间距自适应外层容器。这里面我们拖动一个容器组件，将它拖动到合适的位置，然后将下方的容器先放置在一个容器下，在样式中设置它为 flex 布局，并且设置间距自适应来配置它们的 line-height：17px 。配置完成之后，我们来修饰一下循环的这个容器，在里面，我们可以配置它的样式、边框，我们想要配置全部的边框去配置它实现，颜色浅灰色，这样就可以让每一个项目都清晰明了，还可以去设置动画效果。这里的动画效果，我们可以直接打开区块模板，将区块模板复制在画布中，我们去找到这个样式，直接将代码复制过来（如下图所示），也可以只复制上面的两个。
找到我们的容器，将它粘贴过来，这样我们就可以实现动画的效果了，主要实现的就是我们的 transition 。复制完成之后，我们来更改里面的配置，这里我们将 Padding 值，也就是内边距的值，更改为 margin 。
更改它的上边距为20 px ，这样我们的实践就配置完成了，将下方的删除。如果样式不够美观，也可以在样式中找到 margin 去配置文本和图标当中的间距。
本次实践的页面布局已经全部配置完成，下一节课要讲到的是将表单数据获取到页面当中进行展示。
