EverydayOneCat
↗️🛏️↘️
🛏️🐱🛏️
↖️🛏️↙️
ElementUI
1.ElementUI介绍
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。
官网地址：http://element-cn.eleme.io/#/zh-CN
引用导入：
1 | <!‐‐ 引入ElementUI样式 ‐‐> |
2.常用组件
官网中的组件是我们日后使用的一个强大的参考依据，建议先看官网介绍各个组件的使用和具体效果，我下面介绍几个常用的组件。
2.1Container布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
简单使用：
1 |
|
效果：
2.2Dropdown下拉菜单
简单使用：
1 | <div id="app"> |
效果：
2.3NavMenu导航菜单
简单使用：
1 | <div id="app"> |
效果：
2.4Table表格（重点）
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
简单使用：
1 | <div id="app"> |
效果：
2.5Pagination分页
当数据量过多时，使用分页分解数据。
1 | <div id="app"> |
效果：
2.6Message消息提示（重点）
常用于主动操作后的反馈提示。
1 | <div id="app"> |
效果：
2.7Tabs标签页
分隔内容上有关联但属于不同类别的数据集合。
1 | <div id="app"> |
效果：
2.8Form表单（重点）
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。在 Form组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。
1 | <div id="app"> |
效果：
传智健康检查管理
传智健康管理系统是一款应用于健康管理机构的业务系统，实现健康管理机构工作内容可视化、患者管理专业化、健康评估数字化、健康干预流程化、知识库集成化，从而提高健康管理师的工作效率，加强与患者间的互动，增强管理者对健康管理机构运营情况的了解。
系统分为传智健康后台管理系统和移动端应用两部分。其中后台系统提供给健康管理机构内部人员（包括系统管理员、健康管理师等）使用，微信端应用提供给健康管理机构的用户（体检用户）使用。
1.检查项管理
1.1新增检查项
——前端——
新增标签弹层：
1 | <!-- 新增标签弹层 --> |
输入校验：
1 | rules: {//校验规则 |
弹出新增窗口：
1 | // 重置表单 |
提交表单数据：
1 | //添加 |
——后端——
Controller:
1 |
|
Service和Dao太过简单不多赘述，后面除非后端有复杂的处理，单纯的和数据库做交互直接跳过。
1.2分页
本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为：{currentPage:1,pageSize:10,queryString:’’itcast’’}
后台响应数据包括总记录数、当前页需要展示的数据集合。
——前端——
定义分页相关模型数据：
1 | pagination: {//分页相关模型数据 |
在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法。
1 | //分页查询 |
为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange
1 | <el-pagination |
——后端——
Controller:
1 | //分页查询 |
Service:
1 |
|
Dao:
1 | <select id="selectByCondition" parameterType="String" resultType="com.itheima.pojo.CheckItem"> |
效果：
1.3删除检查项
为了防止用户误操作，点击删除按钮时需要弹出确认删除的提示，用户点击取消则不做任何操作，用户点击确定按钮再提交删除请求。
用户点击删除按钮会执行handleDelete方法，此处需要完善handleDelete方法，弹出确认提示信息。ElementUI提供了$confirm方法来实现确认提示信息弹框效果
1 | // 删除 |
后端删除时需要注意如果要删除的检查项和检查组（一堆检查项组成）关联了，则不能删除。
Controller:
1 | //删除 |
Service:
1 |
|
1.4编辑检查项
用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。
——前端——
1 | // 弹出编辑窗口 |
在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数handleEdit
1 | //编辑 |
——后端——
这里唯一要注意的是编写sql语句可以用mybatis自带的动态sql
1 | <update id="edit" parameterType="com.itheima.pojo.CheckItem"> |
2.检查组管理
功能实现基本和检查项类似，这里主要记录一些不同的值得学习的知识点。
2.1新增检查组
这里需要注意的点是新增检查组时不止要像检查组数据表t_checkgroup中插入记录，还得根据页面勾选的该检查组中包含的检查项来对检查组检查项关联表t_checkgroup_checkitem进行插入数据。
这时候就有一个需要注意的点，我们插入关系表时得有刚刚插入t_checkgroup的检查组的id——这个可以通过mybatis自带的LAST_INSERT_ID()这个函数来实现，接下来的就简单了，我们通过Map将两个包装，一一插入关系表中。
Service:
1 |
|
Dao:
1 | <!--插入检查组数据--> |
2.2编辑检查组
当我们编辑检查组时，编辑其的属性后端代码很容易实现，但是如果修改了该检查组和检查项的多对多关系，我们没必要读取之前对应的检查项和新的对应进行对比来增删，我们直接删去之前此检查组对应的所有的检查项然后再将新的关系一一填充到关系表中
1 |
|
2.3删除检查组
删除唯一要注意的是我们先得删去关联表对应的数据，再去检查组表中删除对应的数据。因为关联表时主键对应的，如果检查组表已经删除没有该id，会报错。
结语
好久没写博文了。。。。最近一直在玩，荒废了学习。学这个项目的目的就是想了解一下移动端的开发，前面的都是SSM的部分，当作一次复习吧，目前来说唯一的收获就是ElementUI了，还用这个模板正好把xml大实验做了嘿嘿，差不多了就到这吧😋
