39、尚硅谷_SpringBoot_web开发-【实验】-员工列表-链接高亮&列表完成.avi原创

上一节课呢，我们抽取了一下公共的页面，但是呢，我们这儿还有一个小问题，就是我们虽然是点击员工管理来到了员工列表页面，但是呢，员工管理并没有高亮，诶，默认高亮的是但是bird这个链接，原因呢，就是我们在绿色页面，我们引入的是但是bird页面的塞坝。哎，我们引入的是但是bird页面的set bar，而这个set bar呢，默认只有给但是bird这个Li的这个A标签上添了一个active，如果说我们的页面，比如我们是员工管理点这个链接，如果给它上边能加一个active，好，我来加上CTRLF9重新编一下页面，我再来刷新，那么呢，这一块才能高亮，而这一切呢，都应该是动态的。那这个功能怎么做呢？我们可以利用咱们这个8.2章节，用官方文档，8.2章节有一个叫参数化的片段签名，比如说呢，我们在声明片段的时候，可以来声明上两个变量参数，那么在这个片段里边就能用这两个参数。

而我们引入的时候呢，我们把这两个参数的值传进来，那么第一种方式啊，我们取出第一个值，那就对应的是第一个变量名，第二个值呢，就对应的是第二个变量名，在这里边呢，进行引用，那如果在变量很多的情况下，我们也可以直接来说明哪个变量名等于什么值，逗号哪个变量名等于什么值来声明多个。包括呢，我们也可以直接在声明片段的时候啊，我们不声明任何参数签名，而我们在引入的时候也来传入参数，也就是说我们整个呢，可以利用这个特点，在引入片段的时候，引入咱们这个片段。片段的时候传入参数，我们呢就来使用这个功能。

好，为了层次更清晰呢，我们后来将所有可以公共重用抽取的页面呢，我都来放在comments文件夹上。Comments下，好像我们那些顶部栏侧边栏，我们专门来写一个HTML页面，我们就叫bar.html把我们以前呢再来抽取过来，哎，但是bird里边好顶部栏na，把这个na呢，CRX这一块呢，我们就要引入，哎，咱们这个top bar，而这个top bar呢，我来把它所有公共的呢，我们都来放在了commons这个bar里边，好，这是top bar。来注释一下top，那还有这只是top，还有我们的C吧，塞呢，我们把这一块好单是bird里边的这个引入塞bar引入从咱们这个49行这有一个塞bar开始，一直到我们171行都是塞八，我也直接抽取过来，这样的话呢，每一个页面就很短了。

那往下翻，好，就在这儿171行，好，CTRLX来这一块呢，我们还没引入，先写在这引入C的吧。好，Set bar呢，我还是放在这个bar页面好，然后呢，我们先来把这些公共引入，让它保证没问题，这个top bar的话呢，我们还是div。用我们以前的方式，Div th replspls，而我们这写模板名，模板名呢，现在就成了commons下边的啊八不加HTMMR，这是模板名，然后呢双冒号，然后呢我们这个顶部。导航啊top bar呢，它是th fragment top bar，把这个top bar呢放在这儿好，当然我们即使是这个bar页面也是需要我们这个啊签名，把这个名称空间TH名称空间拿来。

放在这儿，OK。好，我们把这个顶部呢，我们就重新引入了一下，来，我们单是的赛道坝，我们也来重新引入一下。DI。Th replaces replaces，好，我们还是commons bar，我们这个专门来集合了所有set bar之类的，好，它下边呢，我们来看啊，现在呢，我们塞半是井号塞半。们要用ID的方式井号吧，好，这是我们以前普通的引入，那在我们list页面也一样，顶部栏呢？我们来换成这样，包括呢，我们的这个侧边来这样。侧边栏好，我们先引入进来，好，我呢把服务器来重启一下，先来保证我们每一个页面呢，现在还正常啊，只要这引入正常，那再利用那个特性来评价高亮效果好来刷新。

