day05【讲师管理模块前端开发】/08-尚硅谷-谷粒学院-讲师管理前端-讲师条件查询

下面咱就来添加条件查询，那怎么加给大家先分析一下啊，咱应该是在我们那个讲第一天内容中，应该给各位做过一个分析啊，咱找一下啊。在我们应该是这个内容中，当时我们做过这个啊，不是第一天就是做这个接口的时候啊，咱找一个应该是。这个啊，我把这张图打开，咱来看一下啊，当时给大家画过，就是现在你要做条件长带分页，应该是这么一个效果，咱们现在把列表部分和分页条都做到了，而咱缺少的是这个条件部分啊，所以咱们现在就要在我页面上面加上这么一个条件部分，就是你可以输入不同的条件，然后最后点个查询，可以查出你的数据，所以咱现在就来加这么一个东西，就是条件的部分。这个位啊给他知道，那咱们下面就来继续把它加上。咱看啊，这该怎么去加。

我给大家啊，画到这张图上，第一个分页部分我们已经做到了，然后咱看第二部分。在里边我们就是。添加上这么一个条件部分。啊，条件场景部分，那怎么加，咱们加的就是这么一个效果，而这个效果咱们同样使用我们那个element UI。这个组件来实现出来，那咱们到组件中我们来找一下。里边这部分就是这一部分，你要做的就是一个输入的这么一个东西，也就是对应我们。在H条中学的那个应该是一个表单部分，咱就是做个输入，那我现在到里边咱找一下啊，就是表单的部分。表单应该在表格附近这里啊，放表单咱把它点开咱看一下啊。表单其实就是这些嘛，你可以数值或者这个位置，你可以选择可以什么输入时间等等，然后咱往下看啊，这里边因为这个咱们要做的应该是在一行景显示，所以这个不太符合，咱找个更符合点的往下看就是它。

这个应该就符合咱的要求，我们里边应该是有这么四个条件，这里边有两个让他再多加几个就可以了，这是一个条件，那咱看这个该怎么用，我把这个还是源码点开，咱看一下啊，这该怎么去用的。这一段给大家先复制过来，咱先看一遍，然后用它，咱也是通过我们的课件给它快速改出来就可以了，因为这结构也是固定的。那咱们看一下啊，这是什么样的。咱们一行一行来看啊，我先稍微给它调整一下啊，来看第一个，首先呢，这个IUI中的表单就叫E啊，就是表单在里边有这么一段值class，这是一个它那个样式，然后咱看它这句话。

这句话什么意思呢？给大家解释一下啊，来看这个单词，In line。音是不是在什么里的意思，Line是不是有线的意思啊，这句话就表示让你的表单在一行就显示，比如说咱们刚才看到的这个，你看啊，审批人员活动区域是不是在一行显示，而这个在多行显示，这就表示在一行显示是固定的。然后下面加一个叫冒号model啊，它是为了取到里边这个值啊，加了一个model。就是单向绑定嘛，序里边这个值，然后它主要是在下面这个部分，这是主要的，你看啊，每个输入项部分都是一个叫e form item，就是表单这个项EL form item，这是审批人，这是活动区域，审批人是一个普通的input活动区域，它是这种结构。就这个。这个我应该知道啊，是一个叫下拉列表嘛，它用下列表来做到，所以你看我们这里边第一个是普通的input输入框，第二个是select option加列表，然后最后有这么一个button按钮，主要这个结构，而咱们写的话也是写多个这个item，然后最终做到。

啊，这个我也知道啊，然后在写的过程中呢，在里边还用到了一个咱们之前学过的指令，这个东西叫V-model。不知各位是否记得啊，咱上午也回顾过V-model呢，表示叫做双向绑定，也就是说这个什么意思呢？来看具体的啊，大家看啊，V-model这个叫form inline.user form.inline点这个啊，就是活动区域啊，Re，活动区域，然后往下看，你看啊。这是不是一个对象，这对象跟它是不是有个对应关系，所以说就是你在这里边数值之后，那这对象中是有它的值，因为它叫双向绑定，你一个地方变，其他地方会跟着发生变化啊，所以咱们一会儿肯定也这么做，加个V杠，Model加一个双向绑定就可以做到最后提交加一个可立个事件。

