学习笔记(1)

在上篇学习中，了解了单表的增、删、查、改，可中并不满足页面的要求，单表的增、删、查、改值针对于单表，如果页面要求其他表的信息呢？就比如：你想知道某位学生的信息，总不能知道学生叫什么名字把，肯定要知道学生来自于什么学校，读什么专业，在那个年级，那个班，性某某某，那么单表只能查其中的一条数据，总不能一条一条的查，那就有的多表连接在一起查，就能查询到你想要的数据，多表和单表只是在单表的基础上复杂了一点，但是万变不离其中，在操作多表的时侯也要更加的对数据表的了解，数据关系复杂，不跟单表一样，单表只是操作单表数据的增、删、查、改，多表要考虑其他表的数据是否一样或者删错数据，从而导致数据加载出来达不到自己想要的的效果，删错或修错也会出现到后面数据处理增加难度，多表数据就那样的了，也就是基于单表复杂了一点，有了多表就能把你想要的数据查询出来吗，这是不可能的,多表查询他只会把查的相对应的所有数据在View显示，就还没有达到你想要某个学生或者某条信息，那么就要数据筛选，和数据查询，才能查出相对应的信息，那么就对相应的数据操作

根据View视图里，不只有学生信息，还有先对应的学院、年级、专业等等，学生表里没有这些数据，就应该创建新的一张学生表来装这些没有的数据名为StudentVo并放在一个文件夹里，这是个实体类，是用来装某张表没有其他表的数据，这样就能得到一张新的学生表。

StudentVo是自己命名的来继承学生表，下面的字段是根据页面显示要求创建相对应的字段，上面六个也是我所展现出来所需要的，数据表的实体数据有了，接下来还要一张绑定下来框的数据实体类，在select框里总不能一开始就显示出数据，要有一个给别人选择的机会，所以要拼接数据，就要在写一张实体类，这张实体类不像跟上面的那么复杂，他只需要一个选种值和一个显示值，命名一张实体类为selectVo来装这两个值，命名空间随自己命名，到你控制器那边一定要和你自己命名的变量一样，不然达不到预期效果，也有可能会紧接着会报错，所以控制器和selectVo的对应名称一定要对应上。

有了两个实体类，那么初步控制器的工作已经完成的，到视图那边，视图那边用layui表格完成，地址：https://www.layui.com/doc/ ，layui表格怎么样就不讲解了，然后到视图，

既然要初始化表格，那要声明一个全局变量来装，那么就有了第一个存在，声明一个变量来存放表格，声明的变量要和HTML里的table标签的一样，HTML里专门有一个是拿来装表格的，接下来就是声明 layer和layuiTable，一个是用来做提示，一个是用来做表格的初始化，

1、参数elem类型String/DOMà说明 指定原始
table 容器的选择器或 DOM，方法渲染方式必填

2、参数url（等）类型 无 说明 异步数据接口相关参数。其中 url 参数为必填项

3、参数 cols 类型Array 说明 设置表头。值是一个二维数组。方法渲染方式必填

4、参数 page 类型Boolean/Object 说明 开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外），

这是对上面的数据一些解释到最后有一个title用来设置标题，templet用来设置自定义列模板，用来设置修改和删除

就像这样：

传进date 到页面获取学生表的ID，就给修改和删除附上值，当然现在是看不了的，要把数据查出来才能，页面搭建完成，大概效果就这样：

数据接口异常因为还没有写数据，下不管下面，先把上面的一个个选项框弄好先，给他拼接一个—请选择—这个选项。
实现的效果跟select中的option一样，实现下拉框功能，他们两个上的差异是很大的，一个是单纯的HTML控制下拉框的内容，一个是通过Js来绑定内容，当学院框数据发生改变另外的两个框的数据也跟着发生改变，首先先把学院的框绑定数据，绑定学院下拉框，设置selectVo的一个显示值一个选中值就可以了。

绑定学院下拉框没有难度，只是一个单表的绑定，先实例化SelectVo，再给SelectVo里的选中值和显示值附上值，查询单表，单表的ID等于SelectVo选中值，名称等于SelectVo里的显示值，就可以了，这样就能实现学院下拉框，年级下拉框也一样，跟学院的一样：