没有登录，再来登录一下密123456，登录好，首先员工管理点进来也没问题，哎，都抽取过来了，那么现在呢，就应该是点主页，我们来主页点员工管理，来员工管理。好，我们来到咱们这个大页面，我们来看主页单是半的，我们先把它超链接的值，我来变一下。串链接值，它现在还联向了什么boori的网站啊，那么呢，就来叫TF大括号，我们是当前项目下的，诶，慢点HTM2页面。咱们这个主页面呢，就是慢点界面发这个请求，这是咱们这个主页面，而这一块呢，有一个叫active，到底它是不是active的，哎，我们是有条件的好，我们还是把这个emps这儿也有好，我把这个页面改好了以后呢，我CTRLF9。来刷新好点它呢是来到慢页面，点员工管理呢，来员工管理一面没问题，现在呢，就是需要点它的时候，但是倍的啊高亮，点员工管理的时候呢，我们这个员工管理高亮，但是倍的呢不高亮，那这个要怎么做呢？哎，非常简单，我们呢可以在这来做一个判断，做一个什么判断呢？也就是说如果想要高亮，我们其实就是给这个A标签加一个active属性就行了，而我呢，可以这么来做th class。

我们用TH来改变class的值怎么办呢？我希望Dollar符大括号取出某个值，比如呢，我们就叫active UR。我们要激活的这个UI，如果慢点HT。哎，我们做三元判断，如果它等于慢点HHTR如果说等于的话呢，我就给你生成一个什么呢？哎，我就给你生成的是，哎加了active的，否则呢。

就是不加的。好，这是呢，我们这个class的生成条件就是说active uri如果是慢，那么就加active啊，否则呢，不加active，不加active那就应该是他好，同样的呢。用同样的道理，我们在我们员工管理页面，我也来做一个判断。Th class，它的这个class生成呢，是需要判断某一个变量的值，这个变量呢叫active uri，我在包含的时候呢，可以给你传进来，好，这个U呢，我来判断等等你呢，是不是等于什么呢？我们这个呢，假设就叫MPS，如果说等于的话。等于的话呢，我们就给你来生成一个带了active的。如果不等于，我们就来生成一个不带安的。好，也要说呢，核心就在于这个变量，哎，我们传了一个active u这个变量，那这个变量怎么传进来呢？诶，这个写错了啊，这个变量怎么传进来呢？我们就在引入的时候，单是bird再来引入塞半的时候，好我来传一个变量，传什么变量呢？我们来看它的这个写法，这个写法呢，就是变量名等于变量值，我们用最复杂的第二种写法。

好，我们就叫active uri，等于什么呢？我们现在想来在单是bird的页面，我们想来高量慢啊，因为他要判断是不是等于慢，所以呢，但是bird引入的时候，N q uri就是慢，而如果list页面引入的时候呢，还是咱们这个set板好用来传参，如果list页面传的时候呢，N q uri，那么它就等于emps，就说呢，我们现在用这种写法。我来CTRLF9来重新呢编译一下，把这个页面呢也都重新编译一下，包括呢单是本的页面都来重新编译一下，好，我来刷新一下，哎，我们发现emps页面员工管理就是高亮的，而但是的页面呢，它就是高亮的。

接下来我们就便利取出员工数据就行了，我们来到历史的页面，好，这呢是咱们这个表格的表头，T包里边呢，是我们以前的这假数据来合并起来，68行到182行，把原来的这个T包底呢，我就CTRLX删掉，整体删掉，来写一个T保底，T包里比底里边呢都是我们的一行行的TR数据，每一行呢都是一个员工数据，而所有的员工数据是从employee ctrler发送emps请求查出数据以后呢，放到emps里边的。所以说呢，我们要在这个TR里边来写TH来便利，注意我们要在TR上来写TH，因为我们说过每一顿便利都会生成一个这个标签，好便利谁呢？那就是当了福大括号，我们在这之前放的叫emps，那么这就便利emps，而便历呢，每一个变量名我们就叫emp，哎，我们这种写法格式呢，就是便历emps取出的变量我们叫emp，然后呢，我们来给它写值。

