开发者学堂课程【低代码认证-第一章:项目评选系课程：1.3项目评选系统的布局设计】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1007/detail/15055
项目评选系统的布局设计
内容介绍：
一、项目评选系统的背景和诉求
二、项目评选系统的流程分析
三、项目评选页面布局设计
四、实操演示
一、项目评选系统的背景和诉求
l 背景:
一年一度的项目评选开始，管理者想将本年度提交上来的项目进行评选，选出最优秀的前三名，颁发年度奖励。
基于这点，管理者想要开发一款项目评选系统，有以下几个诉求:
1.页面设计要美观大方。
2.要求公平公正，每人只能给心仪的项目投出一票。
3.可以分享给组织内的人员进行投票。
根据诉求来看项目评选系统的流程分析。
二、项目评选系统的流程分析
1.收集项目
首先先创建一个表单用于收集项目，他是项目信息的在线录入和查询，可以实现项目信息共享，所有人员都可以在这个收集项目的表单内填写项目信息。
2.项目展示
项目展示是搭建一个自定义页面，在页面当中展示项目的数据。在这个项目展示的页面也可以设置活动的内容。
3.项目评选
将展示配置完成后，去进行项评选的配置，也就是评选系统要实现的点赞、搜索、分享等功能。
4.流程分析
流程分析完成后，来看整体的实现流程图：
创建三个页面，分别是项目表单，项目展示页面和投票中间表。其中项目表单和投票中单表为表单页面，项目展示页面是自定义页面，在项目展示的指定页面当中去配置 JSX 容器等页面的样式，配置完成后。在自定义页面获取项目表单当中的项目数据，获取数据后进行数据处理，并循环渲染这些数据。
再继续去配置项目的查询功能，设置分享，访问的功能，设置点赞的功能，点赞功能需要投票中间表中去查询数据。
数据返回查询结果，如果有投票，那么就在页面当中进行弹窗提醒，如果没有，记录投票的人员并更新项目表单当中的项目数据，了解项目评选系统的需求诉求和流程分析，下一小节学习项目评选页面布局设计。
三、项目评选页面布局设计
首先我们来看一下整体的实现后的最终效果。这里是自定义页面展示的概览，PC端的展示样式如左边的图片所示，移动端展示样式如右图所示
：1.页面所需组件介绍
l 下面来看自定义页面：
常用组件有 JSX 组件和 HTML 组件，用 JSX 组件和 HTML 组件结合使用，引入一个 web 的轮播图进行渲染。
还有容器组件、图标组件、文本组件，这里面他们三个组件结合在一起去使用，去进行。去进行页面的布局。包括循环渲染的样式。查询组件。如果数据过多的情况下，就需要进行搜索，就可以使用查询组件对数据进行模糊搜索展示,如果想要给用户一个提示或者用户处理事务又不想要跳转页面，以致打断工作流程时，就可以使用对话框组件。在这里面用于弹窗展示需要复制的链接用于分享。介绍完成页面所需组件后，来看组件样式。
2.组件样式设计器
组件样式设计器中可以配置源码编辑，状态，显示，Margin 及 Padding ，文字，背景，边框，阴影，不透明度和鼠标手势属性。
l 组件样式配置路径：
在画布当中选择组件，右侧属性面板当中选择样式，在样式设计当中去配置所需要的样式。
3.组件样式配置
下面以容器组件为案例，看样式设计具体有哪些：
（1）源码编辑:
即以CSS源代码方式进行样式编辑。当部分CSS样式在设置器中无法满足需求的时候，支持编写CSS样式代码来自定义样式。
（2）状态:
以传统PC端的组件状态进行分组设置:
l 默认:正常状态
l hover:（鼠标滑过状态）鼠标浮动在组件热区，且未产生点击行为·
l focus:（聚焦状态）页面原色处于光标焦点位置
l active:页面元素处于选中激活状态
（3）显示
显示就是对应CSS的display模式:
l block:盒子模型
l inline-block:行内盒子模型
l inline:行内模型
l flex:弹性布局模型
在我们项目展示页面当中，大多数使用的是 flex 弹性模型
4.Margin及Padding
l Margin:指盒子模型中的，距离其他节点元素的距离。外边距
l Padding:指盒子模型中的，距离其内部元素的留白距离。内边距
5. 文字
设置文字之后，影响的分组里面的组件标题，可自定义，也可直接选择文字标题
6. 背景
可自主选择系统自带的颜色，也可使用本地图片背景上传
7. 边框
指设置布局容器组件的边框效果。同时支持设置圆角大小，圆角指组件的四个角的弧度，如果想要将边框设置成圆形，就可以设置它的圆角大小。来控制它，边框为圆形。
8.阴影
l 设置组件的阴影投影，通过x\y设置方向，通过blur 和spread 设置阴影
9.不透明度
l 设置区块的整体透明度效果，范围0~100
l 默认为100，0为完全透明
10.鼠标手势
l 选择pointer，则当鼠标浮动在区块上方时，会出现小手标志
l 选择default，则当鼠标浮动在区块上方时，会出现箭头标志。
四、实操演示
1.第一步
首先，创建一个页面。选择空白创建，点击跳过。
更改页面名称为项目展示。
想要给门户展示页面放置一个轮播图用作展示，可以选择在页面当中的高级组件去配置，里面可以书写它的图片标题，此处设置轮播：
里面可以书写图片、标题、地址，链接等等。但是本次实践我们要来学习如何引入外部的轮播图展示在页面当中，所以需要引入 web的CSS 样式和 JS。这里面学习使用组件库当中的 HTML 组件，引入外部的CS链接，JSX组件显示内容。
所以抽中一个 HTML 。一个 JSX组件，在页面当中。
制作完成后，需要在动作面板当中引入外部资源，这里可以参考以下代码将其复制粘贴置JS动作面板中。
l 如何引用第三方JS资源：
export function loadScript(src,callback) {
if ( !src){
return;
}
const node = document.createElement( 'script ' );
node.cross0rigin = 'cross0rigin ';
node.src = src;
node.addEventListener( ' load ' , callback,false);
document.head.appendChild(node);
export function loadAssets() {
this.loadScript( 'https://www.goat1000.com/tagcanvas.min.js '， () => {
// your code
});
同时需要先将 this 去掉，现在需要更改的是里面的链接。
这里的链接可以到 swiper 网址中找到。找到 swiper 获取结果地址。
这里可以获取到它的CSS样式的JS：
l Swiper CDN
如果你不想将Swiper文件放在你的项目中，你可以使用Swiper的CDN服务。以下是各版本的Swiper CDN地址，要将3.x.x改成相应的版本，如3.4.2.
</code><a href="https://cdn%5Ds.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.Jjquery.js%22%3E%3C/scrip%3E" target="_blank"><code><span class="lake-fontsize-1515">https://cdn]s.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.Jjquery.js"></scrip></span></code></a></div><div style="text-align: justify;"><code><span class="lake-fontsize-1515"><script src=”</span></code><a href="https://cdn%5Ds.cloudflare.com/ajax/libs/Swiper/3.x.x/s/swiper.Jquery.min.js%22%3E%3C/script%3E" target="_blank"><code><span class="lake-fontsize-1515">https://cdn]s.cloudflare.com/ajax/libs/Swiper/3.x.x/s/swiper.Jquery.min.js">
将其复制。更改 HTML 里面的内容，为有引入外部的css样式，这里统一更改成3.4.2版本。
l 更改代码如下：
引入css完成以上代码后，再次引入第二个js，将版本更改为3.4.2。
完成引入外部的 CSS 和 JS 后，应该如何去启用轮播图？
打开 swiper 网址当中的中文教程，找到的swiper3 使用方法。
2.第二步：
第一步已经完成，进入第二步的配置：HTML的内容。
l HTML内容代码:
Slide 1
Slide 2
Slide 3
将以上代码复制。粘贴 JSX 组件的return 当中。
将注释内容去除掉，此时里面轮播的内容展示的是文字。要将其换成长图片的格式，将提前准备的图片路径复制粘贴至代码替换。此时输出的就是一个长图片。
l 准备的图片路径代码：
s
