38、尚硅谷_SpringBoot_web开发-【实验】-员工列表-公共页抽取.avi原创

好，前面呢，我们说了一下我们实验的一些要求，那么接下来呢，我们就来按照这个要求来完成第一个功能，员工列表，员工列表呢，我们先登录来到后台的主面板页面，我们希望呢，点击customers来查询所有的员工，点击它以后呢，查出所有员工来到列表页面，列表页面就在我们这个CD实验里面的历史的页面，在这个列表页面呢，我们可以对它进行增产改查。那么呢，我们就来先来到我们这个主页面来。点击customers来到列表页面，主页面呢，我们来到，但是word来看它的左侧的这个菜单栏，菜单栏呢，我们来主要来找咱们这个customers，我们要点击它过来发请求，好，我们就在这儿呢，我来CTRLF来搜索一下。来搜索什么呢？Customers啊，我们看到呢，其实啊是我们这个链接，这是一个Li里边呢，有这个customers，那我呢就改成中文，我就叫啊员工。

员工管理啊，那就叫员工管理，在这个员工管理呢，我们来点它来到哦，咱们员工列表页面，那这个超链接那就不是他了。把这个超链接呢，来写成一个th.h re EF，那么上节课之前呢，我们让大家把前边呢都改成啊我们这个特大括号的方式进行路径引入，哎，需要引入咱们这个名生空间，那我们这个都引好了以后呢，我在这儿来改一下THF，好at大括号，那希望呢，发当前项目下的什么请求呢，我们来看一下。查询所有员工发emps请求是get方式，那我们就按照这种方式来发送EPS请求，那发他就有人来处理这个请求，那在controller里边呢，我们来专门写一个employee control。

我们来看一下，我们用它来处理和员工相关的请求。你先来标注，它是一个controller。好，先是第一个方法。那显示list这个呢，是查询员工列表查询。所有员工返回列表页面。那么员工列表页面呢？在times下边的这个list页面，当然员工，所有有关员工的页面，我都希望放在comes下的EP这个文件夹里边，那好，我们就把这个list呢放进这里边。我点个OK，好，那return的返回值，Return的返回值呢，我们就应该写成EP下的list，因为写成它以后呢，我们这个SIM life这个模板引擎，SIM来默认就会拼创，拼创，拼创呢就是根据我们配置文件，我们same life的默认配置，默认配置呢，前面有perfect，哎是拼到内路镜像。

哎，它呢会拼到我们这个类路径下，把我们从类路径下的comp文件夹里边来找EP下的我们这个list，这是前缀，后缀呢是点HTMR好，我们中间的这个叉叉叉就是我们的反回值好，我们就写EP list好，而我们要处理的请求呢，是get方式的emps请求，所以呢，我直接写get门屏，用rest风格的这个门屏注解。好，我们直接来写ES，那么get的意思就是request get方式，好，我们直接写。UI路径就行了，我们EI映射EPS要查出所有员工，那我就把employee do我们来注入进来。

我们也就不写service，我们这个employee do呢是我们之前复制进来的，它呢有一个方法叫get，它是来查询所有员工。返回一个员工的集合，我们就调用它。好，来调用employee DAO点。来点get off查出所有员工，而查出所有员工呢？我们把这个拿过来，返回值是一个collection，好，我们需要放在请求域中，放在请求域中进行共享。我们要去页面获取东西了，好，怎么放呢？我们给这个返回值，我们说写上model，或者呢，写上map，或者呢，我们说model map都行，只要给它们里边放的东西都是在请求域中，那我就直接来写model，来写一个model。

model.and attribute。And attribute attribute，首先有一个KK呢，我们就叫EPS，还有一个value，就是我们所有的员工。然后呢，就会来到员工的列表页面，好，我们来重新启动，先访问一下EPS，看能不能来到员工列表页面。来访问emps，好，没有登录，我们请先登录好，我来ME123456，而且呢，我们把这一块链接改掉了，我们来点一下，诶，确实呢，来到了员工列表页面，主要列表页面的值呢，我们取出来就行，另外大家注意员工列表页面呢，跟主面板页面，其实左侧的菜单栏以及上顶部的导航都是一样的，所以说呢，我们把它公共抽取出来，那么如何公共抽取呢？我们就可以详细的参照life的官方文档，官方文档呢，专门有一张叫time line out这一块呢，来教我们怎么样公共抽取，比如用th fragment声明一个我们要抽取的这个代码片段，然后呢，用th insert将我们要抽取的插入进来，好，接下来就来使用这个功能。

我们来详细记录一下它的使用步骤。还TMMR好，首先呢，第一步我们先要抽取公共片段，公共片段怎么抽取呢？就是利用th fragment，比如我们这段div，哎，这是一个签名标识，那抽取它呢，使用thgment，那么我们这个片段的名字是随便起的，它起名叫copy。这样呢，我们就相当于抽取了一个名叫copy的可重用片段。那如何重用它呢？第二步再来引入重用片段，公共片段。

