8SpringBoot实战之用户管理的布局和分页

最新推荐文章于 2020-12-19 21:38:21 发布

原创最新推荐文章于 2020-12-19 21:38:21 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#springboot

springBoot 专栏收录该内容

9 篇文章

订阅专栏

本文参考教程进行Spring Boot开发，先美化main.html，从AmazueUI复制内容并修改。接着以该UI框架进行用户、角色、菜单管理，固定页面部分区域，修改header等。新建多个页面和控制器，修改方法和仓库，添加分页查询方法，最后测试登录和菜单点击、分页功能均成功。

参考教程：https://blog.youkuaiyun.com/wangmx1993328/article/details/84747497
本章源码：https://download.youkuaiyun.com/download/romulusla01/11323007
1、接上一章，我们要把main.html美化一下。
从AmazueUI中复制admin-table.html中的所有内容，拷贝到我们的main.html中。
在这里插入图片描述
修改2处地方。

当然还有link的路径。

测试一下，访问地址
http://localhost:8085/login/tologin

接下来，我想以这个UI框架做一个用户管理、角色管理、菜单管理。
这里我希望能把顶部、左侧和底部固定住，点击菜单时只改变中间的部分。
在这里插入图片描述
这里我首先修改header，添加这句话
th:fragment=“mainHeader”

新建userList.html，将admin-content里的内容都拷贝出去，粘贴到userList.html中

修改main.html，找到左侧菜单中的【表格】，改为【用户管理】
在这里插入图片描述

新建MenuController，创建menu/toMenuItem
在这里插入图片描述
修改toMenuItem方法，改为重定向到user/userList。

新建UserController，新增userList方法。

修改之前写的UserRepository，继承如下2个类

在UserService中添加分页查询方法

在UserServiceImpl中实现方法

修改userList.html。
在这里插入图片描述
循环展示user表数据

引入公用的分页页面

还有底部框架

新建公用的分页页面

好了，测试一下。
访问http://localhost:8085/login/tologin，输入用户名密码，点击登录。

这时候中间部分是空的。

点击左侧菜单的【用户管理】
在这里插入图片描述
这样我们就成功打开菜单了，再点击分页，也成功了