和上面一样，先实例，再赋值 就可以了，最后一个班级，班级表有四个ID，可实际需要的只有年级ID和一个专业ID，班级的上一级是年级和专业、学院，学院下拉框触发年级下拉框，学院就不用查，就查专业和年级，一个个查出拼接SelectVo就可以了：

到这里就绑定了三个下拉框的数据

继续下一步把整张表查询出来，学生表中没有其他表的数据，原先上面创建了一张StudentVo里面有想要的数据，然后就连表查询，

实例化studentVo
把数据库中的PW_Student重新命名为tbStudent，数据库中的表不能直接用，然后用Join。。。in。。。把他们连接起来就比如：在学院表中有学院ID、在学生表里也有学院ID，所有他们的连接条件就是学院ID，就用学生表里的学院ID等于学院里的学院ID。就成功的把两张表连接起来。以下的连接跟上面的一样，把他们的五张表连接在一起就用orderby排序，根据学生的ID来排序，然后就查询新的studentVo表，里面需要什么字段，一部分是视图里的，一部分是数据表里的，把他们的字段一一放进去后转换成列表格式，查询数据的总条数，分页、实例化、在返回到视图里，视图再将数据处理反回到页面显示出来，这样就把所有的数据查询出来了：

数据查询出来了还没有完成数据筛选，就进一步完善，在视图里出去页面信息传递到控制器，里面有个表格数据重载，出自于layui，表格数据重载有两个一个是自动渲染，一个方法渲染， 在这里用方法渲染，也可以用自动渲染：

方法渲染的方法，这里的tableIns以所当前获得的容器的实例，就比如这里的容器的名称是tabStudent，那么tableIns对应上就是tabStudent，然后就是表格重载表中要加上接口地址url默认会自动传递两个参数：?page=1&limit=30，在设置是有时候可能会出现404&500，报错地址上出现page=1&limit=30，那么应该去找一下数据接口是否出现错误，where设定异步数据接口的额外参数，在这里就不能随便设，where条件在这里是拿来这数据筛选的依据，在where里要传参到控制器里，做出相应的操作，如果控制器跟视图里的参数不一致，会出现某个参数为undefined或者就Null，出现这种情况要回视图或者控制器看一下参数是否一样。

这做出数据筛选前需要获取当前的页面信息，就比如第一个获取学院信息，在数据筛选里有学校的数据框，要获取相对应的条件，年级、班级、学号-要一一获取到他们的值，也可以理解成你要告诉控制器需要操作那个字段，在判断四个值不能等于空或者等于undefined，如果等于就赋值成就0，学号如果undefined 就等于空，可以理解成学号是第二个搜索引擎，到数据重载tableIns
就是当前的容器tabStudent，然后就设置url，url等同于表格中的url，把表格中的url放到重载这里，注释表格中的url，给当前的表格给个data空数据，where里的条件左边是控制器的右边是获取各个字段的参数就比如：AcademeID: AcademeID左边的参数要传到控制器，控制器的参数要和这边的对应上，不然数据就无法传递到控制器进行一下操作会返回null或者0，右边的是获取查询条件值命名的参数，一般光标选中按F12会跳到相对应的定义，如果出现无法跳到定义，就要找参数是否打错或者打少，在这里还会出现一个错误：在判断数据是一定要if括号里面的一定要双等，条件是或者(||)，这里如果是单等的话，就是赋值给参数，会出现控制器的参数出现’ ’或者是undefined，大括号里一定要单等，如果出现双等就是绝对等于你赋值的参数，这样就会在控制器出现参数为0，数据就筛选不了。

把视图里的四个参数传到控制器，传到查询分页数据里，在StudentVo获取相对应的值然后判断是否选中数据：

然后就用Lambda表达式一一表达出来，每一个以Tolist格式输出，数据筛选要在计算数据的总条数的上面，按原理数有筛选就先筛选在计算总条数，没有就直接计算总条数，总不能先计算总条数在筛选。

页面就完成了，试一下有没有效果，就一上面的测试1为例查询单条数据

数据筛选：

效果就逐一的实现了。