引入公共平等怎么引入呢？哎，我们只需要做的是我们使用th insert来进行引入，当然这个th insert呢，大家注意，我们需要写的表达式是波浪线大括号，当然这个波浪线大括号也可以在这省略，如果我们用th insert标签代表，就是来插入一个公共片段。而这个写法中间有一个冒号，注意这个冒号是什么呢？我们来看一下，这个冒号呢，在下边我们来说它波浪线大括号是temp name select，或者呢，Temp name fragment，哎，这两个区别的。就在于这儿。一个呢是我们这个模板名，模板名双冒号，双冒号呢，我们这个选择器，第二个呢，而我们这个不是选择器，我们是第二种写法，我们给fragment起了一个名，所以呢，我们就是第二种写法叫模板名。

哎，我们来记录在这儿模板名。某名和咱们第二种写法呢，这叫片段名。我们这个片段我们起名叫copy，所以说呢，我们引入波浪线大括号fo fo呢就相当于有一个fo页面里边呢，有我们来起了一个公共片段叫copy，它好我们就用这种，我先呢把我们列表页面的这个。头部我来抽取出来，头部要抽取哪些呢？我就直接来右键审查元素，我们来看一下检查元素呢，我发现整个包底里边有一个叫na，诶整个标签它都是头部的，所以呢，我们来看一下，来到单是布尔的页面，整个na位标签。

哎，Body里边有整个男标签，我们要抽取它，我们就来写一个叫th fragment，好，那么起一个名字，我们就叫top吧。哎，顶部栏，那么这顶栏要让别人共用，怎么用呢？好，我们来到list页面。绿色页面呢，这个能用标签我们就可以删掉了。哎，我直接删掉，我们来引入引入引入抽取的咱们这个NA8。我们这个呢，是一个top吧。啊，抽取的咱们就顶不来top吧，怎么引呢？哎，他写了一个叫div。D。只不过这一块可能还有点小区别，我们来写一个div insert，好，我们就来插入它，当然这个要使用TH名称空间，我们还是一样，现在这来引入咱们这个PH名称空间，我们把这一段拿来。

List页面，好，Life的名称空间引入进来，我们在这th insert insert什么呢？表达式波浪线，大括号，首先呢是模板名，模板名呢？我们来说一下这个模板名，这个模板名呢，当然会根据默认的咱们这个模板引擎的配置进行解析，模板引擎配置呢，默认都是有前后缀，所以说注意写模板名啊模板名。会使用的配置规则。大的前后bird配置规则进行解析，所以呢，我们要写的呢，就直接只是我们现在叫单是bird，那么就单是bird，哎，没有这个HTML双冒号，冒号里边呢，我们写了一个叫，哎，它里边呢有一个我们抽取了这个ne片段，我们叫TOP8，好，我们呢把这个TOP8就加在这儿，这就是th insert，当我们把这个页面改变以后呢，直接按CTRLF9。

能刷新一下页面就行了，好，我们在这个MPS页面我来刷新一下，诶我们看到这admi已经显示出来，说明这个抽取是没问题的，而我们右键检查元素来看它的效果，诶效果呢就是这个na位标签，诶注意它被包含在了div里边。所以说呢，现在这个默认效果。默认效果，默认效果呢，就是我们这个th insert insert的咱们这个公共片段，公共片段在在哪个标签呢？就在我们这个，呃，Div标签。标。标签。我们来写一下标签中。而我们实际上真正的效果呢，可能没有这个标签，我们可以看一下右键审查元素，我们这个NAV bar呢，我们这个na标签就是na标签，它里边不套div，而我们这呢，套了一个div样式呢，现在看起来好像没啥问题，但是呢，有可能在未来的时候，一些其他元素就会有问题，那我们要给它真正抽取出来，怎么办呢？来看一下它的这个抽取往檄翻。

往下翻，我们这儿还有一个，我们来往下这有一个th insert和PLS以及include比说呢，我们可以用这三种来抽取公共的内容，就是说不止可以用insert，你把这三种都来记录一下。三种啊，引入公共片段的，咱们这铁齿属性，铁齿属性哪三种呢？第一种是咱们这个th insert，第二种呢，是咱们这个TH。

第三种是我们这个th include，它们的区别是什么，这块呢也写的非常清楚，我们来可以看一下。这呢有有一段photo标签，这个photo呢，它声名为th fragment copy来分别用了div insert，咱们这个copy和PL copy和include copy，它的效果是什么呢？哎，我把这段代码直接拿来就行了，我们就一次就看到了。我们把这段代码来记录过来，这有一个copy，诶，CTRLC。他们之间的区别，HTMR。好，我们声明了一个要抽取的公共片段啊，它们的区别呢，是第一个。我们分别用这三种方式，哎，这个文档里面都说的很清楚，如果你分别用这三种方式，它的效果引入方式。