那每一个呢，就是一个TD井号，那当然就是它的idd呢，我们就直接用TH。Th test的方式好，直接Dollar符大括号EPEP呢，就是我们当前正在编历的P对象，点一个ID就能取出它的ID值。当然属性还是要参照employee里边的这个属性名来取好，那第二个呢，我们就来取last name。Last name呢，取的时候呢，我可以这么来写，我用行内写法，我用双啊双中括号do大括号，我们来取出ep.last name也行，那么接下来呢，我们再来，我们在这顺便来改一下，这是EP的last name取值，包括呢它的email邮箱。

我们来看，有邮箱，还有他的真的性别，还有他的部门，还有他的生日，我们来都来取一下。有，真的，还有department。部门呢，我们取出部门名就行了，还有他的生日，好，我们在这儿呢，都来获取一下生日。生日好，我们要取呢，我就用th test，我把剩下的呢，就直接来写出来，ID last name，还有呢，我们这个email email真的，哎，只不过呢，这个真的我们存的时候呢，是零一是一个体，而零代表呢女一代表男，所以说呢，我们要显示男女，男女的显示呢，我们可以做三元运算来我们来判断它等于零吗？如果等于的话，显示男，否则等于零，零的话呢，显示女，否则呢，就来显示男，哎，不是零，那就显示男。

这三个运算呢，我们可以来写在大括号里边，当推荐的写法呢，是写在大括号外边啊，我们到乐福大括号是来专门取值的，取出值以后呢，我们来判断它是不是等于。哎，等于我们给定的这个零啊，等于如果是就来显示女，否则就来显示男。好，这是我们我们的这个三运算，这真的显示完了以后呢，接下来还有我们的department，只不过这个department呢，如果点点到的是EP里边的department对象，你要获取几点属性里边的department name啊继续点一下获取们的name用呢部门的名字，那么最后一个TD。最后一个梯题呢，也拿过来。

最后一个TD呢，就是来获取生日EP。好，CTRLF9页面修改了以后呢，CTRLF9来刷新来我们看到呢，这一块就显示出来了，只不过呢，在我们生日这一块日期它显示的呢啊不人性化，那我们怎么让它显示出来呢？啊我们需要做日期格式化，我们参照官方文档，在咱们这个标准啊variable取值的时候有一个工具对象，工具对象里边呢有dates也是说呢，我们这个日期工具类，哎，我们详细参照啊附录B，我们就来到附录B，附录B里呢，我们来看dates的用法，诶这里边呢就有date format哎，我们把一个日期格式，这个格式呢，默认按照我们这个国际化区域信息来的，而我们用下边指定的，好，我们用这个。我来复制过来。好。

那现在呢，叫dates format，我们要用这个dates工具来格式化，格式化谁呢？格式化我们要写EP点啊，我们要格式化员工的生日，格式化成什么日期格式呢？就格式化成YYYY-MM，哎，年杠月杠日，然后呢，十分包括呢啊我们就把十分一写吧，不写秒了，好，那么这个改完以后呢，CTRLF9。好，只要是改页面就直接CTRLF9刷新，诶我们看到呢，这个日期也就显示好了，当然我们显示的时候呢，再来带一些操作按钮。操作按钮啊，我们这个操作这几个操作按钮呢，我们来也放在TD里边，这TD呢，我们来放上两个button，第一个button呢，那就是咱们这个啊，第一个就是咱们这个编辑，相当于我们这个修改员工，第二个呢就是删除员工。

删除员工好，我来就快速的简单的给上几个样式，我们直接用class class好，BTNBTNSM，就是小号的咱们这个button，然后呢，编辑呢，我就用b TN primary。用蓝颜色的这个按钮，这都是里边的样式，好，接下来这个class呢，就用BTNBTNSM也是小号的，然后呢，我们用DBTN着。好一个警告按钮，CTRLF9来刷新一下。好，现在呢，我们这个页面就显示出来了。呢，给这儿再来放一个员工添加按钮。好，我们把这个section开头来也放成一个按钮，好button当大家也可以在下面改好自己的样式，员工添加，员工添加来给一个class，我们也是BTN，那我们也用小号按钮BTNSMBTN，如果是添加我用success颜色按钮CTRLF9，好，重新编一下。

来刷新好，现在这个页面就写好了，那么下一节课呢，我们就来做添加修改和删除功能。