14、尚硅谷_SSM高级整合_查询_搭建Bootstrap分页页面.avi原创

好，那我们这个测试呢，我们就做完了啊，能从请求域中正确的获取到数据，那我们就接下来来看页面的显示，因为我们先来到首页，诶首页呢是会直接把转到我们emps请求，我们CTRLL收到这个请求以后呢，查询出所有的员工数据以及风险信息，然后来到list页面，那我们就来到list页面，我们就展示员工列表就行了，那么这个员工列表呢，哎，就是这个样子，哎，我们用boorip快速搭建出这个页面，大家也可以啊，发挥自己的才华，写出一个非常漂亮的一面，那么想。那么要用bootstrap呢？我们还是一样，把bootstrap需要的这些我们CSS样式以及这些GS文件我们拿过来放在这个页面。好。然后呢，我们来看啊，这一块呢，它引入这些铁壳瑞，我们这个页面在web info u下边挺深的，那么呢，我们这种斜法不带斜杠的相对路径。

我们来说一下啊，咱们这个，呃，Web的这个路径问题经常会会出现，那么呢，我们来说不以斜杠，不以斜线开始的咱们这个相对路径。他呢找资源，找资源是以当前当前资源为。的咱们这个路径为基准的，比如说呢，我们这个来到当前页面的时候呢，我们这个浏览器上的路径啊是什么，那么以它为标准，所以说这个相对路径经常容易经常容易出问题。我们呢，不以以后呢就不写这种写法了，那么呢，那接下来说，那么我们以斜线开始的路径。啊，这种相对路径，这种相对路径呢，它找资源，哎，我们以后呢，推荐用斜线开始，那么这样以斜线开始呢，我们这个找资源，它不是以当前资源为路径为标准的，它是以咱们这个服务器的咱们这个路径为标准的。

服务器的跟路径，也就说呢，我们现在访问项目，我们都是HTTP冒号双斜杠，哎，Host。哎，3306，哎，我们比如我们的c rud，那么呢，这个c rud路径是我们项目路径，前面是服务器路径，它是以这个为标准的，所以说呢，我们如果写杠要能正确的找到我们这个资源，我们需要加上项目名，比如杠CD。需要。加上项目名，才能正确的找到。啊，一加项目名以后呢，哎，这个杠以服务器为开始，那么把服务器这一串拼上，那么这就是我们资源真正的位置了，而我们这个加杠以后呢，这个项目名啊，我们也不是这么写死的，所以说呢，我们可以这么来做，那在哎给这个页面呢，我来写上一小段。

咱们这个Java代码，那么这个Java代码的作用呢，就是给page count，比如说呢，我们当前页面域，我来放一个set attribute来放一个属性，这个属性呢，它的K就叫，比如呢我们就叫pass。我们这个项目。然后呢，它的值，那么呢，我们从request域中啊，我们有一个request.get contest pass能拿到我们当前项目路径，这个项目路径呢，它是以斜线开始，But没有以截斜线结束。好，所以说呢，拿到的这个项目路径我们要在页面用，那么直接就Dollar符大括号使用E表达式取出来就行了，而且呢，咱们这个项目路径啊，大家注意它以斜线开始的，所以说呢，我们前面不加斜线，不以斜线结束，所以说我们给后边加上斜线，哎，注意一下，那么剩下的资源引入我们都以这种方式引入。

好。以后呢，我们在项目中啊，那么我们都写上这个，呃，以斜线开始的这个路径，这种路径呢，不会出错，我们这个服务器哎，永远都是不变的，好，那么呢，我们来以后都这么来写，资源引入以后，我们再来搭建咱们这个页面。显示。页面。那么这搭建显示页面呢，我们是使用auto搭建。我们来到这个boosrip这个官方文档来，我们就来看它怎么用，我们来看一下我们这个页面，我们的页面呢，长得就是这个样子，大致的呢，可以分一下，哎，这呢是咱们这个页面的标题头两个新增按钮，还有我们的表格以及我们分页信息，没有bootrip搭建呢，我们来看啊rap著名的这个山歌系统，就如说呢，它是把整个页面啊分成了一行一行，每一行呢又分成一列，咱们总共每一行能分成12列，这样的话呢，根据屏幕的大小，这些列呢，我可以显示在一行，也可以显示在两行，可以动态分配。