啊，这个啊是我们看到一个表单，咱用这个就能改成的效果，所以大家把这个能看懂，不需要你去敲一遍，能看懂可以了，因为咱写也是从里边复制改就可以了。这是IUY，然后这个看完之后，咱下面就来弄一下啊，我就把课件中这个给大家就直接复制过来了，不需要我们挑一遍啊，就这部分。我把它咱复制过来，它叫e form，然后这个因为是条件部分呢，咱在最上面，所以我放到table的上面去。就这位置。然后放完之后再来看一遍里边那个内容啊，咱们一个来看。首先大家看啊，第一个e form是表单in line等于处，我刚解释过，在一行显示，这是它里面的样式，然后下面有几个值，就是讲师名称，包括这个讲师头衔，但是咱头衔是一和二啊，咱要显示高级和首席啊，是这个值。然后下边有一个时间之间有两个，一个就是开始时间，一个结束时间，而时间大家注意啊。

这时间呢，不需要咱们自己输入，咱可以用到这种形式。大家看到它是这种形式，这是是一个选择时间框哦，所以我在这里边也用了一个时间选择框，就是这个东西啊，包括你看它那个源码中，咱找一下啊，源码里面那个时间。就是这个EL date啊，这个皮这个东西用这个做大啊。所以咱们现在加了这么一个表单部分，就是为了做到条件查询，最后有个查询按钮，里边加个事件，咱一会儿可以做到一个查询。这个啊，我们就做到了啊，然后做到之后咱给他就改一下，看一下结果啊，首先第一个里边有这个VGA model。

这里边要做到双向绑定，那怎么绑定，咱往下看啊，大家看我这里边呢，之前是定义了一个对象叫teacher query，这对象就用于条件封装的，所以咱把它的值呢，都改成我们这个对象给它改一下啊，它之前叫search obj，我都改成叫teacher query teacher query level，这是开始时间，这是结束时间，我们都做过修改。啊，这么做就可以了。然后在改的过程中有个细节希望各位注意啊，就是跟Java的一个区别。比如说咱在Java中我们要写的时候呢，你看啊，以这为例，我这对象中是不是有user和REIN2个属性。然后你里边要写对应两个属性，但是我们在JS里边啊，给大家说明。这两属性。

你可以不写，然后你这么做之后，他也把这属性给你加到这对象中去，包括把这user，这re可以加进去，这属性你可以不定义，定义也没有错，但是也可以不写，包括跟这一样，你看我这里边啊，我加了一个叫这个teacher query，里边有name，有level，有begin，有and。但是大家看我定义的里边什么都没写了，这么做也可以，它会自动加进去，但你定义出来也没错，比如说来一个name，来一个空啊，来一个level。啊，Level等于一个空都可以，但是不写也没有错啊，得看实际，这是跟Java不一样的地方，GS是很灵活的，它里边不定义也对，然后你这么做之后，最后在数值，它用到了VGA model对象中就会有你的条件数据，大家给他传过去，就能做到这么一个结果啊，就是最终的查询。这是一个表单啊，然后写完之后咱来改一下啊，在这里边最后点查询肯定是调咱那方法，我这方法叫get list，把这个咱就调用，这是咱们做那个条件查询带分页的get list方法，这咱们最后调一下啊，所以这样的话，这个效果我们就做到了，这是条件查询的一个添加啊，就加上这么一部分。

我写一下啊，这个位置咱用UI实验出来，就是在我们那个啊列表的上面。上面添加上这么一个条件输入的表单。然后咱们使用一个叫V-model。做到一个那个数据的一个绑定，最后我们再调方法就可以了，主要啊就是这么一个基本结构啊，所以大家把这给他知道啊，然后我就简单复制一部分啊，咱就复制这个其中一个结构啊，在里边主要我们写了一个叫v model。

用到这个双向绑定，然后最后我们在这里边做一个最终一个查询，查询里边我们要绑定一个事件，然后最终可以查询出来。这个啊，给大家也接过来，所以咱们现在就是这么来做啊。这个咱们就最终完成了关于这个条件查询的部分。然后完成之后，咱最后把效果我们试一下啊，看一下我们就是加了一个表单之后，效果能不能做到，各位写的时候注意这名字要跟你里边这个对象名字要对上，我这叫teacher query，所以上面也写t query2个要对上。那咱们试一下最后的结果啊。我重新刷新。比如现在啊，默认他是没有条件是查所有比如现在我输入一个讲师名称，咱来一个啊，比如叫这个姓王的讲师，咱们做的是模查询，那我现在点击这个查询。