来它的效果是什么呢？效果在这儿。哎，在这他说呢，效果可能是这样的，我们把这一个片段复制过来，我们来观察他们的效果。这个效果呢，是这样子，如果说是insert insert就叫插入的意思，那就是给div里边把我们这个公共的片段整个photo，诶插入进div里边，所以说这个insert是将公共的片段将公共。片段整个插入到咱们这个div中。插入到咱们这个指定元素中。那我们这个指定元素呢，就是声明引入的这个元素中插入到。声明，声明引入的元素中，然后呢，第二个是th replace，我们来看啊，Replace的意思叫啥替换，我们呢，本来写了一个div，如果是insert给div里边插，而这个我们来看，我给它分割过来，那如果是replace呢，就相当把我们声明引入的这个div标签直接替换成我们这个代码片段，哎，这个就是替换。

将咱们这个公共片段，将咱们这个声明。引入的元素替换为公共片段，然后呢，还有第三个叫th include include是什么呢？哎，Include叫包含，而这个包含的意思呢，就是div标签里边包含我们背景入，而背景录呢，它相当于把背景入的这个photo大家来看啊，Div里边直接是copy，这句话说呢，相当于把最外层的这个标签去掉，把它的内容包含起来。

哎，将被引入。被引入。的片段的内容，内容包含进这个标签中来，所以说呢，按照我们这个效果，我们用应该用的是PH replace，这样的话呢，我们审查元素的时候，我们来看审查元素的时候呢，就不会在na上面多一个div了，好，我们现在呢，就来换成th OK ctrl f9来让它重新来刷新一下，我来刷新好效果没问题，你看这个na标签呢，里边就没有了div，包括呢，如果我们写的都是这些引入，我们直接不用写这个表达式波浪线大号不用写，直接写我们这个模板名，加上我们这个片段名CTRLF9。来看一下。

刷新哎，效果呢，都是一样的，都是没问题，也是可以出来的，所以呢，这就是我们这个几中引入的效果来记录一下。我们如果使用使用咱们这个th insert等标签。等属性，等属性进行引入，可以不用写咱们这个波浪线大括号，那么什么时候写呢？大家大家也可以试一下，我们说行内写法有两种，哎，这种呢，一种是转移，一种是不转移，也就说呢，用这两种写法们写表达的事实的时候呢，我们可以直接来写上，比如波浪线大号，也就说呢，这种的时候呢，一定要加上啊，这是行内写法，加上就行。行内写法可以加上好，那么这就是我们来公共元素的抽取，那以此同理，我们把这个侧边栏，我们来看一下，侧边栏我们来右键检查元素，侧边栏呢，主要在哎。

我们整个div，我们div放在这，这是一个啊大内容栏这个太多了，我们这儿还有一个肉肉呢，诶这一块我们来看这一块的单位呢，就是我们这边的侧边栏，好我们把这一块的单位呢，我们就来抽取过来就行了。我们来到我们这个页面单是bird的页面单是bird，但是bird呢，这有一个div克class肉里边有一个na位标签，哎，单位标签下边是一个慢，而这个单位呢，我们也可以抽取过来。好，我们来给他也写一个们来声明，用fra来明，当然我也可以不用这种方式，还可用哪种方式呢？当我们声明引入的时候，声明引入的时候，第一种呢是写我们这个片段名，片段名的声明需要用TH，第二种直接写选择题。

那直接写选择器呢，我可以给这个单位直接给一个ID，比如呢，就叫C，哎用侧边栏，它的这个ID就叫侧边栏，那怎么办呢？我在这引入的时候，好这个na位还是在这，哎div肉里边有一个na位，哎有一个慢我们把这个na位呢删掉。单位呢，从52行到174行，我们来删掉52行到174行。好在这来删掉，来引入侧边栏，引入引入侧边。侧边啊，这个侧边栏怎么引入呢？我来还写一个div，好，我们这个引入呢啊，我们用我们的PLTH。冒号replace，好，波浪线，大括号，我们来写，我们来写我们的这个模板名叫单是word。

模板名。以前呢，是模板名加声明的这个片段名，现在可以直接写模板名冒号什么呢？选择器，我们来可以看一下它的这种写法也是可以的，来往上面A，你看模板名冒号选择器，选择器呢，就是我们以前ID选择器用井号，好你看这块都是一的来生明了一个ID用ID选择器井号ID就行了。我就来写井号，我们这个ID叫什么呢？我们这个ID叫CB，我来放在这个例子里边好写完以后呢，我CTRLF9。把页面重新编译一下，那先来在这儿啊，员工列表页面我们先来，不刷新之前这是customer来刷新一下，好，员工管理说明引入成功了，这就是我们公共页面的引入抽取。