所有的行和列呢，我们必须包含在container这个类里边，好，那我们就来写一个。咱们这个。典韦。它的class，哎，我们按照人家要求写它叫container啊，没有这个点啊，我们这个class叫container，我们呢，按照我们这个要求封成我们需要的这些，诶我们的这个页面呢，是这样子的，哎，我们可以这么来分，这是第一行，哎，我们显示标题，第二行我们可以显示两个按钮，第三行我们可以显示一个表格，第四行我们可以显示封面信息。

好，那我们呢，就简单分为四行，这四行呢，我们来到全局CSS样式中啊，人家说每一行的类呢，它的名都叫肉，哎，都叫它，你看啊，我们下边呢，也有事例，哎，每一行它的class你叫肉就行了，哎列呢哎就叫这些，我们来先分成四行。Class。啊，我们有四行。啊，每一行呢，我们都来批注一下，这是我们这个标题啊，标题一行还有呢，哎，这个标题就是我们要显示的这个c rud，还有呢，我们这一块呢，是我们按按钮。两个按钮，也就是说呢，一个新增删除按钮，下边这一行呢，我们主要用来显示。显示咱们这个表格数据，哎，这一行，那么下边一行呢，啊，我们这个是显示。封印这信息栏的行，那么接下来呢，我们给标题栏我们来看一下。

要定义列怎么定义呢？哎，我们这一块也提示了，你使用这种，哎这种我们比如哎Co这是列，Chome XS，咱们这个超小的列，哎它占四列，也就说呢，比如我们下边，哎我们列参数超小屏幕呢，用这种类，哎小屏幕这种中屏幕，我们显示器用这种，大屏幕可以用这种，然后后边呢，跟1234我们列都会分为12列，你写一个12，那就是这一行就占了整个12列，哎咱们这一列呢，就占了整个12列，所以说呢，你看啊，我们写一个一，那么它就只占一列，那我们现在呢，我们这个标题啊，我就让他占完。Class。好，我们用这个中屏幕的啊扣这这是占六列，我们让它占12列就行了。好，我让他占12列，12列里边呢，我们就有一个大标题啊，我们显示我们ssmc rud，这是一个增删改查，我们来可以运行一下。

我们先来运行一下，看来到咱们这个页面。咱们这个页面的内容我们先显示对啊。运起来。好，诶，我们这个页面就显示对了啊，它还是发了啊，咱们这个请求来到我们这个list史的页面的，来再来定义list史的页面，好，这个呢，我们这个就显示了，我们再来定义两个显示的按钮，一个是我们这个新增，一个是我们这个删除按钮，哎，他俩好，那么呢，我们再来写一个div div。这个按钮啊，我们是在右边显示的，所以说呢，来到咱们这个CSS样式上个系统这里边有一个列偏移，比如说呢，我们可以定义有一列，它只占了四啊四列啊，我们定义这个div，它只占四列，但是这四列呢，它可以偏移，比如呢我还偏移了四列，也就说呢，本来它该该占中间四列的，但是它呢，原来有四列，我在偏移四列，我们就来到这儿了，所以说呢，我们可以按照这种定义，我也定义一个列。

让它偏移。好，这一列呢，我们来就来让它行，也是四列，我们来定义四列，让它偏移，而这个偏移的这个div里边呢，我们就有两个按钮，然后八层按钮，一个新增，一个删除。新增好，还有一个咱们这个删除按钮。删除。删除。删除好，我们来刷新。好这块呢，就新增删除它，这没我们来在这个大屏幕上看它有没有这个偏移。

