共计 2490 个字符，预计需要花费 7 分钟才能阅读完成。
1 做根本页面，先把数据导入，还有相干依赖，8 个。
1.1 首先改配置文件
2.1 先创立管制类，负责管理所有的页面申请。
能够启动测试了，看一看，根底页面是否搭建实现。
这是应该查问到 的界面，以及接下来的思路。日志治理就是一个 dom 元素。
接下来就是技术解决了。
点击发动异步申请。
操作：1 在 starter.html 注册事件。
先获取日志治理的 Id（load-log-id），就是在 F12 界面关上去看。在这个按钮点击注册函数。下一句解析，jquery 中 load 函数向服务器发送 ajax 函数，间接把 url 加载过去的函数更新指定的的那局部，如图红色点。
对应的写函数，上面有错，少写和箭头
那么 url 是哪一部分，加进去，要加载哪一部分到指定地位。
这个页面，心愿放在 templates，去解决，所以放那里。
这个目录下，是不能间接拜访的，所以要去配置一个 Controller 了。
这个是页面申请，所有的页面申请都是在 PageController 外面。
操作：
对应心愿到的路劲。能够启动测试。
日志列表页面加载实现，就是 log-list，还心愿日志页面 j 加载实现之后，在把分页页面显示在这里，部分刷新，ajax。回到 PageController 里增加一个返回的办法 这个是服务端，上面须要在客户端 log-list。
log-list 页面里是有一块区域来贮存分页元素的
因为其余中央都须要用，所以写个函数拿出去。
让所有的都能够拿到分页页面，加载到 doPageUI。作为全副的一部分，所以能够应用 $.
优化版写法，js 加载后，在去实现这个函数。
操作：能够把
starter.html 共性的提取进去，因为，都是加载不同模块的 id，不日日志治理，菜单治理这些，所以能够提取共性，第二张代码。
在增加，只须要改括号外面就能够了。抉择指标，能够基于 id 去选，也能够在 class 前面的就是类选择器，能够拿一个也能够拿两个! 看不懂，去 F12 写一写
bc2735d75c10d802a8988254dad339d.png
那个 #id 就是下面那个 load—log-id 一样的
跟着时序图去写。
上面是一样的写法
接下做的步骤!
设计原理：
从数据层开始写，放在一个 pojo 外面去贮存，通过 list 去，不是把所有记录都取出来，按页去取，因为不可能把所有记录都显示进去，那就得计算分页，那么就须要总记录数，先把总记录数取出来，能力分页。@Repository 是形容类，代表是在数据层 pojo。数据层要返回业务层接口那边，在业务层就波及到了计算，给了一个总记录数就能计算总页数。在业务层收到了 List 汇合和 row count 两个数据所以还须要进行封装（也能够用 map）。list 是传到了业务层，接口这边，业务层返回到管制层也须要进行数据封装，因为还有谬误的数据，是失常还是谬误，所以也须要封装。让客户端须要辨识进去，加一个状态码。
当前页是基于点击事件，进行扭转的，比方首页，上一页，下一页，尾页，而总记录数是数据库总记录数，总页数依据总记录数去计算，不是查问进去的。
操作：1 封装数据库返回数据! 所有封装进行序列化接口，将对象转化为字节不便贮存或传输 d0e6b84ae02b99ae079d1d0f655fb05.png
2 接口
这个是须要查问进去的
一行记录映射一个对象，参数的设计应该有它的名字，起始地位，从哪里开始查，依据别设计写。
3 建设映射文件
所以的 select 都必须有一个 resultType，这是一行映射一个记录的意思
名字跟记录相匹配的，就记录一下。
limit 从什么地位开始取，去几条。
order by 降序排序
能够提取共性，能够测试。
建设测试类
取出 admit 的记录，从 0 开始，拿 3 条
g](/img/bVbOIk1)
数据层完结，开始业务层。
操作：在接口写查询方法。参数，返回值的思考看
客户端会传什么值，比方以后的页码，用户名啊。不晓得返回值是啥就用 Object。
这个返回值要封装数据层返回的数据，以及通过计算的页码值，所以能够创立一个对象，在建设一个类（解决要返回的值）。如果返回值很大。int 值满足不了，能够改 long。
records 当前页记录。psgeCount 总页数，rowCount 总记录数，须要计算总页数还须要一个每页显示多少记录 pageSize. 还会显示以后页码值。
优化：让其它除了日志模块也可应用!
1599985608(1).png
变成泛型类
T 就是一个变量!，当前能够写多个
对应的也要改，传进来的是 SysLog! 这个返回值就是封装查问和计算结果的一个分页对象
1599989507(1).png
持续操作：建设 impl 实现类
startIndex 开始页的数，pageCurrent 当前页码数，pageSize 一页记录多少。而后须要封装这个数据，所以创建对象。通过算法求总页数，总记录数除以每页显示数。
返回的是 po。
如果，拿到的后果是 0，就没必要执行上面的程序，所以。username 是能够为空的，而 pageCurrent 是不能为空的! 这个抛出异样是非查看异样
1599990933.png。
这个到运行时才会报错，所以创立一个类去继承 RuntimeException，也要序列化，解决异样
能够按父类来生成构造函数
不晓得就都生成。
要简化流程，在 PageObject 设置有参和无的构造函数，@NoArgsConstructor 就是无参结构。因为这个其余的页码也是能够应用的，所以在公共最好。
放在构造方法外部去计算，意思是把计算那局部也放在公共里去
持续测试类测试
业务层把数据给管制层了，数据有对有谬误的。
传统写法，为了给数据增加一个状态，减少一个类响应到管制端。封装调用简略。
之后就能够扭转返回值为 JsonResult
进阶，不做 try，catch 的重复性工作，解决异样的 web 包，加非凡标记
。。。
测试方法
客户端的出现
哪里须要出现数据
页面加载实现之后还想进行退出页面操作间接加函数在原有地位。
在 log_list 页面在!
72cf8cb13239706a0d086c69006f1c6.png
在配置页面，page.html 文件下写公共的，通过类选择器取得数据。
前面就是事件处理了。
