《工业互联网APP设计与开发》课件-15.设备列表模块制作

Ⅹ-15设备列表模块制作Ⅹ-15设备列表模块制作掌握Element-plus中，el-form、el-date-picker、el-table、el-pagination等组件的使用方法掌握数据筛选功能实现掌握设备列表表格数据制作掌握列表分页功能实现编写注册表单Ⅹ-15设备列表模块制作编写注册表单页面布局,排版；网络请求；Day.js使用；ElementPlus组件的使用；Ⅹ-15设备列表模块制作您是一名web前端工程师，主管给您分配了新的任务，需要您实现一个展示设备列表数据的页面，页面中包括:数据筛选功能,通过选择不同的时间段来对数据进行精确查询；数据展示功能，通过表格的方式对设备数据进行展示；设备分页功能，为了保持页面的美观以及体验度，数据超过12条后需要分页展示。Ⅹ-15设备列表模块制作学习任务Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S1设备列表页配置学习任务Ⅹ-15-S2设备列表页制作Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S1设备列表页配置任务要求：1.独立完成学习任务1的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成设备列表页配置。Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S1设备列表页配置学习成果展示：1.阅读并独立完成任务第1题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S1设备列表页配置1.填空题。1）项目main.js文件中引入‘element-plus/lib/locale/lang/zh-cn’文件的作用是

；2）在路由配置中，

是路由参数，当路径匹配到当前路由参数时，就会跳转到

所对应的页面组件；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S1设备列表页配置1.填空题。1）项目main.js文件中引入‘element-plus/lib/locale/lang/zh-cn’文件的作用是

修改element-plus默认语言为中文

；2）在路由配置中，

path

是路由参数，当路径匹配到当前路由参数时，就会跳转到

component

所对应的页面组件；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作任务要求：1.独立完成学习任务2的练习题，将完成的答案填到相应的空格处。2.我们将以小组工作的方式完成这个学习任务。3.能够独立完成设备列表页制作。Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作学习成果展示：1.阅读并独立完成任务第1、2题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作1.填空题。1）使用axios发送请求时，用于处理请求成功地回调函数地方的是

方法；2）在Vue组件内，使用ref和reactive的作用是

；3）实现数据分页需要用到page、pageSize、total等三个变量，它们分别的作用是什么page：

；pageSize：

；total：

；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作2.根据说明，补充以下代码块。1）下列代码中，当鼠标点击“搜索”按钮时执行onSubmit方法，将代码补充完整；2）将el-pagination分页组件补充完整；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作1.填空题。1）使用axios发送请求时，用于处理请求成功地回调函数地方的是

.then

方法；2）在Vue组件内，使用ref和reactive的作用是

实现数据响应式

；3）实现数据分页需要用到page、pageSize、total等三个变量，它们分别的作用是什么page：

起始页数

；pageSize：

每页显示条数

；total：

数据总数

；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作2.根据说明，补充以下代码块。1）下列代码中，当鼠标点击“搜索”按钮时执行onSubmit方法，将代码补充完整；2）将el-pagination分页组件补充完整；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作学习成果展示：1.阅读并独立完成任务第3题。2.通过VisualStudioCode对HTML页面进行编程。3.以小组工作的方式，各小组形成统一答案。4.选出代表，进行展示讲解。5.共同讨论答案。Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作3.根据活页式教材设备列表页效果图，对下面代码按说明进行补充。1）对搜索框区域进行CSS样式设计，设置内边设置为上15px，左15px，右15px，下0，容器圆角水平8px，背景色为#fff，添加容器阴影效果；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作3.根据活页式教材设备列表页效果图，对下面代码按说明进行补充。2）对表格区域进行CSS样式设计，设置外边距距上20px，背景色#fff，内边距30px,容器圆角水平4px，容器边框为1px，实线，颜色为#ebeef5，添加容器阴影效果；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作3.根据活页式教材设备列表页效果图，对下面代码按说明进行补充。1）对搜索框区域进行CSS样式设计，设置内边设置为上15px，左15px，右15px，下0，容器圆角水平8px，背景色为#fff，添加容器阴影效果；Ⅹ-15设备列表模块制作学习任务Ⅹ-15-S2设备列表页制作3.根据活页式教材设备列表页效果图，对下面代码按说明进行补充。2）对表格区域进行CSS样式设计，设置外边距距上20px，背景色#fff，内边距30px,容器圆角水平4px，容器边框为1px，实线，颜色为#ebeef5，添加容器阴影效果；设备列表模块制作请各小组讨论，根据项目任务需求，制定项目实施流程图，并将小组讨论最终结果进行案例展示。根据上述所学，完成注册表单设计，并使用CSS对注册表单进行美化。限时20min将小组讨论结果誊写到工作页中，注意要铅笔（流程图要横平竖直）限时10min设备列表模块制作根据项目实施流程图，有些步骤内容等内容需要进行实现方式确认，请每组进行站立会议，根据计划对项目步骤流程进行细化，根据步骤设计实现方式,填写工作页中《站立决策卡》。限时30min设备列表模块制作根据计划及决策内容，对项目进行实施，填写实施步骤，对实施步骤的结果进行选择是否实现，并根据自身情况填写工作页《项目实施卡》。限时120min设备列表模块制作页面检查完成开发工作后，使用浏览器打开HTML文件，请根据页面检查表，对各自页面进行目检，将检查结果填入表中序号检查内容检查结果附注1页面内容是否缺失是〇

否〇

2页面内布局是否合理是〇

否〇

3页面是否符合任务需求是〇

否〇

设备列表模块制作代码检查根据任务需求对代码进行检查，将检查结果填入检查表中序号功能要求检查结果附