走。哎哎，他确实偏移了，但是呢，它这个是在中间显示，因为我们只让它偏移四列，那就前面没有，我们让他如果偏移八列，哎，它本身占四列，它偏八列那就是最右边了。我们可以这么来写，让它偏移八列。刷新哎，它就在右边了，行，这个新增删除，但是这个按钮呢，稍微有点丑，我们来定义一下。来找到我们这个trip，我们这个样式有按钮。啊，找到按钮来定一些漂亮的，比如新增，哎，我们就用这个蓝色按钮，蓝色呢，你只需要给按钮加一个class，它叫必听必听primary就行了。好，我们来加一个。好，这是新增，那么删除呢，我们就用一个红色按钮。来看一下，这有一个红色danger危险，好，它加一个b TB t danger这个类就行了。

好，我们再来看一下这个页面。刷新，哎，这两个按钮就出来了，那么接下来呢，第三列我们就是显示表格数据，哎，第三行我们显示表格数据。好，我们来定义一个列，这个列呢，我们也就直接让它占12列。这一整行。占一整行，这一整行呢，我们都来显示表格数据好，我们就来写一个table来显示表格。啊，这个table我们要显示的数据呢，哎，我们来定义出来啊，比如呢，我们有咱们这个TR，我们这一行在这一行里边呢，我们先定义要显示的咱们这个头GH。比如呢，我们的员工的ID，井号代表ID。哎，下边。还有员工的咱们这个呢，名字，以及员工的性别，以及员工的email，还有他的部。

TH。这个所在部门，咱们这个叫department。De PT name，好，我们就叫它，包括呢，我们来看啊，在这个页面显示这些以后呢，还有咱们这个操作按钮，我们这个删除修改的操作。TH。那么这个操作。好，也就是说呢，每一行数据，那就是一个再来一行TR就行了啊，比如呢，我们这个一号员工啊，我们先把这些啊都写出来。这是我们写死的。A。硅谷com，我们先把页面框架打出来，好操作，操作里边呢，啊，我们每一行记录有两个按钮，我们来看到，哎，一个编辑，一个删除按钮，而且这个按钮呢，我写的前面还带一个小图标，这怎么写呢？我们来到boos skyp里边。好来往上看。

全局在咱们这个组件中。好，有这个字体图标，哎，这个字体图标，也就是说呢，我们来往下看这个字体图标，这呢有一个实例，哎，比如呢，我们定义一个按钮，前面还有一个小图标，很简单，哎，把这个拿过来。哎，这里边儿呢，相当于给按钮里边只需要有一个SPASPA这个小图标就行了，好。我们来定义两个按钮，Button。哎，一个呢，是咱们这个，哎新增，哎这不是新增一个是编辑。一个是删除还是两个button？删除，比如说呢，这两个小图标来看啊，Class编辑按钮呢，我们也给它漂亮一点，嗯，我就呢跟之前的这个新增我们用一个颜色。啊，然后呢，删除也一样。哎，我们也跟他用一个颜色。

啊，这些按钮里边呢，要有小图标，哎，你只需要有一个带。看看这是咱们这个删除编辑。我们来看啊，在这些里边呢，啊，我们这个示例里边就是加一个这个小span，哎，Span里边呢，啊，要就是我们这个要显示的。这个图标。个小屎蛋，我拿过来。CTRLC，好，我拿过来拿过来拿过来以后呢，这个class就是我们要显示的这个图标，这个图标我们来看一下，我这个图标呢，我们这个编辑按钮，我们来看好这个图标，好把这一块复制过来，这就是这个编辑按钮的这个class。这个图标的class，好，这是编辑，那我们这个删除呢，我们也一样把这个span拿过来。