大家看王二王五是不是出来了，比如说我现在再加个条件，我加上这么一个叫首席讲师，应该是王五，点查询是不是也可以啊，这个没有问题，比如现在这里边咱们什么都不输入，点查询是不是全部啊，比如说我再试一个时间啊，咱找个时间。啊，随便找一个啊，比如说19年2月1号。啊，这有10月30号，那我来一个十月。呃，10月31号吧。六七八九十啊，10月31号这边写个值。我现在就查这个时间范围中的值，就是19年2月1号到10月31号，现在我点查询啊，它就是十月这三个满足条件值是不是查出来了，所以证明咱现在这条件查询可以做到，另外你看他在每次查询之后，下面是不是还带分页，这就叫条件查询带分页。

咱把这个功能我们就能做到了，你什么都不输入，肯定是查全部。啊，这个就是分页加条件功能，所以各位把这个能整合出来啊，它就是写一个表单，然后你改几个值，用微杠model最后调方法就可以实现出来。这个我们就做到了啊，然后这个做到之后在里边呢，还最后有一个小功能，就是这个功能。啊，其实应该在上面它往下了啊，就在这里啊，这个功能叫清空。大家把这个小功能，咱最后给他也做一下啊。我来试验一下这个功能，就是清空的一个功能。那这个功能我们该怎么做呢？给大家先做一个快速的一个分析啊，看看怎么做。它的效果是什么？比如说我现在输入一个条件点查询，根据条件是不是查数据了，数据就有，那清空应该干什么。

我觉得各位应该知道啊，首先他做两件事情，第一个把你的条件值清空，然后第二个查询所有数据，这是清空做的事情，第一个就是清空你的条件值，第二个查询所有数据，那那下面把清空给它快速做一下。我写一下啊，它的功能两个事情，第一个就是。清空你的表单中的那个输入的条件数据。这是第一个，然后第二个他要实现查询所有的那个数据。这个啊是我们做的清空，那咱给他就写一下。看这怎么写啊，我们来到这个位置啊，首先第一个清空网也是一个button按钮，它里边绑定事件叫reces date，那我们下面在这个JS里边定一下这个方法，这方法名字可以随便起啊，我就叫reces date，那我在method里边，咱们再写一个方法，之前有个方法，那我在这个注意啊，别写错位置啊，你点这个括号。

这个位置咱加个逗号，然后加上这个方法叫reset date，这一方法就表示。清空的方法，那怎么清空，按照我刚才说到的两步，第一步。那就是把表单输入项的数据给到清空。这是第一个，然后第二个查询所有的讲师的数据啊，做这两部分，那咱看怎么来做啊。首先第一个呢，查所有讲师数据，咱们调这方法是不是可以了，那我就直接调一下啊，我们写一个叫这点get list，这就可以查所有。这应该没有特别的，至于你调的方法可以，那我们怎么把表单数据清空呢？给大家特别说一下啊，其实用到的就是咱们之前一直给大家说的这个东西叫viga model，那怎么做呢？我说一下，比如我现在表单里边数据，咱们都有数据输入，比如都输入了值，那我输入之后在它下面这个叫teacher query对象中数据是不是有了，因为是双向绑定，那我们怎么样它清空呢？咱把这对象清空，那对应的表单是不是也就没了，因为它叫双向绑定嘛，你对象中值不存在了，表单中也就没有了。

那咱把这对象清空一下啊，怎么清空呢？这点叫teacher query。等于一个空就可以得到你对象没有值的表单中值也不存在了，因为他们叫双向绑定，一个地方值没有，另一个地方也不存在啊，这是清空，这是差所有，这就叫做reet date方法，清空的方法。啊，咱把它就快速做到了啊。把这个代码给大家寄过来啊，你把这个给它知道啊，虽然是个小功能，各位要知道它里面这个特点啊。

完成，然后完成之后咱把效果我们最终给他试一下啊，看一下最终的结果，比如现在我随便说一个条件王，再来一个讲师，高级讲师点查询输满足条件查出来了，然后这次到之后咱点清空看结果啊，我一点。大家看效果啊，第一个表单中数据是没了，第二个。是不是查所有啊，所以这叫清空的方法。咱把它就完成了啊，这是关于我们这个列表功能，就到这里为止，咱把这功能我们就最终现出来了啊，主要这么一个过程啊。这图我先保存一下啊。咱说的第五个。讲师列表前端的开发，我们刚才加的是分页和。条件查询。

这个咱就做到了啊，也就最终效果就是你可以条件查询，可以带分页，然后点清空，可以把这个表单数据清空查所有啊，这是咱们前端中等第一个基本功能，我们就完成了啊。