好，然后呢，我们来看咱们这个删除，删除呢，我们这个，哎，垃圾桶就它。那加一个class就是它就行了。而这些文字呢，我们来看啊，咱们这个事例文字是在SPA里边加着还是没加，诶是不是没加，所以说我们也就不加，然后呢，我们来看一下咱们这个页面。刷新。哎，这个按钮就有了。我们来在这儿看，在这儿看刷新好，我们显示的一个表格里边两个按钮，但是这个表格啊，太难看了，所以说呢，我们要它显示好看。怎么办呢？来到list页面。哎，整个样式非常难看，我们来到这个页面给这个table，我们要让它显示的好，来到组件咱们这里边儿呢。好，全局CSS样式里边有一个表格，诶就它，哎它里边呢，我们只需要哎给表格上添加table类，它就能有一个基本的咱们这个样式。

Plus，它是一个table，你要更复杂的样式，我们来看往下看啊，这有一个条纹状表格，你可以再加一个这个类，或者呢，往下带边框的，你可以再加上这个类，哎，鼠标悬停变色的，你可再加上这个类，好，我们就用它吧，啊，我喜欢这个鼠标悬停变色好。我们来刷新。好诶，你看这个表格就有了，我们鼠标选定在这儿也有变色效果，所以说呢，好，我们这个表格也就定义出来，那么接下来我们来看啊，这个按钮感觉有点大，内容撑的有点多，那么这个BTN还可以定义成小一点的按钮。来到咱们这个按钮呢，我们来看这个按钮按钮尺寸，诶尺寸里边有小尺寸，我们只需要小尺寸里边必听这个。SM就行了。加一个这个类，好，我们都让这个两个操作按钮啊，变成小尺寸的，看起来好看一点。

哎哎，这就好看多了，行，那么呢，我们这个哎，Table就是在这显示了，那么接下来呢，我们这个表格下边我们还需要一个什么呢？咱们这个风线条，所以说呢，我们在这里边来显示我们这个风线条。我们来到boostrap里边，我们来看分页条怎么办好，还是这个组件里边，组件里边呢，下边有一个封页，诶就是这个分页条，我们就用它就行了，我把它复制过来，当然这个呢，我们来看一下页面布局啊，这个封页条呢，在这边，这里边呢，还有一个我们这个相当于分页信息，哎，正好呢，我们相当于我给它分上两行。来分上两列，呃，第一列呢，我们这一块是分页信息。这是封页，咱们这文字信息。然后呢，第二列呢，我们这个风叶条。枫叶条。

方向条，谢谢，好，我们来做上两个。那么要分两列呢，我们这个class咋写啊，哎，也就是照着人家这个页的划分诶。来到咱们这个样式山歌系统中，哎，我们这个划分列的时候呢，都是啊以lo开头，我们不是超小列，我们是MD来，我们呢给它画成六列。它呢也一样，我们来画上六列。这样的话呢，每人占一半，哎，就这样了，好，文字信息呢，我们先放在这，我们先不写了，我们先来就写几个当前，哎，记录数，记录数，哎是多少多少多少啊，这些信息我们后来有待取出来，风叶条呢，我们拿过来。分页条，我们来到组件里边，把分页条。好，风叶条就是它，我把它整个样式复制过来。

好复制过来以后呢，我们来大致的可以看一下。这个也非常简单。在这个那标签里边，哎，有一个ul里边每一个Li，其实就是我们这个要显示的，比如这是页码，这个Li呢，是我们这个下一页，哎，这个呢，是咱们这个上一页，它显示的这个上一页的这个符号，那么呢，我们还让显示的我们还有这个首页末页，所以说呢，我们来多加两个。哎，这个Li里边呢，有A标签，这个A标签呢，就是我们点击能跳转的。我们这儿加一个首页。再加一个末页，我们把这个框架我们先搭起来。首页和末页。好，我们来看一下这个我们搭建的页面框架的效果刷新，诶就这样行，我们接下来就来填充数据就行了。